/**
 * styles.css — Team Lift 2 Stylesheet
 * All visual styling for the app. Organized by feature area.
 */

:root {
  --blue:      #2558d4;
  --blue-light:#e8eefb;
  --blue-mid:  #94b0e8;
  --blue-dark: #1a3f9e;
  --bg:        #f8f9fb;
  --white:     #ffffff;
  --gray-50:   #f2f3f6;
  --gray-100:  #e8e9ed;
  --gray-200:  #d1d3d9;
  --gray-300:  #b0b3bc;
  --gray-400:  #8e919d;
  --gray-500:  #6b6f7b;
  --gray-600:  #4a4d57;
  --gray-700:  #2e3039;
  --gray-800:  #1c1d24;
  --green:     #22a867;
  --red:       #dc3545;
  --orange:    #e88a2d;
  --gold:      #ffd700;
  --gold-dark: #ffb300;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 90px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
html, body { height:100%; overflow:hidden; }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg); color:var(--gray-800);
  -webkit-font-smoothing:antialiased;
}

/* ── Pages ── */
.page {
  position:fixed; top:0; left:0; right:0; bottom:var(--nav-h);
  padding:calc(var(--safe-t) + 56px) 20px 20px;
  overflow-y:auto; display:none;
  -webkit-overflow-scrolling:touch;
}
.page.on { display:block; }

/* ── Bottom Nav ── */
.nav {
  position:fixed; bottom:0; left:0; right:0; height:var(--nav-h);
  background:var(--white); border-top:1px solid var(--gray-100);
  display:flex; align-items:flex-start;
  padding-top:12px; padding-bottom:calc(var(--safe-b) + 24px); z-index:500;
}
/* The action menu pops up out of the bar, into the area .profile-page (z-index
   9200 — club and user detail views) covers, so it opened behind it. The bar is
   its own stacking context, so the menu's z-index can't escape on its own: lift
   the whole bar while it's open. Stays under the club sheet (9400) and
   .modal-overlay (9500). */
.nav.action-open { z-index:9300; }
/* Every slot is an equal fraction of the bar (flex:1 1 0), so the ＋ — the middle
   of five — lands on the exact center. Sizing the slots to their content instead
   (space-around) pushed it right, because "Compete"+"Workouts" on the left are
   much wider than "Clubs"+"Feed" on the right. */
.nav-btn, .nav-action-wrap { flex:1 1 0; min-width:0; }
.nav-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; padding:10px 2px; border-radius:12px; transition:all .2s;
  background:transparent; border:none; color:var(--gray-400);
}
.nav-btn span { white-space:nowrap; }
/* ═══════ CLUBS ═══════ */
/* The create/edit sheet opens from the club detail view, which renders in
   .profile-page (z-index 9200) — so it has to outrank it. Stays under
   .modal-overlay (9500) so confirm dialogs still sit on top. */
#cg-overlay { z-index:9400; }
#cg-sheet   { z-index:9450; }

/* Shared surface: white card with a hairline ring + soft lift. */
.club-card {
  background:var(--white); border-radius:16px; padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  display:flex; align-items:center; gap:12px;
}
body.dark .club-card, body.dark .club-panel, body.dark .club-stat { box-shadow:0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px var(--gray-100); }
.club-panel {
  background:var(--white); border-radius:16px; padding:6px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
/* Placeholder card shown while the Clubs tab is loading — better than flashing
   "you're not in any clubs" and then replacing it. */
.club-skel {
  height:72px; border-radius:16px; background:var(--gray-50);
  animation:clubSkel 1.2s ease-in-out infinite;
}
@keyframes clubSkel { 0%,100% { opacity:.55; } 50% { opacity:1; } }

.club-sec-title {
  font-size:11px; font-weight:600; letter-spacing:0.8px;
  color:var(--gray-400); margin-bottom:8px;
}
/* Rounded-square club tile with the alias in it. Size set inline per context. */
.club-tile {
  border-radius:13px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; flex-shrink:0; line-height:1;
}
.club-stat {
  background:var(--white); border-radius:14px; padding:12px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
.club-stat-val { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; color:var(--gray-800); }
.club-stat-lbl { font-size:9.5px; font-weight:600; letter-spacing:0.6px; color:var(--gray-300); margin-top:2px; }
/* Highlighted stat tile — the member drill-down's rank sits in the brand tint. */
.club-stat.accent { background:var(--blue-light); box-shadow:none; }
.club-stat.accent .club-stat-val { color:var(--blue); }
.club-stat.accent .club-stat-lbl { color:var(--blue); opacity:0.6; }

/* Club pill: a colored dot + name, shown under a member's name on the drill-down. */
.club-chip {
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  background:var(--blue-light); color:var(--blue);
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px;
}
.club-chip .dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }

/* Member drill-down session rows: a date badge, the workout, and its metric value. */
.club-day {
  width:40px; height:44px; border-radius:12px; background:var(--gray-100); flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--gray-500);
}
.club-day .dow { font-size:10px; font-weight:700; letter-spacing:0.5px; }
.club-day .dom { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; line-height:1; }
.club-drill-row { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; }
.club-drill-row + .club-drill-row { border-top:1px solid var(--gray-50); }

/* Segmented control (metric toggle, club type, invite tabs) */
.club-seg { display:flex; background:var(--gray-100); border-radius:10px; padding:3px; gap:2px; }
.club-seg button {
  flex:1; border:none; border-radius:8px; padding:8px 0; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600;
  background:transparent; color:var(--gray-500);
}
.club-seg button.on {
  background:var(--white); color:var(--gray-800); font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

/* Week / YTD period toggle — smaller than the metric segmented control, so it sits
   inline with the section label without competing with it. */
.club-period-seg { display:flex; background:var(--gray-100); border-radius:8px; padding:2px; gap:2px; flex-shrink:0; }
.club-period-seg button {
  border:none; border-radius:6px; padding:4px 10px; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:600;
  background:transparent; color:var(--gray-500);
}
.club-period-seg button.on {
  background:var(--white); color:var(--gray-800); font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
}

/* Overlapping avatar stack on the members summary row */
.club-face { display:inline-flex; border-radius:50%; border:2px solid var(--white); background:var(--white); flex-shrink:0; }
.club-face-more {
  width:30px; height:30px; border-radius:50%; background:var(--gray-100); color:var(--gray-500);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;
}

/* Leaderboard rows */
.club-lb-row { display:flex; align-items:center; gap:12px; padding:10px 6px; border-radius:10px; }
.club-lb-row + .club-lb-row { border-top:1px solid var(--gray-50); }
.club-lb-row.mine { background:var(--blue-light); border-top-color:transparent; }
.club-lb-rank { width:22px; text-align:center; font-weight:700; font-family:'JetBrains Mono',monospace; color:var(--gray-400); }
.club-lb-rank.top { color:var(--blue); }
.club-lb-val { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--gray-700); }

/* Collapsed middle of a big club's leaderboard: "··· 41 more ···" */
.club-lb-gap {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 6px; border-top:1px solid var(--gray-50);
  font-size:11px; font-weight:600; color:var(--gray-300);
}
.club-lb-gap .dots { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:2px; }

/* Footer under a collapsed leaderboard: how far you are off the next place, and a
   way into the full list. */
.club-lb-foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 6px; border-top:1px solid var(--gray-50);
  font-size:12px; font-weight:600;
}
.club-lb-full-link { color:var(--blue); font-weight:700; cursor:pointer; flex-shrink:0; white-space:nowrap; }

/* Member rows */
.club-mem-row { display:flex; align-items:center; gap:12px; padding:10px 2px; }
.club-mem-row + .club-mem-row { border-top:1px solid var(--gray-50); }
.club-role-tag { font-size:10px; font-weight:700; letter-spacing:0.8px; color:var(--gray-400); margin-left:6px; }
.club-link-btn { background:none; border:none; font-size:12px; font-weight:600; color:var(--blue); cursor:pointer; font-family:inherit; }
.club-link-btn.muted { color:var(--gray-400); }
.club-x-btn { background:none; border:none; font-size:15px; color:var(--gray-300); cursor:pointer; font-family:inherit; }

/* Buttons */
.club-btn-primary {
  background:var(--blue); color:#fff; border:none; border-radius:10px; padding:8px 16px;
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.club-btn-outline {
  background:transparent; color:var(--gray-600); border:1.5px solid var(--gray-200);
  border-radius:12px; padding:10px 0; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}

/* Color picker with selection ring. The inset hairline keeps pale neons
   (yellow, lime) visible against a white sheet. */
.club-colors { display:flex; flex-wrap:wrap; gap:10px; }
.club-color {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:none; padding:0; transition:transform .15s, box-shadow .15s;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.10);
}
.club-color.sel {
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.10), 0 0 0 2px var(--white), 0 0 0 4px var(--gray-800);
  transform:scale(1.05);
}

.club-dot { border-radius:50%; flex-shrink:0; display:inline-block; }

/* ═══════ FEED FILTER CHIPS ═══════ */
.feed-filter-chips { display:flex; gap:8px; overflow-x:auto; padding:0 0 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.feed-filter-chips::-webkit-scrollbar { display:none; }
.feed-chip {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0;
  padding:7px 14px; border-radius:20px; font-size:13px; font-weight:600;
  background:var(--gray-100); color:var(--gray-500); border:1px solid transparent;
  cursor:pointer; font-family:inherit;
}
.feed-chip.on { font-weight:700; background:var(--blue-light); color:var(--blue); border-color:var(--blue); }

.nav-btn.on { color:var(--blue); }
.nav-btn svg { width:22px; height:22px; }
.nav-btn span { font-size:10px; font-weight:500; letter-spacing:0.4px; }
.nav-action-wrap { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 2px; }
.nav-action-btn {
  display:flex; align-items:center; justify-content:center;
  background:var(--blue); border:none; border-radius:50%; width:38px; height:38px;
  color:#fff; cursor:pointer; box-shadow:0 3px 10px rgba(37,99,235,.4);
  transition:transform .15s, box-shadow .15s; flex-shrink:0;
}
.nav-action-btn:active { transform:scale(.93); box-shadow:0 2px 6px rgba(37,99,235,.25); }
.nav-action-btn.open { transform:rotate(45deg) scale(1.05); }
.nav-action-menu {
  position:absolute; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px) scale(.95);
  background:var(--white); border:1px solid var(--gray-100); border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.14); padding:6px; min-width:210px;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:600;
}
.nav-action-menu.open { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
.nav-action-item {
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px;
  border:none; background:transparent; cursor:pointer; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--gray-800); text-align:left; transition:background .1s;
}
.nav-action-item:hover { background:var(--gray-50,#f8f9fa); }
.nav-action-item svg { flex-shrink:0; color:var(--blue); }
.nav-weight-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:700;
  display:flex; align-items:flex-end; justify-content:center;
}
.nav-weight-inner {
  background:var(--white); border-radius:18px 18px 0 0; padding:20px 20px calc(20px + var(--safe-b));
  width:100%; max-width:440px;
}

/* ── Typography ── */
.page-label { font-size:13px; font-weight:500; color:var(--gray-400); letter-spacing:0.8px; text-transform:uppercase; margin-bottom:4px; }
.page-title { font-size:20px; font-weight:700; color:var(--gray-800); margin-bottom:4px; line-height:1.15; }
.es-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.session-subtext { font-size:13px; color:var(--gray-400); font-weight:500; margin-bottom:8px; letter-spacing:0.3px; }

/* ── Cards ── */
.card {
  background:var(--white); border-radius:16px; padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  margin-bottom:14px;
}

/* ── Chips / Tags ── */
.chip {
  display:inline-flex; align-items:center; font-size:12px; font-weight:500;
  padding:4px 10px; border-radius:20px; letter-spacing:0.2px;
}
.chip-blue { background:var(--blue-light); color:var(--blue); }
.chip-gray { background:var(--gray-50); color:var(--gray-500); }
.chip-green { background:#e6f7ee; color:var(--green); }
.chip-red { background:#fde8ea; color:var(--red); }

/* ── Buttons ── */
.btn {
  width:100%; padding:15px; border:none; border-radius:14px;
  font-family:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:transform .1s, opacity .15s; letter-spacing:0.2px;
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--blue); color:#fff; }
.btn-secondary { background:var(--gray-50); color:var(--gray-700); }
.btn-outline { background:transparent; border:1.5px solid var(--gray-200); color:var(--gray-600); }

/* ═══════════════════════════════════
   TODAY PAGE
═══════════════════════════════════ */
.week-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue); color:#fff; font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:20px; letter-spacing:0.5px; margin-bottom:16px;
}
.week-pill .dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.35); }
.week-pill .dot.filled { background:#fff; }

.readiness-row { display:flex; gap:8px; margin:14px 0 20px; }
.r-dot {
  width:44px; height:44px; border-radius:50%; border:2px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color:var(--gray-400);
  cursor:pointer; transition:all .2s; background:var(--white);
}
.r-dot.sel { border-color:var(--blue); color:var(--blue); background:var(--blue-light); }

.ex-card {
  background:var(--white); border-radius:14px; padding:12px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  margin-bottom:8px; animation:slideUp .35s ease both;
}
.ex-pair-label { font-size:11px; font-weight:600; letter-spacing:1.5px; color:var(--blue); margin-bottom:3px; }
.ex-name { font-size:17px; font-weight:700; color:var(--gray-800); margin-bottom:5px; }
.ex-detail-row { display:flex; gap:6px; flex-wrap:wrap; }

.nudge-badge {
  display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:8px; margin-top:10px;
}

.ex-hist-toggle {
  font-family:inherit; font-size:11px; font-weight:600; letter-spacing:0.3px;
  padding:5px 10px; border-radius:8px; cursor:pointer; border:1.5px solid var(--gray-200);
  background:var(--gray-50); color:var(--gray-500); transition:all .15s;
}
.ex-hist-toggle.open {
  background:var(--blue-light); color:var(--blue); border-color:var(--blue-mid);
}
.ex-history {
  margin-top:12px; border-top:1px solid var(--gray-100); padding-top:10px;
  animation:slideUp .2s ease;
}
.ex-hist-session { margin-bottom:14px; }
.ex-hist-session:last-child { margin-bottom:0; }
.ex-hist-date {
  font-size:11px; font-weight:600; color:var(--gray-400); letter-spacing:0.3px;
  margin-bottom:5px; display:flex; justify-content:space-between; align-items:center;
}
.ex-hist-sets { display:flex; flex-direction:column; gap:3px; }
.ex-hist-set {
  display:grid; grid-template-columns:72px 52px 48px; gap:6px;
  font-size:12px; font-weight:500; color:var(--gray-600);
  font-family:'JetBrains Mono',monospace; padding:1px 0;
}
.nudge-up { background:#e6f7ee; color:var(--green); }
.nudge-down { background:#fde8ea; color:var(--red); }
.nudge-hold { background:var(--gray-50); color:var(--gray-500); }

.ex-card.done {
  background:rgba(34,168,103,0.07);
  box-shadow:0 1px 3px rgba(34,168,103,0.08), 0 0 0 1.5px rgba(34,168,103,0.25);
}
.workout-done-banner {
  display:flex; align-items:center; gap:8px;
  background:rgba(34,168,103,0.1); color:var(--green);
  border:1.5px solid rgba(34,168,103,0.3); border-radius:12px;
  font-size:14px; font-weight:700; padding:10px 14px; margin-bottom:12px;
}

.session-meta {
  display:flex; align-items:center; gap:6px; font-size:13px; color:var(--gray-400);
  margin:4px 0 18px; font-weight:500;
}

/* ── Session Size Stepper ── */
.session-size-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; padding:10px 14px; background:var(--white);
  border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
.session-size-label { font-size:13px; font-weight:500; color:var(--gray-600); }
.session-size-val { font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--blue); min-width:80px; text-align:center; }

/* ═══════════════════════════════════
   SESSION PAGE — BLOCK FLOW
═══════════════════════════════════ */
#p-session { overflow:hidden; flex-direction:column; padding-bottom:0; }
#p-session.on { display:flex; }
#session-sticky-header { flex-shrink:0; background:var(--bg); padding-bottom:8px; }
#session-content-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 3px; }
.ss-progress { display:flex; gap:6px; margin-bottom:12px; }
.ss-pip { flex:1; height:4px; border-radius:2px; background:var(--gray-100); transition:background .3s; }
.ss-progress.dense { gap:3px; }
.ss-progress.dense .ss-pip { border-radius:1px; }
.ss-pip.done { background:var(--blue); }
.ss-pip.active { background:var(--blue-mid); }

.ss-card {
  background:var(--white); border-radius:16px; padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  margin-bottom:14px;
}
.ss-card.completed { opacity:0.5; }
.ss-card:focus-within { box-shadow:0 0 0 2px var(--blue), 0 4px 12px rgba(37,88,212,0.12); }
@keyframes roundCompleteGlow {
  0%   { box-shadow:0 0 0 1.5px var(--green),0 2px 12px rgba(34,168,103,0.15); }
  45%  { box-shadow:0 0 0 2.5px var(--green),0 6px 24px rgba(34,168,103,0.30); }
  100% { box-shadow:0 0 0 1.5px var(--green),0 2px 12px rgba(34,168,103,0.15); }
}
.ss-card.round-completing {
  opacity:1!important;
  box-shadow:0 0 0 1.5px var(--green),0 2px 12px rgba(34,168,103,0.15);
  animation:roundCompleteGlow 0.7s ease-in-out forwards;
}

.ss-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px 10px; border-bottom:1px solid var(--gray-50);
}
.ss-num { font-size:12px; font-weight:700; letter-spacing:1.5px; color:var(--blue); }
.ss-status { font-size:11px; font-weight:500; color:var(--gray-400); }
.ss-status.done { color:var(--green); }

.ss-half { padding:14px 16px; }
.swipe-row-half + .swipe-row-half { border-top:1px dashed var(--gray-100); }
.set-del-btn { background:none; border:none; color:var(--gray-300); font-size:20px; font-weight:700; cursor:pointer; padding:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:8px; flex-shrink:0; }
.set-del-btn:active { background:var(--gray-100); color:var(--red,#ef4444); }

.ss-ex-label { font-size:10px; font-weight:700; letter-spacing:1.5px; color:var(--gray-400); margin-bottom:4px; }
.ss-ex-label.b { color:var(--blue-mid); }
.ss-ex-name { font-size:15px; font-weight:700; color:var(--gray-800); margin-bottom:10px; }

.ss-input-row {
  display:grid; grid-template-columns:1fr 1fr 38px 40px; gap:6px; align-items:center;
}
.ss-input-label {
  display:grid; grid-template-columns:1fr 1fr 38px 40px; gap:6px;
  font-size:10px; font-weight:600; color:var(--gray-400); letter-spacing:0.5px;
  text-transform:uppercase; margin-bottom:4px; padding:0;
}
.ss-input-label div { text-align:center; }

.set-input {
  width:100%; height:44px; border:1.5px solid var(--gray-200); border-radius:10px;
  background:var(--white); font-family:inherit; font-size:16px; font-weight:500;
  text-align:center; color:var(--gray-800); -webkit-appearance:none; appearance:none; padding:0;
  transition:border-color .15s;
}
.set-input:focus { border-color:var(--blue); outline:none; }
.set-input.locked { background:var(--gray-50); color:var(--gray-400); border-color:var(--gray-100); pointer-events:none; }
/* Optional cardio calories field: keep the entered value at 16px but shrink the long placeholder hint. */
.cal-input::placeholder { font-size:13px; font-weight:400; }
.cal-input::-webkit-input-placeholder { font-size:13px; font-weight:400; }

/* +/- sign toggle for bodyweight (assisted) entries — the mobile number pad has no minus key */
.sign-wrap { display:flex; gap:4px; align-items:center; }
.sign-wrap .set-input { flex:1; min-width:0; }
.sign-btn {
  flex:0 0 30px; height:44px; border:1.5px solid var(--gray-200); border-radius:10px;
  background:var(--gray-50); color:var(--gray-600); font-size:18px; font-weight:700;
  font-family:inherit; line-height:1; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none;
}
.sign-btn.neg { background:var(--blue); color:var(--white); border-color:var(--blue); }

/* RIR (reps in reserve) UI commented out
.rir-select {
  width:100%; height:44px; border:1.5px solid var(--gray-200); border-radius:10px;
  background:var(--white); font-family:inherit; font-size:16px; font-weight:500;
  text-align:center; color:var(--gray-800); -webkit-appearance:none; padding:0 4px;
  cursor:pointer;
}
.rir-select:focus { border-color:var(--blue); outline:none; }
*/

.check-btn {
  width:38px; height:38px; border-radius:10px; border:2px solid var(--gray-200);
  background:var(--white); color:var(--gray-300); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.check-btn.done { border-color:var(--blue); background:var(--blue); color:#fff; }

.rest-row {
  display:flex; align-items:center; gap:6px;
  margin:-2px 0 8px 48px;
  font-size:10px; font-weight:700; letter-spacing:0.8px; color:var(--gray-400);
}
.rest-row::after { content:''; flex:1; height:1px; background:var(--gray-100); }
.rest-countdown { font-family:'JetBrains Mono',monospace; color:var(--blue); font-size:11px; }

/* Transition cue between A and B */
.ss-transition {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; background:var(--blue-light); color:var(--blue);
  font-size:13px; font-weight:600; letter-spacing:0.2px;
}
.ss-transition.waiting { background:var(--gray-50); color:var(--gray-400); }
.ss-transition.go { animation:transGlow .6s ease; }
@keyframes transGlow { from{background:var(--blue);color:#fff} to{background:var(--blue-light);color:var(--blue)} }

/* Timer */
.timer-bar {
  display:none; flex-direction:column; align-items:center; gap:10px;
  background:var(--blue); color:#fff; border-radius:14px; padding:14px;
  margin:0 0 14px; text-align:center;
}
.timer-bar.on { display:flex; position:sticky; top:0; z-index:10; box-shadow:0 4px 16px rgba(37,88,212,0.3); }
.timer-bar.done { background:var(--green); cursor:pointer; }
.timer-bar.done .timer-adj { display:none; }
.timer-time { font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:600; }
.timer-label { font-size:12px; opacity:0.7; letter-spacing:0.5px; }

/* ═══════════════════════════════════
   1RM BOTTOM SHEET
═══════════════════════════════════ */
.sheet-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35);
  z-index:800;
}
.sheet-overlay.on { display:block; animation:fadeIn .2s; }

.sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  background:var(--white); border-radius:20px 20px 0 0;
  padding:12px 20px calc(var(--safe-b) + 20px);
  transform:translateY(100%); transition:transform .3s cubic-bezier(0.32,0.72,0,1);
  max-height:70vh; overflow-y:auto;
}
.sheet.on { transform:translateY(0); }
.sheet-handle { width:36px; height:4px; border-radius:2px; background:var(--gray-200); margin:0 auto 14px; }
.sheet-title { font-size:17px; font-weight:700; margin-bottom:4px; }
.sheet-subtitle { font-size:13px; color:var(--gray-400); margin-bottom:16px; }

.orm-chart-row {
  display:flex; align-items:flex-end; gap:6px; height:140px; margin:12px 0 8px; padding:0 4px;
}
.orm-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; height:100%; justify-content:flex-end; }
.orm-bar {
  width:100%; border-radius:6px 6px 3px 3px; background:var(--blue-light);
  transition:height .4s cubic-bezier(0.34,1.56,0.64,1); min-height:4px;
}
.orm-bar.latest { background:var(--blue); }
.orm-bar-label { font-size:9px; color:var(--gray-400); font-weight:500; white-space:nowrap; }
.orm-bar-value { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; color:var(--gray-600); }

.orm-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px; }
.orm-stat { text-align:center; }
.orm-stat-val { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; color:var(--gray-800); }
.orm-stat-label { font-size:10px; color:var(--gray-400); font-weight:500; letter-spacing:0.3px; margin-top:2px; }

.orm-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--gray-50);
}
.orm-date { font-size:13px; color:var(--gray-500); font-weight:500; }
.orm-val { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600; color:var(--gray-800); }

/* ═══════════════════════════════════
   STRENGTH PAGE — EXERCISE 1RM CARDS
═══════════════════════════════════ */
.ex-card {
  background:var(--white); border-radius:14px; padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.03);
  margin-bottom:10px;
}
.ex-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.ex-card-name { font-size:15px; font-weight:700; color:var(--gray-800); }
.ex-card-latest { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--gray-800); }
.ex-card-latest-label { font-size:10px; color:var(--gray-400); font-weight:500; text-align:right; }
.ex-card-note {
  font-size:12px; font-weight:600; padding:4px 8px; border-radius:6px;
  display:inline-block; margin-top:8px; line-height:1.3;
}
.ex-card-note.positive { background:rgba(52,199,89,0.1); color:var(--green); }
.ex-card-note.negative { background:rgba(255,59,48,0.08); color:#ff3b30; }
.ex-card-note.neutral { background:var(--gray-50); color:var(--gray-400); }
.ex-card-note.preserved { background:rgba(37,88,212,0.08); color:var(--blue); }
.mode-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; letter-spacing:0.3px; padding:2px 7px; border-radius:10px; }
.mode-badge.growth { background:rgba(52,199,89,0.1); color:var(--green); }
.mode-badge.maintenance { background:rgba(232,138,45,0.12); color:var(--orange); }
.mode-legend { display:flex; gap:10px; align-items:center; margin-bottom:10px; font-size:11px; font-weight:500; color:var(--gray-400); }
.mode-legend-dot { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:3px; }
.str-arrow { color:var(--gray-300); font-size:16px; }
.orm-dot-tip {
  position:absolute; pointer-events:none; z-index:10;
  background:var(--gray-800); color:#fff; font-family:'JetBrains Mono',monospace;
  font-size:11px; font-weight:600; padding:4px 8px; border-radius:6px;
  white-space:nowrap; transform:translate(-50%,-100%);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.orm-dot-tip::after {
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--gray-800);
}

/* ── Weekly Completion Tracker ── */
.week-tracker { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.wt-day {
  background:var(--white); border-radius:12px; padding:10px 4px 8px;
  text-align:center; cursor:pointer; border:2px solid transparent;
  transition:background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.wt-abbr { font-size:9px; font-weight:600; color:var(--gray-400); letter-spacing:0.3px; margin-bottom:2px; line-height:1; }
.wt-num { font-size:11px; font-weight:700; color:var(--gray-300); line-height:1.2; }
.wt-split { font-size:9px; font-weight:600; color:var(--gray-500); line-height:1.2; }
/* done */
.wt-done { background:rgba(34,168,103,0.07); box-shadow:0 1px 3px rgba(34,168,103,0.08), 0 0 0 1.5px rgba(34,168,103,0.25); }
.wt-done .wt-abbr { color:var(--green); }
.wt-done .wt-num { color:var(--green); }
.wt-done .wt-split { color:var(--green); }
/* missed */
.wt-missed .wt-abbr { color:var(--red); }
.wt-missed .wt-num { color:var(--red); }
/* today */
.wt-today { border-color:var(--blue); }
.wt-today .wt-abbr { color:var(--blue); }
.wt-today .wt-num { color:var(--blue); }
.wt-today .wt-split { color:var(--blue); }
/* upcoming */
.wt-upcoming .wt-num { color:var(--gray-300); }
/* missed callout */
.wt-missed-note {
  margin-top:8px; padding:8px 12px; border-radius:8px;
  background:rgba(220,53,69,0.06); color:var(--red);
  font-size:12px; font-weight:500; text-align:center;
}
/* block history log */
.wt-block-log {
  display:flex; flex-wrap:wrap; gap:4px;
  justify-content:flex-end; margin-top:8px;
}
.wt-blk {
  font-size:10px; font-weight:600; color:var(--gray-400);
  background:var(--gray-50); border-radius:4px; padding:2px 6px;
  white-space:nowrap;
}
.wt-blk-full { color:var(--green); background:rgba(34,168,103,0.08); }

/* ── Exercise Manager (Settings) ── */
.ex-manager-list { margin-bottom:10px; }
.ex-manager-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--gray-100);
}
.ex-manager-item:last-child { border-bottom:none; }
.ex-manager-name { font-size:13px; font-weight:600; color:var(--gray-700); }
.ex-manager-meta { font-size:11px; color:var(--gray-400); margin-top:2px; }
.ex-manager-actions { display:flex; gap:6px; }
.ex-manager-del {
  width:28px; height:28px; border-radius:8px; border:1px solid var(--gray-200);
  background:var(--white); color:var(--red); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ex-form-row { margin-bottom:10px; }
.ex-form-label { font-size:11px; font-weight:600; color:var(--gray-400); letter-spacing:0.3px; margin-bottom:4px; }
.ex-form-input {
  width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--gray-200);
  font-family:inherit; font-size:14px; color:var(--gray-800); background:var(--white);
}
.ex-form-input:focus { border-color:var(--blue); outline:none; }
.ex-form-select {
  width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid var(--gray-200);
  font-family:inherit; font-size:14px; color:var(--gray-800); background:var(--white);
  appearance:none; -webkit-appearance:none;
}
.ex-form-select:focus { border-color:var(--blue); outline:none; }
.muscle-chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.muscle-chip {
  font-size:11px; font-weight:600; padding:5px 10px; border-radius:16px;
  cursor:pointer; border:1.5px solid var(--gray-200); background:var(--white);
  color:var(--gray-500); transition:all .15s;
}
.muscle-chip.on { background:var(--blue-light); color:var(--blue); border-color:var(--blue-mid); }
.muscle-pct-list { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.muscle-pct-row {
  display:flex; align-items:center; gap:10px;
}
.muscle-pct-label {
  font-size:12px; font-weight:600; color:var(--gray-600); min-width:80px;
  text-transform:capitalize;
}
.muscle-pct-slider {
  flex:1; height:6px; -webkit-appearance:none; appearance:none; background:var(--gray-100);
  border-radius:3px; outline:none;
}
.muscle-pct-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--blue); cursor:pointer; border:2px solid var(--white);
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}
.muscle-pct-val {
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;
  color:var(--blue); min-width:36px; text-align:right;
}


/* ═══════════════════════════════════
   HISTORY PAGE
═══════════════════════════════════ */

.hist-item { display:flex; align-items:center; padding:14px 0; border-bottom:1px solid var(--gray-50); }
.hist-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:14px; flex-shrink:0; }
.hist-text { flex:1; }
.hist-ex { font-size:14px; font-weight:600; }
.hist-date { font-size:12px; color:var(--gray-400); margin-top:2px; }
.hist-week { font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-light); padding:3px 8px; border-radius:6px; }

/* ═══════════════════════════════════
   SETTINGS PAGE
═══════════════════════════════════ */
.cfg-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--gray-50);
}
.cfg-row:last-child { border:none; }
.cfg-label { font-size:15px; font-weight:500; color:var(--gray-700); }
.cfg-val { font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600; color:var(--blue); }

.cfg-stepper { display:flex; align-items:center; gap:10px; }
.cfg-step-btn {
  width:34px; height:34px; border-radius:10px; border:1.5px solid var(--gray-200);
  background:var(--white); font-size:18px; color:var(--gray-600); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cfg-step-btn:active { background:var(--gray-50); }

.eq-pills { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.eq-pill {
  padding:10px 16px; border-radius:12px; border:1.5px solid var(--gray-200);
  background:var(--white); font-size:13px; font-weight:500; color:var(--gray-500);
  cursor:pointer; transition:all .2s;
}
.eq-pill.on { border-color:var(--blue); background:var(--blue-light); color:var(--blue); font-weight:600; }

.version-tag { text-align:center; font-size:11px; color:var(--gray-300); letter-spacing:1px; margin-top:30px; font-weight:500; }

/* ═══════════════════════════════════
   STREAK + NUDGE CARDS (Today)
═══════════════════════════════════ */
.today-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
}
.stat-card {
  background:var(--white); border-radius:14px; padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
.stat-icon { font-size:20px; margin-bottom:6px; }
.stat-val { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--gray-800); }
.stat-label { font-size:11px; color:var(--gray-400); font-weight:500; margin-top:2px; }

.days-nudge {
  background:var(--blue-light); border-radius:12px; padding:12px 16px;
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  font-size:13px; font-weight:500; color:var(--blue-dark);
}
.days-nudge.warn { background:#fff3e0; color:#b86e00; }

/* ═══════════════════════════════════
   PR CELEBRATION (Bottom Sheet)
═══════════════════════════════════ */
.pr-banner {
  background:linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  color:#5d4200; border-radius:12px; padding:12px 16px;
  text-align:center; margin-bottom:14px;
  animation:prPop .5s cubic-bezier(0.34,1.56,0.64,1);
}
.pr-banner-text { font-size:15px; font-weight:700; }
.pr-banner-sub { font-size:12px; opacity:0.8; margin-top:2px; }
@keyframes prPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }

/* ═══════ Personal-1RM celebration (visceral: slam + shockwave + sparks) ═══════ */
/* Persistent gold highlight on a PR set row — STATIC so re-renders don't replay motion. */
.pr-set{
  position:relative;
  border-radius:12px;
  padding:8px 10px;
  background:linear-gradient(135deg, rgba(255,215,0,0.18) 0%, rgba(255,179,0,0.12) 100%);
  box-shadow:inset 0 0 0 1.5px var(--gold), 0 2px 12px rgba(255,200,0,0.18);
}
body.dark .pr-set{
  background:linear-gradient(135deg, rgba(255,215,0,0.16) 0%, rgba(255,179,0,0.10) 100%);
  box-shadow:inset 0 0 0 1.5px var(--gold-dark), 0 2px 14px rgba(255,200,0,0.22);
}
/* Points glow orange on a PR set (persistent). */
.pr-pts{ color:var(--orange)!important; text-shadow:0 0 6px rgba(232,138,45,0.75); }

/* ── The moment of achievement (transient ~1.7s) ── */
@property --pr-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
/* Row slams in with an overshoot punch and lifts above its neighbours. */
.pr-sparking{ animation:prSlam .5s cubic-bezier(0.2,1.5,0.35,1) both; z-index:3; }
/* Shockwave: a gold ring blasts outward from the row and fades. */
.pr-sparking::before{
  content:'';
  position:absolute; inset:0;
  border-radius:14px;
  box-shadow:0 0 0 2px rgba(255,215,0,0.95), 0 0 26px 8px rgba(255,200,0,0.55);
  animation:prShock .6s ease-out forwards;
  pointer-events:none;
}
/* Bright sparks race around the border (faster + brighter than the base). */
.pr-sparking::after{
  content:'';
  position:absolute; inset:-2px;
  border-radius:14px;
  padding:2.5px;
  background:conic-gradient(from var(--pr-ang),
    transparent 0deg 200deg,
    rgba(255,255,255,1) 280deg,
    var(--gold) 312deg,
    rgba(255,179,0,1) 340deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(255,210,0,0.9));
  animation:prSpark .55s linear 3;
  pointer-events:none;
}
/* Points number punches up + flares, then settles back to the steady orange glow. */
.pr-pts-hit{ display:inline-block; animation:prPtsHit .6s cubic-bezier(0.2,1.6,0.4,1) both; }

@keyframes prSlam{ 0%{transform:scale(.62)} 55%{transform:scale(1.16)} 100%{transform:scale(1)} }
@keyframes prShock{ 0%{transform:scale(.85);opacity:.95} 100%{transform:scale(1.9);opacity:0} }
@keyframes prSpark{ to{ --pr-ang:360deg; } }
@keyframes prPtsHit{
  0%{ transform:scale(1); text-shadow:0 0 6px rgba(232,138,45,.75); }
  45%{ transform:scale(1.55); text-shadow:0 0 16px rgba(255,160,40,1); }
  100%{ transform:scale(1); text-shadow:0 0 6px rgba(232,138,45,.75); }
}
@media (prefers-reduced-motion: reduce){
  .pr-sparking{ animation:none; }
  .pr-sparking::before,.pr-sparking::after{ animation:none; opacity:0; }
  .pr-pts-hit{ animation:none; }
}

/* ═══════════════════════════════════
   TIMER CONTROLS
═══════════════════════════════════ */
.timer-controls {
  display:flex; align-items:center; gap:12px; justify-content:center;
}
.timer-adj {
  width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,0.3);
  background:transparent; color:#fff; font-size:18px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.timer-adj:active { background:rgba(255,255,255,0.15); }
.timer-center { text-align:center; }
.timer-dur { font-size:11px; opacity:0.6; margin-top:2px; }
.timer-skip {
  background:rgba(255,255,255,0.15); border:none; color:#fff;
  font-size:11px; font-weight:700; letter-spacing:0.5px;
  padding:6px 12px; border-radius:20px; cursor:pointer; font-family:inherit;
}
.timer-skip:active { background:rgba(255,255,255,0.25); }
.timer-bar.done .timer-skip { display:inline-flex; }

/* ═══════════════════════════════════
   SESSION NOTES
═══════════════════════════════════ */
.notes-section { margin-top:16px; }
.notes-textarea {
  width:100%; min-height:70px; border:1.5px solid var(--gray-200); border-radius:12px;
  background:var(--white); padding:12px; font-family:inherit; font-size:14px;
  color:var(--gray-700); resize:vertical; transition:border-color .15s;
}
.notes-textarea:focus { border-color:var(--blue); outline:none; }
.notes-label { font-size:12px; font-weight:500; color:var(--gray-400); margin-bottom:6px; }

/* ═══════════════════════════════════
   EXERCISE SWAP SHEET
═══════════════════════════════════ */
.swap-sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:950;
  background:var(--white); border-radius:20px 20px 0 0;
  padding:12px 20px calc(var(--safe-b) + 20px);
  transform:translateY(100%); transition:transform .3s cubic-bezier(0.32,0.72,0,1);
  max-height:65vh; overflow-y:auto;
}
.swap-sheet.on { transform:translateY(0); }
/* Tappable exercise name on the log screen (opens history sheet) */
.ex-name-tap { cursor:pointer; border-bottom:1px dashed var(--gray-300); }
.ex-name-tap:active { color:var(--blue); }
.ex-name-tap-ic { font-size:10px; margin-left:5px; opacity:0.65; border-bottom:none; }
.swap-option {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-radius:12px; margin-bottom:6px;
  cursor:pointer; transition:background .15s;
  border:1.5px solid var(--gray-100);
}
.swap-option:active { background:var(--gray-50); }
.swap-option.current { border-color:var(--blue); background:var(--blue-light); }
.swap-opt-name { font-size:15px; font-weight:600; }
.swap-opt-meta { font-size:12px; color:var(--gray-400); margin-top:2px; }
.swap-opt-fat { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gray-500); }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
.pad-b { height:30px; }
#p-session .pad-b { height:70px; }

/* ═══════════════════════════════════
   WORKOUTS LIBRARY
═══════════════════════════════════ */
.wo-seg { display:flex; gap:6px; background:var(--gray-50); padding:4px; border-radius:12px; margin-bottom:16px; }
.wo-seg button {
  flex:1; padding:9px 12px; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--gray-500);
  border-radius:9px; transition:all .15s;
}
.wo-seg button.on { background:var(--white); color:var(--blue); box-shadow:0 1px 3px rgba(0,0,0,0.05); }

.wo-card {
  background:var(--white); border-radius:14px; padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
  margin-bottom:10px; position:relative;
}
.wo-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.wo-card-name { font-size:16px; font-weight:700; color:var(--gray-800); line-height:1.2; }
.wo-card-meta { font-size:12px; color:var(--gray-400); margin-bottom:10px; }
.wo-card-exs { font-size:13px; color:var(--gray-600); line-height:1.4; margin-bottom:12px; }
.wo-card-exs .superset { color:var(--blue); font-weight:600; font-size:11px; letter-spacing:0.3px; }
.wo-actions { display:flex; gap:8px; align-items:center; }
.wo-actions .btn-start {
  flex:1; padding:10px 14px; border:none; border-radius:10px;
  background:var(--blue); color:#fff; font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
}
.wo-actions .btn-icon {
  width:36px; height:36px; border-radius:10px; border:1px solid var(--gray-200);
  background:var(--white); color:var(--gray-500); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1;
}
.wo-shared-pill {
  display:inline-flex; align-items:center; gap:4px;
  background:#e6f7ee; color:var(--green); font-size:10px; font-weight:700;
  padding:3px 7px; border-radius:10px; letter-spacing:0.4px;
}
.wo-owner-pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:500; color:var(--gray-500);
}
.wo-owner-dot { width:8px; height:8px; border-radius:50%; }

.wo-kebab-menu {
  position:absolute; right:10px; top:42px; z-index:5;
  background:var(--white); border-radius:10px; padding:6px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
  min-width:140px;
}
.wo-kebab-menu button {
  display:block; width:100%; text-align:left; padding:8px 12px;
  background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--gray-700); border-radius:6px;
}
.wo-kebab-menu button:hover { background:var(--gray-50); }
.wo-kebab-menu button.danger { color:var(--red); }

.wo-new-btn {
  width:100%; padding:14px; border:none;
  background:var(--blue); color:#fff; cursor:pointer;
  border-radius:14px; font-family:inherit; font-size:14px; font-weight:600;
  margin-bottom:14px;
}
.wo-new-btn:active { background:var(--blue-dark); }

.wo-view-toggle { display:flex; gap:6px; background:var(--gray-50); padding:4px; border-radius:12px; margin-bottom:14px; }
.wo-view-toggle button { flex:1; padding:8px 12px; border:none; background:transparent; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--gray-500); border-radius:9px; transition:all .15s; }
.wo-view-toggle button.on { background:var(--white); color:var(--blue); box-shadow:0 1px 3px rgba(0,0,0,0.05); }

.wo-empty {
  text-align:center; padding:32px 16px; color:var(--gray-400);
  font-size:14px;
}

/* Builder */
.wb-name-input {
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-200); border-radius:12px;
  font-family:inherit; font-size:15px; font-weight:600; background:var(--white);
  margin-bottom:10px;
}
.wb-name-input:focus { outline:none; border-color:var(--blue); }

.wb-block {
  background:var(--gray-50); border-radius:12px; padding:10px;
  margin-bottom:10px; border:1.5px solid transparent;
}
.wb-block.superset { border-color:var(--blue-mid); background:var(--blue-light); }
.wb-block-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.wb-block-label {
  font-size:11px; font-weight:700; color:var(--gray-500); letter-spacing:0.5px;
  text-transform:uppercase;
}
.wb-block.superset .wb-block-label { color:var(--blue); }
.wb-block-ctls { display:flex; gap:4px; align-items:center; }
.wb-arrow {
  width:28px; height:28px; border-radius:7px; border:none; background:var(--white);
  color:var(--gray-500); cursor:pointer; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.wb-arrow:disabled { opacity:0.3; cursor:default; }
.wb-trash {
  background:transparent; border:none; color:var(--red); font-size:16px;
  cursor:pointer; padding:4px 6px;
}
.wb-ex-row {
  display:flex; align-items:center; gap:6px;
  background:var(--white); border-radius:9px; padding:8px 10px;
  margin-bottom:5px;
}
.wb-ex-name { flex:1; font-size:14px; font-weight:500; color:var(--gray-800); }
.wb-add-ex {
  background:transparent; border:none; color:var(--blue); cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600; padding:6px 0;
}
.wb-rotate-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; padding:4px 4px 0; font-size:12px; color:var(--gray-500);
}
.wb-rotate-row .toggle-track { width:34px; height:18px; }
.wb-rotate-row .toggle-knob { width:14px; height:14px; }

.wb-add-block-row { display:flex; gap:8px; margin-top:4px; margin-bottom:14px; }
.wb-add-block-row button {
  flex:1; padding:11px; border:1.5px dashed var(--gray-300); background:transparent;
  border-radius:11px; font-family:inherit; font-size:13px; font-weight:600; color:var(--gray-600);
  cursor:pointer;
}

.wo-recent-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 0; border-top:1px solid var(--gray-100); font-size:13px;
}
.wo-recent-row:first-child { border-top:none; }
.wo-recent-meta { color:var(--gray-400); font-size:12px; }

/* Exercise picker sheet */
.exp-search {
  width:100%; padding:11px 14px; border:1.5px solid var(--gray-200); border-radius:11px;
  font-family:inherit; font-size:14px; background:var(--white); margin-bottom:10px;
}
.exp-search:focus { outline:none; border-color:var(--blue); }
.exp-list { max-height:46vh; overflow-y:auto; }

body.dark .wo-card { background:var(--white); }
body.dark .wo-seg { background:var(--gray-50); }
body.dark .wo-seg button.on { background:var(--gray-100); }
body.dark .wo-view-toggle { background:var(--gray-50); }
body.dark .wo-view-toggle button.on { background:var(--gray-100); }
body.dark .wb-block { background:var(--gray-50); }
body.dark .wb-ex-row { background:var(--gray-100); }
body.dark .wb-arrow { background:var(--gray-100); color:var(--gray-700); }
body.dark .wb-name-input, body.dark .exp-search { background:var(--gray-50); color:var(--gray-800); border-color:var(--gray-200); }
body.dark .wo-kebab-menu { background:var(--gray-50); }

/* ── Today's Workout recommendation ── */
.wo-today-card {
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
  color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.wo-today-label { font-size:11px; font-weight:700; letter-spacing:0.5px; opacity:0.85; margin-bottom:4px; text-transform:uppercase; }
.wo-today-name { font-size:18px; font-weight:700; margin-bottom:4px; }
.wo-today-meta { font-size:12px; opacity:0.85; margin-bottom:12px; }
.wo-today-card .btn-start {
  background:#fff; color:var(--blue); border:none; padding:10px 14px;
  border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.wo-today-done {
  background:linear-gradient(135deg,var(--green) 0%,#1a8a52 100%);
  color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.wo-today-empty {
  border:1.5px dashed var(--gray-200); border-radius:14px;
  padding:14px 16px; margin-bottom:16px; text-align:center; color:var(--gray-500);
  font-size:13px;
}
.wo-today-empty .lbl { font-weight:700; color:var(--gray-700); display:block; margin-bottom:4px; }

/* ── Active (in-progress) session card ── */
.wo-active-card {
  background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);
  color:#fff; border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.wo-active-label { font-size:11px; font-weight:700; letter-spacing:0.5px; opacity:0.85; margin-bottom:4px; text-transform:uppercase; }
.wo-active-name { font-size:18px; font-weight:700; margin-bottom:4px; }
.wo-active-meta { font-size:12px; opacity:0.85; margin-bottom:12px; }
.wo-active-actions { display:flex; align-items:center; gap:10px; }
.btn-continue-workout { flex:1; background:#fff; color:#ea580c; border:none; padding:10px 14px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.btn-discard-workout { background:rgba(255,255,255,0.2); border:1.5px solid rgba(255,255,255,0.4); border-radius:10px; color:#fff; font-size:20px; padding:8px 12px; cursor:pointer; line-height:1; }
.btn-discard-workout:active { background:rgba(255,255,255,0.35); }

/* ── Schedule pills ── */
.wo-section-title {
  font-size:11px; font-weight:700; color:var(--gray-400); letter-spacing:0.5px;
  margin-bottom:10px; text-transform:uppercase;
}
.wo-schedule-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.wo-schedule-grid > div { min-width:0; }
.wo-day {
  background:var(--white); border-radius:10px; padding:8px 4px;
  text-align:center; cursor:pointer; height:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--gray-100);
  transition:transform .1s; overflow:hidden; min-width:0;
}
.wo-day:active { transform:scale(0.96); }
.wo-day.today { border-color:var(--blue); background:var(--blue-light); }
.wo-day-name { font-size:11px; font-weight:700; color:var(--gray-500); letter-spacing:0.4px; margin-bottom:4px; flex-shrink:0; }
.wo-day.today .wo-day-name { color:var(--blue); }
.wo-day-workout { font-size:11px; color:var(--gray-700); font-weight:600; line-height:1.2; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 4px; box-sizing:border-box; }
.wo-day-empty { font-size:14px; color:var(--gray-300); font-weight:700; }

/* ── Heatmap (original — commented out) ──
.wo-heatmap {
  display:grid; grid-auto-flow:column;
  grid-template-rows:repeat(7,12px); gap:3px;
  overflow-x:auto;
}
.wo-hm-cell {
  width:12px; height:12px; border-radius:2px; background:var(--gray-100);
  cursor:default;
}
.wo-hm-cell.l1 { background:#bdd0f4; }
.wo-hm-cell.l2 { background:#7e9fe2; }
.wo-hm-cell.l3 { background:#4a76d4; }
.wo-hm-cell.l4 { background:var(--blue-dark); }
.wo-hm-cell.today { box-shadow:0 0 0 2px var(--blue-dark); }
.wo-hm-legend {
  display:flex; align-items:center; gap:4px; font-size:10px; color:var(--gray-400);
  margin-top:8px; justify-content:flex-end;
}
.wo-hm-legend .wo-hm-cell { width:10px; height:10px; }
body.dark .wo-hm-cell { background:var(--gray-100); }
── */

/* ── Monthly Activity Calendar ── */
.wo-cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.wo-cal-btn {
  background:none; border:none; font-size:18px; line-height:1; cursor:pointer;
  color:var(--gray-500); padding:0 4px; border-radius:4px;
}
.wo-cal-btn:hover:not(:disabled) { background:var(--gray-100); color:var(--gray-700); }
.wo-cal-btn:disabled { opacity:0.2; cursor:default; }
.wo-cal-month { font-size:12px; font-weight:700; color:var(--gray-700); }
.wo-cal-dow {
  display:grid; grid-template-columns:repeat(7,1fr) 28px; text-align:center;
  font-size:9px; font-weight:700; color:var(--gray-400); letter-spacing:0.3px;
  margin-bottom:2px;
}
.wo-cal-grid { display:grid; grid-template-columns:repeat(7,1fr) 28px; column-gap:0; row-gap:3px; }
.wo-cal-cell { display:flex; align-items:center; justify-content:center; }
.wo-cal-empty { pointer-events:none; }
.wo-cal-week-ind { display:flex; align-items:center; justify-content:center; }
.wo-cal-week-dot {
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--gray-200); background:transparent; flex-shrink:0;
}
.wo-cal-week-icon { display:flex; align-items:center; justify-content:center; color:var(--gray-300); }
.wo-cal-week-icon--active { color:#fb923c; }
.wo-cal-streak-footer {
  display:flex; justify-content:space-around; margin-top:10px; padding:2px 8px 4px;
}
.wo-cal-streak-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.wo-cal-streak-pair {
  display:flex; align-items:center; gap:4px;
}
.wo-cal-streak-count {
  font-size:20px; font-weight:800; color:var(--gray-800); line-height:1;
}
.wo-cal-streak-label {
  font-size:9px; font-weight:600; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px;
}
.wo-cal-streak-info { cursor:pointer; opacity:0.7; font-style:normal; }
.wo-cal-streak-item--tap { cursor:pointer; }
.wo-cal-circle {
  width:32px; height:32px; border-radius:50%; background:var(--gray-100);
  display:flex; align-items:center; justify-content:center; position:relative;
  flex-shrink:0;
}
.wo-cal-is-today .wo-cal-circle { box-shadow:inset 0 0 0 2px var(--blue); }
.wo-cal-strength,
.wo-cal-cycling,
.wo-cal-running,
.wo-cal-walking,
.wo-cal-rowing,
.wo-cal-stairs { background:var(--blue); color:#fff; }
.wo-cal-multi {
  position:absolute; top:-3px; right:-3px;
  min-width:14px; height:14px; border-radius:99px; padding:0 2px;
  background:#fb923c; border:1.5px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:800; color:#fff; line-height:1;
  box-sizing:border-box;
}
.wo-cal-day-num { font-size:9px; color:var(--gray-500); font-weight:700; line-height:1; }
body.dark .wo-cal-circle  { background:var(--gray-100); }
body.dark .wo-cal-strength,
body.dark .wo-cal-cycling,
body.dark .wo-cal-running,
body.dark .wo-cal-walking,
body.dark .wo-cal-rowing,
body.dark .wo-cal-stairs  { background:var(--blue); }
body.dark .wo-cal-month   { color:var(--gray-700); }
body.dark .wo-cal-multi   { border-color:#1a1a2e; }

/* ── Competition progress chart ── */
.cp-chart {
  display:flex; align-items:flex-end; gap:4px;
  height:100px; margin:8px 0 14px;
  padding-bottom:18px; position:relative;
}
.cp-bar {
  flex:1; min-width:0; background:var(--gray-100); border-radius:4px 4px 0 0;
  position:relative; min-height:4px;
  display:flex; align-items:flex-start; justify-content:center;
}
.cp-bar.has-workout { background:var(--blue); }
.cp-bar.current { box-shadow:0 0 0 2px var(--blue-dark); }
.cp-bar.empty {
  background:repeating-linear-gradient(45deg,var(--gray-50),var(--gray-50) 3px,var(--gray-100) 3px,var(--gray-100) 6px);
}
.cp-bar-label {
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  font-size:9px; color:var(--gray-400); font-weight:600;
}
.cp-bar-val {
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; color:var(--gray-700); white-space:nowrap;
}
.cp-legend {
  display:flex; gap:14px; font-size:11px; color:var(--gray-500);
  margin-top:6px; flex-wrap:wrap;
}
.cp-legend .swatch { display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.cp-legend .swatch.workout { background:var(--blue); }
.cp-legend .swatch.empty { background:repeating-linear-gradient(45deg,var(--gray-50),var(--gray-50) 2px,var(--gray-100) 2px,var(--gray-100) 4px); }
.cp-legend .swatch.current { background:var(--blue); box-shadow:0 0 0 2px var(--blue-dark); }

body.dark .wo-day { background:var(--gray-50); border-color:var(--gray-100); }

.score-bar { background:#1c1d24; color:#fff; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; border-radius:10px; padding:12px 16px; }
body.dark .score-bar { background:var(--blue); }

/* ═══════════════════════════════════
   DARK MODE
═══════════════════════════════════ */
body.dark { --bg:#121318; --white:#1c1d24; --gray-50:#22232b; --gray-100:#2a2b34;
  --gray-200:#3a3b45; --gray-300:#5a5c68; --gray-400:#8e919d; --gray-500:#a0a3ad;
  --gray-600:#c0c2ca; --gray-700:#d8d9de; --gray-800:#eeeef0;
  --blue-light:rgba(37,88,212,0.15); }
body.dark { background:var(--bg); color:var(--gray-800); }
body.dark .nav { background:var(--white); border-top-color:var(--gray-100); }
body.dark .nav-action-menu { background:var(--white); border-color:var(--gray-100); }
body.dark .nav-weight-inner { background:var(--white); }
body.dark .set-input/*, body.dark .rir-select*/ { background:var(--gray-50); color:var(--gray-800); border-color:var(--gray-200); }
body.dark .set-input.locked { background:var(--gray-100); color:var(--gray-300); }
body.dark .ss-transition { background:rgba(37,88,212,0.15); }
body.dark .ss-transition.waiting { background:var(--gray-50); }
body.dark .notes-textarea { background:var(--gray-50); color:var(--gray-700); border-color:var(--gray-200); }
body.dark .sheet, body.dark .swap-sheet { background:#1c1d24; }
body.dark .sheet-overlay.on { background:rgba(0,0,0,0.6); }
body.dark #s-pick { background:var(--bg); }
body.dark .pick-title { color:var(--gray-800); }
body.dark .modal-box { background:var(--white); }
body.dark .modal-input, body.dark .modal-select { background:var(--gray-50); color:var(--gray-800); border-color:var(--gray-200); }
body.dark .user-row { background:var(--gray-50); }
body.dark .top-bar { background:var(--bg); }

/* ═══════════════════════════════════
   DELOAD BANNER
═══════════════════════════════════ */
.deload-info {
  background:linear-gradient(135deg, var(--blue-light) 0%, #dce6f9 100%);
  border-radius:14px; padding:16px; margin-bottom:16px;
  border:1px solid var(--blue-mid);
}
.deload-info-title { font-size:14px; font-weight:700; color:var(--blue); margin-bottom:6px; }
.deload-info-text { font-size:13px; color:var(--gray-600); line-height:1.5; }


/* ═══════════════════════════════════
   VOLUME SUMMARY
═══════════════════════════════════ */
.rolling-vol-card .rv-title { font-size:12px; font-weight:600; color:var(--gray-400); letter-spacing:0.5px; margin-bottom:8px; }
.vol-card { background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color:#fff; border-radius:16px; padding:18px; margin-bottom:14px; }
.vol-title { font-size:12px; font-weight:600; letter-spacing:0.8px; opacity:0.7; margin-bottom:12px; }
.vol-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.vol-stat-val { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; }
.vol-stat-label { font-size:10px; opacity:0.6; margin-top:2px; }

/* ═══════════════════════════════════
   DARK MODE TOGGLE
═══════════════════════════════════ */
.dm-toggle {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.toggle-track {
  width:48px; height:28px; border-radius:14px; background:var(--gray-200);
  position:relative; cursor:pointer; transition:background .2s;
}
.toggle-track.on { background:var(--blue); }
.toggle-knob {
  width:22px; height:22px; border-radius:50%; background:#fff;
  position:absolute; top:3px; left:3px; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
.toggle-track.on .toggle-knob { transform:translateX(20px); }

/* ═══════════════════════════════════
   TOOLTIPS
═══════════════════════════════════ */
.info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; border-radius:50%;
  background:var(--gray-200); color:var(--gray-500);
  font-size:9px; font-weight:700; cursor:pointer;
  margin-left:4px; flex-shrink:0; vertical-align:middle;
  user-select:none; -webkit-user-select:none; line-height:1;
}
#tooltip-bubble {
  position:fixed; z-index:9500;
  background:var(--gray-800); color:#fff;
  font-size:12px; line-height:1.5; font-weight:400;
  padding:8px 12px; border-radius:10px;
  max-width:220px; pointer-events:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  opacity:0; transition:opacity .15s;
  font-family:'DM Sans',system-ui,sans-serif;
}
#tooltip-bubble.on { opacity:1; }

/* ── Competition Dashboard ── */
.comp-card { background:var(--white); border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.03); margin-bottom:12px; }
.comp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.comp-title { font-size:15px; font-weight:700; color:var(--gray-800); }
.comp-see-all { font-size:12px; font-weight:600; color:var(--blue); cursor:pointer; }
.comp-standing-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--gray-50); }
.comp-standing-row:last-child { border-bottom:none; }
.comp-rank { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; }
.comp-rank.r1 { background:#ffd700; color:#7a5c00; }
.comp-rank.r2 { background:#c0c0c0; color:#4a4a4a; }
.comp-rank.r3 { background:#cd7f32; color:#fff; }
.comp-rank.r4 { background:var(--gray-100); color:var(--gray-500); }
.comp-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.comp-name { font-size:12px; font-weight:600; color:var(--gray-800); flex:1; }
.comp-pts { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--blue); }
.comp-stat-strip { display:flex; gap:8px; margin-bottom:14px; }
.comp-stat-pill { flex:1; background:var(--white); border-radius:12px; padding:10px 12px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.03); }
.comp-stat-val { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; color:var(--gray-800); }
.comp-stat-label { font-size:10px; font-weight:500; color:var(--gray-400); margin-top:2px; letter-spacing:0.3px; }
.comp-week-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.comp-week-num { font-size:12px; font-weight:600; color:var(--gray-400); width:42px; flex-shrink:0; }
.comp-week-bar { flex:1; height:8px; background:var(--gray-100); border-radius:4px; overflow:hidden; position:relative; }
.comp-week-fill { height:100%; border-radius:4px; transition:width .3s; }
.comp-week-pts { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; width:54px; text-align:right; flex-shrink:0; }
.comp-detail-section { margin-bottom:14px; }
.comp-detail-title { font-size:11px; font-weight:600; color:var(--gray-400); letter-spacing:0.5px; margin-bottom:6px; }
.comp-ex-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--gray-50); }
.comp-ex-row:last-child { border-bottom:none; }
.comp-ex-name { font-size:13px; font-weight:500; color:var(--gray-700); flex:1; }
.comp-ex-score { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--blue); }
.comp-participant-check { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--gray-50); border-radius:10px; margin-bottom:6px; cursor:pointer; }
.comp-participant-check.sel { background:var(--blue-light); border:1.5px solid var(--blue-mid); }
.comp-participant-check:not(.sel) { border:1.5px solid transparent; }

.comp-history-scroll { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 0 12px; }
.comp-history-scroll::-webkit-scrollbar { display:none; }
.comp-history-card { min-width:240px; max-width:260px; scroll-snap-align:start; background:var(--white); border-radius:16px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.06),0 0 0 1px rgba(0,0,0,0.03); flex-shrink:0; border-top:4px solid var(--gray-200); }
.comp-history-winner { display:flex; align-items:center; gap:10px; margin:10px 0 12px; }
.comp-history-winner .comp-avatar { width:36px; height:36px; font-size:13px; }
.comp-history-standing { display:flex; align-items:center; gap:6px; padding:4px 0; font-size:12px; color:var(--gray-600); }
.comp-history-standing .comp-rank { width:20px; height:20px; font-size:9px; }

/* ── User Picker Screen ── */
#s-pick {
  position:fixed; inset:0; z-index:9000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 20px;
}
#s-pick.hidden { display:none; }
.pick-title { font-size:28px; font-weight:700; color:var(--gray-800); margin-bottom:8px; }
.pick-sub { font-size:14px; color:var(--gray-400); margin-bottom:32px; }
.pick-grid {
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center;
  max-width:360px;
}
.pick-avatar {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:transform .15s;
}
.pick-avatar:active { transform:scale(0.92); }
.pick-circle {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.12);
  transition:box-shadow .2s;
}
.pick-avatar:hover .pick-circle { box-shadow:0 6px 20px rgba(0,0,0,0.18); }
.pick-circle, .pick-name { pointer-events:none; }
.pick-name { font-size:13px; font-weight:600; color:var(--gray-700); }
.pick-add .pick-circle {
  background:var(--gray-100); color:var(--gray-400);
  font-size:28px; font-weight:300;
  border:2px dashed var(--gray-200);
}

/* ── Top Bar (current user) ── */
.top-bar {
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; gap:10px;
  padding:calc(var(--safe-t) + 10px) 20px 10px;
  background:var(--bg);
}
.top-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
  cursor:pointer; transition:transform .15s, box-shadow .15s;
}
.top-avatar:active { transform:scale(0.92); }
.top-avatar:hover { box-shadow:0 2px 8px rgba(0,0,0,0.15); }
/* The avatar IS the Account tab now — ring it while that page is open. */
.top-avatar.on { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--blue); }
.top-name { font-size:15px; font-weight:700; color:var(--gray-800); }
.top-beta-badge { position:absolute; left:50%; transform:translateX(-50%); font-size:9px; font-weight:700; letter-spacing:1px; color:#fff; background:#2563eb; border-radius:4px; padding:2px 6px; }
.notif-bell {
  position:relative; background:none; border:none; cursor:pointer;
  padding:6px; color:var(--gray-500); display:flex; align-items:center;
  justify-content:center; border-radius:10px; margin-left:auto;
  transition:background .15s, color .15s; flex-shrink:0;
}
.notif-bell:active { background:var(--gray-100); }
.notif-bell:hover { color:var(--gray-800); }
.notif-badge {
  position:absolute; top:-1px; right:-1px; min-width:18px; height:18px;
  background:#ef4444; color:#fff; border-radius:9px;
  font-size:10px; font-weight:700; display:flex; align-items:center;
  justify-content:center; padding:0 4px; line-height:1;
  border:2px solid var(--bg); font-family:inherit;
}
.top-switch {
  font-size:11px; font-weight:600; color:var(--blue);
  background:var(--blue-light); padding:6px 12px; border-radius:8px;
  border:none; cursor:pointer; font-family:inherit; flex-shrink:0;
}
.top-switch:active { opacity:0.7; }

/* ── Notification panel ── */
.notif-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.35);
  z-index:4999; display:none;
}
.notif-overlay.on { display:block; }
.notif-panel {
  position:fixed; top:0; right:0; width:320px; max-width:100vw;
  height:100dvh; background:var(--white); z-index:5000;
  box-shadow:-4px 0 28px rgba(0,0,0,0.14);
  transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.notif-panel.open { transform:translateX(0); }
.notif-panel-header {
  display:flex; align-items:center; gap:8px;
  padding:calc(var(--safe-t) + 16px) 20px 14px;
  border-bottom:1px solid var(--gray-100); flex-shrink:0;
}
.notif-panel-title { font-size:16px; font-weight:700; color:var(--gray-800); flex:1; }
.notif-clear-all {
  background:none; border:none; cursor:pointer; font-size:12px; font-weight:600;
  color:var(--gray-400); padding:4px 8px; border-radius:8px;
  font-family:inherit;
}
.notif-clear-all:hover { color:var(--gray-700); background:var(--gray-50); }
.notif-panel-close {
  background:none; border:none; cursor:pointer; font-size:16px;
  color:var(--gray-400); padding:4px 8px; border-radius:8px;
  line-height:1;
}
.notif-panel-close:hover { background:var(--gray-50); color:var(--gray-700); }
.notif-panel-list { flex:1; overflow-y:auto; }
.notif-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--gray-50);
  cursor:pointer; transition:background .1s;
}
.notif-item:hover { background:var(--gray-50); }
.notif-item.unread { background:var(--blue-light); }
.notif-item.unread:hover { background:#d4e4f7; }
.notif-item-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff; flex-shrink:0;
}
.notif-item-text { flex:1; min-width:0; }
.notif-item-main { font-size:13px; color:var(--gray-700); line-height:1.45; }
.notif-item-main strong { color:var(--gray-800); font-weight:600; }
.notif-item-time { font-size:11px; color:var(--gray-400); margin-top:3px; }
.notif-item-icon { font-size:18px; flex-shrink:0; align-self:center; margin-right:4px; }
.notif-dismiss-btn {
  background:none; border:none; cursor:pointer; font-size:12px;
  color:var(--gray-300); padding:4px 6px; line-height:1; flex-shrink:0;
  align-self:center; border-radius:6px; font-family:inherit;
  transition:color .15s;
}
@media (hover:hover) {
  .notif-dismiss-btn { opacity:0; transition:opacity .15s, color .15s; }
  .notif-item:hover .notif-dismiss-btn { opacity:1; }
}
.notif-dismiss-btn:hover { color:var(--gray-600); }
.notif-empty {
  padding:48px 24px; text-align:center;
  color:var(--gray-400); font-size:14px; line-height:1.6;
}
body.dark .notif-panel { background:var(--white); }
body.dark .notif-panel-header { border-color:var(--gray-100); }
body.dark .notif-item { border-color:var(--gray-100); }
body.dark .notif-item:hover { background:var(--gray-50); }
body.dark .notif-item.unread { background:var(--blue-light); }

/* ── Modal ── */
.modal-overlay {
  position:fixed; inset:0; z-index:9500; background:rgba(10,12,20,0.6);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.on { display:flex; }
.profile-page {
  position:fixed; top:0; left:0; right:0; bottom:var(--nav-h); z-index:9200; background:var(--white);
  overflow-y:auto; overflow-x:hidden; display:none;
  padding:calc(var(--safe-t) + 16px) 20px 24px;
}
.profile-page.on { display:block; }
.modal-box {
  background:var(--white); border-radius:20px; padding:24px;
  width:100%; max-width:380px; max-height:80vh; overflow-y:auto; overflow-x:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.modal-title { font-size:20px; font-weight:700; color:var(--gray-800); margin-bottom:16px; }
.modal-label { font-size:12px; font-weight:600; color:var(--gray-400); letter-spacing:0.3px; margin-bottom:6px; }
.modal-input {
  width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px; border:1.5px solid var(--gray-200);
  font-family:inherit; font-size:14px; color:var(--gray-800); background:var(--white);
  margin-bottom:12px;
}
.modal-input:focus { border-color:var(--blue); outline:none; }
input[type="date"].modal-input, input[type="date"].set-input { padding:8px 10px; font-size:15px; }
.modal-row { display:flex; gap:12px; margin-bottom:12px; }
.modal-row > div { flex:1; min-width:0; }
.seg-toggle { display:flex; background:var(--gray-100); border-radius:8px; padding:3px; gap:2px; box-sizing:border-box; }
.seg-btn { background:none; border:none; border-radius:6px; padding:4px 10px; font-size:12px; font-weight:600; color:var(--gray-500); cursor:pointer; font-family:inherit; transition:background .15s,color .15s; }
.seg-btn.active { background:var(--white); color:var(--gray-800); box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.modal-select {
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--gray-200);
  font-family:inherit; font-size:14px; color:var(--gray-800); background:var(--white);
  appearance:none; -webkit-appearance:none;
}
.color-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.color-dot {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:3px solid transparent; transition:border-color .15s, transform .1s;
}
.color-dot.sel { border-color:var(--gray-800); transform:scale(1.15); }
.user-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--gray-50); border-radius:12px; margin-bottom:8px;
}
.user-row-circle {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.user-row-info { flex:1; min-width:0; }
.user-row-name { font-size:14px; font-weight:700; color:var(--gray-800); }
.user-row-meta { font-size:11px; color:var(--gray-400); }
.user-row-actions { display:flex; gap:6px; }
.user-row-btn {
  font-family:inherit; font-size:11px; font-weight:600; padding:5px 10px;
  border-radius:8px; border:1px solid var(--gray-200); background:var(--white);
  color:var(--gray-600); cursor:pointer;
}
.user-row-del {
  width:28px; height:28px; border-radius:8px; border:1px solid var(--gray-200);
  background:var(--white); color:var(--red); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ── Account Page ── */
.account-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.account-page-title{font-size:26px;font-weight:700;color:var(--gray-900);}
.account-settings-icon-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--gray-100);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-600);transition:background .15s;flex-shrink:0;}
.account-settings-icon-btn:hover{background:var(--gray-200);}
.account-tabs{display:flex;gap:0;margin-bottom:16px;background:var(--gray-100);border-radius:12px;padding:4px;}
.acct-tab{flex:1;padding:10px 0;border:none;background:transparent;border-radius:8px;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;font-family:inherit;transition:all .15s;}
.acct-tab.on{background:var(--white);color:var(--gray-800);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.acct-tabs-l2{display:flex;gap:0;margin-bottom:14px;border-bottom:1.5px solid var(--gray-100);overflow-x:auto;}
.acct-tab-l2{flex:1;min-width:fit-content;padding:8px 12px;border:none;border-bottom:2.5px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--gray-400);cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s;margin-bottom:-1.5px;white-space:nowrap;}
.acct-tab-l2.on{color:var(--blue);border-bottom-color:var(--blue);}
.nav-avatar-sm { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; background:var(--gray-300); }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.stat-box { background:var(--white); border-radius:14px; padding:16px 12px; box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.03); display:flex; flex-direction:column; align-items:center; text-align:center; }
.stat-box-val { font-size:26px; font-weight:700; color:var(--gray-800); font-family:'JetBrains Mono',monospace; line-height:1.1; }
.stat-box-label { font-size:10px; font-weight:600; color:var(--gray-400); letter-spacing:0.5px; margin-top:5px; text-transform:uppercase; }

/* ═══════ Workouts tab: stacked library sections ═══════ */
.wo-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wo-section-head .wo-section-title{margin:0}
.wo-section-actions{display:flex;gap:8px;flex-wrap:wrap}
.wo-section-actions .wo-new-btn{width:auto;padding:7px 12px;font-size:12px}

/* Star ratings */
.wo-stars{display:inline-flex;gap:2px;line-height:1}
.wo-star{color:var(--gray-200);font-size:16px;line-height:1}
.wo-star.on{color:#f5a623}
.wo-star.half{background:linear-gradient(90deg,#f5a623 50%,var(--gray-200) 50%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wo-stars-interactive .wo-star{cursor:pointer;font-size:20px;padding:0 1px}
.wo-stars-interactive .wo-star:hover{color:#f5a623}
.wo-rating-row{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.wo-rating-num{font-size:13px;font-weight:700;color:var(--gray-700,#444)}
.wo-rating-votes{font-size:12px;color:var(--gray-400)}
.wo-myrate-row{display:flex;align-items:center;gap:8px;margin:2px 0 6px}
.wo-myrate-label{font-size:12px;color:var(--gray-500)}

/* Share picker rows */
.sp-row{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--gray-100);cursor:pointer}
.sp-name{flex:1;font-size:14px;color:var(--gray-800)}
.sp-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex-shrink:0}
.sp-check.on{background:var(--blue);border-color:var(--blue)}

/* ═══════ Program detail sheet ═══════ */
.wo-card-clickable{cursor:pointer}
.wo-card-clickable:active{transform:scale(0.995)}
.pd-desc{font-size:13px;color:var(--gray-600,#555);line-height:1.5;margin:4px 0 14px;white-space:pre-wrap}
.pd-phase{border:1px solid var(--gray-100);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.pd-phase-head{font-size:13px;font-weight:700;color:var(--gray-800);margin-bottom:8px}
.pd-deload{font-size:10px;font-weight:700;color:#fff;background:var(--orange,#e17055);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.pd-day{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--gray-50)}
.pd-day:first-of-type{border-top:none}
.pd-dow{flex-shrink:0;width:34px;font-size:11px;font-weight:700;color:var(--gray-400);padding-top:1px}
.pd-wo{flex:1;min-width:0}
.pd-wo-name{font-size:13px;font-weight:600;color:var(--gray-800)}
.pd-wo-exs{font-size:11px;color:var(--gray-400);line-height:1.5;margin-top:1px}
.pd-empty{font-size:12px;color:var(--gray-400);font-style:italic}

/* ═══════ Quick-action bar (Start / Quick / Select) ═══════ */
.wo-quick-btns{display:flex;gap:8px;margin-top:10px}
.wo-quick-btns .wo-new-btn{flex:1;margin-bottom:0;padding:11px 8px;font-size:13px;line-height:1.2;background:var(--blue);color:#fff;border:none}
.wo-quick-btns .wo-new-btn:active{background:var(--blue-dark)}

/* Select-workout picker rows (reuses #wp-sheet) */
.wp-item{padding:12px 14px;border:1px solid var(--gray-100);border-radius:12px;margin-bottom:8px;cursor:pointer}
.wp-item:active{background:var(--gray-50)}
.wp-item-name{font-size:14px;font-weight:600;color:var(--gray-800)}
.wp-item-meta{font-size:12px;color:var(--gray-400);margin-top:1px}

/* "Added" state for a global program (green, icon + text on one line) */
.wo-actions .btn-start.wo-added-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;flex:0 0 auto;width:auto;padding:10px 18px;background:var(--green);color:#fff;opacity:1;cursor:default}
.wo-actions .btn-start.wo-added-btn svg{flex-shrink:0}

/* ═══════ Weekly competition recap modal ═══════ */
.recap-banner{
  text-align:center;
  background:linear-gradient(135deg,#fff7e0,#ffe7c2);
  border:1px solid #f3d28a;border-radius:16px;
  padding:18px 16px;margin-bottom:14px;
}
body.dark .recap-banner{background:linear-gradient(135deg,#3a3320,#2a2415);border-color:#5a4a20;}
.recap-trophy{font-size:40px;line-height:1;margin-bottom:4px}
.recap-kicker{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#a9772a}
.recap-champ-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.recap-champ-name{font-size:20px;font-weight:800;color:var(--gray-800)}
.recap-champ-score{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#a9772a;margin-top:4px}
.recap-you{
  text-align:center;font-size:14px;color:var(--gray-700,#444);
  background:var(--blue-light);border-radius:12px;padding:10px;margin-bottom:14px;
}
.recap-section-label{font-size:11px;font-weight:700;letter-spacing:0.5px;color:var(--gray-400);text-transform:uppercase;margin:4px 0 6px}
.recap-standings{margin-bottom:14px}
.recap-standing-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--gray-50)}
.recap-standing-row:last-child{border-bottom:none}
.recap-standing-row.me{background:var(--blue-light);border-radius:8px;padding:7px 8px;margin:0 -4px}
.recap-motivation{text-align:center;font-size:14px;font-weight:600;color:var(--gray-700,#444);margin:6px 0 16px;line-height:1.4}

/* ═══════ Tile Competition View ═══════ */
.comp-section-label{font-size:10px;font-weight:600;color:var(--gray-400);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px;padding-left:2px;}
.comp-tile-card{
  border-radius:16px;overflow:hidden;margin-bottom:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.03);
  user-select:none;-webkit-user-select:none;
}
.comp-tile-card.dragging{opacity:0.45;transform:scale(0.97);}
.comp-tile-card.drag-over{outline:2px solid var(--blue);outline-offset:-2px;}
.comp-tile-face{
  background:var(--white);
  padding:12px 16px 10px;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;position:relative;
}
.comp-tile-drag{position:absolute;right:10px;bottom:7px;color:var(--gray-300);line-height:0;pointer-events:none;}
.comp-tile-name{font-size:15px;font-weight:700;color:var(--gray-800);line-height:1.2;}
.comp-tile-sub{font-size:11px;color:var(--gray-400);margin-top:1px;margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.comp-tile-statrow{display:flex;align-items:center;}
.comp-tile-stat{flex:1;text-align:center;}
.comp-tile-stat-lbl{font-size:9px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.comp-tile-stat-val{font-size:16px;font-weight:700;color:var(--gray-700);}
.comp-tile-stat-div{width:1px;height:28px;background:var(--gray-100);margin:0 8px;flex-shrink:0;}
.comp-tile-chevron{text-align:center;font-size:8px;color:var(--gray-300);margin-top:8px;}
.comp-tile-expanded{background:var(--white);border-top:1px solid var(--gray-100);}

/* ─── Social Feed ──────────────────────────────────────────── */
.feed-loading,.feed-empty{padding:40px 20px;text-align:center;color:var(--gray-400);font-size:14px;line-height:1.6;}
.page-ptr{display:flex;align-items:center;justify-content:center;gap:8px;height:0;overflow:hidden;opacity:0;font-size:13px;font-weight:600;color:var(--gray-500);}
.page-ptr-arrow{display:inline-block;font-size:18px;line-height:1;color:var(--gray-400);}
.page-ptr-spinner{width:18px;height:18px;border:2.5px solid var(--gray-200);border-top-color:var(--blue);border-radius:50%;animation:ptr-spin 0.7s linear infinite;flex-shrink:0;}
.page-ptr-loading{color:var(--blue);}
.page-ptr-done{color:#16a34a;}
.page-ptr-check{font-size:16px;}
@keyframes ptr-spin{to{transform:rotate(360deg);}}

.feed-card{background:var(--white);border-radius:16px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.04),0 0 0 1px rgba(0,0,0,0.03);margin-bottom:12px;user-select:none;-webkit-user-select:none;}
.feed-card-highlight{box-shadow:0 0 0 3px rgba(37,99,235,0.45),0 2px 12px rgba(37,99,235,0.15);}

.feed-card-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.feed-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}
.feed-avatar-sm{width:22px;height:22px;font-size:10px;}
.feed-profile-rivals-grid{display:flex;flex-wrap:wrap;gap:12px;padding:4px 0;}
.feed-profile-rival-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:4px;border-radius:10px;-webkit-tap-highlight-color:transparent;}
.feed-profile-rival-btn:active{background:var(--gray-50);}
.feed-profile-rival-name{font-size:10px;font-weight:600;color:var(--gray-500);max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.feed-profile-mutual-badge{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;background:var(--blue);color:#fff;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--white);}
.feed-card-meta{flex:1;min-width:0;}
.feed-user-name{font-size:14px;font-weight:700;color:var(--gray-800);display:flex;align-items:center;gap:6px;}
.feed-rel-tag{font-size:10px;font-weight:600;letter-spacing:0.3px;padding:1px 6px;border-radius:8px;}
.feed-rel-rival{background:var(--blue-light);color:var(--blue);}
.feed-rel-competitor{background:var(--gray-50);color:var(--gray-400);border:1px solid var(--gray-100);}
.feed-card-sub{font-size:11px;color:var(--gray-400);margin-top:1px;}
.feed-score{font-size:13px;font-weight:700;color:var(--blue);white-space:nowrap;background:var(--blue-light);padding:4px 9px;border-radius:20px;font-family:'JetBrains Mono',monospace;}

.feed-stat-block{display:flex;gap:24px;padding:8px 0 12px;}
.feed-stat-val{font-size:18px;font-weight:700;color:var(--gray-900);font-family:'JetBrains Mono',monospace;line-height:1.2;}
.feed-stat-lbl{font-size:10px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px;}
.feed-stat-exnames{font-size:13px;color:var(--gray-500);padding:6px 0 10px;line-height:1.5;}
.feed-stat-more{color:var(--gray-400);}
.feed-prs{display:flex;flex-direction:column;gap:3px;padding:0 0 10px;}
.feed-pr-item{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--orange);}
.feed-pr-item svg{flex-shrink:0;}
.feed-pr-more{opacity:0.6;}
.feed-pymk-header{font-size:11px;font-weight:700;letter-spacing:0.5px;color:var(--blue);text-transform:uppercase;margin-bottom:10px;}
.feed-pymk-row{display:flex;align-items:center;gap:10px;padding:7px 0;}
.feed-pymk-row+.feed-pymk-row{border-top:1px solid var(--gray-100);}
.feed-pymk-info{flex:1;min-width:0;}
.feed-pymk-add-btn{font-size:12px!important;padding:6px 14px!important;min-width:0!important;width:auto!important;white-space:nowrap;flex-shrink:0;}
.feed-pymk-dismiss{display:block;margin-top:10px;background:none;border:none;font-size:12px;color:var(--gray-400);cursor:pointer;padding:4px 0;width:100%;text-align:center;}
.feed-pymk-dismiss:active{color:var(--gray-600);}

.feed-actions{display:flex;align-items:center;gap:4px;padding:6px 0 4px;border-top:1px solid var(--gray-100);margin-top:2px;}
.feed-reactions{display:flex;gap:2px;}
.feed-react-btn{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:16px;border:none;background:none;font-size:13px;cursor:pointer;transition:all .15s;color:var(--gray-400);}
.feed-react-btn:active{transform:scale(0.92);}
.feed-react-btn.on{background:var(--blue-light);color:var(--blue);}
.feed-react-count{font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;color:inherit;}
.feed-react-btn.on .feed-react-count{color:var(--blue);}

.feed-comments-toggle{display:block;margin-top:10px;font-size:12px;font-weight:500;color:var(--blue);background:none;border:none;padding:0;cursor:pointer;letter-spacing:0.2px;}
.feed-comments-toggle.on{color:var(--gray-400);}

.feed-comments-wrap{margin-top:8px;margin-bottom:4px;}
.feed-comment-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:7px;}
.feed-comment-col{flex:1;min-width:0;}
.feed-comment-bubble{background:var(--gray-50);border-radius:12px;padding:7px 10px;font-size:13px;color:var(--gray-700);line-height:1.4;display:flex;align-items:center;gap:6px;}
.feed-comment-text{flex:1;}
.feed-comment-author{font-weight:600;color:var(--gray-800);}
.feed-comment-del{flex-shrink:0;background:none;border:none;color:var(--gray-300);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;}
.feed-comment-del:hover{color:var(--red,#ef4444);}
.feed-comment-bubble-row{display:flex;align-items:center;gap:4px;}
.feed-comment-react-add{flex-shrink:0;background:none;border:none;color:var(--gray-300);cursor:pointer;padding:5px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s;}
.feed-comment-react-add:hover,.feed-comment-react-add:active{color:var(--gray-500);background:var(--gray-100);}
.feed-comment-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;padding-left:4px;}
.feed-react-popup{position:fixed;background:var(--white);border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,.18),0 1px 6px rgba(0,0,0,.1);padding:6px 10px;gap:2px;z-index:9999;display:none;transform-origin:bottom center;}
.feed-react-popup.open{display:flex;animation:cReactPopIn .22s cubic-bezier(.34,1.56,.64,1);}
@keyframes cReactPopIn{from{transform:scale(.4) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.feed-react-popup-btn{background:none;border:none;font-size:28px;cursor:pointer;padding:2px 4px;border-radius:50%;line-height:1;transition:transform .12s;}
.feed-react-popup-btn:hover,.feed-react-popup-btn:active{transform:scale(1.3);}
.feed-comment-reaction-chip{background:var(--gray-50);border:1.5px solid var(--gray-100);border-radius:20px;padding:2px 8px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:3px;font-family:inherit;}
.feed-comment-reaction-chip.on{background:var(--blue-light);border-color:var(--blue-mid);}
.rn-tip{position:fixed;background:rgba(20,22,40,.88);color:#fff;border-radius:10px;padding:6px 12px;font-size:12px;font-weight:500;z-index:10000;display:none;max-width:240px;text-align:center;pointer-events:none;line-height:1.5;white-space:pre-wrap;}
.rn-tip.open{display:block;animation:cReactPopIn .16s ease-out;}
.feed-no-comments{font-size:12px;color:var(--gray-400);padding:2px 0 6px;}

.feed-comment-input-row{display:flex;gap:6px;align-items:center;margin-top:6px;}
.feed-comment-input{flex:1;padding:5px 10px;border:1px solid var(--gray-100);border-radius:16px;font-size:12px;font-family:inherit;background:transparent;color:var(--gray-700);outline:none;}
.feed-comment-input::placeholder{color:var(--gray-300);}
.feed-comment-input:focus{border-color:var(--blue-mid);background:var(--white);}
.feed-comment-post{padding:5px 11px;border-radius:16px;border:none;background:var(--blue);color:#fff;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;}
.feed-comment-post:active{opacity:0.85;}

/* ── @mention autocomplete ── */
.feed-mention-dropdown{position:fixed;z-index:1100;background:#fff;border:1px solid var(--gray-200);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.14);max-height:200px;overflow-y:auto;display:none;}
.feed-mention-item{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;}
.feed-mention-item.focused,.feed-mention-item:hover{background:var(--gray-50);}
.feed-mention-name{font-size:13px;font-weight:600;color:var(--gray-800);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.feed-mention-handle{font-size:12px;color:var(--gray-400);white-space:nowrap;}
.feed-mention-tag{color:var(--blue);font-weight:600;}

/* ═══════ AUTH SCREEN ═══════ */
:root{
  --rc-navy: #1c2033;
  --rc-blue: #2563eb;
  --rc-blue-dark: #1d4ed8;
}
/* Avatar photo overrides — inside any circle container */
.av-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.av-photo-el{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
/* Profile tab upload preview */
.av-preview-circle{width:56px;height:56px;border-radius:50%;background:var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;overflow:hidden;flex-shrink:0;}

#auth-screen{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 48px) 0 calc(env(safe-area-inset-bottom) + 32px);}
#auth-screen.hidden{display:none;}
#onboarding-screen{position:fixed;inset:0;background:#f0f2f7;z-index:9998;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:20px;}
#onboarding-screen.hidden{display:none;}
.onboard-card{max-width:440px;}
.onboard-rules{display:flex;flex-direction:column;gap:12px;margin:4px 0;}
.onboard-rule{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--gray-700);line-height:1.45;}
.onboard-rule-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.onboard-rule strong{color:var(--gray-900);}
.auth-card{background:transparent;border-radius:0;box-shadow:none;padding:0 28px;width:100%;max-width:420px;box-sizing:border-box;}
.auth-logo-wrap{text-align:center;margin-bottom:36px;}
.auth-logo-img{width:88px;height:88px;border-radius:20px;display:block;margin:0 auto 14px;box-shadow:0 4px 20px rgba(37,99,235,.25);}
.auth-app-name{font-size:26px;font-weight:800;color:var(--rc-navy);letter-spacing:-.5px;margin-bottom:4px;}
.auth-tagline{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--gray-400);text-align:center;}
.auth-beta-badge{display:none;}
.auth-heading{font-size:17px;font-weight:700;color:var(--rc-navy);margin:0 0 16px;}
.auth-sub{font-size:13px;color:var(--gray-500);margin:0 0 16px;line-height:1.5;}
.auth-optional{font-size:11px;font-weight:400;color:var(--gray-400);}
.auth-field{margin-bottom:12px;}
.auth-field label{display:block;font-size:11px;font-weight:700;color:var(--gray-500);margin-bottom:5px;letter-spacing:.5px;text-transform:uppercase;}
.auth-field input{width:100%;box-sizing:border-box;padding:13px 16px;border:1.5px solid var(--gray-200);border-radius:12px;font-size:16px;font-family:inherit;color:var(--rc-navy);background:var(--gray-50);outline:none;transition:border-color .15s;}
.auth-field input:focus{border-color:var(--rc-blue);background:#fff;}
.auth-remember{display:flex;align-items:center;gap:8px;margin:4px 0 16px;cursor:pointer;}
.auth-remember input[type=checkbox]{width:18px;height:18px;accent-color:var(--rc-blue);cursor:pointer;flex-shrink:0;}
.auth-remember span{font-size:13px;color:var(--gray-500);user-select:none;}
.auth-btn-primary{width:100%;padding:15px;font-size:15px;font-weight:700;letter-spacing:.3px;border-radius:12px;background:var(--rc-blue);color:#fff;border:none;cursor:pointer;margin-top:4px;font-family:inherit;transition:background .15s;}
.auth-btn-primary:hover{background:var(--rc-blue-dark);}
.auth-btn-primary:active{opacity:.88;}
.auth-btn-secondary{width:100%;padding:13px;font-size:13px;font-weight:600;border-radius:12px;margin-top:8px;background:none;border:1.5px solid var(--gray-200);color:var(--gray-600);font-family:inherit;cursor:pointer;}
.auth-btn-secondary:active{background:var(--gray-50);}
.auth-divider{height:1px;background:var(--gray-100);margin:20px 0;}
.auth-links{text-align:center;margin-top:10px;}
.auth-links a{font-size:13px;color:var(--rc-blue);text-decoration:none;}
.auth-claim-link{text-align:center;margin-top:14px;}
.auth-claim-link a{font-size:12px;color:var(--gray-400);text-decoration:none;}
.auth-claim-link a:hover{color:var(--gray-600);}
.auth-error{background:#fff0f0;border:1.5px solid #fca5a5;border-radius:12px;padding:12px 16px;font-size:13px;color:#dc2626;margin-bottom:14px;}
.claim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;margin:4px 0 16px;}
.auth-loading{color:var(--gray-400);font-size:13px;text-align:center;padding:12px 0;}
.auth-banner{position:fixed;top:16px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:12px;font-size:14px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:10000;max-width:90vw;text-align:center;}
.auth-banner-success{background:#dcfce7;color:#166534;border:1.5px solid #bbf7d0;}
.auth-banner-info{background:#dbeafe;color:#1e40af;border:1.5px solid #bfdbfe;}
.auth-banner-error{background:#fee2e2;color:#dc2626;border:1.5px solid #fca5a5;}

/* ═══════ SETTINGS PANEL ═══════ */
.exlib-panel{position:fixed;inset:0;background:var(--bg);z-index:900;display:flex;flex-direction:column;overflow:hidden;}
.exlib-panel.hidden{display:none;}
.exlib-panel-body{flex:1;overflow-y:auto;padding:12px 0 40px;}
.exlib-panel-body .card{margin:0 12px 12px;}
body.dark .exlib-panel{background:#1c1d24;}
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:800;}
.settings-overlay.hidden{display:none;}
.settings-panel{position:fixed;inset:0;background:var(--bg);z-index:801;display:flex;flex-direction:column;overflow:hidden;}
.settings-panel.hidden{display:none;}
.settings-screen{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.settings-panel-header{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 16px) 20px 16px;border-bottom:1px solid var(--gray-100);flex-shrink:0;}
.settings-panel-title{flex:1;text-align:center;font-size:17px;font-weight:700;color:var(--gray-900);}
/* Standard page/sheet back button: a rounded-square tile with a chevron. Shared by
   settings, session edit, the exercise library, feed profile pages, and club pages. */
.settings-back-btn{
  width:38px;height:38px;border-radius:12px;background:var(--white);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--gray-600);flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,0.06),0 0 0 1px rgba(0,0,0,0.04);
  transition:background .15s,color .15s,box-shadow .15s;
}
.settings-back-btn:hover{background:var(--gray-50);color:var(--gray-800);}
body.dark .settings-back-btn{box-shadow:0 1px 3px rgba(0,0,0,0.3),0 0 0 1px var(--gray-100);}
.settings-menu-list{flex:1;overflow-y:auto;}
.settings-menu-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 20px;border:none;border-bottom:1px solid var(--gray-100);background:none;font-size:16px;font-weight:500;color:var(--gray-800);cursor:pointer;text-align:left;font-family:inherit;transition:background .12s;}
.settings-menu-item:hover{background:var(--gray-50);}
.settings-menu-footer{padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 20px);border-top:1px solid var(--gray-100);flex-shrink:0;}
.settings-signout-btn{width:100%;padding:14px;border:1.5px solid var(--gray-200);border-radius:12px;background:none;font-size:15px;font-weight:600;color:var(--red,#dc2626);cursor:pointer;font-family:inherit;transition:background .15s;}
.settings-signout-btn:hover{background:var(--gray-50);}
.settings-panel-body{flex:1;overflow-y:auto;padding:12px 0 40px;}
.settings-panel-body .card{margin:0 12px 12px;}

/* ═══════ ACCOUNT FIELD (stacked label + full-width input) ═══════ */
.acct-field{margin-bottom:14px;}
.acct-field-label{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray-400);margin-bottom:6px;}
.acct-field-input{display:block;width:100%;box-sizing:border-box;height:42px;padding:0 12px;border:1.5px solid var(--gray-200);border-radius:10px;font-size:15px;font-family:inherit;color:var(--gray-800);background:var(--gray-50);outline:none;transition:border-color .15s;}
.acct-field-input:focus{border-color:var(--blue);background:#fff;}

/* ═══════ FRIENDS ═══════ */
.friend-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--gray-100,#f1f5f9);}
.friend-row:last-child{border-bottom:none;}
.friend-info{flex:1;min-width:0;}
.friend-name{font-size:14px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.friend-username{font-size:12px;color:var(--gray-400);}

/* ═══════ APPLE HEALTH IMPORT ═══════ */
.health-import-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .2s;}
.health-import-modal.open{opacity:1;pointer-events:auto;}
.health-import-sheet{background:var(--bg,#fff);border-radius:20px 20px 0 0;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 -4px 24px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);padding:0 0 env(safe-area-inset-bottom);}
.health-import-modal.open .health-import-sheet{transform:translateY(0);}
.health-import-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 12px;border-bottom:1px solid var(--gray-100);}
.hw-close-btn{background:none;border:none;cursor:pointer;font-size:18px;color:var(--gray-500);padding:4px 8px;border-radius:8px;line-height:1;}
.hw-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--gray-100);}
.hw-row:last-child{border-bottom:none;}
.hw-row.hw-imported{opacity:.45;}
.hw-check{width:20px;font-size:14px;color:var(--blue);font-weight:700;flex-shrink:0;}
.hw-info{flex:1;min-width:0;}
.hw-header{display:flex;align-items:baseline;gap:8px;margin-bottom:2px;}
.hw-type{font-size:14px;font-weight:600;color:var(--gray-800);}
.hw-date{font-size:12px;color:var(--gray-400);}
.hw-stats{font-size:12px;color:var(--gray-500);}
.hw-conflict-note{font-size:11px;color:var(--orange,#f97316);margin-top:2px;}
.hw-btn{flex-shrink:0;font-size:13px;padding:7px 14px;border-radius:10px;}
.hw-btn-cal{background:none;border:1.5px solid var(--blue);color:var(--blue);font-weight:600;}
.hw-section-header{font-size:11px;font-weight:700;color:var(--gray-400);letter-spacing:0.6px;padding:10px 16px 4px;background:var(--gray-50,#f9fafb);border-bottom:1px solid var(--gray-100);}
.health-toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(10px);background:var(--gray-800);color:#fff;font-size:13px;font-weight:500;padding:10px 18px;border-radius:12px;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;pointer-events:none;}
.health-toast.visible{opacity:1;transform:translateX(-50%) translateY(0);}
.health-prompt{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(12px);width:calc(100% - 32px);max-width:380px;background:var(--bg,#fff);border:1px solid var(--gray-100);border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:14px 16px;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;}
.health-prompt.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.health-prompt-title{font-size:14px;font-weight:700;color:var(--gray-800);margin-bottom:2px;}
.health-prompt-text{font-size:13px;color:var(--gray-500);}
.health-prompt-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
.health-prompt-btn{font-size:13px;font-weight:600;padding:8px 16px;border-radius:10px;border:none;cursor:pointer;}
.health-prompt-dismiss{background:none;color:var(--gray-500);}
.health-prompt-import{background:var(--blue);color:#fff;}

/* ═══════ ACHIEVEMENTS ═══════ */
@keyframes rivalShine {
  0%        { transform: translateX(-170%) rotate(18deg); }
  55%, 100% { transform: translateX(330%)  rotate(18deg); }
}
.ach-shimmer-bar {
  position: absolute;
  top: -40%;
  left: 0;
  width: 34%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  animation: rivalShine 3.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ach-shimmer-bar { animation: none; }
}
#account-tab-achievements {
  padding-top: 4px;
  min-height: 200px;
}