@property --a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@property --b { syntax:"<angle>"; initial-value:180deg; inherits:false; }

/* ── CSS VARIABLES — Atlas design system ────────────────────────────── */
:root {
  /* ── Pillar colors → unified IRON gold ── */
  --train:  #D4A017;
  --fuel:   #D4A017;
  --knox:   #D4A017;
  --signal: #D4A017;
  --iron:   #D4A017;

  /* ── Background scale (ink) ── */
  --bg-1: #0A0A0B;
  --bg-2: #121214;
  --bg-3: #1A1A1C;
  --bg-4: #0F0F10;
  --bg-5: #060606;

  /* ── Glass card recipe (warm-neutral, gold edge) ── */
  --glass-bg: linear-gradient(180deg, #202023 0%, #161618 100%);
  --glass-border: 0.5px solid rgba(255,255,255,0.06);
  --glass-shadow: 0 10px 28px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.055);
  --btn-gold: linear-gradient(135deg, #F7D765 0%, #D4A017 48%, #7E5D0A 100%);

  /* ── Text hierarchy (bone) ── */
  --text-primary:   #FAFAF7;
  --text-secondary: rgba(250,250,247,0.72);
  --text-tertiary:  rgba(250,250,247,0.45);
  --text-muted:     rgba(250,250,247,0.45);

  /* ── Font families — UNCHANGED this step ── */
  --fh: 'Manrope', sans-serif;
  --fo: 'Manrope', sans-serif;
  --fb: 'Manrope', sans-serif;
  --fd: 'Manrope', sans-serif;
  --font-display: 'Manrope', sans-serif;
  --font-nav:     'Manrope', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Legacy color aliases → gold ── */
  --cyan:   #D4A017;
  --blue:   #D4A017;
  --blue2:  #D4A017;
  --purple: #D4A017;
  --gold:   #D4A017;
  --green:  #D4A017;
  --red:    #ef4444;

  /* ── Base backgrounds ── */
  --bg:    #0A0A0B;
  --black: #060606;

  /* ── Card / input surfaces ── */
  --bg-card:  rgba(255,255,255,0.05);
  --bg-card2: rgba(255,255,255,0.035);
  --bg-input: rgba(255,255,255,0.04);
  --border:      rgba(255,255,255,0.10);
  --border-gold: rgba(212,160,23,0.45);

  /* ── Text fallbacks ── */
  --gray-600: rgba(250,250,247,0.30);
  --gray-500: rgba(250,250,247,0.40);

  /* ── Per-tab backgrounds ── */
  --bg-home:      #0A0A0B;
  --bg-train:     #0A0A0B;
  --bg-nutrition: #0A0A0B;
  --bg-knox:      #0A0A0B;
  --bg-programs:  #0A0A0B;
  --bg-more:      #060606;

  /* ── Per-tab accent colors → gold ── */
  --accent-home:      #D4A017;
  --accent-train:     #D4A017;
  --accent-nutrition: #D4A017;
  --accent-knox:      #D4A017;
  --accent-programs:  #D4A017;

  /* ── Per-tab card backgrounds ── */
  --bg-card-train:     #121214;
  --bg-card-nutrition: #121214;
  --bg-card-knox:      #121214;
  --bg-card-programs:  #121214;

  /* ── Semantic / canonical tokens ── */
  --color-danger:          #ef4444;
  --color-base-navy:       #0A0A0B;
  --color-base-navy-deep:  #060606;
  --color-text-primary:    #FAFAF7;
  --color-text-secondary:  rgba(250,250,247,0.72);
  --color-text-muted:      rgba(250,250,247,0.45);

  /* ── Transition ── */
  --t: .3s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
input, select, textarea { font-size:16px !important; }
html { background: #0A0A0B; }

/* ── BASE ───────────────────────────────────────────────────────────── */
body {
  font-family: var(--fb);
  background: transparent;
  color: var(--text-primary);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "zero" 0;
  font-variant-numeric: lining-nums;
}

/* Dark cards carry the page's crosshatch (owner, Oct 3): the same 45°/-45°
   lines, fainter than the page's (.015 vs .035, walks 5–6), over a slightly
   lighter card fill, so text keeps its contrast. */
:root { --card-grill:
  repeating-linear-gradient(45deg,  rgba(255,255,255,.015) 0 1px, transparent 1px 10px),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 10px),
  #141416; }

/* The ground (owner, Oct 22: replaces the crosshatch of 2026-09-13): flat
   #0A0A0B with a barely visible top-to-bottom lift, #121213 at the top (3%
   lighter). No gold wash, on any tab. One fixed element behind everything. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #121213 0%, #0A0A0B 100%);
  pointer-events: none; z-index: -2;
}

canvas#v4-bg { display: none; }

/* ── PER-TAB COLOR THEMES ───────────────────────────────────────────── */

/* HOME */
body.tab-home { background: transparent; }

/* Home — nutrition card left accent bar */
body.tab-home #v4-home-nutrition-card {
  position: relative;
  overflow: hidden;
}
body.tab-home #v4-home-nutrition-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #D4A017, #D4A017);
  box-shadow: 0 0 8px rgba(212, 160, 23,0.4);
}

/* Home — daily signal card left accent bar */
body.tab-home #v4-daily-ci-card {
  position: relative;
  overflow: hidden;
}
body.tab-home #v4-daily-ci-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #D4A017, #D4A017);
  box-shadow: 0 0 8px rgba(212, 160, 23,0.4);
}

/* Home — Coach Knox card enhanced */
/* (removed dead Knox-card home override — no live element uses that class) */

/* Knox card top edge gradient */
body.tab-home .v4-knox-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.4), rgba(212, 160, 23,0.3), transparent);
}

/* Knox card bottom edge gradient */
body.tab-home .v4-knox-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #D4A017, #D4A017, #D4A017);
  box-shadow: 0 0 10px rgba(212, 160, 23,0.3);
}

/* Home — Weekly signal card */
body.tab-home #v4-signal-card {
  border-color: rgba(212, 160, 23,0.12) !important;
  position: relative;
  overflow: hidden;
}
body.tab-home #v4-signal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5), rgba(212, 160, 23,0.3), transparent);
}
body.tab-home #v4-signal-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #D4A017, #D4A017, #D4A017);
  box-shadow: 0 0 12px rgba(212, 160, 23,0.4);
  pointer-events: none;
}

/* Home — fitness tip card (orange) */
body.tab-home #v4-fitness-tip-card {
  position: relative !important;
  overflow: hidden !important;
  background: #1A1A1C !important;
  border-color: rgba(249,115,22,0.2) !important;
  padding-left: 14px !important;
}
body.tab-home #v4-fitness-tip-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, #D4A017, #D4A017, #D4A017) !important;
  box-shadow: 0 0 8px rgba(249,115,22,0.4) !important;
}

/* Home — nutrition tip card (purple) */
body.tab-home #v4-nutrition-tip-card {
  position: relative !important;
  overflow: hidden !important;
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.2) !important;
  padding-left: 14px !important;
}
body.tab-home #v4-nutrition-tip-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  bottom: 14px !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, #D4A017, #D4A017) !important;
  box-shadow: 0 0 8px rgba(212, 160, 23,0.4) !important;
}

/* ── HOME CARD DEPTH — darker bg to pop off navy ── */
body.tab-home #v4-home-nutrition-card,
body.tab-home #v4-daily-ci-card {
  border-color: rgba(212, 160, 23,0.18) !important;
  box-shadow: 0 0 20px rgba(212, 160, 23,0.06), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* Top edge gradient on nutrition card */
body.tab-home #v4-home-nutrition-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.35), transparent);
}

/* Knox card enhanced glow */
/* (removed dead Knox-card home override — no live element uses that class) */

/* Knox sphere opacity */
body.tab-home #knoxSphere {
  opacity: 0.85 !important;
}

/* Weekly signal card depth */
body.tab-home #v4-signal-card {
  background: var(--glass-bg) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── ACTIVE PROGRAM CARD on home — matches glass recipe exactly ── */
body.tab-home #v4-home-program-card {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  position: relative;
  overflow: hidden;
}
body.tab-home #v4-home-program-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #D4A017, #D4A017);
  box-shadow: 0 0 8px rgba(212, 160, 23,0.4);
}
body.tab-home #v4-home-program-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.3), transparent);
}

/* ── IGNITE HEADER bottom separator ── */
body.tab-home .v4-header,
body.tab-home [id*="v4-header"],
body.tab-home [class*="v4-top-bar"] {
  border-bottom: 1px solid rgba(212, 160, 23,0.08) !important;
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
}

/* Tip cards darker bg + inner shine */
body.tab-home #v4-fitness-tip-card,
body.tab-home #v4-nutrition-tip-card {
  background: #1A1A1C !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* ── All home cards use Atlas glass recipe — no background overrides ── */

/* ── ATLAS HOME — neutralize cyberpunk pseudo-elements ── */
body.tab-home #v4-home-nutrition-card::before,
body.tab-home #v4-home-nutrition-card::after,
body.tab-home #v4-daily-ci-card::before,
body.tab-home .v4-knox-card::before,
body.tab-home .v4-knox-card::after,
body.tab-home #v4-signal-card::before,
body.tab-home #v4-signal-card::after,
body.tab-home #v4-home-program-card::before,
body.tab-home #v4-home-program-card::after,
body.tab-home #v4-fitness-tip-card::before,
body.tab-home #v4-nutrition-tip-card::before { display: none !important; }
body.tab-home #knoxSphere { display: none !important; }
body.tab-home #v4-signal-score { color: var(--signal) !important; text-shadow: 0 0 14px rgba(212, 160, 23,0.4) !important; }
body.tab-home #v4-home-prog-fill { background: linear-gradient(90deg,var(--train),var(--knox)) !important; box-shadow: 0 0 8px rgba(212, 160, 23,0.4) !important; }

/* Atlas component classes */
.v4-home-header { display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) 14px 16px; }
.v4-brand-logo { display:flex;align-items:center;gap:10px; }
.v4-brand-icon { height:32px;width:auto;display:block;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(212,160,23,0.35)); }
.v4-brand-lockup { height:46px;width:auto;display:block;flex-shrink:0;max-width:190px;object-fit:contain; }
.v4-brand-name { font-family:var(--fh);font-size:26px;letter-spacing:.08em;color:var(--text-primary);font-weight:700;line-height:1; }
.v4-brand-actions { display:flex;align-items:center;gap:8px; }
.v4-brand-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,rgba(212, 160, 23,0.15),rgba(212, 160, 23,0.1));border:0.5px solid rgba(212, 160, 23,0.4);font-size:11px;font-weight:600;color:var(--text-primary);font-family:var(--fd);letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.v4-pillar-row { display:flex;gap:10px;padding:0 14px;margin-bottom:12px; }
.v4-card { background:var(--glass-bg);border:var(--glass-border);border-radius:16px;box-shadow:var(--glass-shadow);overflow:hidden;position:relative; }
/* ── White "moment" cards ── */
.moment, .v4-card.moment, .tool-tile.moment, .biogen-learn-card.moment {
  background: #FFFFFF !important;
  border: 0.5px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: none !important;
}
/* dark text inside moment cards */
.moment, .moment * {
  color: #14140F !important;
}
/* keep muted/secondary text readable-but-soft on white */
.moment .v4-card-eyebrow, .moment [class*="-eyebrow"], .moment [class*="-sub"], .moment [class*="-label"], .moment [class*="-lbl"], .moment [class*="-meta"] {
  color: #6B6A63 !important;
}
/* primary CTA buttons keep gold gradient + dark text inside moment cards */
.moment .v4-cta, .moment [class*="cta"], .moment .wk-btn-primary {
  background: var(--btn-gold) !important;
  color: #0A0A0B !important;
}
/* gold accent dots/eyebrow markers stay gold, not forced dark */
.moment [class*="accent"], .moment .dot, .moment [style*="D4A017"] {
  color: #A87E0F !important;
}
.v4-card-pillar-tall { flex:1;min-width:0;padding:14px 14px 12px;display:flex;flex-direction:column;min-height:168px;cursor:pointer; }
.v4-card-knox { padding:16px;cursor:pointer; }
.v4-card-accent-line { position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 2px 2px 0; }
.v4-card-accent-line.train  { background:var(--train); box-shadow:0 0 8px rgba(212, 160, 23,0.4); }
.v4-card-accent-line.fuel   { background:var(--fuel);  box-shadow:0 0 8px rgba(212, 160, 23,0.4); }
.v4-card-accent-line.knox   { background:var(--knox);  box-shadow:0 0 8px rgba(212, 160, 23,0.4); }
.v4-card-accent-line.signal { background:var(--signal);box-shadow:0 0 8px rgba(212, 160, 23,0.4); }
.v4-card-accent-line.iron   { background:var(--iron);  box-shadow:0 0 8px rgba(212,160,23,0.4); }
.v4-pillar-head { display:flex;align-items:center;gap:6px;margin-bottom:8px; }
.v4-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0;animation:lp 2s ease-in-out infinite; }
.v4-dot.train  { background:var(--train); box-shadow:0 0 5px var(--train); }
.v4-dot.fuel   { background:var(--fuel);  box-shadow:0 0 5px var(--fuel); }
.v4-dot.knox   { background:var(--knox);  box-shadow:0 0 5px var(--knox); }
.v4-dot.signal { background:var(--signal);box-shadow:0 0 5px var(--signal); }
.v4-dot.iron   { background:var(--iron);  box-shadow:0 0 5px var(--iron); }
.v4-pillar-tag { font-size:9px;letter-spacing:.14em;font-weight:700;font-family:var(--fd);text-transform:uppercase; }
.v4-pillar-tag.train  { color:var(--train); }
.v4-pillar-tag.fuel   { color:var(--fuel); }
.v4-pillar-tag.knox   { color:var(--knox); }
.v4-pillar-tag.signal { color:var(--text-tertiary); }
.v4-pillar-tall-title { font-family:var(--fd);font-weight:700;letter-spacing:.04em;color:var(--text-primary);line-height:1.1;font-size:clamp(13px,4.2vw,17px);margin-bottom:4px;overflow-wrap:break-word;word-break:break-word; }
.v4-pillar-spacer { flex:1;min-height:8px; }
.v4-cta { width:100%;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:11px;letter-spacing:.08em;font-weight:600;font-family:var(--fd);text-transform:uppercase;cursor:pointer;transition:transform var(--t);border:none; }
.v4-cta:active { transform:scale(0.99); }
.v4-cta-train  { background:var(--btn-gold);color:#0A0A0B; }
.v4-cta-fuel   { background:var(--btn-gold);color:#0A0A0B; }
.v4-cta-knox   { background:var(--btn-gold);color:#0A0A0B; }
.v4-cta-signal { background:var(--btn-gold);color:#0A0A0B; }
.v4-macro-line { font-size:11px;color:var(--text-tertiary);font-family:var(--fd);letter-spacing:.02em;margin-bottom:4px; }
.v4-knox-quote { font-size:15px;line-height:1.45;color:var(--text-primary);font-family:var(--fd);font-style:italic;font-weight:500;margin-bottom:12px; }
/* Horizontal top accent line (replaces left bar for non-pillar cards) */
.v4-card-accent-top { position:absolute;top:0;left:14%;right:14%;height:1px;opacity:0.7;pointer-events:none; }
.v4-card-accent-top.train  { background:linear-gradient(90deg,transparent,var(--train) 50%,transparent); }
.v4-card-accent-top.fuel   { background:linear-gradient(90deg,transparent,var(--fuel) 50%,transparent); }
.v4-card-accent-top.knox   { background:linear-gradient(90deg,transparent,var(--knox) 50%,transparent); }
.v4-card-accent-top.signal { background:linear-gradient(90deg,transparent,var(--signal) 50%,transparent); }
.v4-card-accent-top.iron   { background:linear-gradient(90deg,transparent,var(--iron) 50%,transparent); }
.v4-card-accent-top.white-accent { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85) 50%, transparent) !important; }
/* Date row below header */
.v4-date-row { font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-tertiary);font-family:var(--fd);padding:0 14px;margin-bottom:16px;margin-top:-8px; }
/* 5-column vitals grid */
.v4-vitals-5 { display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px; }
.v4-vital { text-align:center;padding:4px 0;border-radius:10px; }
.v4-vital svg { display:block;margin:0 auto; }
.v4-vital-label { font-size:8px;letter-spacing:.12em;color:var(--text-tertiary);text-transform:uppercase;margin-top:4px;font-family:var(--fd); }
.v4-vital.missing .v4-vital-label { color:var(--signal); }
#v4-signal-card .v4-vital svg { filter: drop-shadow(0 0 7px rgba(212,160,23,0.5)); }
/* Illuminated Fuel rings — identical glow to the Daily Signal rings above.
   Live copy: .macros-fuel-hero (calorie donut + protein/carbs/fat rings).
   Legacy copy: #view-nutrition .nl-ring-wrap (dead #v4-legacy-container, kept in sync). */
.macros-fuel-hero svg,
#view-nutrition .nl-ring-wrap svg { filter: drop-shadow(0 0 7px rgba(212,160,23,0.5)); }
.ci-pill-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:7px; }
.ci-pill { height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#2A2A2D;border:0.5px solid rgba(255,255,255,0.07);color:#C8C7C2;font-family:'DM Mono',monospace;font-size:15px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);transition:all .12s;-webkit-tap-highlight-color:transparent;user-select:none; }
.ci-pill:active { transform:scale(0.96); }
.ci-pill.on { background:linear-gradient(135deg,#F7D765 0%,#D4A017 48%,#7E5D0A 100%);color:#0A0A0B;border-color:transparent;font-weight:700;box-shadow:0 2px 10px rgba(212,160,23,0.35); }
.ci-stepper { display:flex;align-items:center;gap:12px; }
.ci-step-btn { width:56px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#2A2A2D;border:0.5px solid rgba(255,255,255,0.10);color:#E8B53A;font-size:24px;font-weight:400;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);-webkit-tap-highlight-color:transparent;user-select:none; }
.ci-step-btn:active { transform:scale(0.94); }
.ci-step-val { flex:1;text-align:center;font-family:'DM Mono',monospace;font-size:26px;font-weight:500;color:#FAFAF7; }
/* Trend section (collapsed below vitals) */
.v4-trend-section { padding-top:14px;border-top:0.5px solid rgba(255,255,255,0.08);margin-top:4px; }
/* Atlas trend-row: 5-vital bar rows */
.v4-trend-row{display:grid;grid-template-columns:1fr;gap:8px;padding-top:14px;border-top:0.5px solid rgba(255,255,255,0.08);margin-top:4px}
.v4-trend-vital{display:grid;grid-template-columns:54px 1fr 44px;align-items:center;gap:10px}
.v4-trend-vital-label{font-size:9px;letter-spacing:.15em;color:var(--text-tertiary);text-transform:uppercase;font-family:var(--fd)}
.v4-trend-bars{display:flex;align-items:flex-end;gap:3px;height:24px}
.v4-trend-bar{flex:1;border-radius:2px 2px 0 0;min-height:2px}
.v4-trend-vital-num{font-family:var(--fm);font-size:11px;color:var(--text-primary);text-align:right}

/* TRAIN */
html body.tab-train {
  background: transparent !important;
  background-color: transparent !important;
}
/* view-workout: transparent so the body dark bg shows through */
body.tab-train #view-workout { background: transparent !important; }
/* kill the fixed atmospheric gradient overlay */
body.tab-train #view-workout::before { display: none !important; }

/* ALL wk-gc cards → Atlas glass recipe (root cause of lighter appearance) */
body.tab-train .wk-gc { background: var(--glass-bg) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; }
/* Remove the old cyan shimmer line on non-HUD cards */
body.tab-train .wk-gc:not(.wk-gc-hud)::after { display: none !important; }

/* ── TRAIN SCREEN — Atlas redesign ───────────────────────────── */

/* Stat strip (week / block / remaining) */
body.tab-train .wk-week-block-bar { background: var(--glass-bg) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
body.tab-train .wk-wb-val { font-family: var(--fo) !important; font-size: 20px !important; color: var(--text-primary) !important; text-shadow: none !important; line-height: 1 !important; }
body.tab-train .wk-wb-lbl { color: var(--text-tertiary) !important; font-family: var(--fh) !important; }
body.tab-train .wk-wb-divider { background: rgba(255,255,255,0.12) !important; }
body.tab-train #wb-remaining { color: var(--fuel) !important; text-shadow: none !important; }
body.tab-train .wk-wb-edit-btn { color: var(--text-tertiary) !important; border: 0.5px solid rgba(255,255,255,0.18) !important; border-radius: 20px !important; padding: 5px 10px !important; background: rgba(255,255,255,0.04) !important; font-family: var(--fh) !important; }

/* Day tiles → Atlas flex tabs (full-width even split) */
body.tab-train #day-tiles { display: flex !important; gap: 6px !important; }
body.tab-train .wk-day-tile { flex: 1 !important; min-width: 0 !important; background: rgba(255,255,255,0.04) !important; border: 0.5px solid rgba(255,255,255,0.14) !important; border-radius: 10px !important; padding: 10px 4px !important; text-align: center !important; transition: all 0.2s !important; }
body.tab-train .wk-day-tile.active { background: var(--btn-gold) !important; border-color: transparent !important; box-shadow: 0 2px 10px rgba(212, 160, 23,0.3) !important; position: relative !important; overflow: hidden !important; }
body.tab-train .wk-day-tile.active::after { content:''; position:absolute; top:0; left:-60%; width:45%; height:100%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%); transform: skewX(-18deg); animation: dtShimmer 3.6s ease-in-out infinite; pointer-events:none; }
@keyframes dtShimmer { 0% { left:-60%; } 55% { left:140%; } 100% { left:140%; } }
body.tab-train .wk-day-tile.done { background: rgba(212, 160, 23,0.05) !important; border-color: rgba(212, 160, 23,0.28) !important; }
body.tab-train .wk-dt-num { font-family: var(--fo) !important; font-size: 13px !important; color: var(--text-secondary) !important; margin-bottom: 0 !important; }
body.tab-train .wk-day-tile.active .wk-dt-num { color: #060606 !important; font-weight: 700 !important; text-shadow: none !important; }
body.tab-train .wk-day-tile.active .wk-dt-lbl { color: rgba(10, 10, 11,0.7) !important; }
body.tab-train .wk-day-tile.done .wk-dt-num { color: var(--fuel) !important; }

/* Workout brief card (hero) */
body.tab-train .wk-workout-hero { background: var(--glass-bg) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
body.tab-train .wk-workout-hero::before { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 14% !important; right: 14% !important; width: auto !important; height: 1px !important; background: linear-gradient(90deg, transparent, var(--train) 50%, transparent) !important; opacity: 0.7 !important; border-radius: 0 !important; box-shadow: none !important; }
body.tab-train .wk-workout-hero::after { display: none !important; }
body.tab-train .wk-workout-hero > div:first-child::before { display: none !important; }
body.tab-train .wk-workout-day-badge { background: none !important; border: none !important; padding: 0 !important; font-family: var(--fh) !important; font-size: 10px !important; letter-spacing: .18em !important; color: var(--train) !important; font-weight: 600 !important; }
body.tab-train .wk-workout-name { font-family: var(--fh) !important; font-size: 22px !important; font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: .02em !important; }
body.tab-train .wk-workout-meta-row .wk-wm-item { font-size: 12px !important; color: var(--text-secondary) !important; }
body.tab-train .wk-progress-fill { background: linear-gradient(90deg, var(--train), var(--knox)) !important; }
body.tab-train .wk-progress-lbl { color: var(--text-tertiary) !important; }
body.tab-train #progress-done span { color: var(--train) !important; text-shadow: none !important; }

/* Primary buttons */
body.tab-train .wk-btn-primary { background: var(--btn-gold) !important; box-shadow: 0 0 20px rgba(212, 160, 23,0.25) !important; color: #060606 !important; border: none !important; font-weight: 700 !important; letter-spacing: .12em !important; }
body.tab-train .wk-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 0 28px rgba(212, 160, 23,0.35) !important; }

/* FINISH WORKOUT button */
body.tab-train .wk-finish-btn { background: var(--btn-gold) !important; border: none !important; color: #060606 !important; font-weight: 700 !important; box-shadow: 0 2px 14px rgba(212, 160, 23,0.35) !important; text-shadow: none !important; }
body.tab-train .wk-finish-btn::after { display: none !important; }
body.tab-train .wk-completed-card { background:linear-gradient(180deg,rgba(212, 160, 23,0.06),rgba(0,0,0,0.4)); border:1px solid rgba(212, 160, 23,0.25); border-radius:18px; padding:24px; margin:16px 0; }
body.tab-train .wk-completed-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
body.tab-train .wk-completed-badge { background:#D4A017; color:#fff; padding:6px 14px; border-radius:20px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:1.5px; }
body.tab-train .wk-completed-date { color:#aaa; font-family:'Rajdhani',sans-serif; font-size:14px; }
body.tab-train .wk-completed-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
body.tab-train .wk-completed-stat { background:rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:16px 8px; text-align:center; }
body.tab-train .wk-completed-stat-value { font-family:'Manrope',sans-serif; font-size:26px; font-weight:700; color:#D4A017; line-height:1; }
body.tab-train .wk-completed-stat-label { font-family:'Rajdhani',sans-serif; font-size:11px; color:#888; text-transform:uppercase; letter-spacing:1.2px; margin-top:6px; }
body.tab-train .wk-completed-ex-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
body.tab-train .wk-completed-ex-row { background:rgba(255,255,255,0.03); border-radius:10px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; }
body.tab-train .wk-completed-ex-name { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:15px; color:#fff; }
body.tab-train .wk-completed-ex-stats { display:flex; gap:14px; font-family:'Rajdhani',sans-serif; font-size:13px; color:#aaa; }
body.tab-train .wk-completed-ex-top { color:#D4A017; }
body.tab-train .wk-view-history-btn, body.tab-train .wk-reopen-btn { width:100%; padding:14px; border-radius:12px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; border:none; margin-top:10px; display:block; }
body.tab-train .wk-view-history-btn { background:rgba(255,255,255,0.08); color:#fff; }
body.tab-train .wk-reopen-btn { background:transparent; color:#D4A017; border:1px solid rgba(212, 160, 23,0.4) !important; }
body.tab-train .wk-reference-card { background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(0,0,0,0.4)); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:24px; margin:16px 0; }
body.tab-train .wk-reference-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
body.tab-train .wk-reference-badge { background:rgba(255,255,255,0.08); color:#888; padding:6px 14px; border-radius:20px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:1.5px; }
body.tab-train .wk-reference-date { color:#aaa; font-family:'Rajdhani',sans-serif; font-size:14px; }
body.tab-train .wk-reference-subtitle { color:#666; font-family:'Rajdhani',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:1px; margin:16px 0 14px; }
body.tab-train .wk-reference-ex-list { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
body.tab-train .wk-reference-ex-row { background:rgba(255,255,255,0.03); border-radius:10px; padding:12px 14px; }
body.tab-train .wk-reference-ex-name { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:15px; color:#fff; margin-bottom:6px; }
body.tab-train .wk-ref-history-line { font-family:'Rajdhani',sans-serif; font-size:13px; }
body.tab-train .wk-ref-history-age { color:#888; margin-right:8px; }
body.tab-train .wk-ref-history-sets { color:#D4A017; font-weight:600; }
body.tab-train .wk-ref-no-history { font-family:'Rajdhani',sans-serif; font-size:13px; color:#555; font-style:italic; }
body.tab-train .wk-reference-empty { font-family:'Rajdhani',sans-serif; color:#888; text-align:center; padding:24px 0; }
body.tab-train [onclick*="GoToPrograms"] { background: rgba(212, 160, 23,0.1) !important; border: 0.5px solid rgba(212, 160, 23,0.4) !important; color: var(--fuel) !important; box-shadow: none !important; text-shadow: none !important; }

/* Exercise cards → Atlas glass */
body.tab-train .wk-gc.wk-exercise-item { background: var(--glass-bg) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; overflow: hidden !important; position: relative !important; }
body.tab-train .wk-gc.wk-exercise-item::before { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 14% !important; right: 14% !important; width: auto !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.55) 50%, transparent) !important; opacity: 0.7 !important; border-radius: 0 !important; box-shadow: none !important; }
body.tab-train .wk-gc.wk-gc-hud:not(.wk-workout-hero):not(.wk-exercise-item) { background: var(--glass-bg) !important; border: var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; }
body.tab-train .wk-gc.wk-gc-hud:not(.wk-workout-hero):not(.wk-exercise-item)::before { display: none !important; }

/* Exercise number circles */
body.tab-train .wk-ex-num { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: rgba(255,255,255,0.04) !important; border: 0.5px solid rgba(255,255,255,0.22) !important; color: var(--text-secondary) !important; box-shadow: none !important; font-family: var(--fo) !important; font-size: 13px !important; }
body.tab-train .wk-exercise-item.active { border: 0.5px solid rgba(212, 160, 23,0.28) !important; box-shadow: var(--glass-shadow) !important; }
body.tab-train .wk-exercise-item.active .wk-ex-num { background: rgba(212, 160, 23,0.10) !important; border-color: rgba(212, 160, 23,0.50) !important; color: var(--train) !important; box-shadow: 0 0 8px rgba(212, 160, 23,0.30) !important; }
body.tab-train .wk-exercise-item.done { background: var(--glass-bg) !important; border: 0.5px solid rgba(212, 160, 23,0.20) !important; box-shadow: var(--glass-shadow) !important; opacity: 1 !important; }
body.tab-train .wk-exercise-item.done::before { content: '' !important; background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.55) 50%, transparent) !important; box-shadow: none !important; border-radius: 0 !important; }
body.tab-train .wk-exercise-item.done .wk-ex-num { background: rgba(212, 160, 23,0.10) !important; border-color: rgba(212, 160, 23,0.50) !important; color: var(--fuel) !important; box-shadow: 0 0 8px rgba(212, 160, 23,0.30) !important; }
body.tab-train .wk-exercise-item.done .wk-ex-count,
body.tab-train .wk-exercise-item.done .wk-ex-count span { color: var(--fuel) !important; text-shadow: none !important; }
body.tab-train .wk-ex-count span { color: var(--train) !important; text-shadow: none !important; }
/* Owner walk, Oct 23: Fuel's Consistency/Trends fill (.weekly-trend-card) on
   every exercise card, a 2px full-gold top rule (the 1px faded one didn't show),
   and the exercise name in Oswald at 21px. Same in every state. */
body.tab-train .wk-gc.wk-exercise-item, body.tab-train .wk-exercise-item.active, body.tab-train .wk-exercise-item.done {
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(10,10,11,0.04) 60%, rgba(10,10,11,0.02) 100%) !important;
  -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; }
body.tab-train .wk-gc.wk-exercise-item:not(.active):not(.done) { border: 0.5px solid rgba(255,255,255,0.14) !important; }
body.tab-train .wk-gc.wk-exercise-item::before, body.tab-train .wk-exercise-item.done::before {
  left: 0 !important; right: 0 !important; height: 2px !important; background: #D4A017 !important; opacity: 1 !important; box-shadow: none !important; }
body.tab-train .wk-ex-name { font-family: 'Oswald', var(--fh) !important; font-weight: 600 !important; font-size: 21px !important; line-height: 1.15 !important;
  letter-spacing: .01em !important; text-transform: uppercase; color: #FAFAF7 !important; }
/* Owner walk, Oct 24: "+ Add set" under the set rows (the IRON app's control). */
.wk-addset-btn { display: block; width: 100%; margin: 4px 0 6px; padding: 10px; background: transparent; border: 1px dashed rgba(212,160,23,.45);
  border-radius: 10px; color: #D4A017; font-family: 'Oswald', var(--fh); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
/* Train: WALK · REST before the first set, "✓ Rest day today · Undo" after. */
.wk-daymark { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 14px;
  border: .5px solid rgba(255,255,255,.14); border-radius: 12px; font-size: 14px; color: rgba(250,250,247,.8); }
.wk-daymark:empty { display: none; }
.wk-daymark .hm-alt { margin: 0; }

/* Last performance pill chip */
body.tab-train [id^="ex-prev-"] { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: rgba(212, 160, 23,0.08) !important; border: 0.5px solid rgba(212, 160, 23,0.30) !important; border-radius: 999px !important; padding: 6px 12px !important; color: rgba(212, 160, 23,0.90) !important; font-size: 13px !important; font-family: var(--fh) !important; font-weight: 500 !important; margin-top: 6px !important; letter-spacing: .02em !important; box-shadow: none !important; }
/* No dot (owner walk, Oct 24), and no pill at all before there's a "Last time": the
   empty pill sat beside Watch Demo as a gold dot. */
body.tab-train [id^="ex-prev-"]:empty { display: none !important; }

/* Demo and Swap buttons */
body.tab-train .wk-demo-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.18) !important; color: var(--text-secondary) !important; }
body.tab-train .wk-swap-btn { background: rgba(212, 160, 23,0.06) !important; border-color: rgba(212, 160, 23,0.25) !important; color: var(--train) !important; }

/* Add exercise dashed button */
body.tab-train .wk-add-ex-btn { border: 1px dashed rgba(212, 160, 23,0.4) !important; background: rgba(212, 160, 23,0.04) !important; color: var(--train) !important; border-radius: 14px !important; letter-spacing: .12em !important; }
body.tab-train .wk-add-ex-btn:hover { background: rgba(212, 160, 23,0.08) !important; border-color: rgba(212, 160, 23,0.6) !important; }

/* Set logger */
body.tab-train .wk-set-label { color: var(--text-tertiary) !important; font-weight: 600 !important; letter-spacing: .1em !important; text-shadow: none !important; }
body.tab-train .wk-set-inp { background: rgba(255,255,255,0.04) !important; border: 0.5px solid rgba(255,255,255,0.18) !important; color: var(--text-secondary) !important; border-radius: 9px !important; box-shadow: none !important; }
body.tab-train .wk-set-inp:focus { background: rgba(212, 160, 23,0.06) !important; border-color: rgba(212, 160, 23,0.4) !important; color: var(--text-primary) !important; box-shadow: none !important; }
body.tab-train .wk-set-btn { background: rgba(212, 160, 23,0.06) !important; border-color: rgba(212, 160, 23,0.3) !important; color: var(--train) !important; box-shadow: none !important; }
body.tab-train .wk-set-btn.done { background: rgba(212, 160, 23,0.15) !important; border-color: rgba(212, 160, 23,0.50) !important; color: var(--fuel) !important; box-shadow: none !important; }
/* Logged row: container transparent, each cell becomes its own teal pill */
body.tab-train .wk-set-row.logged { background: transparent !important; border: none !important; border-radius: 0 !important; }
body.tab-train .wk-set-row.logged .wk-set-label { background: rgba(212, 160, 23,0.08) !important; border: 0.5px solid rgba(212, 160, 23,0.3) !important; border-radius: 9px !important; color: var(--fuel) !important; text-shadow: none !important; padding: 8px 4px !important; text-align: center !important; }
body.tab-train .wk-set-row.logged .wk-set-inp { background: rgba(212, 160, 23,0.08) !important; border: 0.5px solid rgba(212, 160, 23,0.3) !important; border-radius: 9px !important; color: var(--fuel) !important; box-shadow: none !important; }
body.tab-train .wk-set-row.logged .wk-set-btn { background: rgba(212, 160, 23,0.15) !important; border: 0.5px solid rgba(212, 160, 23,0.50) !important; border-radius: 9px !important; color: var(--fuel) !important; box-shadow: none !important; }

/* Edit-toggle pencil on workout brief card */
.wk-edit-toggle { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0.5px solid rgba(212, 160, 23,0.3); background: rgba(212, 160, 23,0.06); color: var(--knox); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.2s ease; }
.wk-edit-toggle:hover { background: rgba(212, 160, 23,0.15); border-color: rgba(212, 160, 23,0.5); box-shadow: 0 0 10px rgba(212, 160, 23,0.2); }

/* NUTRITION */
body.tab-nutrition { background: transparent; }
body.tab-nutrition #view-nutrition .v4-card,
body.tab-nutrition #view-nutrition .nl-card,
body.tab-nutrition #view-nutrition .nl-log-item,
body.tab-nutrition #view-nutrition .nl-mc {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.12) !important;
}
/* Nutrition — remaining calories text green */
body.tab-nutrition #view-nutrition #nl-cals-remaining {
  color: #D4A017 !important;
  text-shadow: 0 0 10px rgba(212, 160, 23,0.5) !important;
}
/* Nutrition — calorie ring arc green gradient */
body.tab-nutrition #view-nutrition #nl-ring-arc {
  stroke: url(#nlGrad) !important;
  filter: drop-shadow(0 0 8px rgba(212,160,23,0.85)) !important;
}
/* Nutrition — streak badge green (badge lives outside #view-nutrition) */
body.tab-nutrition #nl-streak-badge {
  border-color: rgba(212, 160, 23,0.4) !important;
  background: rgba(212, 160, 23,0.08) !important;
  box-shadow: 0 0 10px rgba(212, 160, 23,0.15) !important;
  color: #D4A017 !important;
}
/* Nutrition — hero tracking card (overrides wk-gc navy base) */
body.tab-nutrition .nl-hero {
  background: #1A1A1C !important;
  background-color: #1A1A1C !important;
  backdrop-filter: blur(4px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(100%) !important;
  border-color: rgba(212, 160, 23,0.2) !important;
  box-shadow: 0 0 24px rgba(212, 160, 23,0.06) !important;
}
body.tab-nutrition .nl-hero .wk-gc-shimmer {
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.4), rgba(212, 160, 23,0.2), transparent) !important;
}
/* Nutrition — button gradients, shine overlay, flex sizing */
/* LOG WITH VOICE — cyan gradient left to right */
body.tab-nutrition #nl-voice-btn {
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 60%, #D4A017 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 25px rgba(212, 160, 23,0.4), 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
body.tab-nutrition #nl-voice-pulse {
  background: #fff !important;
  box-shadow: 0 0 6px rgba(255,255,255,0.8) !important;
}
/* ADD FOOD — richer orange fire gradient */
body.tab-nutrition [onclick="nlOpenSearch()"] {
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 35%, #D4A017 65%, #D4A017 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 25px rgba(212, 160, 23,0.5), 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* FAVORITES — purple gradient left to right */
body.tab-nutrition [onclick="nlOpenFavSheet()"] {
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 40%, #D4A017 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 25px rgba(212, 160, 23,0.4), 0 4px 15px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 2 !important;
  min-width: 0 !important;
}
/* BARCODE scanner — cyan tinted, flex 1/3 */
body.tab-nutrition [onclick="nlOpenScanner()"] {
  background: linear-gradient(135deg, rgba(212, 160, 23,0.2), rgba(212, 160, 23,0.15)) !important;
  border: 1px solid rgba(212, 160, 23,0.4) !important;
  color: #D4A017 !important;
  box-shadow: 0 0 12px rgba(212, 160, 23,0.15) !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 22px !important;
}
/* Shine overlay on Voice, Add Food, Favorites */
body.tab-nutrition #nl-voice-btn::before,
body.tab-nutrition [onclick="nlOpenSearch()"]::before,
body.tab-nutrition [onclick="nlOpenFavSheet()"]::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
/* Uniform height + Orbitron font for all action buttons */
body.tab-nutrition #nl-voice-btn,
body.tab-nutrition [onclick="nlOpenSearch()"],
body.tab-nutrition [onclick="nlOpenFavSheet()"],
body.tab-nutrition [onclick="nlOpenScanner()"] {
  height: 52px !important;
  border-radius: 14px !important;
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 2px !important;
}
/* Nutrition — food log items near-black, subtle border */
body.tab-nutrition .nl-food-item {
  background: #030d07 !important;
  background-color: #030d07 !important;
  border-color: rgba(255,255,255,0.06) !important;
  backdrop-filter: none !important;
}
/* Slim green→cyan left accent bar on food items */
body.tab-nutrition .nl-food-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 2px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, #D4A017, #D4A017) !important;
  box-shadow: 0 0 6px rgba(212, 160, 23,0.4) !important;
  opacity: 0.7 !important;
}
/* Calorie value on food items — cyan glow */
body.tab-nutrition .nl-food-item .nl-food-cals {
  color: #D4A017 !important;
  text-shadow: 0 0 8px rgba(212, 160, 23,0.4) !important;
}
/* FIX 2 — Hero tracking card gradient lines (top + bottom) */
body.tab-nutrition .nl-hero {
  border-color: rgba(212, 160, 23,0.1) !important;
  box-shadow: 0 0 16px rgba(212, 160, 23,0.04) !important;
  position: relative !important;
  overflow: hidden !important;
}
body.tab-nutrition .nl-hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5), rgba(212, 160, 23,0.3), transparent) !important;
  z-index: 1 !important;
}
body.tab-nutrition .nl-hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0; height: 2px !important;
  background: linear-gradient(90deg, #D4A017, #D4A017, #D4A017) !important;
  box-shadow: 0 0 12px rgba(212, 160, 23,0.4) !important;
  z-index: 1 !important;
}
/* Today's log items — neutral dark, white border */
body.tab-nutrition #view-nutrition .nl-log-item {
  background: #030d07 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
/* Macro tiles — near-black, very faint border */
body.tab-nutrition #view-nutrition .nl-mc {
  background: rgba(0,0,0,0.4) !important;
  border-color: rgba(255,255,255,0.07) !important;
}
/* Nutrition — tool buttons glass style with green accent */
body.tab-nutrition .nut-tool-btn {
  background: rgba(212, 160, 23,0.04) !important;
  border: 1px solid rgba(212, 160, 23,0.15) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 12px !important;
  padding: 12px 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Tool button left accent pip */
body.tab-nutrition .nut-tool-btn::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 25% !important;
  bottom: 25% !important;
  width: 2px !important;
  border-radius: 0 2px 2px 0 !important;
  background: linear-gradient(180deg, #D4A017, #D4A017) !important;
  box-shadow: 0 0 5px rgba(212, 160, 23,0.4) !important;
}
/* Tool button active/hover state */
body.tab-nutrition .nut-tool-btn.active,
body.tab-nutrition .nut-tool-btn:hover {
  background: rgba(212, 160, 23,0.1) !important;
  border-color: rgba(212, 160, 23,0.4) !important;
  color: #D4A017 !important;
  box-shadow: 0 0 14px rgba(212, 160, 23,0.12) !important;
}
/* Nutrition — AI output panel darker + green border */
body.tab-nutrition .nut-ai-output {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.2) !important;
  box-shadow: 0 0 20px rgba(212, 160, 23,0.06) !important;
  backdrop-filter: none !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Nutrition tools — .ccard panels: orange-tinted dark bg, orange border */
body.tab-nutrition #nut-sample .ccard,
body.tab-nutrition #nut-qa .ccard,
body.tab-nutrition #nut-swaps .ccard,
body.tab-nutrition #nut-protein .ccard,
body.tab-nutrition #nut-eatout .ccard {
  background: rgba(212, 160, 23,0.07) !important;
  background-color: rgba(212, 160, 23,0.07) !important;
  border-color: rgba(212, 160, 23,0.25) !important;
  backdrop-filter: none !important;
  box-shadow: 0 0 20px rgba(212, 160, 23,0.06) !important;
}
/* Nutrition tools — panel title labels: orange instead of cyan */
body.tab-nutrition #nut-sample .cclbl,
body.tab-nutrition #nut-qa .cclbl,
body.tab-nutrition #nut-swaps .cclbl,
body.tab-nutrition #nut-protein .cclbl,
body.tab-nutrition #nut-eatout .cclbl {
  color: #D4A017 !important;
  text-shadow: 0 0 10px rgba(212, 160, 23,0.4) !important;
}
body.tab-nutrition .nut-ai-output::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5), rgba(212, 160, 23,0.2), transparent) !important;
}
/* Nutrition — GET MEAL IDEAS button — purple gradient */
body.tab-nutrition [onclick="nlGetMealSuggestions()"] {
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 50%, #D4A017 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 25px rgba(212, 160, 23,0.4), 0 4px 15px rgba(0,0,0,0.3) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
body.tab-nutrition [onclick="nlGetMealSuggestions()"]::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%) !important;
  pointer-events: none !important;
}
/* Nutrition — modals: dark green theme */
body.tab-nutrition #nl-search-modal .wk-modal-box,
body.tab-nutrition #nl-manual-modal .wk-modal-box,
body.tab-nutrition #nl-targets-modal .wk-modal-box {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.2) !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.8), 0 0 20px rgba(212, 160, 23,0.08) !important;
}
body.tab-nutrition #nl-confirm-modal .wk-modal-box {
  background: linear-gradient(135deg,rgba(255,255,255,0.09) 0%,rgba(10, 10, 11,0.04) 60%,rgba(10, 10, 11,0.02) 100%) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
body.tab-nutrition #nl-scanner-modal .wk-modal-box {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.2) !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.8), 0 0 20px rgba(212, 160, 23,0.08) !important;
}
/* Favorites sheet — dark green */
body.tab-nutrition .nl-fs-sheet {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.2) !important;
}
/* Modal input fields */
body.tab-nutrition #nl-search-modal input,
body.tab-nutrition #nl-manual-modal input,
body.tab-nutrition #nl-scanner-modal input {
  background: rgba(212, 160, 23,0.05) !important;
  border-color: rgba(212, 160, 23,0.2) !important;
  color: #fff !important;
}
/* Nutrition — GET WEEKLY ANALYSIS FROM KNOX button — purple gradient */
body.tab-nutrition [onclick="nlWeeklyReview()"] {
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 50%, #D4A017 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 25px rgba(212, 160, 23,0.4), 0 4px 15px rgba(0,0,0,0.3) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}
body.tab-nutrition [onclick="nlWeeklyReview()"]::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%) !important;
  pointer-events: none !important;
}
/* Nutrition — original header title: Orbitron 28px/900, green glow */
body.tab-nutrition #v4-screen-nutrition > div:first-child [style*="Orbitron"] {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 20px rgba(212, 160, 23,0.2) !important;
}
/* Nutrition — date line muted */
body.tab-nutrition #nl-date-line {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: rgba(255,255,255,0.28) !important;
  text-transform: uppercase !important;
}
/* Nutrition — History + Targets buttons green */
body.tab-nutrition #v4-screen-nutrition > div:first-child button {
  border-color: rgba(212, 160, 23,0.3) !important;
  color: #D4A017 !important;
  background: rgba(212, 160, 23,0.05) !important;
}

/* Nutrition program bar stat pills */
body.tab-nutrition .nl-stat-pill {
  min-width: 52px;
}

/* Meal cards v2 — mirrors exercise card */
body.tab-nutrition .nl-meal-card-v2 {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.14) !important;
  position: relative;
  overflow: hidden;
}
body.tab-nutrition .nl-meal-card-v2::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--meal-accent, #00e5cc);
  box-shadow: 0 0 10px var(--meal-accent, #00e5cc);
}
body.tab-nutrition .nl-meal-card-v2.nl-meal-done::before {
  background: var(--meal-accent, #00e5cc);
  box-shadow: 0 0 10px var(--meal-accent, #00e5cc);
}
body.tab-nutrition .nl-meal-num-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(212, 160, 23,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  margin-right: 12px !important;
}

/* Meal cards */
body.tab-nutrition .nl-meal-card {
  background: rgba(212, 160, 23,0.04);
  border: 1px solid rgba(212, 160, 23,0.18);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s;
}
body.tab-nutrition .nl-meal-card.active {
  border-color: rgba(212, 160, 23,0.55);
  box-shadow: 0 0 20px rgba(212, 160, 23,0.12);
}
body.tab-nutrition .nl-meal-card.completed {
  border-color: rgba(212, 160, 23,0.35);
}
body.tab-nutrition .nl-meal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
}
body.tab-nutrition .nl-meal-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(212, 160, 23,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #D4A017;
  flex-shrink: 0;
  margin-right: 12px;
}
body.tab-nutrition .nl-meal-card.completed .nl-meal-number {
  background: rgba(212, 160, 23,0.2);
  border-color: #D4A017;
}
body.tab-nutrition .nl-meal-macro-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
}
body.tab-nutrition .nl-meal-macro-tile {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}
body.tab-nutrition .nl-meal-body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(212, 160, 23,0.1);
}
body.tab-nutrition .nl-input-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
body.tab-nutrition .nl-input-method-btn {
  background: rgba(212, 160, 23,0.08) !important;
  border: 1px solid rgba(212, 160, 23,0.3) !important;
  border-radius: 10px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: 0.5px !important;
}
body.tab-nutrition .nl-input-method-btn:hover {
  background: rgba(212, 160, 23,0.15) !important;
  border-color: rgba(212, 160, 23,0.5) !important;
}

/* NUTRITION TOOL AREA — full orange override (tabs, inputs, chips) */
body.tab-nutrition .nut-tool-btn {
  background: rgba(212, 160, 23,0.05) !important;
  border: 1px solid rgba(212, 160, 23,0.22) !important;
  color: rgba(255,255,255,0.82) !important;
}
body.tab-nutrition .nut-tool-btn:hover {
  background: rgba(212, 160, 23,0.10) !important;
  border-color: rgba(212, 160, 23,0.45) !important;
}
body.tab-nutrition .nut-tool-btn.on,
body.tab-nutrition .nut-tool-btn.active {
  background: rgba(212, 160, 23,0.14) !important;
  border-color: #D4A017 !important;
  color: #D4A017 !important;
  box-shadow: 0 0 18px rgba(212, 160, 23,0.35) !important;
}
body.tab-nutrition .nut-tool input,
body.tab-nutrition .nut-tool select,
body.tab-nutrition .nut-tool textarea,
body.tab-nutrition .nut-tool input[type="text"],
body.tab-nutrition .nut-tool input[type="number"]:not(.cin) {
  background: rgba(212, 160, 23,0.06) !important;
  border: 1px solid rgba(212, 160, 23,0.28) !important;
  color: #fff !important;
}
body.tab-nutrition .nut-tool input::placeholder,
body.tab-nutrition .nut-tool textarea::placeholder {
  color: rgba(255,255,255,0.42) !important;
}
body.tab-nutrition .nut-tool input:focus,
body.tab-nutrition .nut-tool select:focus,
body.tab-nutrition .nut-tool textarea:focus {
  border-color: #D4A017 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(212, 160, 23,0.22) !important;
}
body.tab-nutrition .nut-tool .qa-suggest {
  background: rgba(212, 160, 23,0.06) !important;
  border: 1px solid rgba(212, 160, 23,0.28) !important;
  color: rgba(255,255,255,0.85) !important;
}
body.tab-nutrition .nut-tool .qa-suggest:hover {
  background: rgba(212, 160, 23,0.14) !important;
  border-color: rgba(212, 160, 23,0.55) !important;
  color: #fff !important;
}

/* Nutrition hero card + chart: add horizontal margins to match other tabs */
body.tab-nutrition .nl-hero.wk-gc,
body.tab-nutrition #nl-week-chart-container {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

/* KNOX */
body.tab-knox { background: transparent; }
body.tab-knox #v4-screen-knox .v4-card,
body.tab-knox #v4-screen-knox .v4-knox-card {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.16) !important;
}
/* Knox — send button: knox→train gradient */
body.tab-knox #v4-screen-knox .kx-send-btn {
  background: var(--btn-gold) !important;
  box-shadow: none !important;
  color: #0A0A0B !important;
}
/* Knox — typing dots purple */
body.tab-knox #v4-screen-knox .typing span {
  background: var(--knox) !important;
}

/* PROGRAMS */
body.tab-programs { background: transparent; }
/* Step 4/5 — .wk-program-card removed from this shared group so .prog-card and  */
/* .v4-card retain their current behavior (handled in a later pass). The        */
/* fitness card surface is owned entirely by the .wk-gc.wk-program-card rule    */
/* immediately below.                                                           */
body.tab-programs #v4-screen-programs .v4-card,
body.tab-programs #v4-screen-programs .prog-card {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.14) !important;
}
/* Programs — fitness list cards: Atlas glass surface (step 4/5) */
body.tab-programs #v4-screen-programs .wk-gc.wk-program-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: var(--glass-shadow) !important;
}
/* Programs — active program card: Atlas glass surface + iron top accent line */
/* (Atlas swap step 2/5 — values rewritten in place; selectors + !important + scope unchanged.) */
body.tab-programs #v4-screen-programs .v4-prog-active {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: var(--glass-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Atlas iron accent line — 1px, inset 14% each side, no glow */
body.tab-programs #v4-screen-programs .v4-prog-active::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 14%; right: 14%; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.85) 50%, transparent) !important;
  opacity: 0.7 !important;
  box-shadow: none !important;
}
/* Bottom gradient line removed — Atlas cards carry one top accent only. */
/* Programs — progress bar in iron */
body.tab-programs #v4-screen-programs .v4-prog-fill {
  background: var(--iron) !important;
  box-shadow: 0 0 8px rgba(212,160,23,0.35) !important;
}
/* Programs — percent text in iron */
body.tab-programs #v4-screen-programs #v4-prog-active-pct {
  color: var(--iron) !important;
  text-shadow: 0 0 10px rgba(212,160,23,0.4) !important;
}
/* Programs — BioGen .ccard cards */
body.tab-programs #v4-screen-programs .ccard {
  background: #1A1A1C !important;
  border-color: rgba(212, 160, 23,0.16) !important;
  box-shadow: inset 0 1px 0 rgba(212, 160, 23,0.08), inset 0 0 40px rgba(100,60,0,0.04) !important;
}
/* Programs — fitness list cards: positioning context for the top accent (step 4/5) */
body.tab-programs #v4-screen-programs .wk-gc.wk-program-card {
  position: relative;
  overflow: hidden;
}
/* Step 4/5 — left orange→cyan vertical bar removed (was ::before). */
/* The Atlas iron accent on list cards now matches the active card's recipe.   */
body.tab-programs #v4-screen-programs .wk-gc.wk-program-card::after {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.85) 50%, transparent);
  opacity: 0.7;
}
/* Programs — main sub-tab chip active (v4-chip-on) */
body.tab-programs #v4-screen-programs .v4-chip.v4-chip-on {
  border-color: rgba(212, 160, 23,0.5) !important;
  color: #D4A017 !important;
  background: rgba(212, 160, 23,0.08) !important;
  box-shadow: 0 0 14px rgba(212, 160, 23,0.15) !important;
  text-shadow: 0 0 10px rgba(212, 160, 23,0.6) !important;
}
/* Programs — BioGen sub-tab buttons active (.prog-tab.on) */
body.tab-programs #v4-screen-programs .prog-tab.on {
  border-color: rgba(212, 160, 23,0.5) !important;
  color: #D4A017 !important;
  background: rgba(212, 160, 23,0.08) !important;
  box-shadow: 0 0 14px rgba(212, 160, 23,0.15) !important;
  text-shadow: 0 0 10px rgba(212, 160, 23,0.6) !important;
}
/* Programs — Nutrition sub-tab pills: Atlas neutral base + iron active (step 5/5) */
body.tab-programs #v4-screen-programs #prog-nutrition-content .nut-cat-pill {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.65) !important;
}
body.tab-programs #v4-screen-programs #prog-nutrition-content .nut-cat-pill.active {
  border-color: rgba(212,160,23,0.55) !important;
  background: rgba(212,160,23,0.09) !important;
  color: var(--iron) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Programs — Fitness category filter pills: Atlas neutral base (step 3/5) */
body.tab-programs .wk-cat-pill {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.65) !important;
}
/* Programs — Fitness category filter pills active: iron (step 3/5) */
body.tab-programs .wk-cat-pill.active {
  border-color: rgba(212,160,23,0.55) !important;
  background: rgba(212,160,23,0.09) !important;
  color: var(--iron) !important;
}
/* Programs — Custom Program button: iron Atlas .cta recipe (step 3/5) */
body.tab-programs #custom-program-btn {
  background: var(--btn-gold) !important;
  color: #0A0A0B !important;
  box-shadow: 0 0 24px rgba(212,160,23,0.3) !important;
}
/* Programs — selected program card: iron tint (step 4/5) */
body.tab-programs #v4-screen-programs .wk-gc.wk-program-card.selected {
  border-color: rgba(212,160,23,0.45) !important;
  box-shadow: 0 0 20px rgba(212,160,23,0.12) !important;
  background: rgba(212,160,23,0.04) !important;
}
/* Programs — START PROGRAM button: matches Custom CTA recipe (step 4/5) */
body.tab-programs #v4-program-cta .wk-btn-primary {
  background: var(--btn-gold) !important;
  border: none !important;
  color: #0A0A0B !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  box-shadow: 0 0 24px rgba(212,160,23,0.3) !important;
  text-shadow: none !important;
  border-radius: 14px !important;
}

/* MORE */
body.tab-more { background: transparent; }

/* ── PER-TAB NAV ACTIVE INDICATOR — unified train blue, no underline ── */
/* Active state handled by base .v4-nav-tab.active rules above. */

/* ═══════════════ ATLAS SWAP — PROGRAMS SCREEN (scoped) ═══════════════ */
/* All rules scoped under #v4-screen-programs and per-tab content divs   */
/* so they cannot bleed into BioGen / Train picker / Browse overlay.     */
#v4-screen-programs .atlas-prog-card {
  background: var(--glass-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
#v4-screen-programs .atlas-accent-iron {
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.85) 50%, transparent);
}
#v4-screen-programs .atlas-section-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
/* Step 3/5 — category pill row edge-fade affordance.                    */
/* WOMEN'S/SPECIALIZATION scroll off the right; symmetric mask gives a   */
/* visible fade-out cue without altering markup or scroll behavior.      */
#v4-screen-programs .v4-cat-filter {
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

/* Step 5/5 — Nutrition Diagnostic cards: Atlas glass surface + iron top  */
/* accent. Scoped under #prog-nutrition-content so BioGen .prog-cards     */
/* (which live in the sibling #prog-biogen-content) are not reached.     */
#v4-screen-programs #prog-nutrition-content .prog-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  box-shadow: var(--glass-shadow) !important;
  position: relative;
  overflow: hidden;
}
#v4-screen-programs #prog-nutrition-content .prog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.85) 50%, transparent);
}

/* Step 5/5 — Diagnostic detail modal: iron top accent + Manrope          */
/* typography hierarchy on the four content divs. Markup added one id    */
/* (#prog-modal-sheet) so the accent can anchor; no new DOM nodes.       */
#prog-modal-sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,0.85) 50%, transparent);
}
#prog-modal #prog-modal-phase {
  font-family: var(--fd);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 8px;
}
#prog-modal #prog-modal-title {
  font-family: var(--fh);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 4px;
}
#prog-modal #prog-modal-sub {
  font-family: var(--fd);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
#prog-modal #prog-modal-body {
  font-family: var(--fd);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── LOADING SCREEN ─────────────────────────────────────────────────── */
.loading-screen {
  position: fixed; inset: 0; z-index: 9000;
  background: #1A1A1C;
  display: flex; align-items: center; justify-content: center;
}
.loading-logo{display:flex;flex-direction:column;align-items:center;gap:12px;}
.loading-logo img{width:clamp(140px,38vw,220px);height:auto;animation:gdot 2s ease-in-out infinite;}
.loading-logo span{font-family:var(--fh);font-size:clamp(36px,10vw,64px);letter-spacing:.18em;color:#fff;}
.loading-caption{font-family:'Manrope',system-ui,-apple-system,sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-top:6px;}
@keyframes gdot {
  0%,100%{box-shadow:0 0 8px #D4A017,0 0 16px rgba(212, 160, 23,.4)}
  50%{box-shadow:0 0 20px #D4A017,0 0 40px rgba(212, 160, 23,.7)}
}

/* ── AUTH SCREENS ───────────────────────────────────────────────────── */
.auth-screen {
  position: fixed; inset: 0; z-index: 8000;
  background: #0A0A0B;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-wrap { width: 100%; max-width: 400px; }
.auth-header { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:8px; margin-bottom:32px; }
.auth-header-logo { display:flex; align-items:center; justify-content:center; gap:10px; }
.auth-header-logo img { height:74px; width:auto; max-width:100%; }
.auth-header-logo span { font-family:'Manrope',var(--fh),sans-serif; font-size:28px; font-weight:700; color:#fff; letter-spacing:0.04em; }
.auth-header-tag { font-family:'Manrope',var(--fh),sans-serif; font-size:13px; font-weight:400; color:var(--text-secondary); letter-spacing:0.04em; text-transform:uppercase; }
.auth-box {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(10, 10, 11,0.04) 60%, rgba(10, 10, 11,0.02) 100%);
  border: 0.5px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
  border-radius: 16px;
  padding: 32px 24px;
  position: relative;
}
.auth-box-accent { position:absolute; top:0; left:14%; right:14%; height:1px; background:linear-gradient(90deg,transparent,rgba(212, 160, 23,0.5),transparent); opacity:0.7; pointer-events:none; border-radius:1px; }
.auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.auth-logo img { width:150px; height:auto; }
.auth-logo span { font-family:var(--fh); font-size:34px; letter-spacing:.14em; color:#fff; }
.auth-sub { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.3); font-family:var(--fd); margin-bottom:28px; }
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 24px;
}
.auth-tab {
  padding: 12px 0; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: rgba(250,250,247,0.45);
  font-family:'Manrope',var(--fh),sans-serif; font-size:14px; font-weight:600;
  cursor: pointer;
}
.auth-tab.on {
  background: rgba(212, 160, 23,0.12);
  border-color: rgba(212, 160, 23,0.45);
  color: #D4A017;
  box-shadow: inset 0 0 0 0.5px rgba(212, 160, 23,0.25);
}
.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block; font-family:'Manrope',var(--fh),sans-serif; font-size:11px; font-weight:600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #8a99ad; margin-bottom: 6px;
}
.auth-input {
  width: 100%; padding: 14px 16px; box-sizing: border-box;
  background: rgba(26, 26, 28, 0.6);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 12px; color: #fff;
  font-family:'Manrope',var(--fh),sans-serif; font-size:15px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.auth-input:focus {
  border-color: rgba(212, 160, 23,0.45);
  box-shadow: inset 0 0 0 0.5px rgba(212, 160, 23,0.2);
}
.auth-input::placeholder { color: rgba(250,250,247,0.3); }
.auth-btn {
  width: 100%; height: 52px;
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 100%);
  border: none; border-radius: 12px;
  font-family:'Manrope',var(--fh),sans-serif; font-size:14px; font-weight:700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #0A0A0B; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  margin-top: 8px;
}
.auth-btn:active { opacity: 0.9; }
.auth-link {
  background: transparent; border: none; cursor: pointer;
  font-family:'Manrope',var(--fh),sans-serif; font-size:13px; font-weight:400;
  color: #8a99ad; text-decoration: underline; text-underline-offset: 3px;
}
.auth-back-link {
  display: block; text-align: center; margin-top: 16px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  font-family:'Manrope',var(--fh),sans-serif; font-size:13px; font-weight:400;
  color: #8a99ad; text-decoration: underline; text-underline-offset: 3px;
}
.auth-err {
  background: rgba(255,100,100,0.08); border: 0.5px solid rgba(255,100,100,0.4);
  border-radius: 10px; padding: 12px 14px; margin-top: 12px;
  font-family:'Manrope',var(--fh),sans-serif; font-size:13px; color: rgba(255,150,150,0.95);
  line-height: 1.45;
}
.auth-err:empty { display:none !important; }
.auth-hint { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
.auth-ok {
  background: rgba(212, 160, 23,0.08); border: 0.5px solid rgba(212, 160, 23,0.4);
  border-radius: 10px; padding: 12px 14px; margin-top: 12px;
  font-family:'Manrope',var(--fh),sans-serif; font-size:13px; color: rgba(150,235,215,0.95);
  line-height: 1.45;
}
.auth-ok:empty { display:none !important; }

/* ── MAIN APP ───────────────────────────────────────────────────────── */
.app { display: none; position: relative; z-index: 1; }

/* ── BOTTOM NAV BAR — Atlas ─────────────────────────────────────────── */
.v4-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(26, 26, 28, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.10);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  z-index: 200;
}
.v4-nav-inner {
  max-width: 420px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.06);
  border: var(--glass-border);
  border-radius: 16px;
  padding: 6px;
  display: flex;
  justify-content: space-around;
}
.v4-nav-tab {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 6px 4px; flex: 1;
  cursor: pointer; border-radius: 10px;
  transition: background 0.15s ease;
  background: none; border: none;
  color: var(--text-tertiary);
}
.v4-nav-tab svg { width: 20px; height: 20px; stroke: currentColor; transition: var(--t); }
.v4-nav-tab span { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--fb); font-weight: 500; transition: var(--t); }
.v4-nav-tab[data-tab="home"].active     { color: var(--signal); }
.v4-nav-tab[data-tab="home"].active svg { filter: drop-shadow(0 0 6px rgba(212, 160, 23,0.6)); }
.v4-nav-tab[data-tab="train"].active     { color: var(--train); }
.v4-nav-tab[data-tab="train"].active svg { filter: drop-shadow(0 0 6px rgba(212, 160, 23,0.6)); }
.v4-nav-tab[data-tab="nutrition"].active     { color: var(--fuel); }
.v4-nav-tab[data-tab="nutrition"].active svg { filter: drop-shadow(0 0 6px rgba(212, 160, 23,0.6)); }
.v4-nav-tab[data-tab="knox"].active     { color: var(--knox); }
.v4-nav-tab[data-tab="knox"].active svg { filter: drop-shadow(0 0 6px rgba(212, 160, 23,0.6)); }
.v4-nav-tab[data-tab="biogen"].active     { color: var(--iron); }
.v4-nav-tab[data-tab="biogen"].active svg { filter: drop-shadow(0 0 6px rgba(212,160,23,0.6)); }

/* ── VIEWS (legacy compat) ──────────────────────────────────────────── */
.view { display: none; }
.view.on { display: block; }

/* ── APP SCREEN WRAPPER ─────────────────────────────────────────────── */
.v4-screen {
  min-height: 100dvh;
  padding: 0 0 calc(82px + env(safe-area-inset-bottom));
  position: relative; z-index: 1;
}
.v4-content {
  padding: 18px 14px 0;
}

/* ── GLASS CARD ─────────────────────────────────────────────────────── */
@keyframes bspin { to { --a:360deg; --b:540deg; } }

.gc {
  background: rgba(26, 26, 28,.62);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255,.28);
  border-radius: 18px;
  position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  box-shadow: inset 0 1px 0 rgba(212, 160, 23,.14), inset 0 0 50px rgba(255, 255, 255,.06);
}
.gc::before {
  content: ""; position: absolute; inset: -1px; border-radius: 19px;
  background: conic-gradient(from var(--a), transparent 0%, transparent 18%, rgba(212, 160, 23,.7) 30%, rgba(212, 160, 23,.6) 42%, rgba(212, 160, 23,.55) 54%, transparent 62%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
  padding: 1.5px; opacity: 0; transition: opacity .4s;
  animation: bspin 3.5s linear infinite paused; z-index: 2; pointer-events: none;
}
.gc::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(212, 160, 23,.18),transparent); z-index: 3;
}
.gc:active::before, .gc.expanded::before { opacity:1; animation-play-state:running; }
.gc:hover { transform: translateY(-2px); border-color: rgba(212, 160, 23,.5); box-shadow: inset 0 1px 0 rgba(212, 160, 23,.2), 0 12px 40px rgba(255, 255, 255,.18); }
.gc.tappable { cursor: pointer; }
.gc.tappable:hover { border-color: rgba(212, 160, 23,.55); box-shadow: inset 0 1px 0 rgba(212, 160, 23,.2), 0 0 16px rgba(212, 160, 23,.08); }

/* shimmer line for non-hud cards */
.gc:not(.hud)::after {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(212, 160, 23,.18),transparent); z-index: 3;
}
.wk-gc { background: rgba(26, 26, 28,.62); backdrop-filter: blur(28px) saturate(160%); border: 1.5px solid rgba(255, 255, 255,.28); border-radius: 18px; position: relative; overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t); box-shadow: inset 0 1px 0 rgba(212, 160, 23,.14), inset 0 0 50px rgba(255, 255, 255,.06); }
.wk-gc-shimmer { position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(212, 160, 23,.18),transparent);z-index:3;pointer-events:none; }

/* ── TOP HEADER ──────────────────────────────────────────────────────── */
.v4-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 14px 0;
  margin-bottom: 20px;
}
.v4-logo{font-family:var(--fh);font-size:26px;letter-spacing:.08em;display:flex;align-items:center;color:#fff;gap:7px;}
.v4-logo img{height:auto;}
.v4-logo-dot {
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
  display: inline-block; margin-left: 3px; margin-bottom: 2px;
  box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(240,192,64,.4);
  animation: gdot 3s ease-in-out infinite;
}
.v4-header-sub {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.28); font-family: var(--fd); margin-top: 2px;
}
.v4-header-right { display: flex; align-items: center; gap: 10px; }
.v4-notif-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(212, 160, 23,.22); background: rgba(212, 160, 23,.06);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; transition: var(--t);
}
.v4-notif-btn:hover { border-color: rgba(212, 160, 23,.45); }
.v4-notif-dot { position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--gold);border-radius:50%;border:2px solid #020408;box-shadow:0 0 6px var(--gold); }
.v4-signout {
  padding: 6px 13px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.1); background: transparent;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--fd); color: rgba(255,255,255,.35); cursor: pointer;
  transition: var(--t);
}
.v4-signout:hover { color: var(--red); border-color: rgba(255,69,96,.3); }

/* ── HOME SCREEN ─────────────────────────────────────────────────────── */
/* KPI grid */
.v4-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px; margin-bottom: 16px;
  padding: 0 14px;
}
.v4-kpi-c { padding: 14px 16px 12px; }
.v4-kpi-lbl { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.3); font-family: var(--fd); margin-bottom: 5px; }
.v4-kpi-val { font-family: var(--fo); font-size: 38px; line-height: 1; color: #fff; letter-spacing: .02em; }
.v4-kpi-u { font-family: var(--fd); font-size: 12px; color: rgba(255,255,255,.35); margin-left: 2px; }
.v4-kpi-d { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; font-family: var(--fd); font-weight: 500; }
.v4-kpi-d.up { color: var(--green); } .v4-kpi-d.dn { color: var(--cyan); }
.v4-kpi-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; border-radius: 0 0 18px 18px; }
@keyframes cin { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes dp { to{stroke-dashoffset:0} }
@keyframes bfill { to{width:var(--fw)} }

/* Global: Orbitron on all numeric display elements */
[data-num], .num, .stat-val, .macro-num, .macro-val { font-family: var(--fo, 'Orbitron', sans-serif); }

/* Section header */
.v4-sec-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding: 0 14px; }
.v4-sec-title { font-family: var(--fh); font-size: 19px; letter-spacing: .08em; color: #fff; }
.v4-sec-sub { font-size: 11px; color: rgba(255,255,255,.3); font-family: var(--fd); font-weight: 300; }
.v4-sec-action { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); font-family: var(--fd); font-weight: 600; cursor: pointer; }

/* Macro progress bars */
.pr-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.pr-name { font-size: 11px; color: rgba(255,255,255,.5); font-family: var(--fd); }
.pr-pct { font-size: 11px; font-weight: 600; font-family: var(--fd); }

/* Chart card */
.v4-chart-card { padding: 18px 18px 14px; margin-bottom: 14px; animation: cin .5s .25s both; }
.v4-chart-svg { width: 100%; height: 110px; overflow: visible; }

/* Knox card */
.v4-knox-card { padding: 18px; margin-bottom: 14px; animation: cin .5s .3s both; position: relative; overflow: hidden; }
.v4-knox-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 20px; background: rgba(212, 160, 23,0.15);
  border: 1px solid rgba(212, 160, 23,0.5); font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #D4A017; font-family: var(--fd); font-weight: 700;
  margin-bottom: 10px; width: fit-content;
}
.v4-ldot { width:7px;height:7px;background:#D4A017;border-radius:50%;box-shadow:0 0 6px #D4A017;animation:lp 1.8s ease-in-out infinite; }
.ldot { width:5px;height:5px;background:var(--cyan);border-radius:50%;box-shadow:0 0 5px var(--cyan);animation:lp 1.8s ease-in-out infinite; }
@keyframes lp { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.5)} }
.v4-knox-msg { font-size: 13px; line-height: 1.6; color: #ffffff; font-family: var(--fd); margin-bottom: 0; }
.v4-knox-msg strong { color: #fff; font-weight: 600; }

/* Jarvis ring */
.jarvis-ring { position:relative;width:64px;height:64px;flex-shrink:0; }
.jarvis-ring svg { width:64px;height:64px; }
.jr-outer { animation:jrOuter 8s linear infinite; }
@keyframes jrOuter { to{transform:rotate(360deg);transform-origin:32px 32px} }
.jr-inner { animation:jrInner 5s linear infinite; }
@keyframes jrInner { to{transform:rotate(-360deg);transform-origin:32px 32px} }
.jr-core { animation:jrCore 2s ease-in-out infinite; }
@keyframes jrCore { 0%,100%{opacity:.7;r:8}50%{opacity:1;r:10} }
.jr-dot1 { animation:jrDot1 3s linear infinite; }
.jr-dot2 { animation:jrDot2 3s linear infinite .5s; }
.jr-dot3 { animation:jrDot3 3s linear infinite 1s; }
@keyframes jrDot1 { 0%{transform:rotate(0deg);transform-origin:32px 32px}100%{transform:rotate(360deg);transform-origin:32px 32px} }
@keyframes jrDot2 { 0%{transform:rotate(120deg);transform-origin:32px 32px}100%{transform:rotate(480deg);transform-origin:32px 32px} }
@keyframes jrDot3 { 0%{transform:rotate(240deg);transform-origin:32px 32px}100%{transform:rotate(600deg);transform-origin:32px 32px} }
.jarvis-center { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }

/* Knox input */
.v4-chips { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px; }
.v4-chip { padding:7px 14px;border-radius:20px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--fd);font-weight:700;cursor:pointer;transition:var(--t);touch-action:manipulation;-webkit-user-select:none;user-select:none; }
.v4-chip-on { background:rgba(212, 160, 23,0.15);color:#D4A017;border:1px solid rgba(212, 160, 23,0.5);box-shadow:0 0 10px rgba(212, 160, 23,0.2); }
.v4-chip-off { background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.15); }
.v4-chip-off:hover { border-color:rgba(212, 160, 23,.4);color:#D4A017; }
.v4-knox-inp-row { display:flex;gap:7px; }
.v4-knox-inp { flex:1;background:rgba(0,0,0,.2);border:1px solid rgba(212, 160, 23,.2);border-radius:10px;padding:9px 12px;font-size:13px;font-family:var(--fd);color:#fff;outline:none;transition:var(--t); }
.v4-knox-inp::placeholder { color:rgba(255,255,255,.25); }
.v4-knox-inp:focus { border-color:rgba(212, 160, 23,.45); }
#knoxSphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.72;
  pointer-events: none;
}
.v4-knox-card > * { position: relative; z-index: 1; }
.v4-knox-send { width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--cyan),var(--blue2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 12px rgba(212, 160, 23,.3);transition:var(--t); }
.v4-knox-send:hover { transform:scale(1.08);box-shadow:0 0 20px rgba(212, 160, 23,.5); }

/* Streak / bottom grid */
.v4-bot-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 14px 14px; }
.v4-bot-c { padding:16px; }
.v4-cal-big { font-family:var(--fo);font-size:32px;color:#fff;line-height:1; }
.v4-cal-rem { font-size:11px;color:var(--gold);font-family:var(--fd);margin-top:2px; }
.v4-mbar { height:4px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin:10px 0 12px; }
.v4-mfill { height:100%;border-radius:2px;width:0;animation:bfill 1.2s ease forwards; }
.v4-sk-num { font-family:var(--fo);font-size:52px;font-weight:900;line-height:1;color:#D4A017;text-shadow:0 0 30px rgba(255,107,0,0.5); }
.v4-week-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0 12px; }
.v4-dc { aspect-ratio:1;border-radius:3px;background:rgba(255,107,0,0.15);border:1px solid rgba(255,107,0,0.2);display:flex;align-items:center;justify-content:center;font-size:10px;color:rgba(255,255,255,.25); }
.v4-dc.done { background:#D4A017;border:none;box-shadow:0 0 6px rgba(255,107,0,0.5);color:#000; }
.v4-dc.today { background:transparent;border:2px solid #D4A017;box-shadow:0 0 8px rgba(255,107,0,0.6);color:#D4A017; }
.v4-dc.miss { background:rgba(255,69,96,.08);border:1px solid rgba(255,69,96,.18);color:rgba(255,69,96,.4); }

/* Radar */

/* ── CHAT / KNOX SCREEN ─────────────────────────────────────────────── */
.v4-chat-wrap { padding: 0 14px; display:flex;flex-direction:column;gap:12px;margin-bottom:16px; }
.v4-msg-knox { display:flex;gap:10px;align-items:flex-start; }
.v4-msg-user { display:flex;gap:10px;align-items:flex-start;flex-direction:row-reverse; }
.v4-msg-avatar-k { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue2));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fh);font-size:11px;color:#000; }
.v4-msg-avatar-u { width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--blue2));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--fh);font-size:11px;color:#000; }
.v4-bubble-k { background:rgba(26, 26, 28,.7);border:1px solid rgba(212, 160, 23,.2);border-radius:0 14px 14px 14px;padding:12px 14px;max-width:85%; }
.v4-bubble-u { background:linear-gradient(135deg,rgba(212, 160, 23,.3),rgba(212, 160, 23,.2));border:1px solid rgba(212, 160, 23,.3);border-radius:14px 0 14px 14px;padding:12px 14px;max-width:85%; }
.v4-bubble-text { font-size:13px;line-height:1.72;color:rgba(255,255,255,.7);font-family:var(--fd); }
.v4-bubble-text strong { color:#fff;font-weight:600; }

.v4-chat-input-bar { position:sticky;bottom:70px;background:rgba(2,4,8,.95);padding:10px 14px;backdrop-filter:blur(20px); }
.v4-msg-counter { text-align:center;font-size:10px;color:rgba(255,255,255,.2);font-family:var(--fd);letter-spacing:.08em;margin-top:8px; }

/* Typing */
@keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }

/* ── PROGRAMS SCREEN ─────────────────────────────────────────────────── */
.v4-prog-active { padding:18px;margin-bottom:12px; }
.v4-prog-active-label { font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-family:var(--fd);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px; }
.v4-prog-name { font-family:var(--fh);font-size:24px;letter-spacing:.06em;margin-bottom:2px; }
.v4-prog-bar { height:4px;background:rgba(255,255,255,.07);border-radius:2px;margin-bottom:6px;position:relative; }
.v4-prog-fill { height:100%;border-radius:2px;background:linear-gradient(90deg,#D4A017,#D4A017);box-shadow:0 0 8px #D4A017;position:relative;overflow:visible; }
.v4-prog-status { display:flex;justify-content:space-between;font-size:11px;font-family:var(--fd); }

/* Category filter pills */
.v4-cat-filter { display:flex;gap:7px;overflow-x:auto;padding:0 14px 12px;scrollbar-width:none;-ms-overflow-style:none; }
.v4-cat-filter::-webkit-scrollbar { display:none; }
.v4-cat-pill { flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid rgba(255, 255, 255,.22);background:rgba(26, 26, 28,.4);color:rgba(255,255,255,.5);font-family:var(--fh);font-size:12px;letter-spacing:.07em;cursor:pointer;transition:all .18s;white-space:nowrap;background:none;outline:none; }
.v4-cat-pill:hover { border-color:rgba(212, 160, 23,.45);color:rgba(255,255,255,.8); }
.v4-cat-pill.active { border-color:var(--cyan);background:rgba(212, 160, 23,.1);color:var(--cyan); }

/* Program grid (V4 2-col) */
.v4-prog-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px; }
.v4-prog-mini { padding:16px; }
.v4-prog-mini-cat { font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--fd);margin-bottom:6px; }
.v4-prog-mini-name { font-family:var(--fh);font-size:19px;margin-bottom:4px; }
.v4-prog-mini-meta { font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd); }

/* ── MODAL (V4) ─────────────────────────────────────────────────────── */
.v4-modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(12px);
  z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.v4-modal-overlay.open { opacity:1;pointer-events:all; }
.v4-modal-box {
  width:100%;max-width:440px;background:rgba(26, 26, 28, .95);
  border:1.5px solid rgba(212, 160, 23,.35);border-radius:20px;padding:22px;
  transform:scale(.93) translateY(20px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  max-height:85vh;overflow-y:auto;position:relative;
}
.v4-modal-overlay.open .v4-modal-box { transform:scale(1) translateY(0); }

/* ── ADD TO HOME SCREEN — install prompt (global) ────────────────────── */
#install-modal .v4-modal-box { max-width:400px; }
#install-modal { z-index: 10050 !important; }   /* above onboarding (9999): GET THE APP opens from its last screen */
#cpw-overlay.ob-mode { z-index: 10040; background: #0A0A0B; }   /* the builder, opened from onboarding: opaque over it */
.iap-badge { display:inline-block;font-family:var(--fd);font-size:10px;letter-spacing:.18em;font-weight:700;color:#F7D765;padding:4px 11px;border:1px solid rgba(212,160,23,.55);border-radius:999px;text-transform:uppercase;margin-bottom:16px; }
.iap-head { display:flex;align-items:center;gap:12px;margin-bottom:10px; }
.iap-appicon { width:46px;height:46px;border-radius:11px;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.55);background:#0A0A0B; }
.iap-title { font-family:var(--fh);font-size:16.5px;line-height:1.2;letter-spacing:.04em;color:var(--text-primary);font-weight:700;text-transform:uppercase; }
.iap-sub { font-family:var(--fd);font-size:13px;line-height:1.55;color:var(--text-secondary);margin-bottom:8px; }
.iap-arrow { display:flex;justify-content:center;color:#D4A017;margin:0 0 12px; }
.iap-steps { display:flex;flex-direction:column;gap:13px;margin-bottom:22px; }
.iap-step { display:flex;align-items:center;gap:11px; }
.iap-step-num { width:22px;height:22px;flex-shrink:0;border-radius:50%;border:1px solid rgba(212,160,23,.5);color:#F7D765;font-family:var(--fd);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center; }
.iap-step-ico { width:34px;height:34px;flex-shrink:0;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:rgba(250,250,247,.58); }
.iap-step-ico svg { width:19px;height:19px; }
.iap-step-txt { font-family:var(--fd);font-size:13.5px;line-height:1.4;color:var(--text-secondary); }
.iap-step-txt b { color:var(--text-primary);font-weight:700; }
.iap-btn-primary { width:100%;padding:15px;background:var(--btn-gold);color:#0A0A0B;border:none;border-radius:13px;font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 20px rgba(212,160,23,.35);transition:transform .12s ease; }
.iap-btn-primary:active { transform:translateY(1px); }
.iap-install-cta { margin-bottom:14px; }
/* The IRON app's phone picker: a small pill, not a full-width bar. */
.iap-tabs { display:inline-flex;gap:4px;margin:4px 0 12px;background:rgba(250,250,247,.06);border:1px solid rgba(250,250,247,.12);border-radius:999px;padding:3px; }
.iap-tab { min-height:30px;padding:0 14px;border:none;border-radius:999px;background:transparent;color:#8E8C87;font-family:'Oswald','Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer; }
.iap-tab.on { background:#FAFAF7;color:#1A1A1C; }
.iap-toggle { display:block;width:100%;text-align:center;margin-top:16px;background:none;border:none;color:var(--text-tertiary);font-family:var(--fd);font-size:12.5px;letter-spacing:.03em;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }

/* ── BARCODE SCANNER — Fuel logging (global) ─────────────────────────── */
#bsc-modal .v4-modal-box { max-width:420px; text-align:center; }
.bsc-title { font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:.04em;color:var(--text-primary);text-transform:uppercase;margin-bottom:3px; }
.bsc-sub { font-family:var(--font-mono),monospace;font-size:11px;letter-spacing:.1em;color:var(--text-tertiary);margin-bottom:16px;text-transform:uppercase; }
.bsc-viewport { position:relative;width:100%;aspect-ratio:4/3;max-height:320px;background:#000;border-radius:16px;overflow:hidden;margin-bottom:14px; }
#bsc-reader { width:100%;height:100%; }
#bsc-reader video { width:100%!important;height:100%!important;object-fit:cover;display:block; }
#bsc-reader #qr-shaded-region { display:none!important; }
#bsc-reader img { display:none!important; }
.bsc-frame { position:absolute;inset:0;pointer-events:none;z-index:2; }
.bsc-corner { position:absolute;width:34px;height:34px;border:3px solid #F7D765;filter:drop-shadow(0 0 6px rgba(212,160,23,.55)); }
.bsc-corner.tl { top:20%;left:11%;border-right:0;border-bottom:0;border-radius:8px 0 0 0; }
.bsc-corner.tr { top:20%;right:11%;border-left:0;border-bottom:0;border-radius:0 8px 0 0; }
.bsc-corner.bl { bottom:20%;left:11%;border-right:0;border-top:0;border-radius:0 0 0 8px; }
.bsc-corner.br { bottom:20%;right:11%;border-left:0;border-top:0;border-radius:0 0 8px 0; }
.bsc-hint { position:absolute;left:0;right:0;bottom:12px;z-index:3;font-family:var(--fd);font-size:12.5px;color:rgba(255,255,255,.92);text-shadow:0 1px 5px rgba(0,0,0,.85);letter-spacing:.03em; }
.bsc-state { padding:24px 6px; }
.bsc-spinner { width:34px;height:34px;border-radius:50%;border:3px solid rgba(212,160,23,.22);border-top-color:#F7D765;margin:0 auto 14px;animation:bscSpin .8s linear infinite; }
@keyframes bscSpin { to { transform:rotate(360deg); } }
.bsc-state-msg { font-family:var(--fd);font-size:14px;color:var(--text-secondary);line-height:1.55;margin-bottom:18px; }
.bsc-state-msg b { color:var(--text-primary);font-weight:700; }
.bsc-btn-primary { width:100%;padding:14px;background:var(--btn-gold);color:#0A0A0B;border:none;border-radius:12px;font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 18px rgba(212,160,23,.3);margin-bottom:10px;transition:transform .12s ease; }
.bsc-btn-primary:active { transform:translateY(1px); }
.bsc-btn-ghost { width:100%;padding:13px;background:none;color:var(--text-secondary);border:0.5px solid rgba(255,255,255,.14);border-radius:12px;font-family:var(--fh);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer; }
.bsc-cancel { display:block;width:100%;margin-top:2px;background:none;border:none;color:var(--text-tertiary);font-family:var(--fd);font-size:13px;letter-spacing:.04em;cursor:pointer;padding:6px; }
/* Scan-barcode entry button (search modal + legacy fuel) */
.bsc-scan-entry { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 18px;background:none;border:0.5px solid rgba(212,160,23,.45);border-radius:10px;color:#D4A017;font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer; }
.bsc-scan-entry svg { width:17px;height:17px;flex-shrink:0; }

/* ── PHOTO → MACROS (AI meal scan) ───────────────────────────────────── */
#pms-modal .v4-modal-box { max-width:420px; }
.pms-loading { text-align:center; padding:14px 6px 8px; }
.pms-thumb { width:100%; max-height:200px; object-fit:cover; border-radius:14px; display:block; margin-bottom:16px; border:0.5px solid rgba(255,255,255,0.08); }
.pms-thumb-sm { width:64px;height:64px;object-fit:cover;border-radius:12px;flex-shrink:0;border:0.5px solid rgba(255,255,255,0.1); }
.pms-analyzing { font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--text-primary);text-transform:uppercase; }
.pms-analyzing-sub { font-family:var(--fd);font-size:12.5px;color:var(--text-secondary);margin-top:5px; }
.pms-title-row { display:flex;align-items:center;gap:12px;margin-bottom:12px; }
.pms-food-name { font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:.02em;color:var(--text-primary);line-height:1.25; }
.pms-conf { display:inline-block;margin-top:6px;font-family:var(--fd);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px; }
.pms-conf.high { color:#0A0A0B;background:var(--btn-gold); }
.pms-conf.low  { color:var(--text-secondary);background:rgba(255,255,255,0.08);border:0.5px solid rgba(255,255,255,0.14); }
.pms-items { list-style:none;margin:0 0 14px;padding:12px 14px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.07);border-radius:12px;display:flex;flex-direction:column;gap:7px; }
.pms-item { display:flex;justify-content:space-between;gap:10px;font-family:var(--fd);font-size:13px;color:var(--text-secondary);line-height:1.35; }
.pms-item b { color:var(--text-primary);font-weight:600; }
.pms-macros { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px; }
.pms-macro { background:rgba(26,26,28,0.6);border:0.5px solid rgba(212,160,23,0.14);border-radius:10px;padding:10px 6px;text-align:center; }
.pms-macro-val { font-family:'Rajdhani',var(--fo),sans-serif;font-size:19px;line-height:1;color:var(--text-primary); }
.pms-macro-val.gold { color:#D4A017; }
.pms-macro-lbl { font-family:var(--fd);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-tertiary);margin-top:4px; }
.pms-notes { font-family:var(--fd);font-size:12px;color:var(--text-tertiary);line-height:1.5;margin-bottom:10px; }
.pms-disclaimer { font-family:var(--fd);font-size:10.5px;color:var(--text-tertiary);opacity:.85;line-height:1.4;margin-bottom:12px;letter-spacing:.02em; }
.pms-hint { font-family:var(--fd);font-size:12px;color:#D4A017;line-height:1.5;margin-bottom:14px;padding:9px 11px;background:rgba(212,160,23,0.08);border:0.5px solid rgba(212,160,23,0.25);border-radius:10px; }
.pms-btn-row { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.pms-btn-primary { grid-column:1 / -1;width:100%;padding:14px;background:var(--btn-gold);color:#0A0A0B;border:none;border-radius:12px;font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 18px rgba(212,160,23,.3);transition:transform .12s ease; }
.pms-btn-primary:active { transform:translateY(1px); }
.pms-btn-primary:disabled { opacity:.6;cursor:default; }
.pms-btn-ghost { padding:12px;background:none;color:var(--text-secondary);border:0.5px solid rgba(255,255,255,.14);border-radius:12px;font-family:var(--fh);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer; }

/* ── TRAIN / WORKOUT ─────────────────────────────────────────────────── */
/* Reuse wk- classes from existing workout code */

/* ── NUTRITION ───────────────────────────────────────────────────────── */
.v4-nutr-hero { padding:18px;margin-bottom:12px; }
.v4-nutr-ring-wrap { display:flex;align-items:center;gap:16px;margin-bottom:14px; }
.v4-nutr-ring { position:relative;width:90px;height:90px;flex-shrink:0; }
.v4-nutr-ring svg { width:90px;height:90px;transform:rotate(-90deg); }
.v4-nutr-ring-center { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.v4-nutr-pct { font-family:var(--fo);font-size:22px;line-height:1;color:#fff; }
.v4-mc4 { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.v4-mc4-card { background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.14);border-radius:10px;padding:10px 8px;text-align:center; }
.v4-mc4-val { font-family:var(--fo);font-size:20px;line-height:1; }
.v4-mc4-lbl { font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px; }

/* ── STRENGTH CHART CONTROLS ────────────────────────────────────────── */
.sc-pill{font-size:9px;letter-spacing:.1em;font-family:var(--fd);font-weight:700;border:1px solid rgba(212, 160, 23,.25);border-radius:12px;padding:3px 9px;cursor:pointer;transition:all .2s;touch-action:manipulation;line-height:1.4}
.sc-pill-on{background:rgba(212, 160, 23,.15);color:var(--cyan)}
.sc-pill-off{background:transparent;color:rgba(255,255,255,.3)}
.sc-pick-row{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.sc-pick-row:active{background:rgba(255,255,255,.03)}
.sc-pick-name{font-size:.84rem;color:rgba(255,255,255,.75);font-family:var(--fd);flex:1;padding-right:12px;line-height:1.35}
.sc-pick-pill{font-size:9px;letter-spacing:.1em;font-family:var(--fd);font-weight:700;border:1px solid rgba(212, 160, 23,.25);border-radius:12px;padding:4px 10px;color:rgba(212, 160, 23,.5);transition:all .2s;white-space:nowrap;flex-shrink:0;pointer-events:none}
.sc-pick-on{background:rgba(212, 160, 23,.15);color:var(--cyan);border-color:rgba(212, 160, 23,.5)}

/* ── UTILITIES ─────────────────────────────────────────────────────── */
.v4-toast { position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(26, 26, 28,.95);border:1px solid rgba(212, 160, 23,.3);border-radius:20px;padding:8px 18px;font-size:13px;font-family:var(--fd);color:#fff;opacity:0;transition:all .3s;pointer-events:none;z-index:9001;white-space:nowrap; }
.v4-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
/* Legacy toast */
.toast { position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(26, 26, 28,.95);border:1px solid rgba(212, 160, 23,.3);border-radius:20px;padding:8px 18px;font-size:13px;font-family:var(--fd);color:#fff;opacity:0;transition:all .3s;pointer-events:none;z-index:9001;white-space:nowrap; }
.toast.on { opacity:1;transform:translateX(-50%) translateY(0); }

/* ── LEGACY COMPAT: existing view styles that still work ───────────────── */
/* Keep old card styles as fallbacks */
.ccard { background:rgba(26, 26, 28,.62);backdrop-filter:blur(28px) saturate(160%);border:1.5px solid rgba(255, 255, 255,.28);border-radius:18px;padding:18px;margin-bottom:12px;box-shadow:inset 0 1px 0 rgba(212, 160, 23,.1),inset 0 0 40px rgba(255, 255, 255,.05);position:relative;overflow:hidden; }
.cclbl { font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-family:var(--fd);margin-bottom:8px;font-weight:700; }
.submit-btn { width:100%;padding:13px;background:linear-gradient(135deg,var(--cyan),var(--blue2));border:none;border-radius:12px;font-family:var(--fh);font-size:18px;letter-spacing:.12em;color:#000;cursor:pointer;transition:var(--t);box-shadow:0 0 20px rgba(212, 160, 23,.25);position:relative;overflow:hidden; }
.submit-btn:hover { transform:translateY(-1px);box-shadow:0 0 30px rgba(212, 160, 23,.4); }
.submit-btn:disabled { opacity:.4;cursor:not-allowed;transform:none; }

/* Profile form */
.prof-card { background:rgba(26, 26, 28,.62);border:1px solid rgba(255, 255, 255,.22);border-radius:14px;padding:16px;margin-bottom:12px; }
.plbl { font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd); }
.plbl2 { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);font-family:var(--fd);margin-bottom:5px;display:block; }
.pfield { display:flex;flex-direction:column;margin-bottom:10px; }
.pfld { width:100%;padding:9px 11px;background:rgba(255,255,255,.06);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:#fff;font-family:var(--fb);font-size:15px !important;outline:none;transition:border-color .2s; }
.pfld:focus { border-color:rgba(212, 160, 23,.5); }
.pselect { width:100%;padding:9px 11px;background:rgba(26, 26, 28,.8);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:#fff;font-family:var(--fb);font-size:14px !important;outline:none;-webkit-appearance:none; }
.pinput { width:100%;padding:9px 11px;background:rgba(26, 26, 28,.8);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:#fff;font-family:var(--fb);font-size:15px !important;outline:none;transition:border-color .2s;box-sizing:border-box; }
.pinput:focus { border-color:rgba(212, 160, 23,.5); }
.ptextarea { width:100%;padding:9px 11px;background:rgba(26, 26, 28,.8);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:#fff;font-family:var(--fb);font-size:15px !important;outline:none;transition:border-color .2s;box-sizing:border-box;min-height:80px;resize:vertical; }
.ptextarea:focus { border-color:rgba(212, 160, 23,.5); }
.pval { color:rgba(255,255,255,.7);font-family:var(--fb);font-size:15px; }
.prow { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05); }
.pgrid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.psave-btn { width:100%;padding:12px;background:linear-gradient(135deg,var(--cyan),var(--blue2));border:none;border-radius:10px;font-family:var(--fh);font-size:18px;letter-spacing:.1em;color:#000;cursor:pointer;margin-top:8px; }
.save-btn-prof { width:100%;padding:16px;background:linear-gradient(135deg,#D4A017,#D4A017);border:none;border-radius:12px;font-family:'Bebas Neue',var(--fh),sans-serif;font-size:18px;letter-spacing:.2em;color:#000;cursor:pointer;margin-top:8px;transition:all .2s;box-shadow:0 0 20px rgba(212, 160, 23,.25); }
.save-btn-prof:hover { transform:translateY(-1px);box-shadow:0 0 30px rgba(212, 160, 23,.4); }

/* Check-in form legacy */
.ci-view-inner { padding-bottom: 20px; }
.rbtn { min-width:40px;width:40px;padding:8px 2px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);font-family:var(--fb);font-size:14px;border-radius:8px;cursor:pointer;transition:all .15s;text-align:center;flex-shrink:0; }
.rbtn.sel { background:rgba(0,255,255,.2) !important;border-color:#D4A017 !important;color:#D4A017 !important;font-weight:700; }
.rating-row { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px; }
.fhint { font-size:.78rem;color:rgba(255,255,255,.4);margin-bottom:.65rem;font-family:var(--fd); }
.cinput { padding:7px 10px;background:#0f2040;border:1px solid rgba(0,255,255,.2);border-radius:8px;color:#fff;font-family:var(--fb);font-size:15px !important;outline:none;transition:border-color .2s;box-sizing:border-box;width:100%; }
.cinput:focus { border-color:rgba(0,255,255,.5); }
.cinput::placeholder { color:rgba(255,255,255,.3); }
.cin { flex:1;padding:12px;background:#0f2040 !important;border:1px solid rgba(0,255,255,.2) !important;border-radius:8px !important;color:#fff !important;font-family:var(--fb);font-size:15px !important;outline:none;transition:border-color .2s;box-sizing:border-box; }
.cin:focus { border-color:rgba(0,255,255,.5) !important; }
.cin::placeholder { color:rgba(255,255,255,.4) !important; }
/* Nutrition tool suggestion chips */
.qa-suggest { background:rgba(0,255,255,.08);border:1px solid rgba(0,255,255,.25);border-radius:20px;padding:6px 14px;color:rgba(255,255,255,.8);font-family:var(--fd);font-size:.78rem;cursor:pointer;transition:all .18s;white-space:nowrap; }
.qa-suggest:hover { background:rgba(0,255,255,.16);border-color:rgba(0,255,255,.5);color:#fff; }
/* Nutrition tool panel selects and inputs (Sample Day, High Protein) */
.nut-tool select, .nut-tool input[type="number"]:not(.cin) {
  background:#0f2040 !important;border:1px solid rgba(0,255,255,.2) !important;border-radius:8px !important;
  color:#fff !important;padding:8px 10px !important;font-family:inherit;font-size:.88rem !important;
  outline:none;-webkit-appearance:none;box-sizing:border-box;
}
.nut-tool select option { background:#0f2040;color:#fff; }
.finput { width:100%;padding:8px 10px;background:#0f2040;border:1px solid rgba(0,255,255,.2);border-radius:8px;color:#fff;font-family:var(--fb);font-size:.88rem;outline:none;transition:border-color .2s;box-sizing:border-box; }
.finput:focus { border-color:rgba(0,255,255,.5); }
.finput::placeholder { color:rgba(255,255,255,.3); }
.wt-inp { width:72px;padding:7px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255, 255, 255,.18);border-radius:6px;color:#fff;font-family:var(--fb);font-size:15px !important;outline:none;text-align:center; }
.fselect { font-family:var(--fb);font-size:.88rem;padding:.6rem .8rem;border:1px solid rgba(255, 255, 255,.2);background:rgba(26, 26, 28,.8);color:#fff;outline:none;width:100%;-webkit-appearance:none;border-radius:8px; }
.fselect:focus { border-color:var(--gold); }
.ftextarea { width:100%;padding:9px 11px;background:rgba(26, 26, 28,.8);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:#fff;font-family:var(--fb);font-size:.88rem;outline:none;transition:border-color .2s;box-sizing:border-box;min-height:72px;resize:vertical; }
.ftextarea:focus { border-color:rgba(212, 160, 23,.5); }
.ftextarea::placeholder { color:rgba(255,255,255,.3); }

/* ── CHECK-IN FORM CARD REDESIGN ─────────────────────────────────── */
.fwrap { display:flex;flex-direction:column; }
.fsection { background:rgba(26, 26, 28, .92);border:1px solid rgba(0,255,255,.15);border-radius:16px;padding:20px;margin-bottom:16px; }
.fsec-hdr { display:flex;align-items:center;gap:0;margin-bottom:14px; }
.fsec-num { font-family:'Bebas Neue',var(--fh),sans-serif;font-size:12px;letter-spacing:.2em;color:#D4A017;text-transform:uppercase;flex-shrink:0; }
.fsec-num::after { content:' · '; }
.fsec-title { font-family:'Bebas Neue',var(--fh),sans-serif;font-size:12px;letter-spacing:.2em;color:#D4A017;text-transform:uppercase;flex:1; }
.fsec-tag { font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);font-family:var(--fd);flex-shrink:0; }
.clabel-sm { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:4px;display:block; }
.day-grid7 { display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px; }
.avg-callout { display:flex;gap:24px;flex-wrap:wrap;padding:12px 14px;background:rgba(0,255,255,.04);border:1px solid rgba(0,255,255,.1);border-radius:10px;margin-top:10px; }
.avg-lbl { font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:3px; }
.avg-val { font-family:'Bebas Neue',var(--fh),sans-serif;font-size:20px;color:#fff;letter-spacing:.04em; }
.nophase { padding:14px 16px;background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.1);border-radius:10px;text-align:center; }
.nophase-t { font-family:var(--fh);font-size:14px;color:rgba(255,255,255,.35);margin-bottom:5px; }
.nophase-b { font-size:.78rem;color:rgba(255,255,255,.22);font-family:var(--fd);line-height:1.55; }
.flbl { font-size:.82rem;color:rgba(255,255,255,.65);font-family:var(--fb);margin-bottom:6px;display:block; }
.rating-labels { display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd);letter-spacing:.04em;margin-top:3px; }
.framing { background:rgba(0,255,255,.03);border:1px solid rgba(0,255,255,.1);border-left:3px solid rgba(0,255,255,.25);border-radius:10px;padding:14px 16px;margin-bottom:16px; }
.framing-headline { font-family:'Bebas Neue',var(--fh),sans-serif;font-size:18px;letter-spacing:.08em;color:#fff;margin-bottom:6px; }
.framing-body { font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.65;font-family:var(--fd); }
.phase-bar { background:rgba(26, 26, 28, .92);border:1px solid rgba(0,255,255,.12);border-radius:12px;padding:14px 16px;margin-bottom:16px; }
.phase-label { font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,255,255,.5);font-family:var(--fd);margin-bottom:8px; }
.phase-tabs { display:flex;gap:6px;flex-wrap:wrap; }
.phase-tab { padding:5px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:6px;font-family:var(--fd);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.4);cursor:pointer;transition:all .15s; }
.phase-tab.active { background:rgba(0,255,255,.12);border-color:rgba(0,255,255,.45);color:#D4A017; }
.fgrid { display:grid;gap:12px; }
.fgrid.one { grid-template-columns:1fr; }
.comp-grid { display:flex;gap:8px;flex-wrap:wrap; }
.nutblock { margin-bottom:10px; }
.nutblk-lbl { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:6px; }
.nutblk-grid { display:grid;gap:8px; }
.nutblk-2 { grid-template-columns:repeat(2,1fr); }
.nutblk-3 { grid-template-columns:repeat(3,1fr); }
.nutblk-4 { grid-template-columns:repeat(4,1fr); }
.submit-area { padding:8px 0 24px; }
.submit-note { font-size:.78rem;color:rgba(255,255,255,.3);font-family:var(--fd);line-height:1.55;margin-bottom:14px;text-align:center; }
.success-banner { background:rgba(212, 160, 23,.07);border:1px solid rgba(212, 160, 23,.25);border-radius:12px;padding:22px 20px;text-align:center;margin-top:12px;display:none; }
.success-banner h3 { font-family:'Bebas Neue',var(--fh),sans-serif;font-size:22px;letter-spacing:.1em;color:var(--green);margin:0 0 8px; }
.success-banner p { font-size:.82rem;color:rgba(255,255,255,.45);font-family:var(--fd);line-height:1.6;margin:0; }

.gold { color:var(--gold); }
.red { color:var(--red); }
.green { color:var(--green); }
.cyan { color:var(--cyan); }

/* Nav legacy buttons (hidden in V4, but need to exist for showView targeting) */
.nav-btn { display:none; }
.topbar { display:none; }

/* BioGen styles */
.prog-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:0 14px; }

/* ── BIOGEN ATLAS SCREEN ────────────────────────────────────────────────── */
body.tab-biogen { background: transparent; }
.cta-iron {
  background: var(--btn-gold);
  color: #0A0A0B; font-family: var(--fh); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; border: none;
  border-radius: 12px; width: 100%; height: 52px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.cta-iron-ghost {
  background: transparent; color: var(--iron); font-family: var(--fh);
  font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  border: 0.5px solid rgba(212,160,23,0.4); border-radius: 12px; width: 100%;
  height: 48px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; text-decoration: none;
}
.biogen-prog-card { display:flex; align-items:center; gap:12px; padding:16px; cursor:pointer; position:relative; min-height:72px; }
.biogen-prog-icon { width:44px; height:44px; border-radius:12px; background:rgba(212,160,23,0.10); border:0.5px solid rgba(212,160,23,0.22); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.biogen-prog-badge { position:absolute; top:14px; right:14px; background:linear-gradient(135deg,#D4A017,#D4A017); color:#0A0A0B; font-size:9px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; padding:3px 8px; border-radius:20px; font-family:var(--fh); }
.biogen-step-card { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; background:rgba(212,160,23,0.04); border:0.5px solid rgba(212,160,23,0.12); border-radius:12px; margin-bottom:8px; }
.biogen-step-num { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#D4A017,#D4A017); color:#0A0A0B; font-size:11px; font-weight:700; font-family:var(--fh); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.biogen-detail-panel { display:none; position:fixed; inset:0; background:#0A0A0B; z-index:300; overflow-y:auto; padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
/* BioGen LEARN section */
.biogen-learn-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.biogen-learn-card { background:linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(10, 10, 11,0.04) 60%, rgba(10, 10, 11,0.02) 100%); border:0.5px solid rgba(255,255,255,0.14); backdrop-filter:blur(18px); border-radius:14px; padding:16px 14px; min-height:110px; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; position:relative; overflow:hidden; }
.biogen-learn-icon { width:32px; height:32px; border-radius:10px; background:rgba(212,160,23,0.10); border:0.5px solid rgba(212,160,23,0.22); display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px; flex-shrink:0; }
.biogen-compound-card { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; position:relative; }
.biogen-bullet-iron { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.biogen-bullet-iron::before { content:""; width:6px; height:6px; border-radius:50%; background:#D4A017; flex-shrink:0; margin-top:6px; }
.biogen-bullet-grey { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.biogen-bullet-grey::before { content:""; width:6px; height:6px; border-radius:50%; background:#8a99ad; flex-shrink:0; margin-top:6px; }
.prog-card { background:rgba(26, 26, 28,.62);border:1.5px solid rgba(255, 255, 255,.22);border-radius:14px;padding:18px 20px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden; }
.prog-card::after { content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transition:transform .2s;transform-origin:bottom; }
.prog-card:hover { border-color:rgba(240,192,64,.35);transform:translateY(-2px); }
.prog-card:hover::after { transform:scaleY(1); }
.prog-card-selected { border-color:var(--gold) !important;box-shadow:0 0 0 1px var(--gold); }
.prog-card-selected::after { transform:scaleY(1) !important; }
.prog-card-selected .prog-card-title { color:var(--gold); }
.prog-card-title { font-family:var(--fh);font-size:1rem;font-weight:700;color:#fff;letter-spacing:.03em;margin-bottom:.2rem; }
.prog-card-sub { font-family:var(--fd);font-size:.65rem;letter-spacing:.1em;color:rgba(255,255,255,.35);text-transform:uppercase;margin-bottom:.75rem; }
.prog-card-desc { font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.6; }
.prog-card-tags { display:flex;gap:6px;flex-wrap:wrap;margin-top:.75rem; }
.prog-phase-label { font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:.4rem; }
.prog-tag { font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.45);font-family:var(--fd);border-radius:3px; }

/* Learn */
.lesson-card { background:rgba(26, 26, 28,.62);border:1px solid rgba(255, 255, 255,.18);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden; }
.lesson-card:hover { border-color:rgba(212, 160, 23,.35);transform:translateY(-1px); }
.lesson-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:800;overflow-y:auto;padding:20px; }

/* Video cards */
.video-grid { display:flex;flex-direction:column;gap:8px; }
.vcat-label { font-family:var(--fd);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:8px; }
.video-card { background:rgba(26, 26, 28,.62);border:1px solid rgba(255, 255, 255,.18);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s;display:flex;flex-direction:row;align-items:stretch; }
.video-card:hover { border-color:rgba(212, 160, 23,.35);transform:translateY(-1px); }
.video-thumb { width:110px;min-width:110px;height:62px;object-fit:cover; }
.video-thumb-placeholder { width:110px;min-width:110px;height:62px;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center; }
.video-play-btn { width:32px;height:32px;border-radius:50%;background:rgba(212, 160, 23,.2);border:1px solid rgba(212, 160, 23,.4);display:flex;align-items:center;justify-content:center; }
.video-card-body { flex:1;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0; }
.video-card-cat { font-family:var(--fd);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);opacity:.7;margin-bottom:2px; }
.video-card-title { font-family:var(--fb);font-size:.82rem;color:#fff;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.video-card-desc { font-size:.72rem;color:rgba(255,255,255,.4);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* Mindset */
.habit-btn { width:100%;padding:14px;background:rgba(26, 26, 28,.62);border:1.5px solid rgba(255, 255, 255,.22);border-radius:12px;color:#fff;font-family:var(--fh);font-size:18px;letter-spacing:.08em;cursor:pointer;transition:all .2s;margin-bottom:8px; }
.habit-btn:hover { border-color:rgba(212, 160, 23,.45); }
.habit-btn.done { background:rgba(212, 160, 23,.1);border-color:rgba(212, 160, 23,.35);color:var(--green); }

/* Section title generic */
.sec-title { font-family:var(--fh);font-size:19px;letter-spacing:.08em;color:#fff; }
.sec-sub { font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd); }
.sec-hdr { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px; }
.sec-action { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);font-family:var(--fd);font-weight:600;cursor:pointer; }

/* Nutrition tools */
.nut-tool-btn { padding:8px 14px;background:rgba(26, 26, 28,.5);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:rgba(255,255,255,.5);font-family:var(--fd);font-size:.82rem;cursor:pointer;transition:all .15s; }
.nut-tool-btn:hover,.nut-tool-btn.active { background:rgba(212, 160, 23,.1);border-color:rgba(212, 160, 23,.35);color:var(--cyan); }
.nut-tool { display:none; }
.nut-tool.on { display:block; }
.nut-ai-output { background:rgba(26, 26, 28,.5);border:1px solid rgba(255, 255, 255,.18);border-radius:10px;padding:14px;font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.75);font-family:var(--fd); }

/* Challenge */
.ch-card { background:rgba(26, 26, 28,.62);border:1.5px solid rgba(255, 255, 255,.22);border-radius:14px;padding:20px;margin-bottom:12px; }

/* Workout modals compat */
.wk-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(14px);z-index:700;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s; }
.wk-modal-overlay.open { opacity:1;pointer-events:all; }
.wk-modal-box { width:100%;max-width:440px;background:rgba(26, 26, 28, .97);border:1.5px solid rgba(212, 160, 23,.35);border-radius:20px;padding:22px;transform:scale(.93) translateY(20px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);position:relative;max-height:85vh;overflow-y:auto; }
.wk-modal-overlay.open .wk-modal-box { transform:scale(1) translateY(0); }
.wk-modal-title { font-family:var(--fh);font-size:20px;letter-spacing:.06em;margin-bottom:4px;padding-right:36px;color:#fff; }
.wk-modal-sub { font-size:12px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:16px; }
.wk-modal-close { position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:rgba(255,255,255,.5);transition:var(--t); }
.wk-modal-close:hover { background:rgba(255,255,255,.14);color:#fff; }

/* ── CUSTOM PROGRAM WIZARD MODAL ─────────────────────────────────────── */
#cpw-overlay {
  position:fixed;inset:0;z-index:9500;
  background:rgba(26, 26, 28, .97);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
  overflow:hidden;
}
#cpw-overlay.open { opacity:1;pointer-events:auto; }
#cpw-overlay.open * { pointer-events:auto; }
#cpw-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:env(safe-area-inset-top,16px) 20px 14px;
  border-bottom:1px solid rgba(212, 160, 23,.12);
  flex-shrink:0;
}
#cpw-title-block { display:flex;flex-direction:column;gap:2px; }
#cpw-label { font-family:var(--fh);font-size:11px;letter-spacing:.18em;color:rgba(212, 160, 23,.55); }
#cpw-step-label { font-family:var(--fo);font-size:12px;color:rgba(255,255,255,.4);letter-spacing:.06em; }
#cpw-close-btn {
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:rgba(255,255,255,.5);transition:var(--t);
  flex-shrink:0;
}
#cpw-close-btn:hover { background:rgba(255,255,255,.14);color:#fff; }
#cpw-progress-bar {
  width:100%;height:3px;background:rgba(255,255,255,.08);flex-shrink:0;
}
#cpw-progress-fill {
  height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue2));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
#cpw-body {
  flex:1;overflow-y:auto;padding:28px 20px 24px;
  display:flex;flex-direction:column;
}
#cpw-question-text {
  font-family:var(--fh);font-size:clamp(22px,5.5vw,30px);
  letter-spacing:.04em;color:#fff;line-height:1.25;
  margin-bottom:24px;flex-shrink:0;
}
#cpw-options { display:flex;flex-direction:column;gap:10px;flex:1; }
.cpw-option {
  width:100%;padding:14px 18px;text-align:left;
  background:rgba(26, 26, 28,.55);
  border:1.5px solid rgba(255, 255, 255,.2);border-radius:12px;
  color:rgba(255,255,255,.75);font-family:var(--fb);font-size:17px;
  cursor:pointer;transition:all .18s;
}
.cpw-option:hover { border-color:rgba(212, 160, 23,.5);color:#fff;background:rgba(212, 160, 23,.07); }
.cpw-option.selected {
  border-color:var(--cyan);background:rgba(212, 160, 23,.12);
  color:var(--cyan);font-weight:600;
}
#cpw-other-field {
  margin-top:10px;
  padding:12px 14px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(212, 160, 23,.3);border-radius:10px;
  color:#fff;font-family:var(--fb);font-size:16px;outline:none;width:100%;
  display:none;
}
#cpw-textarea {
  width:100%;min-height:120px;padding:14px;
  background:rgba(26, 26, 28,.7);border:1.5px solid rgba(255, 255, 255,.25);border-radius:12px;
  color:#fff;font-family:var(--fb);font-size:16px;resize:vertical;outline:none;
  line-height:1.5;
}
#cpw-textarea:focus { border-color:var(--cyan); }
#cpw-char-hint { font-size:12px;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:6px;text-align:right; }
#cpw-summary { display:none;flex-direction:column;gap:0; }
.cpw-summary-row {
  display:flex;gap:10px;padding:10px 0;
  border-bottom:1px solid rgba(255, 255, 255,.1);align-items:flex-start;
}
.cpw-summary-row:last-child { border-bottom:none; }
.cpw-summary-q { font-family:var(--fd);font-size:12px;color:rgba(255,255,255,.4);flex:1;min-width:0; }
.cpw-summary-a { font-family:var(--fb);font-size:14px;color:var(--cyan);text-align:right;flex-shrink:0;max-width:55%; }
#cpw-footer {
  padding:14px 20px env(safe-area-inset-bottom,20px);
  border-top:1px solid rgba(212, 160, 23,.1);
  display:flex;gap:10px;flex-shrink:0;
}
#cpw-back-btn {
  padding:13px 20px;background:rgba(255,255,255,.88);
  border:none;border-radius:12px;
  color:#1A1A1C !important;font-family:var(--fh);font-size:15px;letter-spacing:.08em;
  cursor:pointer;transition:var(--t);white-space:nowrap;
}
#cpw-back-btn:hover { background:rgba(255,255,255,1); }
#cpw-next-btn {
  flex:1;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--blue2));
  border:none;border-radius:12px;color:#000 !important;
  font-family:var(--fh);font-size:17px;letter-spacing:.1em;font-weight:700;
  cursor:pointer;transition:var(--t);box-shadow:0 0 20px rgba(212, 160, 23,.3);
}
#cpw-next-btn:hover { box-shadow:0 0 30px rgba(212, 160, 23,.45);transform:translateY(-1px); }
#cpw-next-btn:disabled { opacity:.35;cursor:not-allowed;transform:none;pointer-events:none; }
.cpw-option { touch-action:manipulation; }
#cpw-next-btn, #cpw-back-btn { touch-action:manipulation; }

/* ── Custom Program Build Progress Overlay ── */
#cp-progress-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cp-progress-card {
  background: linear-gradient(180deg, rgba(212, 160, 23,0.08), rgba(0,0,0,0.6));
  border: 1px solid rgba(212, 160, 23,0.25);
  border-radius: 18px; padding: 32px 24px;
  max-width: 360px; width: 100%; text-align: center;
}
.cp-progress-title {
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 2px; color: #D4A017; margin-bottom: 16px;
}
.cp-progress-status {
  font-family: 'Rajdhani', sans-serif; font-size: 16px; color: #fff;
  margin-bottom: 24px; min-height: 24px;
}
.cp-progress-bar-track {
  height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden; margin-bottom: 12px;
}
.cp-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4A017, #D4A017);
  transition: width 0.4s ease;
}
.cp-progress-counter {
  font-family: 'Rajdhani', sans-serif; font-size: 13px;
  color: #888; letter-spacing: 1px;
}
.cp-progress-leave {
  font-family: 'Rajdhani', sans-serif; font-size: 13px;
  color: rgba(255,255,255,0.5); margin-top: 20px; line-height: 1.4;
}
.cp-progress-leave-btn { margin-top: 12px; }
/* End-of-block offer on Train */
.wk-block-offer {
  margin: 0 0 14px; padding: 16px;
  background: rgba(212, 160, 23,0.06); border: 1px solid rgba(212, 160, 23,0.3);
  border-radius: 14px;
}
.wk-block-offer-title {
  font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; color: #D4A017; margin-bottom: 6px;
}
.wk-block-offer-sub {
  font-family: 'Rajdhani', sans-serif; font-size: 15px; color: rgba(255,255,255,0.85);
  line-height: 1.4; margin-bottom: 12px;
}
.wk-block-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Demo videos are YouTube Shorts (9:16). Portrait frame, full content width, capped at 56vh so a
   3-line Coaching Notes card still fits under it on a 390x844 phone without scrolling (60vh clipped it
   by 27px) — when the cap bites, width follows height to hold 9:16. */
.wk-video-frame { width:min(100%, calc(56vh * 9 / 16));aspect-ratio:9/16;max-height:56vh;margin:0 auto;background:rgba(0,0,0,.5);border-radius:12px;overflow:hidden; }
.wk-video-frame iframe,.wk-video-frame video { width:100%;height:100%;border:none; }
.wk-video-placeholder { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.3);font-family:var(--fd);font-size:13px;padding:20px;text-align:center; }
.wk-video-placeholder-icon { font-size:28px;opacity:.4;margin-bottom:4px; }
.wk-video-placeholder-title { font-family:var(--fh);font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.35); }
.wk-video-placeholder-sub { font-size:12px;color:rgba(255,255,255,.2);line-height:1.5;max-width:220px; }
.wk-video-notes { margin-top:14px;padding:12px 14px;background:rgba(212, 160, 23,.04);border:1px solid rgba(212, 160, 23,.12);border-radius:10px; }
.wk-video-notes-label { font-family:var(--fd);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(212, 160, 23,.5);margin-bottom:6px; }
.wk-video-notes-text { font-size:14px;color:rgba(255,255,255,.7);line-height:1.6; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media(max-width:480px) {
  .v4-kpi-val { font-size:32px; }
}

/* ── Weekly Signal bar grid overrides ──────────────────────────────── */
#sig-day-labels div { font-size: 11px !important; }
#sig-grid-0 > div, #sig-grid-1 > div, #sig-grid-2 > div { height: 5px !important; border-radius: 2px !important; }

/* ── LIBRARY SCREEN ────────────────────────────────────────────── */
.filter-chip { padding:7px 14px; border-radius:20px; border:0.5px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); color:var(--text-tertiary); font-family:var(--fh); font-size:12px; font-weight:500; letter-spacing:.04em; cursor:pointer; white-space:nowrap; }
.lib-tabs { display:flex; gap:6px; margin-bottom:16px; background:rgba(255,255,255,0.04); border:0.5px solid rgba(255,255,255,0.12); border-radius:12px; padding:4px; }
.lib-tab { flex:1; text-align:center; padding:9px 0; border-radius:9px; font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--text-tertiary); cursor:pointer; transition:all 0.2s ease; }
.lib-tab.active { background:rgba(212, 160, 23,0.10); border:0.5px solid rgba(212, 160, 23,0.30); color:var(--text-primary); box-shadow:0 0 8px rgba(212, 160, 23,0.10); }
.lib-pane { display:none; }
.lib-pane.active { display:block; }
.lib-chips { display:flex; gap:6px; overflow-x:auto; margin-bottom:18px; padding-bottom:4px; scrollbar-width:none; }
.lib-chips::-webkit-scrollbar { display:none; }
.lib-chips .filter-chip { flex-shrink:0; }
.lib-chips .filter-chip.active { background:rgba(212, 160, 23,0.12); border-color:rgba(212, 160, 23,0.45); color:var(--signal); }
.lib-section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-tertiary); font-weight:600; padding:0 4px 10px; }
.lib-article { padding:14px 16px; margin-bottom:8px; cursor:pointer; }
.lib-article-row { display:flex; gap:14px; align-items:flex-start; }
.lib-thumb { width:44px; height:44px; border-radius:11px; background:rgba(255,255,255,0.06); border:0.5px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.lib-thumb.signal { background:rgba(212, 160, 23,0.10); border-color:rgba(212, 160, 23,0.25); }
.lib-thumb.fuel   { background:rgba(212, 160, 23,0.08); border-color:rgba(212, 160, 23,0.20); }
.lib-thumb.train  { background:rgba(212, 160, 23,0.08); border-color:rgba(212, 160, 23,0.20); }
.lib-thumb.knox   { background:rgba(212, 160, 23,0.08); border-color:rgba(212, 160, 23,0.20); }
.lib-tag { font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:600; margin-bottom:4px; }
.lib-title { font-size:14px; font-weight:500; line-height:1.35; color:var(--text-primary); margin-bottom:4px; }
.lib-sub { font-size:12px; color:var(--text-tertiary); line-height:1.45; margin-bottom:6px; }
.lib-meta { font-size:10px; color:var(--text-tertiary); letter-spacing:.05em; display:flex; align-items:center; gap:4px; text-transform:uppercase; margin-top:4px; }
.lib-meta-dot { margin:0 2px; color:var(--text-tertiary); opacity:0.5; }
.lib-detail-back { display:flex;align-items:center;gap:6px;background:none;border:none;color:rgba(255,255,255,.45);font-family:var(--fh);font-size:13px;letter-spacing:.06em;cursor:pointer;padding:0;margin-bottom:18px; }
.lib-detail-back:hover { color:var(--cyan); }
.lib-detail-body { font-size:.9rem;line-height:1.85;color:rgba(255,255,255,.78); }
.lib-detail-body p { margin:0 0 1em; }
.lib-detail-body strong { color:#fff; }
.lib-detail-body ul { padding-left:1.4em;margin:0 0 1em; }
.lib-detail-body li { margin-bottom:.4em; }
.lib-video { margin-bottom:8px; cursor:pointer; overflow:hidden; }
.lib-video-thumb { height:160px; background:linear-gradient(135deg,rgba(212, 160, 23,0.18),rgba(212, 160, 23,0.12)); display:flex; align-items:center; justify-content:center; position:relative; }
.lib-video-play { width:52px; height:52px; border-radius:50%; background:rgba(26, 26, 28,0.7); border:0.5px solid rgba(255,255,255,0.30); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; color:var(--text-primary); font-size:18px; padding-left:4px; }
.lib-video-duration { position:absolute; bottom:10px; right:12px; padding:3px 8px; border-radius:4px; background:rgba(26, 26, 28,0.7); backdrop-filter:blur(8px); font-family:var(--fo); font-size:10px; color:var(--text-primary); letter-spacing:.05em; }
.lib-video-row { display:flex; gap:12px; align-items:center; padding:12px 14px; }
.lib-video-thumb-sm { width:64px; height:64px; border-radius:10px; background:linear-gradient(135deg,rgba(212, 160, 23,0.15),rgba(212, 160, 23,0.10)); border:0.5px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lib-video-play-sm { width:28px; height:28px; border-radius:50%; background:rgba(26, 26, 28,0.7); border:0.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:var(--text-primary); font-size:11px; padding-left:2px; }
.streak-dot { flex:1; height:12px; border-radius:50%; background:rgba(255,255,255,0.10); border:0.5px solid rgba(255,255,255,0.15); max-width:14px; aspect-ratio:1; }
.streak-dot.done  { background:rgba(212, 160, 23,0.60); border-color:rgba(212, 160, 23,0.70); box-shadow:0 0 6px rgba(212, 160, 23,0.40); }
.streak-dot.today { background:transparent; border:1px dashed rgba(217,119,6,0.7); }
.streak-btn { padding:12px; border-radius:11px; border:0.5px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04); color:var(--text-secondary); font-family:var(--fh); font-size:11px; font-weight:600; letter-spacing:.08em; cursor:pointer; transition:all 0.15s ease; }
.streak-btn-done.active { background:rgba(212, 160, 23,0.15); border-color:rgba(212, 160, 23,0.50); color:var(--fuel); box-shadow:0 0 10px rgba(212, 160, 23,0.15); }
.streak-btn-miss.active { background:rgba(255,107,107,0.10); border-color:rgba(255,107,107,0.40); color:rgba(255,107,107,0.85); }


/* V4 chat message aliases for existing renderMsgs() output */
.msg { display:flex; gap:10px; align-items:flex-start; }
.mu { flex-direction:row-reverse; }
.mava {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-family:var(--fh); font-size:11px; color:#000;
}
.mu .mava { background:linear-gradient(135deg,var(--gold),var(--blue2)); }
.mc .mava { background:linear-gradient(135deg,var(--cyan),var(--blue2)); }
.bbl {
  padding:12px 14px; max-width:85%; font-size:13px;
  line-height:1.72; font-family:var(--fd);
}
.mc .bbl {
  background:rgba(26, 26, 28,.7); border:1px solid rgba(212, 160, 23,.2);
  border-radius:0 14px 14px 14px; color:rgba(255,255,255,.7);
}
.mu .bbl {
  background:linear-gradient(135deg,rgba(212, 160, 23,.3),rgba(212, 160, 23,.2));
  border:1px solid rgba(212, 160, 23,.3);
  border-radius:14px 0 14px 14px; color:rgba(255,255,255,.85);
}
.bbl strong { color:#fff; font-weight:600; }
/* ── .kx-md — the ONE look for rendered Knox markdown (chat + Fuel tools) ── */
.kx-md p { margin:0 0 .6em; }
.kx-md p:last-child, .kx-md ul:last-child, .kx-md ol:last-child { margin-bottom:0; }
.kx-md h2, .kx-md h3, .kx-md h4 { font-family:'Manrope',sans-serif; color:var(--text-primary,#fff); line-height:1.3; margin:.9em 0 .35em; }
.kx-md h2:first-child, .kx-md h3:first-child, .kx-md h4:first-child { margin-top:0; }
.kx-md h2 { font-size:1.08em; font-weight:700; }
.kx-md h3 { font-size:1em; font-weight:700; }
.kx-md h4 { font-size:.96em; font-weight:700; }
.kx-md ul, .kx-md ol { margin:0 0 .6em; padding-left:1.25em; }
.kx-md li { margin:0 0 .25em; }
.kx-md li:last-child { margin-bottom:0; }
.kx-md strong { color:#D4A017; font-weight:700; }
.kx-md em { color:#ffd060; font-style:italic; }
.kx-md code { font-family:'DM Mono',monospace; font-size:.9em; background:rgba(255,255,255,.06); padding:0 .3em; border-radius:4px; }
.kx-md hr { border:0; border-top:1px solid #D4A017; margin:.8em 0; }
/* Typing indicator */
.typing { display:flex; gap:5px; align-items:center; }
.typing span { width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay:.2s; }
.typing span:nth-child(3) { animation-delay:.4s; }
@keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }


/* ── KX (Coach Knox) Manus Design ───────────────────────────────────── */
#v4-screen-knox {
  flex-direction: column !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: unset !important;
}
#v4-screen-knox.v4-screen-visible {
  display: flex !important;
}

/* ── KNOX ATLAS VISUAL SYSTEM ── */

/* Header */
.kx-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
  background: rgba(26, 26, 28,0.95);
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
}
.kx-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kx-avatar {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #0A0A0B;
  letter-spacing: 0.1em;
}
.kx-header-titles { flex: 1; min-width: 0; }
.kx-title {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.kx-ai-badge {
  display: block;
  margin-top: 3px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
.kx-ai-badge::before { display: none; }
.kx-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.kx-icon-btn:active { background: rgba(212, 160, 23,0.12); color: var(--knox); }

/* Brief card (wraps context chips) */
.kx-context-strip {
  flex-shrink: 0;
  margin: 8px 14px 0;
  padding: 12px 14px;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.kx-context-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5) 50%, transparent);
  opacity: 0.7;
  pointer-events: none;
}
.kx-ctx-rows { display: flex; flex-direction: column; gap: 7px; }
.kx-ctx-row { display: flex !important; justify-content: flex-start !important; align-items: center; gap: 10px !important; width: auto !important; }
.kx-ctx-label { font-family: 'Manrope', sans-serif; font-size: 11px; color: rgba(255,255,255,0.35); letter-spacing: 0.06em; flex: 0 0 auto !important; margin-right: 0 !important; }
.kx-ctx-value { font-family: 'Manrope', sans-serif; font-size: 11px; color: rgba(255,255,255,0.88); font-weight: 600; flex: 0 0 auto !important; margin-left: 0 !important; }

/* Messages — flex:1 scrolling area */
#v4-screen-knox #msgs {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 160, 23,0.18) transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 10px;
  min-height: 0;
}
#v4-screen-knox #msgs::-webkit-scrollbar { width: 3px; }
#v4-screen-knox #msgs::-webkit-scrollbar-thumb { background: rgba(212, 160, 23,0.2); border-radius: 3px; }

/* Knox bubble: exact v4-card (Fuel Hero) surface treatment */
#v4-screen-knox .mc .bbl {
  position: relative;
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 16px;
  padding: 11px 14px;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.65;
  overflow: hidden;
}
#v4-screen-knox .mc .bbl::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--knox) 50%, transparent);
  opacity: 0.7;
  pointer-events: none;
}
#v4-screen-knox .mc .bbl strong { color: var(--knox); font-weight: 700; }
#v4-screen-knox .mc .bbl em { color: var(--fuel); font-style: italic; }
/* User bubble */
#v4-screen-knox .mu .bbl {
  border: 0.5px solid rgba(255,255,255,0.12);
  border-right: 1.5px solid rgba(212, 160, 23,0.4);
  background: rgba(255,255,255,0.06);
  border-radius: 14px 0 14px 14px;
  color: var(--text-primary);
  padding: 11px 14px;
}

/* Bottom panel */
.kx-bottom {
  flex-shrink: 0;
  background: rgba(26, 26, 28,0.97);
  border-top: 0.5px solid rgba(255,255,255,0.1);
  padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* Mode tabs — 4-column Atlas grid */
.kx-modes {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.kx-mode-btn {
  flex: unset;
  padding: 10px 0;
  border-radius: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  white-space: nowrap;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.18);
  color: var(--text-secondary);
}
/* Inactive: unified dark glass */
.kx-mode-btn[data-mode] { background: rgba(26, 26, 28, 0.5); border-color: rgba(255,255,255,0.06); color: rgba(255,255,255,0.45); }
/* Active: Knox purple gradient — same for all four */
.kx-mode-btn.active { background: linear-gradient(135deg,#D4A017,#D4A017) !important; border: none !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 2px 12px rgba(212, 160, 23,0.35) !important; }

/* Quick replies → horizontal scroll suggestion row */
.kx-quick-replies {
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  align-items: center;
  scroll-snap-type: x mandatory;
  flex-shrink: 0;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.kx-quick-replies::-webkit-scrollbar { display: none; }
/* Override renderMsgs() inline button styles — horizontal card format */
#qrow button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  height: auto !important;
  min-width: 200px !important;
  max-width: 240px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 0.5px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  scroll-snap-align: start !important;
  text-align: left !important;
  position: relative !important;
}
/* Rotating pillar top accent lines */
#qrow button::before {
  content: '';
  position: absolute;
  top: 0; left: 16%; right: 16%; height: 1px;
  pointer-events: none;
}
#qrow button:nth-child(1)::before,
#qrow button:nth-child(4)::before { background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5) 50%, transparent); }
#qrow button:nth-child(2)::before,
#qrow button:nth-child(5)::before { background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5) 50%, transparent); }
#qrow button:nth-child(3)::before { background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5) 50%, transparent); }

/* Usage / message counter */
.kx-usage { padding: 2px 14px 4px; text-align: center; }
.kx-usage span {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  letter-spacing: .03em;
}

/* Glass input pill */
.kx-input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 2px 12px 10px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 999px;
}
.kx-voice-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, color .2s;
  padding: 0;
}
.kx-voice-btn:active { background: rgba(212, 160, 23,0.12); color: var(--knox); }
.kx-textarea {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 13px;
  font-family: 'Manrope', sans-serif;
  color: var(--text-primary);
  outline: none;
  resize: none;
  line-height: 1.5;
  min-height: 20px;
  max-height: 100px;
  overflow-y: auto;
  display: block;
}
.kx-textarea::placeholder { color: var(--text-tertiary); }
.kx-textarea:focus { outline: none; }
.kx-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--btn-gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s;
  color: #0A0A0B;
  padding: 0;
}
.kx-send-btn:active { transform: scale(0.91); }


/* Workout screen button compat */
.wk-btn-primary{width:100%;padding:14px;background:var(--btn-gold);border:none;border-radius:14px;font-family:var(--fh);font-size:18px;letter-spacing:.12em;color:#000;cursor:pointer;transition:var(--t);box-shadow:0 0 24px rgba(212, 160, 23,.3);margin-bottom:12px;}
.wk-btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(212, 160, 23,.45);}
.wk-btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.wk-btn-ghost{padding:8px 14px;background:transparent;border:1px solid rgba(212, 160, 23,.22);border-radius:8px;color:rgba(212, 160, 23,.7);font-family:var(--fh);font-size:13px;letter-spacing:.08em;cursor:pointer;transition:var(--t);}
.wk-btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);}

/* Workout screen structural */
.wk-top-header{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top, 0px)) 14px 0;margin-bottom:16px;}
.wk-logo{font-family:var(--fh);font-size:26px;letter-spacing:.08em;display:flex;align-items:center;color:#fff;gap:7px;}.wk-logo img{height:auto;}
.wk-logo-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;display:inline-block;margin-left:3px;margin-bottom:2px;box-shadow:0 0 8px var(--gold);}
.wk-header-sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28);font-family:var(--fd);margin-top:2px;}
.wk-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 14px;margin-bottom:10px;}
.wk-sec-title{font-family:var(--fh);font-size:19px;letter-spacing:.08em;color:#fff;}
.wk-sec-sub{font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd);}
.wk-loading-state{text-align:center;padding:40px 0;color:rgba(255,255,255,.3);font-family:var(--fd);}
.wk-loading-ring{width:32px;height:32px;border:2px solid rgba(212, 160, 23,.2);border-top-color:var(--cyan);border-radius:50%;animation:cp-spin 1s linear infinite;margin:0 auto 12px;}
.wk-loading-text{font-size:.82rem;color:rgba(255,255,255,.3);font-family:var(--fd);}
.wk-empty-state{text-align:center;padding:40px 20px;}
.wk-empty-title{font-family:var(--fh);font-size:22px;letter-spacing:.06em;color:rgba(255,255,255,.2);margin-bottom:8px;}
.wk-empty-sub{font-size:.82rem;color:rgba(255,255,255,.2);font-family:var(--fd);}
@keyframes cp-spin{to{transform:rotate(360deg)}}

/* Program list inside workout */
.wk-program-list{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1;}
.wk-program-card{padding:18px 20px;cursor:pointer;transition:var(--t);}
.wk-program-card:hover{border-color:rgba(212, 160, 23,.5);transform:translateY(-2px);}
.wk-program-card.selected{border-color:rgba(212, 160, 23,.65);background:rgba(212, 160, 23,.05);}
.wk-pc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.wk-pc-name{font-family:var(--fh);font-size:20px;letter-spacing:.06em;line-height:1.1;flex:1;padding-right:10px;color:#fff;}
.wk-pc-level{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:20px;font-family:var(--fd);flex-shrink:0;}
.wk-pc-level.beginner,.wk-pc-level.novice{background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.25);color:var(--green);}
.wk-pc-level.intermediate{background:rgba(212, 160, 23,.08);border:1px solid rgba(212, 160, 23,.2);color:var(--cyan);}
.wk-pc-level.advanced{background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.25);color:var(--purple);}
.wk-pc-level.all\ levels,.wk-pc-level.all-levels{background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.2);color:var(--gold);}
.wk-pc-level.novice\ to\ intermediate,.wk-pc-level.novice-to-intermediate{background:rgba(212, 160, 23,.08);border:1px solid rgba(212, 160, 23,.2);color:var(--cyan);}
.wk-pc-desc{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:10px;}
.wk-pc-meta{display:flex;gap:14px;}
.wk-pc-meta-item{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.35);font-family:var(--fd);}
.wk-add-ex-btn{width:100%;margin:10px 0 4px;padding:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(212, 160, 23,.25);border-radius:12px;color:rgba(212, 160, 23,.6);font-family:var(--fh);font-size:13px;letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;}
.wk-add-ex-btn:hover{background:rgba(212, 160, 23,.07);border-color:rgba(212, 160, 23,.5);color:var(--cyan);}
.wk-cat-pill{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid rgba(255, 255, 255,.22);background:rgba(26, 26, 28,.4);color:rgba(255,255,255,.5);font-family:var(--fh);font-size:12px;letter-spacing:.07em;cursor:pointer;transition:all .18s;white-space:nowrap;outline:none;}
.wk-cat-pill:hover{border-color:rgba(212, 160, 23,.45);color:rgba(255,255,255,.8);}
.wk-cat-pill.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1);color:var(--cyan);}

/* ── Programs Browser Overlay ──────────────────────────────────────────── */
#prog-browser-overlay{position:fixed;inset:0;z-index:200;background:#0A0A0B;overflow-y:auto;-webkit-overflow-scrolling:touch;display:none;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.pb-header{padding:calc(20px + env(safe-area-inset-top,0px)) 16px 0;margin-bottom:16px;display:flex;align-items:flex-start;justify-content:space-between}
.pb-title{font-family:var(--fh);font-size:28px;letter-spacing:.06em;color:#fff;line-height:1}
.pb-subtitle{font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.12em;text-transform:uppercase;font-family:var(--fd);margin-top:4px}
.pb-back{background:none;border:none;color:rgba(255,255,255,.45);font-family:var(--fh);font-size:13px;letter-spacing:.06em;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px;margin-top:6px}
.pb-back:hover{color:var(--train)}
.pb-filter-row{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;gap:8px;padding:0 16px 16px}
.pb-filter-row::-webkit-scrollbar{display:none}
.pb-filter-pill{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid rgba(255, 255, 255,.22);background:rgba(26, 26, 28,.4);color:rgba(255,255,255,.5);font-family:var(--fh);font-size:12px;letter-spacing:.07em;cursor:pointer;transition:all .18s;white-space:nowrap}
.pb-filter-pill:hover{border-color:rgba(212, 160, 23,.45);color:rgba(255,255,255,.8)}
.pb-filter-pill.active{border-color:var(--train);background:rgba(212, 160, 23,.1);color:var(--train)}
.pb-active-badge{display:none;position:absolute;top:9px;right:9px;padding:2px 8px;border-radius:20px;background:rgba(212, 160, 23,.15);border:1px solid rgba(212, 160, 23,.5);color:var(--train);font-size:9px;font-weight:700;letter-spacing:.1em;font-family:var(--fh)}
#prog-browser-overlay .pb-active-badge{display:block;position:relative;top:auto;right:auto}
.wk-pc-badge-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
#prog-browser-overlay .wk-program-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#prog-browser-overlay .wk-program-card{padding:14px}
#prog-browser-overlay .wk-pc-name{font-size:15px}
#prog-browser-overlay .wk-pc-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.78rem}
#prog-browser-overlay #prog-browser-list-wrap{padding:0 12px}
.pb-knox-card{background:linear-gradient(135deg,rgba(212, 160, 23,.2) 0%,rgba(212, 160, 23,.08) 100%);border:1px solid rgba(212, 160, 23,.3);border-radius:16px;padding:18px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .18s}
.pb-knox-card:hover{border-color:rgba(212, 160, 23,.55)}
.pb-knox-card::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,var(--knox) 50%,transparent);opacity:.6}
.pb-confirm-backdrop{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.pb-confirm-sheet{background:linear-gradient(180deg,rgba(10, 10, 11,.98) 0%,rgba(10, 10, 11,.98) 100%);border:0.5px solid rgba(255,255,255,.12);border-radius:24px 24px 0 0;padding:28px 22px;width:100%;max-width:500px;box-shadow:0 -8px 40px rgba(0,0,0,.5);padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.pb-confirm-title{font-family:var(--fh);font-size:19px;letter-spacing:.06em;color:#fff;margin-bottom:12px;line-height:1.25}
.pb-confirm-body{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.6);margin-bottom:24px}
.pb-confirm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pb-btn-cancel{padding:14px;border-radius:12px;border:0.5px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.45);font-family:var(--fh);font-size:12px;letter-spacing:.08em;cursor:pointer}
.pb-btn-switch{padding:14px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--train),var(--blue2));color:#000;font-family:var(--fh);font-size:12px;letter-spacing:.06em;font-weight:700;cursor:pointer}
.pb-detail-sheet{max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.pb-detail-stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.pb-detail-stat{font-size:11px;font-family:var(--fd);letter-spacing:.07em;color:rgba(255,255,255,.4);}
.pb-active-inline{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;background:rgba(212, 160, 23,.12);border:1px solid rgba(212, 160, 23,.4);color:var(--train);font-size:10px;font-weight:700;letter-spacing:.1em;font-family:var(--fh);}

/* Nutrition sub-tab pills (separate class to avoid fitness filter handler) */
.nut-prot-info{padding:0 14px 12px;color:var(--text-secondary);font-size:13px;line-height:1.55}
.nut-prot-sec{margin-bottom:14px}
.nut-prot-h{font-family:var(--fh);font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.45);margin-bottom:4px}
.nut-prot-num{font-family:'Manrope',sans-serif;font-size:28px;font-weight:700;color:var(--iron);line-height:1.2}
.nut-prot-info ul{margin:0;padding-left:18px}
.nut-use-current{padding:0 14px 12px;color:var(--iron);font-family:var(--fh);font-size:12px;letter-spacing:.07em;}
.nut-use-btn{margin:0 14px 12px;padding:.5rem 1rem;background:transparent;border:1px solid rgba(212,160,23,0.5);color:var(--iron);font-family:var(--fh);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:8px;}
.nut-cat-pill{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid rgba(255, 255, 255,.22);background:rgba(26, 26, 28,.4);color:rgba(255,255,255,.5);font-family:var(--fh);font-size:12px;letter-spacing:.07em;cursor:pointer;transition:all .18s;white-space:nowrap;outline:none;}
.nut-cat-pill:hover{border-color:rgba(212, 160, 23,.45);color:rgba(255,255,255,.8);}
.nut-cat-pill.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1);color:var(--cyan);}

/* Workout exercise items */
.wk-exercise-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;position:relative;z-index:1;}
.wk-gc.wk-exercise-item{cursor:pointer;}
.wk-exercise-item{cursor:pointer;}
.wk-exercise-item.active{border-color:rgba(212, 160, 23,.5)!important;}
.wk-exercise-item.done{border-color:rgba(212, 160, 23,.35)!important;}
.wk-ex-header{display:flex;align-items:flex-start;gap:10px;padding:12px 16px 6px;}
.wk-ex-num{width:28px;height:28px;border-radius:9px;background:rgba(212, 160, 23,.08);border:1px solid rgba(212, 160, 23,.18);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:14px;color:var(--cyan);flex-shrink:0;}
.wk-exercise-item.done .wk-ex-num{background:rgba(212, 160, 23,.1);border-color:rgba(212, 160, 23,.25);color:var(--green);}
.wk-ex-info{flex:1;min-width:0;}
.wk-ex-name{font-size:17px;font-weight:700;color:#fff;}
.wk-ex-meta{font-size:14px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:2px;}
.wk-ex-notes-block{font-size:13px;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:4px;line-height:1.5;}
.wk-ex-footer{display:flex;align-items:center;justify-content:space-between;padding:0 16px 12px;}
.wk-ex-count{font-size:13px;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:6px;}
.wk-ex-count span{font-size:15px;}
.wk-demo-btn{display:none;align-items:center;gap:4px;background:none;border:1px solid rgba(212, 160, 23,.2);border-radius:6px;padding:6px 12px;font-size:13px;letter-spacing:.1em;color:rgba(212, 160, 23,.7);font-family:var(--fd);cursor:pointer;transition:var(--t);}
.wk-demo-btn.show{display:flex;}
.wk-demo-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.wk-swap-btn{display:flex;align-items:center;gap:4px;background:none;border:1px solid rgba(212, 160, 23,.22);border-radius:6px;padding:6px 12px;font-size:13px;letter-spacing:.1em;color:rgba(212, 160, 23,.65);font-family:var(--fd);cursor:pointer;transition:var(--t);}
.wk-swap-btn:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(212, 160, 23,.06);}
/* Swap modal */
.wk-swap-current{font-size:13px;color:rgba(255,255,255,.35);font-family:var(--fd);text-decoration:line-through;margin-bottom:16px;padding:10px 12px;background:rgba(255,255,255,.04);border-radius:8px;}
.wk-swap-loading{text-align:center;padding:32px 16px;color:rgba(255,255,255,.4);font-family:var(--fd);font-size:.85rem;}
.wk-swap-loading-spinner{width:28px;height:28px;border:2px solid rgba(212, 160, 23,.15);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px;}
@keyframes spin{to{transform:rotate(360deg)}}
.wk-swap-alt-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.wk-swap-alt{padding:12px 14px;background:rgba(26, 26, 28,.6);border:1.5px solid rgba(212, 160, 23,.15);border-radius:12px;cursor:pointer;transition:all .15s;}
.wk-swap-alt:hover{border-color:rgba(212, 160, 23,.4);background:rgba(212, 160, 23,.05);}
.wk-swap-alt.selected{border-color:var(--cyan);background:rgba(212, 160, 23,.1);}
.wk-swap-alt-name{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px;}
.wk-swap-alt-reason{font-size:12px;color:rgba(255,255,255,.4);font-family:var(--fd);line-height:1.4;}
.wk-swap-notice{font-size:11px;color:rgba(255,255,255,.25);font-family:var(--fd);text-align:center;margin-bottom:16px;}
.wk-swap-confirm-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--cyan),var(--blue2));border:none;border-radius:12px;font-family:var(--fh);font-size:16px;letter-spacing:.1em;color:#000;cursor:pointer;margin-bottom:8px;transition:opacity .2s;}
.wk-swap-confirm-btn:disabled{opacity:.4;cursor:not-allowed;}
.wk-swap-cancel-btn{width:100%;padding:11px;background:none;border:1px solid rgba(255,255,255,.12);border-radius:12px;font-family:var(--fd);font-size:14px;color:rgba(255,255,255,.4);cursor:pointer;}
.wk-swap-search-section{margin-bottom:14px;}
.wk-swap-search-lbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-bottom:7px;}
.wk-swap-search-row{display:flex;gap:8px;align-items:stretch;}
.wk-swap-search-inp{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(212, 160, 23,.2);border-radius:10px;padding:10px 12px;font-size:14px;font-family:var(--fd);color:#fff;outline:none;transition:border-color .2s;}
.wk-swap-search-inp:focus{border-color:rgba(212, 160, 23,.55);}
.wk-swap-search-inp::placeholder{color:rgba(255,255,255,.2);}
.wk-swap-use-btn{flex-shrink:0;padding:10px 14px;background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.3);border-radius:10px;font-family:var(--fh);font-size:11px;letter-spacing:.1em;color:var(--cyan);cursor:pointer;transition:all .15s;white-space:nowrap;}
.wk-swap-use-btn:hover:not(:disabled){background:rgba(212, 160, 23,.18);border-color:var(--cyan);}
.wk-swap-use-btn:disabled{opacity:.3;cursor:not-allowed;}
.wk-swap-section-divider{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.wk-swap-section-divider::before,.wk-swap-section-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07);}
.wk-swap-section-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.25);font-family:var(--fd);white-space:nowrap;}
.wk-set-logger{display:none;padding:10px 14px 14px;margin-top:0;border-top:1px solid rgba(255,255,255,.06);animation:wk-cin .25s ease;}
.wk-set-logger.open{display:block;}
@keyframes wk-cin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.wk-set-row{display:flex;align-items:center;gap:6px;margin-bottom:7px;}
.wk-set-num{font-size:10px;color:rgba(255,255,255,.35);font-family:var(--fd);width:34px;flex-shrink:0;}
.wk-set-inp{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(212, 160, 23,.2);border-radius:8px;padding:8px 6px;font-size:15px;font-family:var(--fo);color:#fff;outline:none;text-align:center;transition:border-color .2s;width:0;}
.wk-set-inp:focus{border-color:rgba(212, 160, 23,.5);}
.wk-set-inp::placeholder{color:rgba(255,255,255,.2);}
.wk-set-done-btn{width:34px;height:34px;min-width:34px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .25s ease;font-size:15px;}
.wk-set-done-btn:hover{background:rgba(212, 160, 23,.1);border-color:rgba(212, 160, 23,.3);color:rgba(212, 160, 23,.6);}
.wk-set-done-btn.done{background:rgba(212, 160, 23,.2);border-color:rgba(212, 160, 23,.6);color:var(--green);box-shadow:0 0 10px rgba(212, 160, 23,.2);}
.wk-set-hdr{display:flex;gap:6px;margin-bottom:7px;width:100%;}
.wk-set-hdr-lbl{flex:1;min-width:0;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.25);font-family:var(--fd);text-align:center;}
.wk-set-hdr-lbl.first{flex:0;width:34px;text-align:left;}
.wk-finish-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--green),#D4A017);border:none;border-radius:14px;font-family:var(--fh);font-size:18px;letter-spacing:.12em;color:#000;cursor:pointer;margin:8px 0 14px;box-shadow:0 0 20px rgba(212, 160, 23,.3);}
.wk-workout-hero{background:rgba(26, 26, 28,.7);border:1.5px solid rgba(212, 160, 23,.25);border-radius:18px;padding:18px;margin:0 14px 14px;position:relative;overflow:hidden;}
.wk-workout-hero::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(212, 160, 23,.08) 0%,transparent 70%);pointer-events:none;}
.wk-day-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.22);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-family:var(--fd);font-weight:700;margin-bottom:10px;}
.wk-day-title{font-family:var(--fh);font-size:28px;letter-spacing:.06em;line-height:1;margin-bottom:4px;}
.wk-meta-row{display:flex;gap:14px;margin-bottom:14px;}
.wk-meta-item{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.4);font-family:var(--fd);}
.wk-progress-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:6px;}
.wk-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--blue2));transition:width .5s ease;}
.wk-progress-lbl{font-size:10px;color:rgba(255,255,255,.3);font-family:var(--fd);text-align:right;}
.wk-group-container{margin-bottom:8px;}
.wk-group-label{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.wk-group-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:20px;font-family:var(--fd);}
.wk-group-tag.superset{background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.2);color:var(--cyan);}
.wk-group-tag.triset{background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.2);color:var(--purple);}
.wk-group-tag.finisher{background:rgba(255,69,96,.1);border:1px solid rgba(255,69,96,.2);color:var(--red);}
.wk-group-bracket{border-left:2px solid rgba(212, 160, 23,.2);margin-left:16px;padding-left:8px;display:flex;flex-direction:column;gap:6px;}
.wk-group-bracket.triset{border-color:rgba(212, 160, 23,.2);}
.wk-group-bracket.finisher-bracket{border-color:rgba(255,69,96,.15);}
.wk-finisher-section-title{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,69,96,.07);border:1px solid rgba(255,69,96,.18);border-radius:10px;margin-bottom:4px;}

/* Workout complete / rest timer */
.wk-complete-wrap{text-align:center;padding:32px 14px 20px;}
.wk-complete-icon{font-size:48px;margin-bottom:12px;}
.wk-complete-title{font-family:var(--fh);font-size:28px;letter-spacing:.06em;margin-bottom:6px;}
.wk-complete-sub{font-size:.85rem;color:rgba(255,255,255,.5);font-family:var(--fd);line-height:1.6;margin-bottom:20px;}
.wk-finish-sheet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;}
.wk-finish-stat{text-align:center;padding:12px 8px;background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.14);border-radius:12px;}
.wk-finish-stat-val{font-family:var(--fo);font-size:24px;color:var(--cyan);}
.wk-finish-stat-lbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:3px;}
.wk-rest-day-card{text-align:center;padding:32px 20px;}
.wk-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:none;}
.wk-sheet-bg.open{display:block;}
.wk-bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:rgba(26, 26, 28, .98);border-top:1px solid rgba(212, 160, 23,.2);border-radius:20px 20px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));z-index:401;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);max-height:90vh;overflow-y:auto;}
.wk-bottom-sheet.open{transform:translateY(0);}
.wk-sheet-handle{width:36px;height:3px;background:rgba(255,255,255,.15);border-radius:2px;margin:0 auto 16px;}
.wk-sheet-title{font-family:var(--fh);font-size:20px;letter-spacing:.06em;margin-bottom:4px;}
.wk-sheet-sub{font-size:12px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:16px;}
.wk-day-tiles{display:flex;gap:8px;flex-wrap:wrap;}
.wk-day-tile{padding:10px 14px;background:rgba(26, 26, 28,.6);border:1px solid rgba(255,255,255,.14);border-radius:10px;cursor:pointer;transition:all .15s;}
.wk-day-tile:hover{border-color:rgba(212, 160, 23,.4);}
.wk-day-tile.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1);}
.wk-day-tile.done{border-color:rgba(212, 160, 23,.3);background:rgba(212, 160, 23,.05);}
.wk-day-tile-name{font-family:var(--fh);font-size:15px;letter-spacing:.06em;color:#fff;}
.wk-day-tile-meta{font-size:10px;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px;}
.wk-week-grid-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.wk-week-cell{padding:8px;text-align:center;background:rgba(26, 26, 28,.5);border:1px solid rgba(255, 255, 255,.15);border-radius:8px;cursor:pointer;transition:all .15s;}
.wk-week-cell:hover{border-color:rgba(212, 160, 23,.35);}
.wk-week-cell.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1);}
.wk-week-num{font-family:var(--fo);font-size:18px;color:#fff;}
.wk-week-block{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px;}
.wk-rest-timer{text-align:center;padding:20px;background:rgba(26, 26, 28,.8);border:1px solid rgba(212, 160, 23,.2);border-radius:16px;margin:0 14px 14px;}
.wk-rest-count{font-family:var(--fo);font-size:56px;line-height:1;color:var(--cyan);text-shadow:0 0 20px rgba(212, 160, 23,.4);}
.wk-rest-next{font-size:.82rem;color:rgba(255,255,255,.4);font-family:var(--fd);margin-top:8px;}
.wk-toast-wrap{position:fixed;bottom:80px;left:14px;right:14px;z-index:9001;pointer-events:none;}
.wk-toast{text-align:center;padding:10px 18px;border-radius:20px;font-family:var(--fd);font-size:13px;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none;margin-bottom:4px;}
.wk-toast.show{opacity:1;transform:translateY(0);}
.wk-toast.success{background:rgba(212, 160, 23,.2);border:1px solid rgba(212, 160, 23,.4);color:var(--green);}
.wk-toast.error{background:rgba(255,69,96,.2);border:1px solid rgba(255,69,96,.4);color:var(--red);}
.wk-toast:not(.success):not(.error){background:rgba(26, 26, 28,.95);border:1px solid rgba(212, 160, 23,.3);color:#fff;}
/* History */
.wk-history-screen{padding:0 14px;}
.wk-history-session{padding:14px 16px;background:rgba(26, 26, 28,.6);border:1.5px solid rgba(255, 255, 255,.18);border-radius:14px;cursor:pointer;transition:var(--t);margin-bottom:8px;}
.wk-history-session:hover{border-color:rgba(212, 160, 23,.35);transform:translateY(-1px);}
.wk-history-session-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.wk-history-session-date{font-family:var(--fh);font-size:18px;letter-spacing:.06em;color:#fff;}
.wk-history-session-meta{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);}
.wk-history-empty{text-align:center;padding:60px 20px;}
.wk-history-empty-icon{font-size:40px;margin-bottom:12px;}
.wk-history-empty-title{font-family:var(--fh);font-size:24px;letter-spacing:.06em;color:rgba(255,255,255,.2);margin-bottom:8px;}
.wk-history-empty-sub{font-size:13px;color:rgba(255,255,255,.2);font-family:var(--fd);line-height:1.6;}


/* ── Nutrition logger styles in V4 ─────────────────────────────────────── */
.nl-ring-wrap{position:relative;width:90px;height:90px;flex-shrink:0;}
.nl-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.nl-pct{font-family:var(--fo);font-size:22px;line-height:1;color:#fff;}
.nl-mc{background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.14);border-radius:10px;padding:10px 8px;text-align:center;}
.nl-mc-val{font-family:var(--fo);font-size:20px;line-height:1;}
.nl-mc-lbl{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px;}
.nl-mc-water{cursor:pointer;transition:border-color .15s;}.nl-mc-water:hover{border-color:rgba(212, 160, 23,.4);}
.nl-voice-btn{width:100%;padding:13px;background:rgba(212, 160, 23,.08);border:1.5px solid rgba(212, 160, 23,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fh);font-size:14px;letter-spacing:.1em;color:var(--cyan);cursor:pointer;transition:all .2s;}
.nl-voice-btn:hover,.nl-voice-btn.listening{background:rgba(212, 160, 23,.18);box-shadow:0 0 20px rgba(212, 160, 23,.15);}
.nl-voice-btn.listening{border-color:var(--cyan);}
.nl-voice-pulse{width:10px;height:10px;border-radius:50%;background:var(--cyan);}
.nl-add-btn{flex:1;padding:13px;background:rgba(168,137,74,.1);border:1.5px solid rgba(168,137,74,.35);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--fh);font-size:14px;letter-spacing:.1em;color:var(--gold);cursor:pointer;transition:all .2s;}
.nl-add-btn:hover{background:rgba(168,137,74,.2);}
.nl-scan-btn{width:44px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s;}
.nl-scan-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.nl-food-item{display:flex;flex-direction:column;gap:7px;padding:12px 14px;background:rgba(26, 26, 28,.5);border:1px solid rgba(212, 160, 23,.12);border-radius:12px;position:relative;}
.nl-food-top{display:flex;justify-content:space-between;align-items:flex-start;}
.nl-food-name{font-size:15px;font-weight:500;color:#fff;line-height:1.2;}
.nl-food-meta{font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px;}
.nl-food-cals{font-family:var(--fh);font-size:20px;color:var(--cyan);white-space:nowrap;margin-left:10px;}
.nl-food-macros{display:flex;gap:14px;}
.nl-food-macros span{font-size:11px;font-family:var(--fd);}
.nl-food-del{display:flex;align-items:center;background:none;border:none;color:rgba(255,100,100,.7);font-size:22px;cursor:pointer;padding:8px 12px;flex-shrink:0;}
.nl-search-inp{flex:1;padding:10px 12px;background:rgba(26, 26, 28,.8);border:1px solid rgba(212, 160, 23,.25);border-radius:8px;color:#fff;font-size:.88rem;font-family:var(--fb);outline:none;transition:border-color .2s;}
.nl-search-inp:focus{border-color:var(--cyan);}
.nl-search-go{padding:10px 16px;background:#D4A017;color:#000;font-family:var(--fh);font-size:.82rem;letter-spacing:.08em;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;}
.nl-result-item{padding:10px 12px;background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.12);border-radius:8px;cursor:pointer;transition:border-color .15s;}
.nl-result-item:hover{border-color:rgba(212, 160, 23,.4);}
.nl-result-name{font-size:14px;color:#fff;font-weight:500;}
.nl-result-meta{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:2px;}
.nl-result-cals{font-family:var(--fo);font-size:18px;color:var(--cyan);float:right;margin-left:8px;}
.nl-confirm-macro-box{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:14px;padding:12px 4px;text-align:center;min-width:0;}
.nl-confirm-macro-val{font-family:'Manrope',sans-serif;font-size:clamp(17px,5.4vw,26px);font-weight:700;line-height:1.25;white-space:nowrap;padding-bottom:1px;}
.nl-confirm-macro-lbl{font-family:'Manrope',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#8a99ad;margin-top:4px;}
.nl-target-row{display:flex;align-items:center;justify-content:space-between;}
.nl-target-row label{font-size:.82rem;color:rgba(255,255,255,.6);font-family:var(--fd);}
.nl-target-row input{width:110px;padding:8px 10px;background:rgba(26, 26, 28,.8);border:1px solid rgba(212, 160, 23,.2);border-radius:6px;color:#fff;font-size:.88rem;font-family:var(--fb);outline:none;text-align:right;}
.nl-hero{padding:18px;margin-bottom:12px;}
.wk-add-ex-result{padding:10px 12px;background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.12);border-radius:8px;cursor:pointer;transition:border-color .15s;}
.wk-add-ex-result:hover{border-color:rgba(212, 160, 23,.4);}
.wk-add-ex-result-name{font-size:14px;color:#fff;font-weight:500;}
.wk-add-ex-result-meta{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:2px;}


/* ── Check-in form ───────────────────────────────────────────────────── */
.ci-view-inner{padding-bottom:20px;}
.phase-card{background:rgba(26, 26, 28,.62);border:1.5px solid rgba(255, 255, 255,.22);border-radius:14px;padding:16px;margin-bottom:12px;}
.phase-label{font-family:var(--fh);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:6px;}
.phase-desc{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.6;}
.phase-action-btn{padding:8px 16px;background:transparent;border:1px solid rgba(212, 160, 23,.3);border-radius:8px;color:var(--cyan);font-family:var(--fh);font-size:14px;letter-spacing:.08em;cursor:pointer;margin-top:10px;transition:all .15s;}
.phase-action-btn.active{background:rgba(212, 160, 23,.1);}
.dbtn{padding:7px 12px;border:1px solid rgba(255,255,255,.12);background:transparent;color:rgba(255,255,255,.4);font-family:var(--fb);font-size:13px;border-radius:6px;cursor:pointer;transition:all .15s;}
.dbtn.hit{background:rgba(212, 160, 23,.1);border-color:rgba(212, 160, 23,.3);color:var(--green);}
.dbtn.miss{background:rgba(255,69,96,.08);border-color:rgba(255,69,96,.2);color:var(--red);}
.obs-input{width:100%;padding:9px 11px;background:rgba(255,255,255,.06);border:1px solid rgba(255, 255, 255,.18);border-radius:8px;color:#fff;font-family:var(--fb);font-size:15px !important;outline:none;transition:border-color .2s;}
.obs-input:focus{border-color:rgba(212, 160, 23,.5);}

/* ── BioGen ─────────────────────────────────────────────────────────── */
.biogen-note{padding:14px 16px;background:rgba(212, 160, 23,.08);border:1px solid rgba(212, 160, 23,.25);border-radius:12px;margin-bottom:12px;}
.biogen-note-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);font-family:var(--fd);margin-bottom:6px;}
.biogen-note-text{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.6;font-family:var(--fd);}
.prog-tab-btn{padding:7px 14px;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:20px;color:rgba(255,255,255,.4);font-family:var(--fh);font-size:14px;letter-spacing:.08em;cursor:pointer;transition:all .15s;}
.prog-tab-btn.active{background:rgba(212, 160, 23,.1);border-color:rgba(212, 160, 23,.35);color:var(--cyan);}
.prog-tab{padding:8px 18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:20px;color:rgba(255,255,255,.7);font-family:var(--fh);font-size:13px;letter-spacing:.1em;cursor:pointer;transition:all .15s;}
.prog-tab.on{background:rgba(0,255,255,.15);border-color:#D4A017;color:#D4A017;font-weight:600;}

/* ── Mindset/Habit ──────────────────────────────────────────────────── */
.streak-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.1);display:inline-block;margin-right:3px;}
.streak-dot.done{background:var(--gold);box-shadow:0 0 6px rgba(240,192,64,.4);}
.streak-dot.today{background:var(--cyan);box-shadow:0 0 6px rgba(212, 160, 23,.4);}

/* ── Profile ────────────────────────────────────────────────────────── */
.hist-session{padding:12px 14px;background:rgba(26, 26, 28,.5);border:1px solid rgba(255, 255, 255,.15);border-radius:10px;cursor:pointer;margin-bottom:6px;transition:all .15s;}
.hist-session:hover{border-color:rgba(212, 160, 23,.3);}

/* ── Onboarding Atlas background ─────────────────────────────────────── */
#onboarding-overlay{background:radial-gradient(ellipse 70% 45% at 15% 8%,rgba(212, 160, 23,0.06) 0%,transparent 55%),radial-gradient(ellipse 55% 40% at 85% 92%,rgba(212, 160, 23,0.05) 0%,transparent 55%),#0A0A0B!important;}

/* ── Utility ────────────────────────────────────────────────────────── */
.v4-screen[style*="display:none"]{display:none!important;}
/* Daily Check-In card inputs — hide number spinners */
#v4-ci-weight,#v4-ci-sleep,#ci-s-weight,#ci-s-sleep{-moz-appearance:textfield;}
#v4-ci-weight::-webkit-outer-spin-button,#v4-ci-weight::-webkit-inner-spin-button,
#v4-ci-sleep::-webkit-outer-spin-button,#v4-ci-sleep::-webkit-inner-spin-button,
#ci-s-weight::-webkit-outer-spin-button,#ci-s-weight::-webkit-inner-spin-button,
#ci-s-sleep::-webkit-outer-spin-button,#ci-s-sleep::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#v4-ci-weight:focus,#v4-ci-sleep:focus,#ci-s-weight:focus,#ci-s-sleep:focus{border-color:rgba(212, 160, 23,.5);}

/* Orbitron — complete numeric coverage */
.num, .stat-val, .stat-value, .macro-num, .macro-val,
.cal-num, .score-num, .ring-val, .ring-pct,
[data-num], .checkin-val, .food-cal,
.wk-set-val, .wk-rep-val, .wk-weight-val {
  font-family: var(--fo, 'Orbitron', sans-serif) !important;
}
.wk-hs-stat span { font-family: var(--fo) !important; }


/* Knox screen safe spacing */
#v4-screen-knox { padding-bottom: 0; }
#v4-screen-knox .v4-chat-input-bar {
  position: sticky;
  bottom: 62px; /* height of nav bar */
  background: rgba(2,4,8,.97);
  padding: 10px 14px 12px;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(212, 160, 23,.08);
  z-index: 10;
}
/* Prevent double scrollbars on secondary screens */
.v4-screen { overflow-x: hidden; }
/* Make all screens start at top */
#v4-screen-home { animation: fadeUp .3s ease; }
#v4-screen-knox { animation: fadeUp .3s ease; }
#v4-screen-train { animation: fadeUp .3s ease; }
#v4-screen-nutrition { animation: fadeUp .3s ease; }
#v4-screen-programs { animation: fadeUp .3s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* Programs screen */
#v4-screen-programs #prog-biogen-content .prof-card,
#v4-screen-programs #prog-biogen-content .ccard {
  margin-left: 0; margin-right: 0;
}
/* Back button style */
.v4-back-btn {
  background: none; border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; color: rgba(255,255,255,.35);
  cursor: pointer; font-family: var(--fd); font-size: 12px;
  padding: 5px 12px; transition: var(--t);
}
.v4-back-btn:hover { border-color: rgba(212, 160, 23,.3); color: rgba(255,255,255,.6); }


/* ── INFO BOTTOM SHEETS ─────────────────────────────────────────── */
.info-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:600;opacity:0;pointer-events:none;transition:opacity .3s}
.info-sheet-overlay.open{opacity:1;pointer-events:all}
.info-sheet{position:fixed;bottom:0;left:0;right:0;background:#0b1428;border:1.5px solid rgba(212, 160, 23,.22);border-bottom:none;border-radius:22px 22px 0 0;padding:20px 16px calc(40px + env(safe-area-inset-bottom,0px));z-index:601;transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none}
.info-sheet.open{transform:translateY(0);pointer-events:auto}
.info-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,.18);border-radius:2px;margin:0 auto 14px}
.info-sheet-close{background:none;border:none;color:rgba(255,255,255,.55);font-size:20px;line-height:1;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:-8px -8px 0 8px;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
.info-sheet-close:active{background:rgba(255,255,255,.08);color:#fff}
.info-sheet-title{font-family:var(--fh);font-size:18px;letter-spacing:.14em;color:#fff;margin-bottom:4px}
.info-sheet-sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(212, 160, 23,.5);font-family:var(--fd);margin-bottom:20px}
.info-domain-card{background:rgba(212, 160, 23,.04);border:1px solid rgba(212, 160, 23,.12);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.info-domain-name{font-family:var(--fh);font-size:15px;letter-spacing:.1em;color:#fff;margin-bottom:5px}
.info-domain-desc{font-size:12.5px;color:rgba(255,255,255,.55);font-family:var(--fd);line-height:1.55;margin-bottom:5px}
.info-domain-tip{font-size:11.5px;color:rgba(212, 160, 23,.55);font-family:var(--fd);font-style:italic;line-height:1.45}
.info-sheet-footer{margin-top:14px;padding:12px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;font-size:11.5px;color:rgba(255,255,255,.4);font-family:var(--fd);text-align:center;letter-spacing:.06em}
.info-icon-btn{background:none;border:1px solid rgba(212, 160, 23,.3);border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(212, 160, 23,.65);font-family:var(--fo);font-size:11px;line-height:1;padding:0;transition:border-color .2s,color .2s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.info-icon-btn:active{border-color:rgba(212, 160, 23,.8);color:rgba(212, 160, 23,1)}
/* ── HOME KNOX RING CLUSTERS ─────────────────────────────────────── */
@keyframes home-knox-bob-l{0%,100%{transform:translateY(0px)}50%{transform:translateY(-5px)}}
@keyframes home-knox-bob-r{0%,100%{transform:translateY(-2.5px)}50%{transform:translateY(2.5px)}}
@media(prefers-reduced-motion:reduce){.home-knox-ring-cluster{animation:none!important}}


/* Base */
#onboarding-overlay{font-family:'Manrope',sans-serif}
.ob-step{display:none}

/* Progress dots */
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.18);flex-shrink:0;transition:background .25s}

/* Inputs — shared base */
.ob-input,.ob-select,.ob-textarea{width:100%;background:rgba(26, 26, 28, 0.6);border:0.5px solid rgba(255,255,255,0.14);border-radius:12px;color:#fff;font-size:15px;font-family:'Manrope',sans-serif;font-weight:400;outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;padding:14px 16px}
.ob-input::placeholder,.ob-textarea::placeholder{color:rgba(250,250,247,0.3)}
.ob-input:focus,.ob-textarea:focus{border-color:rgba(212, 160, 23,0.45);box-shadow:inset 0 0 0 0.5px rgba(212, 160, 23,0.2)}

/* Select overrides */
.ob-select{padding:14px 40px 14px 16px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8880' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.ob-select:focus{border-color:rgba(212, 160, 23,0.45);box-shadow:inset 0 0 0 0.5px rgba(212, 160, 23,0.2)}
.ob-select option{background:#1A1A1C;color:#fff}
.ob-hint{font-size:12px;color:rgba(255,255,255,.4);margin-top:6px}

/* Textarea */
.ob-textarea{resize:vertical;min-height:96px;line-height:1.6}

/* Label */
.ob-label{display:block;font-size:11px;font-weight:600;letter-spacing:0.18em;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px}

/* Field gap */
.ob-field{margin-bottom:20px}

/* CTA button — iron amber gradient */
.ob-btn{width:100%;height:54px;background:var(--btn-gold);border:none;border-radius:12px;color:#0A0A0B;font-size:14px;font-weight:700;font-family:'Manrope',sans-serif;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:opacity .2s;box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);margin-top:24px;display:inline-flex;align-items:center;justify-content:center}
.ob-btn:hover{opacity:.9}
.ob-btn:disabled{background:rgba(212,160,23,0.18);color:rgba(212,160,23,0.35);cursor:not-allowed;box-shadow:none}

/* Error */
.ob-err{color:#ff5555;font-size:13px;margin-top:8px;min-height:18px}

/* Glass card */
.ob-glass{background:linear-gradient(135deg,rgba(255,255,255,0.09) 0%,rgba(10, 10, 11,0.04) 60%,rgba(10, 10, 11,0.02) 100%);border:0.5px solid rgba(255,255,255,0.14);border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative;overflow:hidden}

/* Top accent lines per pillar */
.ob-accent::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;opacity:.7;background:var(--ob-accent-color,rgba(255,255,255,0.3))}
.ob-accent-iron{--ob-accent-color:linear-gradient(90deg,transparent,rgba(212,160,23,0.5),transparent)}
.ob-accent-knox{--ob-accent-color:linear-gradient(90deg,transparent,rgba(212, 160, 23,0.5),transparent)}
.ob-accent-train{--ob-accent-color:linear-gradient(90deg,transparent,rgba(212, 160, 23,0.5),transparent)}
.ob-accent-fuel{--ob-accent-color:linear-gradient(90deg,transparent,rgba(212, 160, 23,0.5),transparent)}

/* Knox bubble — glass with purple accent */
.ob-knox-bubble{padding:16px 18px;margin-bottom:20px}
.ob-knox-name{font-size:10px;font-weight:600;letter-spacing:0.18em;color:#D4A017;text-transform:uppercase;margin-bottom:8px;font-family:'Manrope',sans-serif}

/* Loading spinner */
.ob-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:2.5rem 0;flex-direction:column}
.ob-btn .ob-btn-spin{display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;border:2px solid rgba(0,0,0,.25);border-top-color:#0A0A0B;border-radius:50%;animation:ob-spin .75s linear infinite}
.ob-btn.is-busy,.ob-btn.is-busy:disabled{background:var(--btn-gold);color:#0A0A0B;cursor:progress;opacity:1}
.ob-inline-spin{display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border:2px solid rgba(255,255,255,.15);border-top-color:#D4A017;border-radius:50%;animation:ob-spin .75s linear infinite}
.ob-spinner{width:28px;height:28px;border:2px solid rgba(255,255,255,0.12);border-top-color:#D4A017;border-radius:50%;animation:ob-spin .75s linear infinite}
@keyframes ob-spin{to{transform:rotate(360deg)}}

/* Step typography */
.ob-step-head{font-family:'Manrope',sans-serif;font-size:28px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.15}
.ob-step-sub{font-size:15px;font-weight:400;color:var(--text-secondary);margin-bottom:28px;line-height:1.55}
.ob-divider{border:none;border-top:0.5px solid rgba(255,255,255,0.08);margin:1.25rem 0}

/* Back button */
#ob-back-btn{align-items:center;justify-content:center;transition:background .15s}
#ob-back-btn:hover{background:rgba(255,255,255,0.12)!important}

/* Program grid inside onboarding — remove side padding */
#onboarding-overlay .prog-grid{padding:0}

/* ── Track Switch Modal — dark theme overrides (scoped, does not affect onboarding) ── */
#track-switch-modal .tsm-card{background:#1A1A1C;border:1px solid rgba(212,160,23,.2);border-radius:16px;overflow:hidden}
#track-switch-modal .tsm-header-label{background:#1A1A1C;color:#fff;font-family:var(--fh);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:1rem 1.5rem;border-bottom:1px solid rgba(212,160,23,.08)}
#track-switch-modal .tsm-body{padding:1.5rem}
#track-switch-modal .ob-input,#track-switch-modal .ob-select,#track-switch-modal .ob-textarea{background:#1A1A1C;border:1px solid rgba(212,160,23,.2);border-radius:8px;color:#fff;padding:12px}
#track-switch-modal .ob-select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8880' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
#track-switch-modal .ob-input:focus,#track-switch-modal .ob-select:focus,#track-switch-modal .ob-textarea:focus{border-color:rgba(212,160,23,.45);box-shadow:0 0 0 3px rgba(212,160,23,.1)}
#track-switch-modal .ob-btn{background:var(--btn-gold);color:#0A0A0B;font-family:var(--fh);letter-spacing:.18em;border-radius:8px}
#track-switch-modal .ob-btn:hover{background:var(--btn-gold);opacity:.9}
#track-switch-modal .ob-btn:disabled{background:rgba(212,160,23,0.18);color:rgba(212,160,23,0.35)}
#track-switch-modal .ob-knox-bubble{background:rgba(0,0,0,.3);border-left:3px solid rgba(212,160,23,.4);color:rgba(255,255,255,.8)}
#track-switch-modal .ob-knox-name{color:#D4A017}
#track-switch-modal .ob-spinner{border-color:rgba(255,255,255,.08);border-top-color:#D4A017}


/* ═══════════════════════════════════════════
   WORKOUT UI — dark-scoped design system
   All classes prefixed or scoped to #view-workout
═══════════════════════════════════════════ */

/* Dark scope — overrides .view background */
#view-workout {
  --cyan:#D4A017; --blue:#1565FF; --blue2:#D4A017;
  --purple:#D4A017; --wk-gold:#F0C040; --green:#D4A017;
  --red:#FF4560; --t:.3s cubic-bezier(.4,0,.2,1);
  --fh:'Bebas Neue',sans-serif;
  --fb:'Rajdhani',sans-serif;
  --fd:'DM Sans',sans-serif;
  background:#1A1A1C;
  color:#fff;
  padding:18px 14px 100px;
  min-height:calc(100vh - var(--site-header-height));
  position:relative;
  max-width:600px;
  margin:0 auto;
}
#view-workout * { box-sizing:border-box; }

/* Animated background */
#view-workout::before {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 5% 5%,rgba(212, 160, 23,.055) 0%,transparent 55%),
    radial-gradient(ellipse 50% 60% at 95% 95%,rgba(212, 160, 23,.07) 0%,transparent 55%);
}
@property --wk-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --wk-b{syntax:'<angle>';initial-value:180deg;inherits:false}

/* ── GLASS CARD ── */
.wk-gc {
  --wk-a:0deg;--wk-b:180deg;
  background:rgba(26, 26, 28,.62);
  backdrop-filter:blur(28px) saturate(160%);
  border:1.5px solid rgba(255, 255, 255,.28);
  border-radius:18px;
  position:relative;overflow:hidden;
  transition:transform var(--t,0.3s),box-shadow var(--t,0.3s),border-color var(--t,0.3s);
  box-shadow:inset 0 1px 0 rgba(212, 160, 23,.14),inset 0 0 50px rgba(255, 255, 255,.06);
  z-index:1;
}
.wk-gc:not(.wk-gc-hud)::after {
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212, 160, 23,.18),transparent);z-index:3;
}
.wk-gc-hud .wk-gc-shimmer {
  position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212, 160, 23,.18),transparent);z-index:3;pointer-events:none;
}

/* Program category filter */
.wk-cat-filter{display:flex;gap:7px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;-ms-overflow-style:none;margin-bottom:4px}
.wk-cat-filter::-webkit-scrollbar{display:none}
.wk-cat-pill{flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid rgba(255, 255, 255,.22);background:rgba(26, 26, 28,.4);color:rgba(255,255,255,.5);font-family:var(--fh);font-size:12px;letter-spacing:.07em;cursor:pointer;transition:all .18s;white-space:nowrap}
.wk-cat-pill:hover{border-color:rgba(212, 160, 23,.45);color:rgba(255,255,255,.8)}
.wk-cat-pill.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1);color:var(--cyan)}
/* ── WK BUTTONS ── */
.wk-btn-primary {
  width:100%;padding:14px;
  background:var(--btn-gold);
  border:none;border-radius:14px;
  font-family:var(--fh);font-size:18px;letter-spacing:.12em;
  color:#000;cursor:pointer;transition:var(--t);
  box-shadow:0 0 24px rgba(212, 160, 23,.3);
}
.wk-btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(212, 160, 23,.45)}
.wk-btn-primary:active{transform:translateY(0)}
.wk-btn-ghost {
  padding:9px 16px;background:rgba(212, 160, 23,.06);
  border:1.5px solid rgba(212, 160, 23,.22);border-radius:10px;
  font-family:var(--fd);font-size:13px;letter-spacing:.04em;
  color:var(--cyan);cursor:pointer;transition:var(--t);
}
.wk-btn-ghost:hover{background:rgba(212, 160, 23,.12);border-color:rgba(212, 160, 23,.4)}
.wk-back-btn {
  display:flex;align-items:center;gap:6px;background:none;border:none;
  cursor:pointer;font-family:var(--fd);font-size:13px;
  color:rgba(255,255,255,.4);padding:4px 0;transition:var(--t);
}
.wk-back-btn:hover{color:var(--cyan)}

/* ── LOADING / EMPTY ── */
.wk-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:14px}
.wk-loading-ring{width:40px;height:40px;border-radius:50%;border:3px solid rgba(212, 160, 23,.15);border-top-color:var(--cyan);animation:wk-spin 1s linear infinite}
@keyframes wk-spin{to{transform:rotate(360deg)}}
.wk-loading-text{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd)}
.wk-empty-state{text-align:center;padding:50px 20px}
.wk-empty-title{font-family:var(--fh);font-size:22px;letter-spacing:.06em;color:rgba(255,255,255,.3);margin-bottom:8px}
.wk-empty-sub{font-size:13px;color:rgba(255,255,255,.2);font-family:var(--fd);line-height:1.6}

/* ── TOP HEADER ── */
.wk-top-header{display:flex;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top, 0px)) 14px 0;margin-bottom:20px;position:relative;z-index:1}
.wk-logo{font-family:var(--fh);font-size:26px;letter-spacing:.08em;display:flex;align-items:center;color:#fff}
.wk-logo-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;display:inline-block;margin-left:3px;margin-bottom:2px;box-shadow:0 0 8px var(--gold)}
.wk-header-sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.28);font-family:var(--fd);margin-top:2px}
.wk-sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;position:relative;z-index:1}
.wk-sec-title{font-family:var(--fh);font-size:19px;letter-spacing:.08em;color:#fff}
.wk-sec-sub{font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd)}

/* ── PROGRAM CARDS (workout picker) ── */
.wk-program-list{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.wk-program-card{padding:18px 20px;cursor:pointer;transition:var(--t)}
.wk-program-card:hover{border-color:rgba(212, 160, 23,.5);transform:translateY(-2px)}
.wk-program-card.selected{border-color:rgba(212, 160, 23,.65);background:rgba(212, 160, 23,.05)}
.wk-pc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.wk-pc-name{font-family:var(--fh);font-size:20px;letter-spacing:.06em;line-height:1.1;flex:1;padding-right:10px;color:#fff}
.wk-pc-level{padding:3px 10px;border-radius:20px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--fd);font-weight:700;flex-shrink:0;margin-top:2px}
.wk-pc-level.intermediate{background:rgba(212, 160, 23,.12);border:1px solid rgba(212, 160, 23,.3);color:var(--blue2)}
.wk-pc-level.beginner,.wk-pc-level.novice{background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.25);color:var(--green)}
.wk-pc-level.advanced{background:rgba(255,69,96,.1);border:1px solid rgba(255,69,96,.25);color:var(--red)}
.wk-pc-level.all-levels,.wk-pc-level.all\ levels{background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.2);color:var(--gold)}
.wk-pc-level.novice-to-intermediate,.wk-pc-level.novice\ to\ intermediate{background:rgba(212, 160, 23,.12);border:1px solid rgba(212, 160, 23,.3);color:var(--blue2)}
.wk-pc-desc{font-size:13px;color:rgba(255,255,255,.6);font-family:var(--fd);line-height:1.5;margin-bottom:12px}
.wk-pc-meta{display:flex;gap:16px}
.wk-pc-meta-item{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.6);font-family:var(--fd)}
#wk-program-cta{position:relative;z-index:1}

/* ── WEEK/BLOCK BAR ── */
.wk-week-block-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.14);border-radius:14px;padding:12px 16px;margin-bottom:12px;position:relative;z-index:1}
.wk-wb-item{text-align:center}
.wk-wb-val{font-family:var(--fo);font-size:22px;line-height:1;color:#fff}
.wk-wb-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px}
.wk-wb-divider{width:1px;height:30px;background:rgba(255,255,255,.1)}
.wk-wb-edit-btn{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);font-family:var(--fd);font-weight:600;padding:0}
body.tab-train .wk-week-block-bar{background:var(--glass-bg)!important;border:var(--glass-border)!important;box-shadow:var(--glass-shadow)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;position:relative;overflow:hidden}
body.tab-train .wk-week-block-bar::before{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(212, 160, 23,0.55) 50%,transparent);opacity:0.7}

/* ── DAY TILES ── */
.wk-day-row{display:flex;gap:8px;margin-bottom:12px;position:relative;z-index:1}
.wk-day-tile{flex:1;background:rgba(26, 26, 28,.6);border:1.5px solid rgba(212, 160, 23,.14);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;transition:var(--t)}
.wk-day-tile:hover{border-color:rgba(212, 160, 23,.35);background:rgba(212, 160, 23,.04)}
.wk-day-tile.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1);box-shadow:0 0 14px rgba(212, 160, 23,.12)}
.wk-day-tile.done{border-color:rgba(212, 160, 23,.3);background:rgba(212, 160, 23,.05)}
.wk-dt-num{font-family:var(--fh);font-size:20px;line-height:1;color:#fff;margin-bottom:3px}
.wk-dt-lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);font-family:var(--fd);line-height:1.3}
.wk-day-tile.active .wk-dt-num{color:var(--cyan)}
.wk-day-tile.active .wk-dt-lbl{color:rgba(212, 160, 23,.9)}
.wk-day-tile.done .wk-dt-num{color:var(--green)}

/* ── WORKOUT HERO ── */
.wk-workout-hero{background:rgba(26, 26, 28,.7);border:1.5px solid rgba(212, 160, 23,.25);border-radius:18px;padding:18px;margin-bottom:12px;position:relative;overflow:hidden;z-index:1}
.wk-workout-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(212, 160, 23,.08) 0%,transparent 70%);pointer-events:none}
.wk-workout-day-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:rgba(212, 160, 23,.1);border:1px solid rgba(212, 160, 23,.22);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-family:var(--fd);font-weight:700;margin-bottom:10px}
.wk-workout-name{font-family:var(--fh);font-size:22px;letter-spacing:.04em;line-height:1.1;margin-bottom:6px;color:#fff}
.wk-workout-meta-row{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.wk-wm-item{display:flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.65);font-family:var(--fd)}
.wk-progress-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-bottom:5px}
.wk-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--blue2));transition:width .5s ease;width:0}
.wk-progress-lbl{display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.55);font-family:var(--fd)}

/* ── EXERCISE LIST ── */
.wk-exercise-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;position:relative;z-index:1}
.wk-group-container{display:flex;flex-direction:column;gap:0}
.wk-group-header-row{display:flex;align-items:center;gap:8px;padding:7px 12px;margin-bottom:4px;border-radius:10px}
.wk-group-header-row.superset{background:rgba(212, 160, 23,.07);border:1px solid rgba(212, 160, 23,.18)}
.wk-group-header-row.triset{background:rgba(212, 160, 23,.07);border:1px solid rgba(212, 160, 23,.18)}
.wk-group-header-row.finisher-hdr{background:rgba(255,69,96,.07);border:1px solid rgba(255,69,96,.18)}
.wk-gh-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--fd);font-weight:700}
.wk-group-header-row.superset .wk-gh-label{color:var(--blue2)}
.wk-group-header-row.triset .wk-gh-label{color:var(--purple)}
.wk-group-header-row.finisher-hdr .wk-gh-label{color:var(--red)}
.wk-gh-note{font-size:10px;color:rgba(255,255,255,.35);font-family:var(--fd)}
.wk-group-bracket{border-left:2px solid rgba(212, 160, 23,.25);margin-left:16px;padding-left:8px;display:flex;flex-direction:column;gap:6px}
.wk-group-bracket.triset{border-color:rgba(212, 160, 23,.25)}
.wk-group-bracket.finisher-bracket{border-color:rgba(255,69,96,.2)}
.wk-finisher-section-title{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,69,96,.07);border:1px solid rgba(255,69,96,.18);border-radius:10px;margin-bottom:4px}
.wk-fst-icon{font-size:15px}
.wk-fst-label{font-family:var(--fd);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.wk-fst-note{font-size:10px;color:rgba(255,255,255,.35);font-family:var(--fd)}

/* ── EXERCISE ITEM ── */
.wk-exercise-item{padding:12px 16px;cursor:pointer;transition:var(--t);animation:wk-cin .4s ease both}
@keyframes wk-cin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.wk-exercise-item:hover{border-color:rgba(212, 160, 23,.35)}
.wk-exercise-item.active{border-color:rgba(212, 160, 23,.55);background:rgba(212, 160, 23,.04)}
.wk-exercise-item.done{border-color:rgba(212, 160, 23,.3);background:rgba(212, 160, 23,.04);opacity:.75}
.wk-ex-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:2px}
.wk-ex-num{width:28px;height:28px;border-radius:50%;background:rgba(212, 160, 23,.12);border:1px solid rgba(212, 160, 23,.2);display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--fd);font-weight:700;color:var(--cyan);flex-shrink:0;margin-top:1px;transition:var(--t)}
.wk-exercise-item.done .wk-ex-num{background:rgba(212, 160, 23,.15);border-color:rgba(212, 160, 23,.4);color:var(--green)}
.wk-ex-info{flex:1;min-width:0}
.wk-ex-name{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1.2;margin-bottom:0;color:#fff}
.wk-ex-meta{font-size:14px;color:rgba(255,255,255,.45);font-family:var(--fd);letter-spacing:.04em;margin-top:2px;margin-bottom:0}
.wk-ex-notes-block{font-size:13px;color:rgba(255,255,255,.3);font-family:var(--fd);line-height:1.5;margin-bottom:4px;display:none}
.wk-exercise-item.active .wk-ex-notes-block{display:block}
.wk-ex-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.wk-ex-count{font-size:13px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:0}
.wk-ex-count span{color:var(--cyan);font-size:15px}
.wk-demo-btn{display:none;align-items:center;gap:4px;background:none;border:1px solid rgba(212, 160, 23,.2);border-radius:6px;padding:6px 12px;font-size:13px;letter-spacing:.1em;color:rgba(212, 160, 23,.7);font-family:var(--fd);cursor:pointer;transition:var(--t)}
.wk-demo-btn.show{display:flex}
.wk-demo-btn:hover{border-color:var(--cyan);color:var(--cyan)}

/* ── SET LOGGER ── */
.wk-set-logger{display:none;padding:10px 14px 14px;margin-top:0;border-top:1px solid rgba(255,255,255,.06);animation:wk-cin .25s ease}
.wk-set-logger.open{display:block}
.wk-set-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.wk-set-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fo);width:28px;flex-shrink:0}
.wk-set-inp{width:72px;padding:8px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-size:15px;font-family:var(--fo);text-align:center;outline:none;transition:var(--t);-webkit-appearance:none}
.wk-set-inp:focus{border-color:rgba(212, 160, 23,.5);position:relative;z-index:10}
.wk-set-inp::placeholder{color:rgba(255,255,255,.2)}
.wk-set-sep{color:rgba(255,255,255,.2);font-size:12px}
.wk-set-btn{flex:1;padding:9px;background:rgba(212, 160, 23,.08);border:1px solid rgba(212, 160, 23,.2);border-radius:8px;font-family:var(--fd);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--cyan);cursor:pointer;transition:var(--t)}
.wk-set-btn:hover{background:rgba(212, 160, 23,.14);border-color:rgba(212, 160, 23,.4)}
.wk-set-btn.done{background:rgba(212, 160, 23,.12);border-color:rgba(212, 160, 23,.35);color:var(--green)}
.wk-rpe-hint{font-size:10px;color:rgba(255,255,255,.25);font-family:var(--fd);padding:2px 0 6px;letter-spacing:.04em}

/* ── REST TIMER OVERLAY ── */
.wk-rest-timer-overlay{display:none !important;position:fixed;bottom:calc(62px + env(safe-area-inset-bottom));left:0;right:0;padding:12px 14px;background:rgba(26, 26, 28, .97);border:1.5px solid rgba(212, 160, 23,.22);border-radius:14px 14px 0 0;z-index:199;transform:translateY(100%);pointer-events:none;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.wk-rest-timer-overlay.open{display:block;transform:translateY(0);pointer-events:all}
/* ID-level override — belt and suspenders for iOS Safari */
#wk-rest-timer{bottom:calc(62px + env(safe-area-inset-bottom)) !important;z-index:199 !important;}
/* Bar showing: nothing sits under it. --rest-bar-h is measured in wkRestBarPad. */
body.rest-bar-on .v4-screen{padding-bottom:calc(82px + var(--rest-bar-h, 96px) + env(safe-area-inset-bottom)) !important}
body.rest-bar-on #v4-screen-knox{padding-bottom:0 !important}
body.rest-bar-on .kx-bottom{padding-bottom:calc(62px + var(--rest-bar-h, 96px) + env(safe-area-inset-bottom, 0px))}
.wk-rest-timer-card{display:flex;align-items:center;gap:14px}
.wk-rest-circle{position:relative;flex-shrink:0}
.wk-rest-circle svg{width:68px;height:68px;transform:rotate(-90deg)}
.wk-rest-track{stroke-dasharray:188;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.wk-rest-time-display{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fo);font-size:20px;color:var(--cyan);text-shadow:0 0 10px rgba(212, 160, 23,.4)}
.wk-rest-info{flex:1;min-width:0}
.wk-rest-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-bottom:3px}
.wk-rest-next-ex{font-size:14px;font-weight:500;color:#fff;font-family:var(--fd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-rest-next-sub{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:2px}
.wk-rest-skip{padding:8px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.4);font-family:var(--fd);cursor:pointer;transition:var(--t);flex-shrink:0}
.wk-rest-skip:hover{border-color:rgba(212, 160, 23,.35);color:var(--cyan)}

/* ── VIDEO MODAL ── */
.wk-add-ex-btn{width:100%;margin:10px 0 4px;padding:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(212, 160, 23,.25);border-radius:12px;color:rgba(212, 160, 23,.6);font-family:var(--fh);font-size:13px;letter-spacing:.1em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s}
.wk-add-ex-btn:hover{background:rgba(212, 160, 23,.07);border-color:rgba(212, 160, 23,.5);color:var(--cyan)}
.wk-add-ex-result{padding:10px 12px;background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.12);border-radius:8px;cursor:pointer;transition:border-color .15s}
.wk-add-ex-result:hover{border-color:rgba(212, 160, 23,.4)}
.wk-add-ex-result-name{font-size:14px;color:#fff;font-weight:500}
.wk-add-ex-result-meta{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:2px}
.wk-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(14px);z-index:700;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.wk-modal-overlay.open{opacity:1;pointer-events:all}
.wk-modal-box{width:100%;max-width:440px;background:rgba(26, 26, 28, .97);border:1.5px solid rgba(212, 160, 23,.35);border-radius:20px;padding:22px;transform:scale(.93) translateY(20px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);position:relative}
.wk-modal-overlay.open .wk-modal-box{transform:scale(1) translateY(0)}
.wk-modal-title{font-family:var(--fh);font-size:20px;letter-spacing:.06em;margin-bottom:4px;padding-right:36px;color:#fff}
.wk-modal-sub{font-size:12px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:16px}
.wk-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:rgba(255,255,255,.5);transition:var(--t)}
.wk-modal-close:hover{background:rgba(255,255,255,.14);color:#fff}
.wk-video-frame{width:min(100%, calc(56vh * 9 / 16));aspect-ratio:9/16;max-height:56vh;margin:0 auto;background:rgba(0,0,0,.5);border-radius:12px;overflow:hidden}
.wk-video-frame iframe,.wk-video-frame video{width:100%;height:100%;border:none}
.wk-video-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.3);font-family:var(--fd);font-size:13px;padding:20px;text-align:center}
.wk-video-placeholder-icon{font-size:28px;opacity:.4;margin-bottom:4px}
.wk-video-placeholder-title{font-family:var(--fh);font-size:14px;letter-spacing:.08em;color:rgba(255,255,255,.35)}
.wk-video-placeholder-sub{font-size:12px;color:rgba(255,255,255,.2);line-height:1.5;max-width:220px}
.wk-video-notes{margin-top:14px;padding:12px 14px;background:rgba(212, 160, 23,.04);border:1px solid rgba(212, 160, 23,.12);border-radius:10px}
.wk-video-notes-label{font-family:var(--fd);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(212, 160, 23,.5);margin-bottom:6px}
.wk-video-notes-text{font-size:14px;color:rgba(255,255,255,.7);line-height:1.6}

/* ── SHEETS ── */
.wk-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);z-index:440;opacity:0;pointer-events:none;transition:opacity .3s}
.wk-sheet-bg.open{opacity:1;pointer-events:all}
.wk-bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:rgba(26, 26, 28, .98);border:1.5px solid rgba(212, 160, 23,.22);border-bottom:none;border-radius:22px 22px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom,0px));z-index:450;transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.56,.64,1);max-width:600px;margin:0 auto;max-height:90vh;overflow-y:auto}
.wk-bottom-sheet.open{transform:translateY(0)}
.wk-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,.12);border-radius:2px;margin:0 auto 18px}
.wk-sheet-title{font-family:var(--fh);font-size:20px;letter-spacing:.06em;margin-bottom:4px;color:#fff}
.wk-sheet-sub{font-size:12px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:18px}
.wk-week-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wk-week-tile{background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.12);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:var(--t)}
.wk-week-tile:hover{border-color:rgba(212, 160, 23,.35)}
.wk-week-tile.active{border-color:var(--cyan);background:rgba(212, 160, 23,.1)}
.wk-week-tile.active .wk-wt-num{color:var(--cyan)}
.wk-ex-swapped{font-size:11px;color:rgba(255,255,255,.5);margin:2px 0 4px}
.wk-ex-swapped a{color:#D4A017;text-decoration:none;font-weight:600}
.wk-wt-num{font-family:var(--fh);font-size:18px;line-height:1;color:#fff}
.wk-wt-lbl{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px}
.wk-block-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.2);font-family:var(--fd);margin:14px 0 8px}
.wk-block-label.bl-active{color:var(--cyan)}
.wk-finish-sheet-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}

/* ── WORKOUT COMPLETE ── */
.wk-complete-wrap{text-align:center;padding:32px 14px 20px}
.wk-complete-badge{font-size:50px;margin-bottom:10px}
.wk-complete-title{font-family:var(--fh);font-size:36px;letter-spacing:.08em;color:var(--green);text-shadow:0 0 24px rgba(212, 160, 23,.35);margin-bottom:6px}
.wk-complete-sub{font-size:13px;color:rgba(255,255,255,.4);font-family:var(--fd);line-height:1.6;margin-bottom:20px}
.wk-complete-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.wk-cs{background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.14);border-radius:12px;padding:14px 8px}
.wk-cs-val{font-family:var(--fh);font-size:26px;line-height:1}
.wk-cs-lbl{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:4px}

/* ── MISC WORKOUT ── */
.wk-finish-btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--green),#D4A017);border:none;border-radius:14px;font-family:var(--fh);font-size:18px;letter-spacing:.12em;color:#000;cursor:pointer;transition:var(--t);box-shadow:0 0 24px rgba(212, 160, 23,.3);margin-bottom:14px;display:none}
.wk-finish-btn:active{transform:scale(.98)}
.wk-autosave-bar{display:none;align-items:center;gap:6px;padding:7px 14px;margin-bottom:10px;background:rgba(212, 160, 23,.06);border:1px solid rgba(212, 160, 23,.18);border-radius:10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(212, 160, 23,.7);font-family:var(--fd);font-weight:600;position:relative;z-index:1}
.wk-autosave-bar.show{display:flex}
.wk-autosave-dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);animation:wk-lp 1.8s ease-in-out infinite}
@keyframes wk-lp{0%,100%{opacity:1}50%{opacity:.3}}
.wk-rest-day-card{text-align:center;padding:40px 20px;position:relative;z-index:1}
.wk-rest-day-icon{font-size:44px;margin-bottom:12px}
.wk-rest-day-title{font-family:var(--fh);font-size:26px;letter-spacing:.06em;color:rgba(255,255,255,.4);margin-bottom:6px}
.wk-rest-day-sub{font-size:13px;color:rgba(255,255,255,.25);font-family:var(--fd);margin-bottom:20px;line-height:1.6}

/* ── WK TOAST ── */
.wk-toast{position:fixed;bottom:calc(env(safe-area-inset-bottom, 20px) + 80px);left:50%;transform:translateX(-50%) translateY(20px);background:rgba(26, 26, 28, .97);border:1px solid rgba(212, 160, 23,.3);border-radius:12px;padding:10px 16px;font-size:13px;font-family:var(--fd);color:#fff;z-index:9999;transition:transform .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;pointer-events:none}
.wk-toast.show{transform:translateX(-50%) translateY(0)}
.wk-toast.success{border-color:rgba(212, 160, 23,.4);color:var(--green)}
.wk-toast.warn{border-color:rgba(240,192,64,.4);color:var(--gold)}

/* ── WK CONTENT WRAPPER ── */
#wk-workout-screen { display:none; }
#wk-workout-screen.active { display:block; }
#wk-program-screen { display:block; }
#wk-program-screen.hidden { display:none; }
#workout-content { position:relative;z-index:1; }

/* ── HISTORY SCREEN ── */
#wk-history-screen { display:none; }
#wk-history-screen.active { display:block; }

.wk-history-session {
  padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:var(--t);
  position:relative;z-index:1;
}
.wk-history-session:hover { border-color:rgba(212, 160, 23,.35);transform:translateY(-1px); }
.wk-hs-top { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px; }
.wk-hs-date { font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:var(--fd);margin-bottom:4px; }
.wk-hs-name { font-family:var(--fh);font-size:18px;letter-spacing:.04em;line-height:1.1;color:#fff; }
.wk-hs-badge { padding:3px 10px;border-radius:20px;background:rgba(212, 160, 23,.08);border:1px solid rgba(212, 160, 23,.18);font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--fd);color:var(--cyan);white-space:nowrap;flex-shrink:0;margin-top:2px; }
.wk-hs-stats { display:flex;gap:16px; }
.wk-hs-stat { display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.5);font-family:var(--fd); }
.wk-hs-stat span { color:#fff;font-weight:500; }

.wk-hs-detail { display:none;margin-top:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px; }
.wk-hs-detail.open { display:block; }
.wk-hs-ex-row { display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04); }
.wk-hs-ex-row:last-child { border-bottom:none; }
.wk-hs-ex-name { font-size:13px;color:rgba(255,255,255,.75);font-family:var(--fd);flex:1;padding-right:10px; }
.wk-hs-ex-meta { font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);text-align:right; }
.wk-hs-ex-meta strong { color:var(--cyan); }

.wk-history-empty { text-align:center;padding:60px 20px;position:relative;z-index:1; }
.wk-history-empty-icon { font-size:40px;margin-bottom:12px; }
.wk-history-empty-title { font-family:var(--fh);font-size:24px;letter-spacing:.06em;color:rgba(255,255,255,.25);margin-bottom:8px; }
.wk-history-empty-sub { font-size:13px;color:rgba(255,255,255,.2);font-family:var(--fd);line-height:1.6; }

.wk-load-more-btn { width:100%;padding:12px;background:rgba(212, 160, 23,.05);border:1px solid rgba(212, 160, 23,.15);border-radius:12px;font-family:var(--fd);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(212, 160, 23,.6);cursor:pointer;transition:var(--t);margin-top:4px;position:relative;z-index:1; }
.wk-load-more-btn:hover { background:rgba(212, 160, 23,.1);color:var(--cyan); }
.wk-load-more-btn:disabled { opacity:.4;cursor:default; }


/* ── Nutrition logger layout ── */
.nl-ring-wrap{position:relative;width:90px;height:90px;flex-shrink:0}
.nl-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.nl-pct{font-family:var(--fo);font-size:22px;line-height:1;color:#fff}
.nl-mc{background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.14);border-radius:10px;padding:10px 8px;text-align:center}
.nl-mc-val{font-family:var(--fo);font-size:20px;line-height:1}
.nl-mc-lbl{font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px}
.nl-mc-water{cursor:pointer;transition:border-color .15s}.nl-mc-water:hover{border-color:rgba(212, 160, 23,.4)}
.nl-voice-btn{flex:1;padding:13px;background:rgba(212, 160, 23,.08);border:1.5px solid rgba(212, 160, 23,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fh);font-size:14px;letter-spacing:.1em;color:var(--cyan);cursor:pointer;transition:all .2s}
.nl-voice-btn:hover,.nl-voice-btn.listening{background:rgba(212, 160, 23,.18);box-shadow:0 0 20px rgba(212, 160, 23,.15)}
.nl-voice-btn.listening{border-color:var(--cyan);animation:nl-pulse-border 1.2s ease-in-out infinite}
@keyframes nl-pulse-border{0%,100%{box-shadow:0 0 8px rgba(212, 160, 23,.2)}50%{box-shadow:0 0 24px rgba(212, 160, 23,.5)}}
@keyframes nlPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
.nl-voice-pulse{width:10px;height:10px;border-radius:50%;background:var(--cyan)}
#nl-water-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#071828;border:2px solid #D4A017;box-shadow:0 0 8px rgba(212, 160, 23,0.4);cursor:pointer;}
.nl-voice-btn.listening .nl-voice-pulse{animation:lp 1.2s ease-in-out infinite;box-shadow:0 0 8px var(--cyan)}
@keyframes lp{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.7}}
.nl-add-btn{flex:1;padding:13px;background:rgba(168,137,74,.1);border:1.5px solid rgba(168,137,74,.35);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--fh);font-size:14px;letter-spacing:.1em;color:var(--gold);cursor:pointer;transition:all .2s}
.nl-add-btn:hover{background:rgba(168,137,74,.2)}
.nl-scan-btn{width:44px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.nl-scan-btn:hover{background:rgba(255,255,255,.1);color:#fff}
/* Food items */
.nl-food-item{display:flex;flex-direction:column;gap:7px;padding:12px 14px;background:rgba(26, 26, 28,.5);border:1px solid rgba(212, 160, 23,.12);border-radius:12px;position:relative}
.nl-food-top{display:flex;justify-content:space-between;align-items:flex-start}
.nl-food-name{font-size:15px;font-weight:500;color:#fff;line-height:1.2}
.nl-food-meta{font-size:11px;color:rgba(255,255,255,.3);font-family:var(--fd);margin-top:2px}
.nl-food-cals{font-family:var(--fh);font-size:20px;color:var(--cyan);white-space:nowrap;margin-left:10px}
.nl-food-macros{display:flex;gap:14px}
.nl-food-macros span{font-size:11px;font-family:var(--fd)}
.nl-food-del{display:flex;align-items:center;background:none;border:none;color:rgba(255,100,100,.7);font-size:22px;cursor:pointer;padding:8px 12px;flex-shrink:0;}
/* Favorite button */
.nl-fav-btn{background:none;border:none;color:rgba(255,255,255,.2);cursor:pointer;font-size:14px;padding:0 0 0 6px;line-height:1;transition:color .15s;margin-left:auto;flex-shrink:0}
.nl-fav-btn:hover,.nl-fav-btn.saved{color:#D4A017}
/* Nutrition History */
.nl-hist-overlay{position:fixed;inset:0;background:rgba(26, 26, 28, .97);z-index:9990;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1.25,.54,1)}
.nl-hist-overlay.open{transform:translateY(0)}
.nl-hist-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.nl-hist-title{font-family:var(--fh);font-size:20px;letter-spacing:.07em;color:#fff}
.nl-hist-body{flex:1;overflow-y:auto;padding:12px 14px 100px;-webkit-overflow-scrolling:touch}
.nl-hist-day{margin-bottom:8px;border-radius:12px;overflow:hidden;background:rgba(26, 26, 28,.55);border:1px solid rgba(212, 160, 23,.1)}
.nl-hist-day-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;user-select:none}
.nl-hist-day-date{font-family:var(--fh);font-size:14px;letter-spacing:.07em;color:#fff}
.nl-hist-day-right{display:flex;align-items:center;gap:10px}
.nl-hist-day-cals{font-family:var(--fh);font-size:16px;color:var(--cyan)}
.nl-hist-day-arrow{font-size:10px;color:rgba(255,255,255,.3);transition:transform .2s}
.nl-hist-day.open .nl-hist-day-arrow{transform:rotate(180deg)}
.nl-hist-day-body{display:none;padding:0 8px 8px}
.nl-hist-day.open .nl-hist-day-body{display:block}
/* Search modal tabs */
.nl-tab-pills{display:flex;gap:6px;margin-bottom:14px;padding:3px;background:rgba(255,255,255,.05);border-radius:10px}
.nl-tab-pill{flex:1;padding:7px 0;background:transparent;border:1px solid transparent;border-radius:8px;font-family:var(--fh);font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.4);cursor:pointer;transition:all .2s}
.nl-tab-pill.active{background:rgba(212, 160, 23,.13);color:var(--cyan);border-color:rgba(212, 160, 23,.3)}
/* Favorites list */
.nl-fav-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(255,255,255,0.09) 0%,rgba(10, 10, 11,0.04) 60%,rgba(10, 10, 11,0.02) 100%);border:0.5px solid rgba(255,255,255,0.14);border-radius:14px;backdrop-filter:blur(18px)}
.nl-fav-info{flex:1;min-width:0}
.nl-fav-name{font-size:16px;font-weight:600;color:#fff;font-family:'Manrope',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nl-fav-meta{font-size:13px;font-weight:400;color:#8a99ad;font-family:'Manrope',sans-serif;margin-top:4px}
.nl-fav-cals{font-family:var(--fh);font-size:18px;color:var(--cyan);white-space:nowrap;margin:0 4px;flex-shrink:0}
.nl-fav-add{width:32px;height:32px;border-radius:8px;background:rgba(212, 160, 23,.12);border:1px solid rgba(212, 160, 23,.3);color:var(--cyan);font-size:22px;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;line-height:1;padding:0}
.nl-fav-add:hover{background:rgba(212, 160, 23,.25)}
.nl-fav-del{width:28px;height:28px;border-radius:6px;background:none;border:none;color:rgba(255,100,100,0.6);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s;padding:0}
.nl-fav-del:hover{color:rgba(255,100,100,0.9)}
/* Favorites & Saved Meals bottom sheet */
.nl-fs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9980;opacity:0;transition:opacity .3s;pointer-events:none}
.nl-fs-overlay.open{opacity:1;pointer-events:all}
.nl-fs-sheet{position:fixed;left:0;right:0;bottom:0;background:#0a1628;border-top:1px solid rgba(212, 160, 23,.15);border-radius:20px 20px 0 0;z-index:9981;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1.25,.54,1);max-height:82vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,16px)}
.nl-fs-sheet.open{transform:translateY(0)}
.nl-fs-handle{width:36px;height:4px;background:rgba(255,255,255,.14);border-radius:2px;margin:10px auto 0;flex-shrink:0}
.nl-fs-hdr{padding:12px 16px 0;flex-shrink:0}
.nl-fs-body{flex:1;overflow-y:auto;padding:8px 14px 20px;-webkit-overflow-scrolling:touch}
.nl-fm-card{background:rgba(26, 26, 28,.7);border:1px solid rgba(212, 160, 23,.12);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.nl-fm-card-top{display:flex;align-items:center;gap:8px}
.nl-fm-card-info{flex:1;min-width:0}
.nl-fm-card-name{font-size:14px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.nl-fm-card-meta{font-size:10px;color:rgba(255,255,255,.32);font-family:var(--fd);margin-top:2px}
.nl-fm-card-cals{font-family:var(--fh);font-size:18px;color:var(--cyan);white-space:nowrap;flex-shrink:0}
.nl-fm-log-btn{padding:7px 13px;background:rgba(212, 160, 23,.12);border:1px solid rgba(212, 160, 23,.3);border-radius:8px;color:var(--cyan);font-family:var(--fh);font-size:12px;letter-spacing:.08em;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s}
.nl-fm-log-btn:hover{background:rgba(212, 160, 23,.22)}
.nl-fm-trash{width:28px;height:28px;background:none;border:none;color:rgba(255,80,80,.28);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s;padding:0;border-radius:6px}
.nl-fm-trash:hover{color:rgba(255,80,80,.7)}
.nl-fm-expand{width:28px;height:28px;background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;padding:0;border-radius:6px;transition:transform .2s}
.nl-fm-expand.open{transform:rotate(180deg)}
.nl-fm-items{display:none;padding-top:8px;margin-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.nl-fm-items.open{display:block}
.nl-fm-item-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;color:rgba(255,255,255,.55);font-family:var(--fd)}
.nl-fm-item-row:last-child{border-bottom:none}
.nl-save-meal-btn{width:100%;padding:10px;background:transparent;border:1.5px dashed rgba(212, 160, 23,.2);border-radius:10px;color:rgba(212, 160, 23,.5);font-family:var(--fd);font-size:13px;cursor:pointer;transition:all .2s;letter-spacing:.03em}
.nl-save-meal-btn:hover{background:rgba(212, 160, 23,.05);border-color:rgba(212, 160, 23,.35);color:var(--cyan)}
.nl-meal-prompt{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:10001;display:flex;align-items:center;justify-content:center;padding:20px}
.nl-meal-prompt-box{background:#1A1A1C;border:1px solid rgba(212, 160, 23,.22);border-radius:16px;padding:22px 20px;width:100%;max-width:360px}
.nl-meal-prompt-title{font-family:var(--fh);font-size:18px;letter-spacing:.06em;color:#fff;margin-bottom:4px}
.nl-meal-prompt-sub{font-size:12px;color:rgba(255,255,255,.32);font-family:var(--fd);margin-bottom:14px}
/* Search */
.nl-search-inp{flex:1;padding:10px 12px;background:rgba(26, 26, 28,.8);border:1px solid rgba(212, 160, 23,.25);border-radius:8px;color:#fff;font-size:.88rem;font-family:var(--fb);outline:none;transition:border-color .2s}
.nl-search-inp:focus{border-color:var(--cyan)}
.nl-search-go{padding:10px 16px;background:#D4A017;color:#000;font-family:var(--fh);font-size:.82rem;letter-spacing:.08em;border:none;border-radius:8px;cursor:pointer;white-space:nowrap}
.nl-result-item{padding:10px 12px;background:rgba(26, 26, 28,.6);border:1px solid rgba(212, 160, 23,.12);border-radius:8px;cursor:pointer;transition:border-color .15s}
.nl-result-item:hover{border-color:rgba(212, 160, 23,.4)}
.nl-result-name{font-size:14px;color:#fff;font-weight:500}
.nl-result-meta{font-size:11px;color:rgba(255,255,255,.35);font-family:var(--fd);margin-top:2px}
.nl-result-cals{font-family:var(--fh);font-size:18px;color:var(--cyan);float:right;margin-left:8px}
/* Confirm macros grid */
.nl-confirm-macro-box{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:14px;padding:12px 4px;text-align:center;min-width:0}
.nl-confirm-macro-val{font-family:'Manrope',sans-serif;font-size:clamp(17px,5.4vw,26px);font-weight:700;line-height:1.25;white-space:nowrap;padding-bottom:1px}
.nl-confirm-macro-lbl{font-family:'Manrope',sans-serif;font-size:11px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;color:#8a99ad;margin-top:4px}
/* Target row */
.nl-target-row{display:flex;align-items:center;justify-content:space-between}
.nl-target-row label{font-size:.82rem;color:rgba(255,255,255,.6);font-family:var(--fd)}
.nl-target-row input{width:110px;padding:8px 10px;background:rgba(26, 26, 28,.8);border:1px solid rgba(212, 160, 23,.2);border-radius:6px;color:#fff;font-size:.88rem;font-family:var(--fb);outline:none;text-align:right}


  #cf-form-modal .nl-search-inp {
    background: rgba(26, 26, 28, .85) !important;
    border-color: rgba(212, 160, 23,.35) !important;
    color: #fff;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #cf-form-modal label {
    color: rgba(255,255,255,.7) !important;
  }
  #cf-form-modal select.nl-search-inp {
    background: rgba(26, 26, 28, .85) !important;
  }
  #cf-form-modal .wk-modal-box {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }


/* ── Header back button ── */
.fuel-header-back {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  cursor: pointer; flex-shrink: 0; padding: 0;
}

/* ── Targets pill (header right) ── */
.fuel-targets-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 999px;
  border: 0.5px solid rgba(212, 160, 23,0.4);
  background: rgba(212, 160, 23,0.06);
  color: var(--fuel);
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: 'Manrope',var(--fb),sans-serif;
  cursor: pointer; white-space: nowrap;
}

/* ── Ghost quick-log buttons (Voice / Barcode / Scan) ── */
.fuel-ghost-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin-top: 8px;
}
.fuel-ghost-btn {
  text-align: center; padding: 9px 4px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 8px; cursor: pointer;
  font-family: 'Manrope',var(--fb),sans-serif;
  background: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ── Card darkness: match Home/Train glass recipe ── */
.meal-card {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
.tool-card {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
.tool-tile {
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(10,10,11,0.04) 60%, rgba(10,10,11,0.02) 100%) !important;
  border: 0.5px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(18px) !important;
}

/* ── Compact Atlas meal cards ── */
.meal-card {
  position: relative;
  background: rgba(26, 26, 28, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 10px;
}
.meal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5), rgba(212, 160, 23,0.3), transparent);
  z-index: 1;
}
.meal-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; cursor: pointer;
}
.meal-chevron {
  color: var(--text-tertiary); font-size: 18px;
  transition: transform 0.25s ease; display: inline-block;
}
.meal-card.open .meal-chevron { transform: rotate(90deg); }
.meal-card-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.meal-card.open .meal-card-body { max-height: 600px; }
.meal-divider { height: 0.5px; background: rgba(255,255,255,0.08); margin: 0 16px; }
.food-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}
.food-row:last-of-type { border-bottom: none; }
.meal-actions { display: flex; gap: 8px; padding: 12px 16px 14px; }
.meal-action-btn {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 0.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  font-family: 'Manrope',var(--fb),sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; cursor: pointer; transition: all 0.15s ease;
}
.meal-action-btn:active { border-color: rgba(212, 160, 23,0.4); color: var(--fuel); }
.meal-type-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(212, 160, 23,0.45);
  color: var(--text-primary);
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: 'Manrope',var(--fb),sans-serif;
}
.add-meal-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  border: none;
  background: var(--btn-gold);
  color: #060606;
  font-family: 'Orbitron', sans-serif; font-size: 14px; font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 2px 18px rgba(212, 160, 23,0.35),0 4px 20px rgba(0,0,0,0.4);
  transition: all 0.15s ease; margin-top: 10px;
}
.add-meal-btn:active { transform: scale(0.99); opacity: 0.9; }

/* ============ INTUITIVE MODE — rings + meal cards ============ */
/* Visibility toggle — class-based so original inline display values
   (e.g. #nl-meal-cards display:flex) are preserved when un-hidden. */
.track-hidden { display: none !important; }
/* Nutrition v3: a phase shows only its own numbers (spec §1: early phases show none). */
body.nz-hide-calories [data-nz~="calories"], body.nz-hide-protein [data-nz~="protein"],
body.nz-hide-carbs [data-nz~="carbs"], body.nz-hide-fat [data-nz~="fat"],
body.nz-hide-all [data-nz~="any"] { display: none !important; }
body.nz-hide-calories .nl-food-cals, body.nz-hide-calories #nl-week-chart-container { display: none !important; }
.nz-phase-panel { padding: 16px; margin-bottom: 12px; }
.nz-phase-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.nz-phase-code { font-family: 'Orbitron', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #D4A017; }
.nz-phase-name { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.nz-phase-day { margin-left: auto; font-size: 11px; color: var(--text-tertiary); letter-spacing: .04em; }
.nz-phase-change { font-size: 13px; line-height: 1.45; color: var(--text-secondary); margin-bottom: 12px; }
.nz-rules-title { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px; color: rgba(212,160,23,.85); margin: 4px 0 6px; }
.nz-rules { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nz-rules li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.88); }
.nz-rules li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #D4A017; }
.nz-weight-row { margin-bottom: 12px; }
/* Train: last-known workout while the fresh one loads. */
.wk-stale { opacity: .55; pointer-events: none; filter: saturate(.6); transition: opacity .2s; }
/* First open on a device: no numbers until the member's own data is in. */
body.nz-pending .macros-fuel-hero, body.nz-pending .macros-fuel-controls, body.nz-pending #nz-protein-hero { visibility: hidden; }
body.nz-pending #nz-phase-panel { display: block !important; min-height: 140px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04)); background-size: 200% 100%;
  animation: nz-shimmer 1.2s linear infinite; }
@keyframes nz-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.nz-prot-line { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 10px; }
.nz-prot-rec-in { color: rgba(255,255,255,.55); }
.nz-prot-edit { margin-left: 10px; vertical-align: middle; }
.nz-prot-rec { font-size: 12px; color: rgba(255,255,255,.55); margin: 2px 0 6px; }
.nz-prot-suggest { font-size: 13px; color: rgba(255,255,255,.85); margin: 8px 0; padding: 10px 12px; border: 1px solid rgba(212,160,23,.3); border-radius: 10px; }
.nz-pe-box { padding: 20px; max-width: 380px; }
.nz-pe-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.nz-pe-rec, .nz-pe-range { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.nz-pe-unit { font-size: 13px; color: rgba(255,255,255,.6); }
.nz-prot-weight { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.nz-nudge { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.nz-weight-lbl { font-size: 13px; color: rgba(255,255,255,.75); }
.nz-weight-done { font-size: 13px; color: #D4A017; font-weight: 600; margin-bottom: 12px; }
.nz-num + .nz-num { margin-left: 6px; }
/* D1: food tracking is hidden entirely; the phase card stays. */
body.nz-no-logging .macros-fuel-hero, body.nz-no-logging .macros-fuel-controls:not(.nz-phase-panel),
body.nz-no-logging [data-nz-log] { display: none !important; }
.nz-q { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.nz-rules { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.nz-rule-l { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.nz-rule-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.nz-rule-ans { padding: 9px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.nz-rule-ans.is-on { border-color: #D4A017; background: rgba(212,160,23,.16); color: #fff; }
.nz-done { font-size: 13px; font-weight: 600; color: #D4A017; }
.nz-rule-st { font-size: 11px; font-weight: 600; color: #D4A017; margin-top: 4px; }
.nz-rule-st.is-err { color: #ff6b6b; }
.nz-co-skip { margin: -2px 0 10px; }
.nz-end-co { font-size: 12px; color: rgba(255,255,255,.65); margin: -4px 0 12px; }
.nz-hint { font-size: 12px; color: var(--text-tertiary); }
.nz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nz-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: #fff; font-size: 14px; }
.nz-input-sm { flex: 0 0 64px; }
.nz-end { margin-top: 4px; padding: 14px; border-radius: 12px; background: rgba(212,160,23,.07); border: 1px solid rgba(212,160,23,.3); }
.nz-end-title { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 2px; color: #D4A017; margin-bottom: 8px; }
.nz-end-text { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.88); margin-bottom: 12px; }
.nz-prot-big { font-family: 'Rajdhani', sans-serif; font-size: 40px; font-weight: 600; color: #fff; margin-top: 10px; line-height: 1; }
.nz-prot-big span { font-size: 18px; color: var(--text-tertiary); }
.nz-prot-sub { font-size: 12px; color: var(--text-secondary); margin: 6px 0 10px; }
.nz-prot-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 14px; }
.nz-prot-fill { height: 100%; background: #D4A017; transition: width .3s ease; }
.nz-prot-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.nz-prot-entry { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.8); }
.nz-undo { background: none; border: none; color: var(--text-tertiary); font-size: 12px; text-decoration: underline; cursor: pointer; }
/* Weekly check-in (spec §4) */
.wc-home { padding: 12px 14px; cursor: pointer; }
.wc-home-title { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #D4A017; margin-bottom: 4px; }
.wc-home-text { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.85); margin-bottom: 8px; }
.wc-home .wk-btn-primary { padding: 11px; font-size: 14px; }
#wc-sheet { position: fixed; inset: 0; z-index: 9998; background: rgba(10,10,11,.86); display: none; align-items: flex-end; justify-content: center; }
.wc-panel { width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; background: #121214; border-radius: 22px 22px 0 0; border: .5px solid rgba(255,255,255,.14); padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.wc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wc-head { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 2px; color: #D4A017; }
.wc-x { background: none; border: none; color: rgba(255,255,255,.5); font-size: 24px; cursor: pointer; line-height: 1; }
.wc-sec { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; margin: 18px 0 8px; }
.wc-opt { letter-spacing: .04em; text-transform: none; font-weight: 400; }
.wc-field { margin-bottom: 12px; }
.wc-label { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.wc-hint { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
.wc-note { font-size: 12px; color: #D4A017; margin: 8px 0; }
.wc-ta { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: #fff; font-size: 14px; font-family: inherit; resize: vertical; }
.wc-rate { margin-bottom: 10px; }
.wc-rate-l { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.wc-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.wc-pill { min-width: 30px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04); color: rgba(255,255,255,.75); font-size: 12px; cursor: pointer; }
.wc-pill.on { background: rgba(212,160,23,.2); border-color: #D4A017; color: #D4A017; font-weight: 700; }
#wc-effort { width: 100%; accent-color: #D4A017; }
.wc-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.wc-photo { display: flex; align-items: center; justify-content: center; height: 64px; border-radius: 10px; border: 1px dashed rgba(255,255,255,.2); font-size: 11px; color: var(--text-tertiary); cursor: pointer; text-align: center; }
.wc-photo input { display: none; }
.wc-photo.on { border-style: solid; border-color: #D4A017; color: #D4A017; }
.wc-err { color: #ff6b6b; font-size: 12px; min-height: 16px; margin-bottom: 6px; }
.wc-submit { width: 100%; margin-top: 6px; }
.wc-loading { font-size: 14px; color: rgba(255,255,255,.85); text-align: center; padding: 12px 0; }
.wc-progress { padding: 30px 0; text-align: center; }
.wc-spin { width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid rgba(212,160,23,.2); border-top-color: #D4A017; animation: wcspin 1s linear infinite; }
@keyframes wcspin { to { transform: rotate(360deg); } }
.wc-table-wrap { overflow-x: auto; margin: 0 -4px; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 11px; font-family: 'DM Mono', monospace; }
.wc-table th { font-weight: 500; color: var(--text-tertiary); padding: 4px 3px; text-align: right; }
.wc-table td { padding: 5px 3px; text-align: right; color: rgba(255,255,255,.85); border-top: .5px solid rgba(255,255,255,.06); }
.wc-table td.wc-d { text-align: left; color: var(--text-secondary); }
.wc-table td.wc-out { color: #ff9f43; font-weight: 700; }
.wc-table tr.wc-avg td { color: #D4A017; border-top: 1px solid rgba(212,160,23,.3); }
.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.wc-chip { font-size: 11px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); }
.wc-chip-flag { background: rgba(255,159,67,.15); color: #ff9f43; }
#pw-sheet { position: fixed; inset: 0; z-index: 9998; background: rgba(10,10,11,.86); display: none; align-items: flex-end; justify-content: center; }
#pw-sheet .wc-panel { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; }
.hm-h { font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.45); font-weight: 700; margin-bottom: 4px; }
/* Home cards (owner, Oct 3): Fuel's charcoal card, compact so the door,
   Today and the report fit one phone screen. */
.hm-card { padding: 12px 14px; border-radius: 14px; background: var(--glass-bg); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--glass-shadow); margin-bottom: 8px; }
.hm-t { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.25; }
.hm-sub { font-size: 12px; color: rgba(255,255,255,.6); margin: 2px 0 8px; }
.hm-row { display: flex; gap: 8px; }
.hm-row .nz-input { flex: 1 1 auto; min-width: 0; width: auto; font-size: 16px; padding: 9px 12px; }
.hm-row .wk-btn-primary { flex: 0 0 auto; width: auto; min-width: 88px; padding: 0 18px; }
.hm-start { width: 100%; padding: 11px; border-radius: 11px; border: 0; background: var(--btn-gold); color: #0A0A0B; font-weight: 800; font-size: 14px; letter-spacing: .14em; cursor: pointer; }
.hm-week { margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; background: var(--glass-bg); box-shadow: var(--glass-shadow); border: 1px solid rgba(212,160,23,.45); text-align: center; }
.hm-week-t { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.4; margin-bottom: 10px; }
.hm-plan-btn { display: block; width: 50%; min-width: 180px; margin: 0 auto; padding: 11px 0; border-radius: 11px; border: 0; background: var(--btn-gold); color: #0A0A0B; font-weight: 800; font-size: 14px; letter-spacing: .14em; cursor: pointer; box-shadow: 0 6px 20px rgba(212,160,23,.25); }
.hm-door { padding: 12px; border-radius: 14px; background: var(--glass-bg); box-shadow: var(--glass-shadow); border: 1px solid rgba(212,160,23,.45); }
/* The IRON app's door (iron-ops member.css .wk-unlock): solid gold button,
   green only on a confirmed unlock, red only on a real refusal. */
.hm-unlock { width: 100%; padding: 11px; background: var(--btn-gold); border: none; border-radius: 12px; font-family: var(--fh); font-size: 18px; letter-spacing: .14em; color: #000; cursor: pointer; transition: transform .15s, box-shadow .3s, filter .2s; box-shadow: 0 0 24px rgba(212,160,23,.3); display: flex; align-items: center; justify-content: center; gap: 10px; }
.hm-unlock:active:not(:disabled) { transform: translateY(1px); }
.hm-unlock:disabled { filter: saturate(.5) brightness(.8); cursor: default; }
.hm-unlock.is-open { background: linear-gradient(135deg, #43a05e 0%, #27794a 48%, #10482a 100%); color: #fff; box-shadow: 0 0 34px rgba(39,121,74,.55); }
.hm-unlock.is-failed { background: linear-gradient(135deg, #c0453c 0%, #93302a 48%, #5c1c18 100%); color: #fff; box-shadow: 0 0 28px rgba(147,48,42,.45); }
.hm-unlock svg { width: 19px; height: 19px; }
.hm-unlockgym { margin-top: 7px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hm-unlockname { font-family: var(--fh); font-size: 15px; letter-spacing: .1em; color: #fff; }
.hm-unlockswitch { background: none; border: 0; padding: 0; font-family: var(--fd); font-size: 12px; letter-spacing: .04em; color: rgba(212,160,23,.7); cursor: pointer; }
.hm-unlockmsg { margin-top: 8px; font-family: var(--fd); font-size: 12.5px; line-height: 1.4; }
.hm-unlockmsg.warn { color: #e8c07c; }
.hm-unlockmsg.bad { color: #e8927c; }
.hm-unlockmsg a { color: #D4A017; }
.hm-unlockpick { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.hm-unlockpick .wk-btn-ghost, .hm-unlockpick .wk-btn-primary { flex: 1; }
/* Train / Fuel "Next" strip: slim gold fill, dark text, stays an accent. */
.pw-strip { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; background: var(--btn-gold); color: #0A0A0B; font-size: 12.5px; line-height: 1.3; }
.pw-strip-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-strip-t b { font-weight: 800; }
.pw-strip-edit { flex-shrink: 0; color: #0A0A0B; font-weight: 700; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.pw-sec { margin-bottom: 8px; }
.pw-sec + .pw-sec, #pw-meals { margin-top: 22px; }
.pw-sec-t { font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: #D4A017; margin: 18px 0 2px; }
.pw-sec-why { font-size: 13px; line-height: 18px; color: #8E8C87; margin-bottom: 12px; }
/* Plan my week: MY WORKOUTS / COACHED SESSIONS open from a row (Oct 25). */
.pw-fold { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 14px 0; background: none; border: 0; border-bottom: 1px solid rgba(250,250,247,.10); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pw-fold-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-fold .pw-sec-t { margin: 0; }
.pw-fold .pw-sec-why { margin: 0; }
.pw-fold-sum { font-size: 13px; line-height: 18px; color: #FAFAF7; margin-top: 4px; }
.pw-fold-chev { flex: none; font-size: 22px; line-height: 1; color: #8E8C87; transition: transform .15s ease; }
.pw-fold.is-open .pw-fold-chev { transform: rotate(90deg); }
.pw-fold.is-open { border-bottom: 0; padding-bottom: 6px; }
.pw-fold-body { padding-bottom: 6px; }
.pw-sec.pw-sec-fold { margin-bottom: 0; }
/* COACHED SESSIONS: Benton | Conway, then one tap per day (Oct 25). */
.pw-seg { display: flex; gap: 4px; padding: 3px; margin: 2px 0 10px; border-radius: 10px; background: rgba(250,250,247,.06); }
.pw-seg-b { flex: 1; padding: 8px 0; border: 0; border-radius: 8px; background: transparent; color: #8E8C87; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.pw-seg-b.on { background: #1A1A1C; color: #FAFAF7; box-shadow: inset 0 0 0 1px rgba(250,250,247,.14); }
.pw-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; margin: 0 0 6px; padding: 12px 14px; border: 1px solid rgba(250,250,247,.12); border-radius: 12px; background: transparent; color: #FAFAF7; font: inherit; text-align: left; cursor: pointer; }
.pw-slot .pw-row-d { min-width: 0; }
.pw-slot-t { font-size: 13px; color: #8E8C87; }
.pw-slot-at { flex-basis: 100%; font-size: 12px; color: #8E8C87; }
.pw-slot.on { border-color: #D4A017; background: rgba(212,160,23,.12); }
.pw-slot.on .pw-row-d, .pw-slot.on .pw-slot-t { color: #D4A017; }
.pw-sec-fold + .pw-sec-fold { margin-top: 0; }
/* A saved coached session on Home (Next, Today): gold tag so it reads apart from a solo workout. */
.pw-tag { display: inline-block; vertical-align: 1px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(212,160,23,.6); background: rgba(212,160,23,.12);
  color: #D4A017; font-size: 10px; font-weight: 700; line-height: 13px; letter-spacing: .12em; text-transform: uppercase; }
.pw-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 8px; }
.pw-day { padding: 8px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.03); color: rgba(255,255,255,.7); font-size: 11px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pw-day span { font-size: 15px; color: #fff; }
.pw-day.on { background: #D4A017; border-color: #D4A017; color: #0A0A0B; }
.pw-day.on span { color: #0A0A0B; }
.pw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.pw-row-d { min-width: 110px; font-size: 13px; color: #fff; font-weight: 600; }
.pw-in { background: #1A1A1C; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #fff; padding: 7px 8px; font-size: 13px; }
.pw-other { width: 120px; }
.pw-chip { padding: 7px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; cursor: pointer; }
.pw-chip.on { background: #D4A017; border-color: #D4A017; color: #0A0A0B; }
.pw-x { border: 0; background: transparent; color: rgba(255,255,255,.5); font-size: 20px; cursor: pointer; padding: 0 6px; }
.pw-add { margin-top: 6px; border: 1px dashed rgba(212,160,23,.5); background: transparent; color: #D4A017; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.pw-actions { margin: 16px 0 8px; }
.pw-actions .wk-btn-primary { width: 100%; }
.wc-do { padding: 16px; border-radius: 14px; background: var(--card-grill); border: 1px solid rgba(212,160,23,.55); margin-bottom: 14px; }
.wc-do-h { font-size: 13px; font-weight: 800; letter-spacing: .2em; color: #D4A017; margin-bottom: 10px; }
.wc-do-list { list-style: none; margin: 0; padding: 0; }
.wc-do-item { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(212,160,23,.18); }
.wc-do-item:first-child { border-top: 0; padding-top: 0; }
.wc-do-item.is-done .wc-do-t { color: rgba(255,255,255,.55); }
.wc-do-done { margin-top: 8px; font-size: 13px; font-weight: 700; color: #D4A017; }
.wc-do-done a { color: rgba(212,160,23,.8); font-weight: 400; }
/* Home info line: Fuel's "Logged today" meal row (.meal-card) on one line. */
.hm-line { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; overflow: hidden;
  background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); color: #fff; font-size: 13px; line-height: 1.3; }
.hm-line::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5), rgba(212, 160, 23,0.3), transparent); }
.hm-line-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-line-t b { font-weight: 700; }
.wt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wt-title { font-size: 10px; letter-spacing: .18em; color: rgba(255,255,255,.55); font-weight: 700; }
.wt-tabs { display: flex; gap: 4px; }
/* ID-scoped + !important: Fuel's screen-wide button rule (body.tab-nutrition
   #v4-screen-nutrition > div:first-child button) would make every tab look selected. */
#v4-screen-nutrition #wt-card .wt-tab { padding: 4px 9px !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.12) !important; background: transparent !important; color: rgba(255,255,255,.5) !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer; box-shadow: none !important; }
#v4-screen-nutrition #wt-card .wt-tab.on { border-color: rgba(212,160,23,.8) !important; background: rgba(212,160,23,.14) !important; color: #D4A017 !important; }
.wt-avg { margin: 8px 0 6px; font-size: 13px; color: rgba(255,255,255,.75); }
.wt-avg b { color: #fff; font-size: 16px; }
.wt-plot { position: relative; height: 170px; }
.wt-key { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.45); }
.wt-key-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.wt-key-line { width: 16px; height: 3px; border-radius: 2px; background: #D4A017; margin-left: 10px; }
.ob-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ob-choice { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: var(--glass-bg); color: #fff; cursor: pointer; font: inherit; }
.ob-choice b { display: block; font-size: 15px; margin-bottom: 3px; }
.ob-choice span { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.4; }
.ob-choice.on { border-color: rgba(212,160,23,.85); box-shadow: 0 0 0 1px rgba(212,160,23,.5) inset; }
.ob-choice.on b { color: #D4A017; }
.ob-ok { color: #D4A017; font-weight: 800; }
.hm-coached { display: inline-block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.6); }
.ob-ready-card { padding: 18px 20px; margin-bottom: 12px; }
.ob-ready-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ob-ready-label { font-size: 10px; font-weight: 600; letter-spacing: .18em; color: #D4A017; text-transform: uppercase; }
.ob-ready-pill { font-size: 10px; font-weight: 600; letter-spacing: .1em; color: #D4A017; background: rgba(212,160,23,.12); border: .5px solid rgba(212,160,23,.4); padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.ob-ready-body { font-size: 14px; color: rgba(250,250,247,.75); line-height: 1.6; }
.ob-ready-body b { color: #fff; }
.ob-app-btn { width: 100%; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid rgba(212,160,23,.7); background: transparent; color: #D4A017; font-weight: 800; letter-spacing: .14em; font-size: 13px; cursor: pointer; }
.hm-line-edit { flex-shrink: 0; color: #D4A017; font-weight: 700; font-size: 12.5px; text-decoration: none; }
/* Wednesday Live (Oct 8): the whole row is the link out to Zoom. */
a.hm-live { margin-bottom: 8px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* Home: one 8px gap between every item, card or line. */
#v4-screen-home .hm-line, #v4-screen-home .hm-door { margin-bottom: 8px; }
/* Home cards (design handoff, Oct 22): one structure. To do: full card, warm
   gold edge, one outline action with the shimmer inside it. Done: one 52-pt
   line, dim title, gold ✓. Gold is an accent; UNLOCK stays the only solid gold. */
.hm-host { padding: 0 16px; }
#hm-cards { display: flex; flex-direction: column; padding: 0 16px; }
.hm-flow { display: contents; }
.hm-c { position: relative; box-sizing: border-box; margin-bottom: 10px; border-radius: 14px; background: #1A1A1C; border: 1px solid rgba(250,250,247,.10);
  color: #FAFAF7; font-family: 'Inter', var(--fd); -webkit-font-smoothing: antialiased; }
.hm-c-t { font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: #D4A017; }
.hm-c.is-todo, .hm-c.is-info { padding: 18px; }
.hm-c.is-todo { border-color: rgba(212,160,23,.42); background: #1D1B16; }
.hm-c-s { margin-top: 6px; font-size: 17px; font-weight: 500; line-height: 22px; color: #FAFAF7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hm-c-s b { font-weight: 500; color: #C8C7C2; }
.hm-c-body { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(250,250,247,.08); font-size: 15px; color: #C8C7C2; }
.hm-c-body:empty { display: none; }
.hm-c.has-fold { padding-right: 44px; }
.hm-c.has-fold .hm-c-body, .hm-c.has-fold .hm-act { margin-right: -26px; }
.hm-c.has-fold:not(.is-open) .hm-c-body { display: none; }
.hm-c-chev { position: absolute; right: 2px; top: 4px; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-c-chev::before { content: ''; position: absolute; right: 16px; top: 20px; width: 12px; height: 12px; box-sizing: border-box;
  border-right: 2px solid #8E8C87; border-bottom: 2px solid #8E8C87; transform: rotate(-135deg); transition: transform .2s; }
.hm-c.has-fold:not(.is-open) .hm-c-chev::before { transform: rotate(45deg); top: 12px; }
.hm-act { position: relative; overflow: hidden; display: block; width: 100%; height: 44px; margin: 14px 0 0; padding: 0; border-radius: 8px;
  border: 1px solid rgba(212,160,23,.7); background: transparent; color: #D4A017; font-family: 'Oswald', var(--fh); font-weight: 600;
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-act::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(242,207,99,.22) 45%, rgba(242,207,99,.32) 50%, rgba(242,207,99,.22) 55%, transparent);
  transform: translateX(-100%); animation: hmGlint 4s linear infinite; animation-delay: var(--hm-glint-delay, 0s); }
/* −60% → +100% of the button: the band is 60% wide, so −100% → +166.67% of itself. */
@keyframes hmGlint { from { transform: translateX(-100%); } to { transform: translateX(166.667%); } }
@media (prefers-reduced-motion: reduce) { .hm-act::after { animation: none; display: none; } }
.hm-c.is-done, .hm-c.is-line { height: 52px; padding: 0 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 50px; align-content: start; align-items: center; gap: 10px; overflow: hidden; }
.hm-c.is-done .hm-c-t, .hm-c.is-line .hm-c-t { font-size: 9.5px; letter-spacing: .12em; white-space: nowrap; color: #8E8C87; }
.hm-c-r { font-size: 15px; font-weight: 500; color: #FAFAF7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-c-ck { color: #D4A017; font-weight: 700; margin-right: 7px; }
.hm-c-link { font-size: 13px; font-weight: 600; color: #D4A017; text-decoration: none; }
button.hm-c-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
/* WALK · REST beside START WORKOUT (owner walk, Oct 24): smaller, outline. */
.hm-alt { display: flex; gap: 8px; margin-top: 8px; }
.hm-alt-b { flex: 1; height: 38px; border-radius: 8px; background: transparent; border: .5px solid rgba(250,250,247,.28); color: rgba(250,250,247,.85);
  font-family: 'Oswald', var(--fh); font-size: 13px; font-weight: 600; letter-spacing: .12em; cursor: pointer; }
.wk-daymark .hm-alt-b { flex: 0 0 auto; height: 32px; padding: 0 14px; }
/* One sheet for small explainers (D1 rules, IGNITE Macros) and the full-height sample day. */
#ig-sheet { position: fixed; inset: 0; z-index: 9998; background: rgba(10,10,11,.86); display: none; align-items: flex-end; justify-content: center; }
#ig-sheet .wc-panel { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; }
#ig-sheet.is-full .wc-panel { height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); max-height: none; }
#ig-sheet .ig-sub { font-size: 14px; color: rgba(250,250,247,.7); line-height: 1.5; margin: 0 0 14px; }
#ig-sheet .tool-card-body { max-height: none !important; overflow: visible !important; padding: 0 !important; display: block !important; }
#ig-sheet #sample-output { max-height: none !important; overflow: visible !important; }
.ig-phase { padding: 12px 0; border-top: .5px solid rgba(255,255,255,.1); }
.ig-phase-h { display: flex; gap: 8px; align-items: baseline; font-size: 15px; color: #FAFAF7; }
.ig-phase-h b { color: #D4A017; font-family: 'Oswald', var(--fh); letter-spacing: .04em; }
.ig-phase-h span { margin-left: auto; font-size: 12px; color: rgba(250,250,247,.5); }
.ig-phase p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(250,250,247,.7); }
.ig-phase.is-here .ig-phase-h span { color: #D4A017; }
.nz-rule-link { background: none; border: none; padding: 0; font: inherit; color: #D4A017; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
/* To do → done: 138 → 52 in 380 ms; the old state line and button fade in the first 140 ms. */
.hm-c.is-collapsing { transition: height 380ms cubic-bezier(.22,1,.36,1); }
.hm-c-ghost { position: absolute; left: 18px; right: 18px; pointer-events: none; animation: hmGhost 140ms linear forwards; }
.hm-c-ghost .hm-act::after { display: none; }
@keyframes hmGhost { to { opacity: 0; } }
/* Day strip, and the all-done header that replaces it. */
.hm-strip { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px 10px; font-family: 'Inter', var(--fd); }
.hm-strip-k { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8E8C87; }
.hm-strip-k em { font-style: normal; color: #FAFAF7; }
.hm-ticks { display: flex; gap: 4px; }
.hm-ticks u { display: block; width: 22px; height: 3px; border-radius: 2px; background: rgba(250,250,247,.14); text-decoration: none; }
.hm-ticks u.f { background: #D4A017; }
.hm-fin { display: flex; flex-direction: column; gap: 10px; padding: 14px 2px 16px; }
.hm-fin .hm-strip { padding: 0; }
.hm-fin-h {
  margin: 0; font-family: 'Oswald', var(--fh); font-weight: 700; font-size: 30px; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: #FAFAF7; }
.hm-fin-h span { color: #D4A017; }
.hm-fin-p { margin: 0; font-family: 'Inter', var(--fd); font-size: 14px; line-height: 20px; font-weight: 400; color: #C8C7C2; }
/* Inside a card: the app's existing fields, quieter (no gold fills on Home). */
.hm-c .hm-sub { font-size: 14px; color: #C8C7C2; margin: 0 0 4px; }
.hm-dc-ask { font-size: 15px; margin-bottom: 2px; }
.hm-c .nz-input { font-size: 16px; }   /* iOS zooms into anything smaller */
.hm-c .nz-input-sm { flex: 0 0 76px; }
.hm-c .nz-row { margin-bottom: 8px; flex-wrap: nowrap; }
.hm-c .nz-row .wk-btn-primary, .hm-c .nz-row .wk-btn-ghost { flex: 1 1 0; width: auto; min-width: 0; height: 44px; padding: 0 6px; font-size: 14px; }
.hm-c .nz-weight-row .wk-btn-ghost { flex: 0 0 auto; padding: 0 16px; }
.hm-c .wk-btn-primary { background: transparent; border: 1px solid rgba(212,160,23,.7); color: #D4A017; box-shadow: none; }
.hm-c .nz-prot-big { margin-top: 0; }
.hm-c .wc-day-row select { font-size: 16px; }
.nz-rules-fold { margin: 4px 0 10px; }
.nz-rules-fold > summary { list-style: none; cursor: pointer; margin: 0; }
.nz-rules-fold > summary::-webkit-details-marker { display: none; }
.nz-rules-fold > summary::after { content: ' +'; }
.nz-rules-fold[open] > summary::after { content: ' −'; }
.nz-rules-fold[open] .nz-rules { margin-top: 6px; }
.wc-do-n { flex: 0 0 22px; color: #D4A017; font-weight: 800; font-size: 20px; line-height: 1.2; }
.wc-do-body { flex: 1; min-width: 0; }
.wc-do-t { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.4; }
.wc-do-first .wc-do-t { font-size: 18px; font-weight: 700; }
.wc-do-btn { margin-top: 10px; padding: 10px 16px; border-radius: 10px; border: 0; background: var(--btn-gold); color: #0A0A0B; font-weight: 800; font-size: 13px; letter-spacing: .12em; cursor: pointer; }
.wc-recap { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; margin: 4px 0 12px; }
.wc-note-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin: 12px 0 4px; }
.wc-notes { margin: 0; padding-left: 18px; font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.45; }
.wc-day-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.75); }
.wc-day-row select { width: auto; min-width: 140px; }
.wc-day-row .wc-remind-btn { width: auto; margin: 0; padding: 8px 14px; font-size: 12px; flex-shrink: 0; }
.wc-day-row b { color: var(--fuel); font-weight: 700; }
.wc-day-note { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.55); }
.wc-day-row > span:first-child { white-space: nowrap; }
.wc-day-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wc-day .wc-day-pick { align-items: flex-start; }
.nz-input:disabled { opacity: .6; }
/* "YOUR COACH REPLIED" (Oct 24) */
.cr-video { position: relative; aspect-ratio: 16 / 9; margin: 10px 0 4px; border-radius: 12px; overflow: hidden; background: #000; }
.cr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cr-watch { display: inline-block; margin: 10px 0 4px; padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(212,160,23,.5); background: none; color: #D4A017; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
/* "Watch your video": full screen over everything, a close X top right (Oct 25). */
#cr-player { position: fixed; inset: 0; z-index: 100000; background: #000; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 56px) 0 env(safe-area-inset-bottom, 0px); }
#cr-player[hidden] { display: none; }
#cr-player iframe { flex: 1; width: 100%; border: 0; }
.crp-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 44px; cursor: pointer; }
body.crp-on { overflow: hidden; }
.cr-note { margin-top: 10px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.85); white-space: pre-wrap; }
.cr-err { margin-top: 8px; font-size: 13px; color: #ff9999; }
.wc-rules { display: flex; flex-direction: column; gap: 14px; }
.wc-rule-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.wc-rule-l { font-size: 14px; color: rgba(255,255,255,.9); }
.wc-rule-n { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #D4A017; }
.wc-rule-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wc-rule-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 15px; font-weight: 700; }
.wc-rule-cell.is-y { color: #D4A017; }
.wc-rule-cell.is-n { color: #ef4444; background: rgba(239,68,68,.12); }
.wc-rule-cell.is-u { color: rgba(255,255,255,.3); }
.wc-rule-cell.is-m { color: #E8B84A; background: rgba(212,160,23,.10); }
.wc-do-week li { color: rgba(255,255,255,.92); }
.wc-rule-d { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.45); }
.wc-rule-miss { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.65); }
.cr-all { display: block; margin-top: 10px; font-size: 13px; color: rgba(212,160,23,.85); text-decoration: none; }
/* MY REVIEWS (Oct 25): Knox → REVIEWS */
#v4-screen-knox .rv-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px calc(80px + env(safe-area-inset-bottom, 0px)); }
.rv-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #D4A017; box-shadow: 0 0 6px rgba(212,160,23,.6); }
.rv-dot[hidden] { display: none; }
.kx-mode-btn .rv-dot { margin-left: 5px; width: 6px; height: 6px; }
.kx-mode-btn.active .rv-dot { background: #fff; box-shadow: none; }
/* The Home card (.hm-c, Workout / Nutrition), Oct 25: same surface, title and to-do state. */
.rv-item { margin-bottom: 10px; border-radius: 14px; background: #1A1A1C; border: 1px solid rgba(250,250,247,.10); overflow: hidden; color: #FAFAF7; font-family: 'Inter', var(--fd); -webkit-font-smoothing: antialiased; }
.rv-item.is-unwatched { border-color: rgba(212,160,23,.42); background: #1D1B16; }
.rv-item.is-open { border-color: rgba(212,160,23,.42); }
.rv-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rv-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-week { font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: #D4A017; }
.rv-sub { font-size: 17px; font-weight: 500; line-height: 22px; color: #FAFAF7; }
.rv-chev { flex: 0 0 auto; width: 18px; text-align: center; font-size: 18px; color: rgba(255,255,255,.5); }
.rv-body { padding: 0 18px 18px; }
.rv-report .wc-do-btn, .rv-report .wc-do-done a { display: none; }
.rv-sl { margin-top: 24px; }
.rv-reply { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.rv-reply.is-folded { padding: 0; }
.rv-row-t { display: inline-flex; align-items: center; gap: 8px; }
.rv-reply-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; background: none; border: 0; color: rgba(255,255,255,.7); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rv-reply-row.is-open { padding-top: 0; }
.rv-sl + .rv-reply { border-top: 0; }
.rv-from { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); }
.rv-watched { margin-top: 10px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.5); }
.rv-got { display: block; width: 100%; margin-top: 12px; }
.rv-empty { padding: 32px 8px; text-align: center; font-size: 14px; color: rgba(255,255,255,.55); }
.wc-focus { padding: 14px; border-radius: 12px; background: var(--card-grill); border: 1px solid rgba(212,160,23,.4); }
.wc-focus .wc-sec { margin-top: 0; }
.wc-focus-t { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.4; }
.wc-summary { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.88); margin: 14px 0 0; }
.wc-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
.wc-cite { display: block; font-size: 12px; color: var(--cyan); margin-bottom: 4px; }
.wc-kx-chip { margin: 0 6px 6px 0; }
/* Weekly report (design handoff, Oct 22): same copy; the focus box leads, the
   summary is smaller than the focus line, gold section labels with rules, 32 apart. */
.wc-panel.wc-report { background: #141415; border: 0; border-top: 1px solid rgba(250,250,247,.14); border-radius: 26px 26px 0 0;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); font-family: 'Inter', var(--fd); color: #C8C7C2; }
.wc-report .wc-top { margin-bottom: 0; }
.wc-report .wc-head { font-family: 'Inter', var(--fd); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #D4A017; }
.wc-report .wc-x { font-size: 22px; color: #C8C7C2; }
.wc-report .wc-do { margin: 20px 0 0; padding: 20px; border-radius: 14px; border: 1px solid rgba(212,160,23,.5); background: #17150F; }
.wc-report .wc-do-h { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #D4A017; margin-bottom: 12px; }
.wc-report .wc-do-item { gap: 10px; padding: 0; border: 0; }
.wc-report .wc-do-n { flex: 0 0 22px; font-size: 22px; line-height: 27px; font-weight: 400; }
.wc-report .wc-do-t, .wc-report .wc-do-first .wc-do-t { font-size: 20px; line-height: 27px; font-weight: 600; color: #FAFAF7; }
.wc-report .wc-do-item.is-done .wc-do-t { color: #FAFAF7; }
.wc-report .wc-do-done { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: #D4A017; }
.wc-report .wc-do-done a { color: #D4A017; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wc-report .wc-recap { margin: 24px 0 0; font-size: 15px; line-height: 23px; color: #C8C7C2; }
.wc-report .wc-sec-gap { margin-top: 32px; }
.wc-report .wc-sec-gap:empty { display: none; }
.wc-report .wc-sl, .wc-report .nz-end-title {
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #D4A017; padding-bottom: 8px; margin: 0 0 12px; border-bottom: 1px solid rgba(212,160,23,.45); }
.wc-report .wc-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wc-report .wc-notes li { position: relative; padding-left: 18px; font-size: 15px; line-height: 22px; color: #C8C7C2; }
.wc-report .wc-notes li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #8E8C87; }
.wc-report .wc-hint, .wc-report .nz-end-text { font-size: 15px; line-height: 22px; color: #C8C7C2; }
.wc-report .nz-end { padding: 0; border: 0; background: none; }
.wc-report .wc-table-wrap { margin: 0; }
.wc-report .wc-table { font-family: 'JetBrains Mono', 'DM Mono', monospace; font-size: 14px; color: #C8C7C2; }
.wc-report .wc-table th { height: 34px; padding: 0 3px; font-weight: 400; color: #8E8C87; }
.wc-report .wc-table td { height: 33px; padding: 0 3px; border-top: 0; color: #C8C7C2; }
.wc-report .wc-table td.wc-d { color: #C8C7C2; }
.wc-report .wc-table tr.wc-avg td { height: 40px; color: #D4A017; border-top: 1px solid rgba(212,160,23,.6); }
.wc-report .wc-chips { margin: 14px 0 0; gap: 8px; }
.wc-report .wc-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: none; border: 1px solid rgba(250,250,247,.14); color: #C8C7C2; }
.wc-report .wc-chip-flag { color: #ff9f43; }

.intuitive-rings-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 4px;
  padding: 14px 4px 18px;
}

.intuitive-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.intuitive-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  filter: drop-shadow(0 0 7px rgba(212,160,23,0.55));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* target tick — top layer. Renders a ~1% (≈3.6°) light mark at the
       --ring-target angle, sitting on top of the fill so under/over-target
       reads at a glance. Sentinel -10 (when --ring-target is unset, e.g.
       Whole Foods or empty rings) parks both stops off-circle → no tick. */
    conic-gradient(
      transparent calc((var(--ring-target, -10) - 0.5) * 1%),
      rgba(255, 255, 255, 0.9) calc((var(--ring-target, -10) - 0.5) * 1%),
      rgba(255, 255, 255, 0.9) calc((var(--ring-target, -10) + 0.5) * 1%),
      transparent calc((var(--ring-target, -10) + 0.5) * 1%)
    ),
    /* fill + track — below. Inline --ring-color (set by JS on overshoot)
       beats the per-class default via specificity; no !important needed. */
    conic-gradient(
      var(--ring-color, var(--fuel)) calc(var(--ring-fill, 0) * 1%),
      rgba(255, 255, 255, 0.08) 0
    );
}

.intuitive-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg-2, #0f1419);
}

.intuitive-ring-value {
  position: relative;
  z-index: 1;
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.intuitive-ring-value.is-empty {
  color: var(--text-tertiary);
}

.intuitive-ring-label {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.intuitive-ring.hunger { --ring-color: var(--signal); }
.intuitive-ring.satisfaction { --ring-color: var(--knox); }
.intuitive-ring.whole_foods { --ring-color: var(--fuel, #D4A017); }

.intuitive-ring.is-empty {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Weekly Trend (intuitive Fuel screen) — inner panels nested in the hero card ── */
.weekly-trend-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}
.weekly-trend-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.weekly-trend-header-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fuel);
  box-shadow: 0 0 6px var(--fuel);
}
.weekly-trend-header-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
}
.weekly-trend-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(10,10,11,0.04) 60%, rgba(10,10,11,0.02) 100%);
  border: 0.5px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
/* Illuminated white top accent — thicker/brighter at center, fading thin at edges */
.tool-tile::before, .biogen-learn-card::before, .weekly-trend-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 40%, transparent 78%);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  border-radius: 0 0 2px 2px;
}
.weekly-trend-card:last-child { margin-bottom: 0; }
.wt-card-header {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
/* Card 1 — Consistency */
.wt-consistency-headline {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.wt-big-num {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-right: 5px;
}
.wt-consistency-dots {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
}
.wt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.wt-dot.is-logged {
  background: var(--fuel);
  box-shadow: 0 0 6px rgba(212, 160, 23, 0.5);
}
/* Card 2 — Trends */
.wt-trend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.wt-trend-label {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 500;
}
.wt-trend-value {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: var(--text-primary);
  min-width: 38px;
  text-align: center;
}
.wt-trend-delta {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  min-width: 48px;
  text-align: right;
}
.wt-trend-delta.toward-target { color: var(--fuel); }
.wt-trend-delta.away-target { color: var(--iron); }
.wt-trend-delta.neutral { color: var(--text-tertiary); }
.wt-trend-micro {
  font-size: 10.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin: 2px 0 2px;
}
/* Coaching lines + empty states (Knox voice) */
.wt-coaching-line {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}
.wt-empty-state {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
  font-style: italic;
}

.intuitive-empty-prompt {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  margin: 4px 0 14px;
}

/* Intuitive Logged Today meal card — compact one-line layout */
.intuitive-meal-card {
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(212, 160, 23, 0.04);
  border: 0.5px solid rgba(212, 160, 23, 0.12);
  margin-bottom: 8px;
}

.intuitive-meal-card .card-accent {
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.55) 50%, transparent);
  border-radius: 0 0 2px 2px;
}

.intuitive-meal-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.intuitive-meal-type {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: capitalize;
}

.intuitive-meal-metrics {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.intuitive-meal-time {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   INTUITIVE MEAL-LOG MODAL (Workstream 5)
   Reuses .fuel-modal-overlay / .fuel-modal-sheet sheet pattern.
   ════════════════════════════════════════════════════════ */
#intuitive-meal-modal .fuel-modal-sheet {
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

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

/* "Today, [time]" backfill control */
.imeal-when-row {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}
.imeal-when-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
}
.imeal-when-btn::before {
  content: "🕓 ";
  font-size: 10px;
}
.imeal-when-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
}

/* Metric block — question + pips + anchors */
.imeal-metric { margin-bottom: 18px; }
.imeal-metric-q {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.imeal-metric-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: -4px 0 9px;
  font-family: 'Manrope', sans-serif;
  line-height: 1.4;
}
.imeal-req {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--knox);
  border: 0.5px solid rgba(212, 160, 23, 0.4);
  border-radius: 999px;
  padding: 2px 7px;
  font-weight: 700;
}
.imeal-optional {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* Tap-pips — 5 tappable segments (NOT a slider) */
.imeal-pips {
  display: flex;
  gap: 6px;
}
.imeal-pip {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.imeal-pip:active { transform: scale(0.94); }
.imeal-pip::after {
  content: attr(data-val);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--text-tertiary);
  transition: color 0.14s;
}
.imeal-pip.on::after { color: #0A0A0B; font-weight: 600; }

/* Hunger — green -> red per position (5 = bad: starving) */
.imeal-pips[data-metric="hunger"] .imeal-pip[data-val="1"].on { background:#4ade80; border-color:#4ade80; }
.imeal-pips[data-metric="hunger"] .imeal-pip[data-val="2"].on { background:#a3e635; border-color:#a3e635; }
.imeal-pips[data-metric="hunger"] .imeal-pip[data-val="3"].on { background:#D4A017; border-color:#D4A017; }
.imeal-pips[data-metric="hunger"] .imeal-pip[data-val="4"].on { background:#fb923c; border-color:#fb923c; }
.imeal-pips[data-metric="hunger"] .imeal-pip[data-val="5"].on { background:#f87171; border-color:#f87171; }

/* Satisfaction — uniform knox purple. NOT a gradient: 5 (stuffed) is an
   overshoot, not a win. The anchor labels carry the "middle is the goal". */
.imeal-pips[data-metric="satisfaction"] .imeal-pip.on {
  background: var(--knox);
  border-color: var(--knox);
}

/* Whole foods — uniform fuel teal (single-ingredient quality, foundational) */
.imeal-pips[data-metric="whole_foods"] .imeal-pip.on {
  background: var(--fuel, #D4A017);
  border-color: var(--fuel, #D4A017);
}
/* Whole-foods target ("All ✓") in its own accent rather than satisfaction purple */
#imeal-whole-foods-block .imeal-anchor-target {
  color: var(--fuel, #D4A017);
  text-shadow: 0 0 9px rgba(212, 160, 23, 0.5);
}

/* Anchor labels under the pips */
.imeal-anchors {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
}
.imeal-anchor {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-family: 'Manrope', sans-serif;
}
.imeal-anchors-3 .imeal-anchor { flex: 1; text-align: center; }
.imeal-anchors-3 .imeal-anchor:first-child { text-align: left; }
.imeal-anchors-3 .imeal-anchor:last-child { text-align: right; }
/* The target/win state — visually the hero of the satisfaction row */
.imeal-anchor-target {
  color: var(--knox);
  font-weight: 700;
  text-shadow: 0 0 9px rgba(212, 160, 23, 0.55);
}

.imeal-error {
  font-size: 12px;
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border: 0.5px solid rgba(248, 113, 113, 0.3);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-family: 'Manrope', sans-serif;
}

.imeal-save { width: 100%; }
.imeal-save:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.intuitive-empty-logged {
  text-align: center;
  padding: 24px 12px;
  color: var(--text-tertiary);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ── Weekly bar chart ── */
.weekly-chart { position: relative; height: 140px; padding: 0 4px; }
.goal-line {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed rgba(255,255,255,0.3); z-index: 1;
}
.goal-line-label {
  position: absolute; right: 0; top: -8px;
  font-family: 'DM Mono',monospace; font-size: 9px; letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: rgba(26, 26, 28, 0.9); padding: 1px 6px;
  border-radius: 4px; border: 0.5px solid rgba(255,255,255,0.15);
}
.bar-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  height: 100%; gap: 8px;
}
.bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; height: 100%; justify-content: flex-end;
  cursor: pointer; transition: opacity 0.15s ease;
}
.bar-col.selected .bar-fill { opacity: 1; box-shadow: 0 0 12px rgba(212, 160, 23,0.4); }
.bar-col.selected .bar-day { color: var(--text-primary); font-weight: 600; }
.bar-row.has-selection .bar-col:not(.selected) .bar-fill { opacity: 0.45; }
.bar-fill {
  width: 100%; max-width: 28px; border-radius: 4px 4px 0 0;
  margin-bottom: 8px; transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.bar-day {
  font-family: 'DM Mono',monospace; font-size: 10px;
  color: var(--text-tertiary); letter-spacing: 0.05em; transition: color 0.2s ease;
}
.bar-day.today { color: var(--fuel); font-weight: 600; }

/* ── Day detail strip ── */
.day-detail {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.1);
}
.day-detail-head { display: flex; justify-content: space-between; align-items: center; }
.day-detail-label {
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 600;
  font-family: 'Manrope',var(--fb),sans-serif;
}
.day-detail-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.day-detail-sub .delta-under { color: var(--fuel); }
.day-detail-sub .delta-over  { color: var(--iron); }
.day-detail-macros {
  margin-top: 12px; padding-top: 12px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.day-detail-macro { display: flex; align-items: baseline; gap: 4px; justify-content: center; }
.day-detail-macro-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; }
.day-detail-macro-val {
  font-family: 'DM Mono',monospace; font-size: 14px; color: var(--text-primary);
}
.day-detail-macro-unit { font-size: 10px; color: var(--text-tertiary); }

/* ── Nutrition tool cards (Atlas style) ── */
.tool-card {
  position: relative;
  background: rgba(26, 26, 28, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 16px; overflow: hidden; margin-bottom: 10px;
}
.tool-card-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; cursor: pointer;
}
.tool-card.open .tool-chevron { transform: rotate(90deg); }
.tool-card-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease; padding: 0 16px;
}
.tool-card.open .tool-card-body { max-height: 600px; padding: 0 16px 16px; }
.tool-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.tool-chevron {
  color: var(--text-tertiary); font-size: 18px;
  transition: transform 0.25s ease; flex-shrink: 0;
}
.tool-input {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px;
  border: 0.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
  font-family: 'Manrope',var(--fb),sans-serif; font-size: 13px; outline: none;
  appearance: none; -webkit-appearance: none;
}
.tool-input:focus { border-color: rgba(212, 160, 23,0.5); }
.tool-input::placeholder { color: rgba(255,255,255,0.3); }
select.tool-input {
  background-image: linear-gradient(45deg,transparent 50%,rgba(255,255,255,0.5) 50%),
                    linear-gradient(135deg,rgba(255,255,255,0.5) 50%,transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-tile {
  position: relative;
  background: rgba(26, 26, 28, 0.72);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 14px;
  cursor: pointer; transition: all 0.15s ease;
}
.tool-tile:active { transform: scale(0.98); }
.tool-tile-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; margin-bottom: 10px;
}
.tool-tile-title {
  font-size: 13px; font-weight: 500; margin-bottom: 3px;
  color: var(--text-primary); font-family: 'Manrope',var(--fb),sans-serif;
}
.tool-tile-sub { font-size: 10px; color: var(--text-tertiary); line-height: 1.4; }

/* ── Legacy overrides kept for backward compat ── */
.v4-cta-track {
  background: linear-gradient(135deg, #D4A017 0%, #D4A017 50%, #D4A017 100%);
  color: #0A0A0B;
}
/* Defeat legacy body.tab-nutrition > div:first-child button !important rule.
   Must include #v4-screen-nutrition to reach specificity (1,3,2) > (1,2,3) of the problem rule. */
body.tab-nutrition #v4-screen-nutrition .fuel-screen button.v4-cta-track,
body.tab-nutrition #v4-screen-nutrition .fuel-screen button.v4-cta-fuel,
body.tab-nutrition #v4-screen-nutrition .fuel-screen button.add-meal-btn,
body.tab-nutrition #v4-screen-nutrition .fuel-screen button.wk-btn-primary {
  background: var(--btn-gold) !important;
  color: #060606 !important;
  font-weight: 700 !important;
  border: none !important;
}

/* Tool card (glass card variant) */
.fuel-tool-card {
  background: rgba(26, 26, 28, 0.72);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}
.fuel-tool-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
}
.fuel-tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.fuel-tool-chevron {
  font-size: 20px;
  color: var(--text-tertiary);
  transition: transform 0.25s ease;
  line-height: 1;
  flex-shrink: 0;
}
.fuel-tool-chevron.open {
  transform: rotate(90deg);
}
.fuel-tool-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 16px;
}
.fuel-tool-body.open {
  max-height: 600px;
  padding: 0 16px 16px;
}

/* Fuel inputs */
.fuel-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: rgba(245, 251, 255, 0.85);
  font-size: 13px;
  font-family: 'Manrope', var(--fb), sans-serif;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.fuel-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.fuel-input:focus {
  border-color: rgba(212, 160, 23, 0.45);
}

/* Tool tile grid 2×3 */
.fuel-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.fuel-tool-tile {
  background: rgba(26, 26, 28, 0.72);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px 14px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.fuel-tool-tile:active {
  background: rgba(212, 160, 23, 0.06);
  border-color: rgba(212, 160, 23, 0.35);
}
.fuel-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 10px;
}
.fuel-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  font-family: 'Manrope', var(--fb), sans-serif;
}
.fuel-tile-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.3;
}

/* Add Meal Modal */
.fuel-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 28, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9900;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.fuel-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.fuel-modal-sheet {
  width: 100%;
  max-width: 480px;
  background: #0A0A0B;
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 44px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0,0.67,0);
}
.fuel-modal-overlay.open .fuel-modal-sheet {
  transform: translateY(0);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
}
.fuel-meal-type-pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: 'Manrope', var(--fb), sans-serif;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.fuel-meal-type-pill.sel {
  background: rgba(212, 160, 23, 0.12);
  border-color: rgba(212, 160, 23, 0.5);
  color: var(--fuel);
}
.fuel-log-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg,rgba(255,255,255,0.09) 0%,rgba(10, 10, 11,0.04) 60%,rgba(10, 10, 11,0.02) 100%);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.fuel-log-method:active {
  background: rgba(212, 160, 23, 0.06);
  border-color: rgba(212, 160, 23, 0.35);
}
.fuel-log-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Atlas modal overrides — scanner + add food + tool modal ── */
#nl-scanner-modal .wk-modal-box,
#nl-search-modal .wk-modal-box,
#fuel-tool-modal .wk-modal-box {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
#nl-scanner-modal input,
#nl-search-modal input {
  background: rgba(255,255,255,0.05) !important;
  border: 0.5px solid rgba(255,255,255,0.2) !important;
  color: var(--text-primary) !important;
}

/* Atlas form input */
.fuel-modal-input {
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: 'DM Mono', monospace;
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.fuel-modal-input:focus { border-color: rgba(212, 160, 23,0.45); }
.fuel-modal-input::placeholder { color: rgba(255,255,255,0.3); }

/* Tab pills — teal active state */
.fuel-tab-pills .nl-tab-pill.active {
  background: rgba(212, 160, 23,0.12) !important;
  color: var(--fuel) !important;
  border-color: rgba(212, 160, 23,0.4) !important;
}
.fuel-tab-pills .nl-tab-pill {
  text-transform: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 13px;
}

/* Atlas ghost action buttons */
.fuel-ghost-action {
  padding: 11px 10px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--fuel);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  text-align: center;
}
.fuel-ghost-action:hover {
  background: rgba(212, 160, 23,0.08);
  border-color: rgba(212, 160, 23,0.3);
}


/* ── Settings overlay + bottom sheet ── */
#settings-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
#settings-overlay.stt-open { opacity: 1; pointer-events: all; }

#settings-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 85vh;
  background: var(--bg-1);
  border-radius: 24px 24px 0 0;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 280ms ease-out;
  overflow: hidden;
}
#settings-sheet.stt-open { transform: translateY(0); }

.stt-drag {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 999px;
  margin: 12px auto 0;
  flex-shrink: 0;
  touch-action: none;
}
.stt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
  flex-shrink: 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  background: var(--bg-1);
}
.stt-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stt-done {
  background: none;
  border: none;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 14px;
  color: var(--train);
  padding: 8px 12px;
  cursor: pointer;
}
.stt-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 48px;
}

/* ── Profile header card ── */
.stt-profile-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  cursor: pointer;
}
.stt-profile-card:active { background: linear-gradient(135deg,rgba(255,255,255,0.13) 0%,rgba(10, 10, 11,0.08) 60%,rgba(10, 10, 11,0.04) 100%); }
.stt-avatar-lg {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fuel) 0%, var(--train) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 18px;
  color: #0A0A0B;
  flex-shrink: 0;
}
.stt-profile-info { flex: 1; min-width: 0; }
.stt-profile-name {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stt-profile-email {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 13px;
  color: #8a99ad;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stt-tier-pill {
  display: inline-block;
  background: rgba(212, 160, 23,0.12);
  border: 0.5px solid rgba(212, 160, 23,0.4);
  color: var(--fuel);
  font-family: var(--fh);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.stt-chev { width: 18px; height: 18px; color: rgba(255,255,255,0.4); flex-shrink: 0; }

/* ── Group eyebrow + card ── */
.stt-eyebrow {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 11px;
  color: #8a99ad;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 20px 4px 8px;
}
.stt-group {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Settings rows ── */
.stt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.stt-row:active { background: rgba(255,255,255,0.05); }
.stt-row + .stt-row::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 0.5px;
  background: rgba(255,255,255,0.06);
}
.stt-row-icon {
  width: 20px; height: 20px;
  color: #8a99ad;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stt-row-icon.knox-tint { color: var(--knox); }
.stt-row-label {
  font-family: var(--fh);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-primary);
  flex: 1;
}
.stt-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a99ad;
  font-family: var(--fh);
  font-size: 14px;
}
.stt-row-disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* ── Toggle switch ── */
.stt-toggle {
  width: 44px; height: 26px;
  background: rgba(255,255,255,0.15);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  border: 0.5px solid rgba(255,255,255,0.14);
  flex-shrink: 0;
}
.stt-toggle.on { background: var(--train); border-color: var(--train); }
.stt-toggle::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  background: white;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.stt-toggle.on::after { transform: translateX(18px); }

/* ── Membership hero card ── */
.stt-membership-hero {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}
.stt-membership-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23,0.5), transparent);
  opacity: 0.7;
}
.stt-member-eyebrow {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 11px;
  color: var(--fuel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.stt-member-body {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 8px;
}
.stt-member-renew { font-family: var(--fh); font-size: 12px; color: #8a99ad; }
.stt-coming-soon { font-family: var(--fh); font-size: 12px; color: #8a99ad; font-style: italic; }

/* ── Sign-out button ── */
.stt-signout {
  width: 100%;
  background: linear-gradient(135deg,rgba(255,100,100,0.06) 0%,rgba(255,80,80,0.02) 100%);
  border: 0.5px solid rgba(255,100,100,0.3);
  border-radius: 14px;
  padding: 14px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,120,120,0.9);
  text-align: center;
  cursor: pointer;
  margin-top: 8px;
}
.stt-signout:active { background: rgba(255,100,100,0.1); }

/* ── Version stamp ── */
.stt-version { text-align: center; padding: 24px 16px 16px; }
.stt-version-line { font-family: var(--fh); font-weight: 400; font-size: 11px; color: #6a7a8d; line-height: 1.7; }
.stt-version-sub { font-size: 10px; color: #6a7a8d; font-family: var(--fh); }

/* ── Sub-screen pages ── */
.stt-page {
  position: fixed;
  inset: 0;
  background: var(--bg-1);
  z-index: 9100;
  transform: translateX(100%);
  transition: transform 280ms ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.stt-page.stt-open { transform: translateX(0); }

.stt-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 56px 20px 20px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  background: var(--bg-1);
}
.stt-back-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  flex-shrink: 0;
}
.stt-page-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-primary);
  flex: 1;
}
.stt-page-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 60px;
}

/* ── Profile form ── */
.stt-form-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
}
.stt-form-row {
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.stt-form-row:last-child { border-bottom: none; }
.stt-form-label {
  font-family: var(--fh);
  font-weight: 600;
  font-size: 11px;
  color: #8a99ad;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.stt-form-input {
  width: 100%;
  background: rgba(26, 26, 28, 0.7);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.stt-form-input:focus { border-color: rgba(212, 160, 23,0.5); }
.stt-form-input:disabled { opacity: 0.45; cursor: not-allowed; }
.stt-form-select {
  width: 100%;
  background: rgba(26, 26, 28, 0.7);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--fh);
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(138%2C153%2C173%2C0.7)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  box-sizing: border-box;
}
.stt-form-textarea {
  width: 100%;
  background: rgba(26, 26, 28, 0.7);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--fh);
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.stt-form-textarea:focus { border-color: rgba(212, 160, 23,0.5); }
.stt-height-row { display: flex; gap: 8px; align-items: center; }
.stt-height-unit { font-family: var(--fh); font-size: 13px; color: rgba(255,255,255,0.4); }

/* ── Segmented control ── */
.stt-segmented {
  display: flex;
  background: rgba(26, 26, 28, 0.7);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  overflow: hidden;
  gap: 2px;
  padding: 2px;
}
.stt-seg-opt {
  flex: 1;
  padding: 9px 6px;
  font-family: var(--fh);
  font-weight: 500;
  font-size: 13px;
  color: #8a99ad;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.15s;
  border-radius: 6px;
}
.stt-seg-opt.active { background: rgba(212, 160, 23,0.15); color: var(--train); }

/* ── Save / Cancel buttons ── */
.stt-save-btn {
  width: 100%;
  background: linear-gradient(135deg,rgba(212, 160, 23,0.2),rgba(212, 160, 23,0.1));
  border: 0.5px solid rgba(212, 160, 23,0.4);
  border-radius: 12px;
  padding: 15px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  color: var(--train);
  cursor: pointer;
  margin-top: 20px;
  letter-spacing: 0.04em;
}
.stt-save-btn:active { background: rgba(212, 160, 23,0.3); }
.stt-cancel-btn {
  width: 100%;
  background: none;
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 14px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  color: #8a99ad;
  cursor: pointer;
  margin-top: 10px;
  letter-spacing: 0.04em;
}

/* ── Notification toggle rows ── */
.stt-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.stt-notif-row:last-child { border-bottom: none; }
.stt-notif-label { font-family: var(--fh); font-weight: 500; font-size: 15px; color: var(--text-primary); }
/* A setting this build can't save yet: dimmed, no tap, a plain note under the label. */
.stt-notif-row.is-unavailable { cursor: default; }
.stt-notif-row.is-unavailable .stt-toggle { opacity: 0.35; }
.stt-notif-sub { display: block; font-family: var(--fh); font-size: 12px; color: #8a99ad; margin-top: 3px; }
.stt-notif-sub:empty { display: none; }
/* Manage billing: one tap at a time; the answer shows under the row. */
.stt-row.is-busy { opacity: 0.55; pointer-events: none; }
.stt-billing-msg { font-family: var(--fh); font-size: 13px; color: #8a99ad; padding: 0 16px 14px 48px; line-height: 1.45; }
.stt-billing-msg:empty { display: none; }
.stt-billing-msg a { color: var(--gold); }
.stt-footer-note {
  font-family: var(--fh);
  font-size: 12px;
  color: #8a99ad;
  text-align: center;
  padding: 16px;
  line-height: 1.5;
}

/* ── Body text card (About / Privacy) ── */
.stt-body-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 14px;
  padding: 20px;
  margin-top: 16px;
}
.stt-body-text {
  font-family: var(--fh);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.65;
  white-space: pre-line;
}

/* ── Link rows ── */
.stt-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
  cursor: pointer;
  text-decoration: none;
}
.stt-link-row:last-child { border-bottom: none; }
.stt-link-row:active { background: rgba(255,255,255,0.05); }
.stt-link-label { font-family: var(--fh); font-weight: 500; font-size: 15px; color: var(--train); }

/* ── Destructive action buttons ── */
.stt-destructive-btn {
  width: 100%;
  background: none;
  border: 0.5px solid rgba(255,100,100,0.3);
  border-radius: 12px;
  padding: 14px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,120,120,0.5);
  cursor: not-allowed;
  margin-top: 10px;
  opacity: 0.6;
  box-sizing: border-box;
}

/* ── Sign-out confirm dialog ── */
#settings-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#settings-confirm.stt-open { opacity: 1; pointer-events: all; }
.stt-confirm-card {
  background: var(--bg-2);
  border: var(--glass-border);
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 64px rgba(0,0,0,0.6);
}
.stt-confirm-title { font-family: var(--fh); font-weight: 700; font-size: 18px; color: var(--text-primary); margin-bottom: 8px; }
.stt-confirm-msg { font-family: var(--fh); font-size: 14px; color: #8a99ad; line-height: 1.5; margin-bottom: 24px; }
.stt-confirm-btns { display: flex; gap: 10px; }
.stt-confirm-cancel {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 13px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  color: #8a99ad;
  cursor: pointer;
}
.stt-confirm-ok {
  flex: 1;
  background: rgba(255,100,100,0.1);
  border: 0.5px solid rgba(255,100,100,0.4);
  border-radius: 12px;
  padding: 13px;
  font-family: var(--fh);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,120,120,0.9);
  cursor: pointer;
}