/* ============================================================
   WorkoutMax - styles
   Palette: White / Cardinal Red #c8102e / Antique Gold #c9a227 / Charcoal #1a1a1a
   ============================================================ */

:root {
  /* ---- DARK THEME (WHOOP-style glass on a near-black ground) ---- */
  --red: #d81b3f;          /* accent, brightened a touch to pop on dark */
  --red-dark: #b3122f;
  --red-soft: rgba(216,27,63,.16);   /* dark translucent red wash */
  --gold: #d4af37;         /* accent gold */
  --gold-soft: rgba(201,162,39,.15); /* dark translucent gold wash */
  --gold-deep: #e2c069;    /* light gold for text/rings on dark */
  --ink: #f3ede0;          /* primary light text */
  --ink-2: #b9b6ac;        /* secondary text */
  --ink-3: #8b897f;        /* muted text */
  --line: rgba(255,255,255,.12);     /* hairline light border */
  --bg: rgba(255,255,255,.06);       /* recessed inset (cells, chips, wheels) */
  --card: rgba(24,26,30,.66);        /* dark glass surface (side-fade layered on cards) */
  --page: #14151a;         /* near-black page behind everything */
  --panel: #1c1f25;        /* dark layer for inputs + modal chrome */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 52px rgba(0,0,0,.62);
  --fig-base: #d3d8de;      /* body silhouette (anatomy figure stays light) */
  --fig-muscle: #aeb4bd;    /* muscle at rest */
  --fig-primary: var(--red);
  --fig-secondary: var(--gold);
  --radius: 18px;
  --radius-sm: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* side-fade glow on cards (your locked settings: fill 40%, glow 53%, gold right) */
  --card-fill: .40;         /* dark-glass opacity */
  --glow: .53;              /* edge intensity */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(1100px 620px at 50% -8%, #23252b 0%, #191a1f 48%, #101116 100%) fixed, var(--page);
  min-height: 100dvh;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
img { max-width: 100%; display: block; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; border-radius: 12px;
  padding: 12px 18px; transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 4px 14px rgba(200,16,46,.28); }
.btn-primary:hover { background: var(--red-dark); }
.btn-gold { background: var(--gold); color: #241d05; box-shadow: 0 4px 14px rgba(201,162,39,.28); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-outline-red { background: var(--card); color: var(--red); border: 1.5px solid var(--red); }
.btn-outline-red:hover { background: var(--red-soft); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 13px; font-size: 13.5px; border-radius: 10px; }

/* ---------- app shell + centered tab bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 9px 12px; padding-top: max(9px, env(safe-area-inset-top));
  background: rgba(16,18,22,.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05);
  border-bottom: 1px solid var(--line);
}
.appbar .brand .mark {
  width: 30px; height: 30px; border-radius: 9px; display: block; object-fit: cover;
}
.tabs { justify-self: center; display: flex; gap: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.tab { padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); background: none; border: 0; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.tab:hover { color: var(--ink); }
.tab.on { background: var(--red); color: #fff; }
.tab-break { display: none; } /* on phones this forces Leaderboard + Exercises onto a 2nd row */
.appbar-right { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.chapter-pill {
  display: inline-flex; align-items: center; gap: 7px; max-width: 34vw;
  padding: 7px 11px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  overflow: hidden;
}
.chapter-pill b { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-pill:hover { border-color: var(--red); }
.pill-caret { color: var(--ink-3); font-size: 11px; flex: none; }
@media (max-width: 560px) {
  /* two rows: brand + chapter selector on top, the tab bar on its own row below,
     so the tabs never overlap the chapter pill on a phone */
  .appbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .appbar .brand { order: 1; }
  .appbar-right { order: 2; margin-left: auto; }
  .tabs { order: 3; flex-basis: 100%; justify-content: center; flex-wrap: wrap; row-gap: 4px; }
  .tab-break { display: block; flex-basis: 100%; height: 0; margin: 0; padding: 0; }
  .tab { padding: 7px 12px; font-size: 12.5px; }
  .chapter-nm { display: none; }
  .chapter-pill { max-width: none; }
}

/* ---------- invite link ---------- */
.invite-banner { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.invite-card { text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 4px; }
.invite-link-box { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 6px 0 12px; overflow: hidden; }
.invite-link-text { font-size: 12.5px; font-weight: 700; color: var(--ink-2); word-break: break-all; }
.invite-help { font-size: 12px; color: var(--ink-3); font-weight: 600; line-height: 1.4; margin: 10px 2px 0; }
.invite-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--ink-3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.invite-or::before, .invite-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.invite-code { font-size: 26px; font-weight: 900; letter-spacing: 2px; color: var(--red); margin-bottom: 10px; }

/* ---------- chapters hub (switch / create) ---------- */
.plbl-mini { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 800; margin-bottom: 6px; }
.chapter-line { display: flex; align-items: stretch; gap: 8px; }
.chapter-line .chapter-row { flex: 1; }
.chapter-del { flex: 0 0 auto; width: 44px; margin-bottom: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; cursor: pointer; font-size: 16px; color: var(--ink-2); transition: border-color .12s, background .12s, color .12s; }
.chapter-del:hover { border-color: var(--red, #e5484d); color: var(--red, #e5484d); background: var(--bg); }
.chapter-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; border-radius: 12px; margin-bottom: 8px; transition: border-color .12s, background .12s; }
.chapter-row:hover { border-color: var(--red); background: var(--bg); }
.chapter-row.active { border-color: var(--gold); background: var(--gold-soft); cursor: default; }
.chapter-badge { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px; }
.chapter-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chapter-name { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.chapter-check { margin-left: auto; color: var(--gold-deep); font-size: 14px; flex: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid var(--line); font-size: 18px; color: var(--ink-2);
}
.icon-btn:hover { border-color: var(--ink-3); color: var(--ink); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 18px 96px; }
.wrap-narrow { max-width: 460px; }

/* left column (hero card + recent-PR feed) beside big-3 records; columns stretch to equal height */
.top-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.top-row .hero-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.top-row .hero-col .hero { flex: 0 0 auto; margin-bottom: 0; }
/* natural-height feed under the hero; a long feed scrolls (max-height) rather than pushing past big-3 */
.top-row .hero-col .pr-feed { flex: 0 0 auto; margin-bottom: 0; }
.top-row .gboard { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
@media (max-width: 780px) {
  .top-row { flex-direction: column; align-items: stretch; }
  .top-row .hero-col, .top-row .gboard { flex: none; width: 100%; }
}

/* ---------- big-3 records leaderboard ---------- */
.gboard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
.gboard-head { display: flex; align-items: baseline; gap: 9px; padding: 12px 16px; font-weight: 900; font-size: 15px; background: linear-gradient(90deg, var(--gold-soft), var(--card)); border-bottom: 1px solid var(--line); }
.gboard-sub { font-size: 11px; font-weight: 800; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .4px; }
.b3-block { padding: 9px 14px 10px; }
.b3-block + .b3-block { border-top: 1px solid var(--line); }
.b3-lift { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 14px; margin-bottom: 4px; }
.et-icon.sm { width: 26px; height: 26px; font-size: 13px; }
.b3-rec { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 9px; }
.b3-rec[data-ref] { cursor: pointer; transition: background .12s; }
.b3-rec[data-ref]:hover { background: var(--bg); }
.b3-tag { flex: none; width: 40px; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .4px; border-radius: 5px; padding: 3px 0; }
.b3-tag.max { background: var(--red-soft, #fbe3e7); color: var(--red); }
.b3-tag.reps { background: var(--gold-soft); color: var(--gold-deep); }
.b3-val { flex: none; font-weight: 900; font-size: 15px; letter-spacing: -.3px; }
.b3-x { font-weight: 800; font-size: 12px; color: var(--ink-3); }
.b3-name { flex: 1; min-width: 0; text-align: right; font-weight: 700; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b3-empty { flex: 1; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }

/* ---------- dashboard hero ---------- */
.hero {
  position: relative; display: flex; align-items: center; gap: 16px;
  background:
    linear-gradient(90deg,  rgba(200,16,46, var(--glow)) 0%, rgba(200,16,46,0) 46%),
    linear-gradient(270deg, rgba(201,162,39, var(--glow)) 0%, rgba(201,162,39,0) 46%),
    rgba(24,26,30, var(--card-fill));
  -webkit-backdrop-filter: blur(17px) saturate(1.05);
  backdrop-filter: blur(17px) saturate(1.05);
  border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); padding: 18px 18px 18px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow);
  margin-bottom: 22px; overflow: hidden;
}
.hero::before { display: none; }
.hero-av { flex: none; }
.hero-main { flex: 1; min-width: 0; }
.hero-name { font-size: 21px; font-weight: 900; letter-spacing: -.4px; display: flex; align-items: center; gap: 8px; }
.namelink { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.namelink:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.hero-phrase { color: var(--ink-2); font-style: italic; font-size: 14px; margin-top: 3px; }
.hero-phrase.muted { color: var(--ink-3); font-style: normal; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.chip b { color: var(--ink); font-weight: 900; }
.chip.gold { background: var(--gold-soft); border-color: #ecdca0; color: var(--gold-deep); }
.chip.gold b { color: var(--gold-deep); }
.hero-edit { position: absolute; top: 14px; right: 14px; }
@media (max-width: 460px) {
  .hero { gap: 13px; padding: 15px 15px 15px 18px; }
  .hero-edit { top: 12px; right: 12px; }
}

/* ---------- pending exercises (voting) ---------- */
.pending { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
.pending-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-weight: 800; font-size: 14px; background: var(--gold-soft); color: var(--gold-deep); }
.pending-count { margin-left: auto; background: var(--gold); color: #241d05; font-size: 12px; font-weight: 900; min-width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.pending-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pending-row .ex-emoji { width: 40px; height: 40px; border-radius: 11px; background: var(--red-soft); display: grid; place-items: center; font-size: 21px; flex: none; }
.pending-info { flex: 1; min-width: 0; }
.pending-name { font-weight: 800; font-size: 15px; }
.pending-type { font-size: 11px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-left: 4px; }
.pending-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.pending-sub b { color: var(--red); }
.pending-actions { display: flex; gap: 8px; flex: none; }
.vote-mine { font-size: 12.5px; font-weight: 800; color: var(--ink-3); }
@media (max-width: 460px) {
  .pending-row { flex-wrap: wrap; }
  .pending-actions { width: 100%; }
  .pending-actions .btn { flex: 1; }
}

/* ---------- section heading ---------- */
.section-head { display: flex; align-items: baseline; gap: 10px; margin: 6px 2px 16px; }
.section-head h1 { font-size: 22px; margin: 0; letter-spacing: -.4px; }
.section-head .sub { color: var(--ink-3); font-size: 14px; }
/* My Workouts header: on phones the Generate + Log buttons drop to their own row
   (side by side, splitting the width) instead of overflowing off-screen */
@media (max-width: 560px) {
  .section-head.wk-head { flex-wrap: wrap; row-gap: 10px; }
  .section-head.wk-head .sub { flex: 1 1 auto; }
  .section-head.wk-head .btn-sm { flex: 1 1 0; margin-left: 0 !important; }
}
.gold-rule { height: 3px; width: 44px; background: var(--gold); border-radius: 2px; margin: 2px 2px 18px; }

/* ---------- exercise grid ---------- */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.ex-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
  text-align: left; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.ex-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red);
  opacity: .9;
}
.ex-card.leader-you::before { background: var(--gold); }
.ex-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #dcdce0; }
.ex-card .ex-head { display: flex; align-items: center; gap: 11px; }
.ex-card .ex-head-txt { flex: 1; min-width: 0; }
.rank-badge {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 800; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.rank-badge.lead { background: var(--gold-soft); border-color: #ecdca0; color: var(--gold-deep); }
.ex-card .ex-emoji {
  width: 44px; height: 44px; border-radius: 12px; background: var(--red-soft);
  display: grid; place-items: center; font-size: 23px; flex: none;
}
.ex-card .ex-name { font-weight: 800; font-size: 17px; letter-spacing: -.2px; }
.ex-card .ex-type { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.crown-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-soft); color: var(--gold-deep); border: 1px solid #ecdca0;
  padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
}
.ex-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ex-stats.single { grid-template-columns: 1fr; }
.stat {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px;
}
.stat .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 700; }
.stat .val { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin-top: 2px; }
.stat .val small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.stat .val.empty { color: var(--ink-3); font-weight: 700; font-size: 14px; }
/* progress bar: your headline number vs the leader's */
.ex-progress { display: flex; flex-direction: column; gap: 5px; }
.pbar { height: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pfill { height: 100%; background: var(--red); border-radius: 999px; transition: width .35s ease; min-width: 0; }
.pfill.gold { background: var(--gold); }
.pbar-cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-weight: 700; }
.pbar-cap .crownmini { color: var(--gold-deep); font-style: normal; }

.ex-foot { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ex-foot .lead-who, .ex-foot .lead-you, .ex-foot .lead-none { font-size: 12.5px; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.ex-foot .lead-who b { font-weight: 800; }
.ex-foot .lead-you { color: var(--gold-deep); }
.ex-foot .lead-none { color: var(--ink-3); font-weight: 600; }
.ex-foot .points { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none; }

/* add-exercise tile */
.ex-add {
  border: 2px dashed #d7d7dc; background: var(--card); border-radius: var(--radius);
  display: grid; place-items: center; min-height: 150px; color: var(--ink-3);
  font-weight: 700; gap: 8px; transition: border-color .15s, color .15s, background .15s;
}
.ex-add:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.ex-add .plus { font-size: 30px; line-height: 1; }

/* ---------- avatars ---------- */
.avatar {
  border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: var(--red); flex: none; overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.avatar.md { width: 40px; height: 40px; font-size: 15px; }
.avatar.lg { width: 62px; height: 62px; font-size: 22px; }
.avatar.xl { width: 78px; height: 78px; font-size: 30px; }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(20,20,24,.5); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; z-index: 40;
  padding: 0; animation: fade .18s ease;
}
@media (min-width: 640px) { .overlay { align-items: center; padding: 24px; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  background: #1a1c22; width: 100%; max-width: 720px; max-height: 92vh;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; animation: slideup .24s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 640px) { .sheet { border-radius: 22px; } }
@keyframes slideup { from { transform: translateY(28px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.sheet.narrow { max-width: 420px; }
.sheet-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.sheet-head .ex-emoji { width: 40px; height: 40px; border-radius: 11px; background: var(--red-soft); display: grid; place-items: center; font-size: 21px; }
.sheet-head h2 { font-size: 18px; margin: 0; letter-spacing: -.3px; }
.sheet-head .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
/* Editable workout date in the builder header */
.lw-date-input {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-1);
  background: var(--field, var(--card)); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 8px; margin-top: 2px; cursor: pointer;
  color-scheme: dark; max-width: 170px;
}
.lw-date-input:focus { outline: none; border-color: var(--red, #e5484d); }
.sheet-head .close { margin-left: auto; }
.sheet-body { padding: 16px 18px; overflow-y: auto; }
.sheet-foot {
  padding: 14px 18px; padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center;
}

/* ---------- core-lift picker (chapter creation, step 2) ---------- */
.cp-body { display: flex; flex-direction: column; gap: 10px; }
.cp-hint { font-size: 13px; color: var(--ink-3); margin: 0; }
.cp-search input {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
  background: var(--field, var(--bg)); border: 1px solid var(--line); border-radius: 10px; color: var(--ink-1);
}
.cp-list { display: flex; flex-direction: column; gap: 4px; }
.cp-group-h {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); padding: 12px 2px 4px;
}
.cp-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer;
}
.cp-row:hover { background: var(--field, rgba(127,127,127,.08)); }
.cp-row input { width: 18px; height: 18px; accent-color: var(--red, #e5484d); flex: none; }
.cp-ic { width: 26px; height: 26px; display: grid; place-items: center; font-size: 18px; flex: none; }
.cp-ic img { width: 26px; height: 26px; object-fit: contain; }
.cp-nm { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.cp-kind { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.cp-count { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.cp-count.cp-warn { color: var(--red, #e5484d); }

/* ---------- standings grid ---------- */
.standings {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.person {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.person.is-leader { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(201,162,39,.18); }
.person.is-me { outline: 2px dashed rgba(200,16,46,.35); outline-offset: 2px; }
/* rank number, top-left of each card */
.p-rank { position: absolute; top: 10px; left: 10px; z-index: 2; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.p-rank.r1 { background: var(--gold); border-color: var(--gold); color: #241d05; }
.p-rank.r2 { background: #d8dce1; border-color: #c6cbd2; color: #2a2d33; }
.p-rank.r3 { background: #e2a56a; border-color: #cf8b48; color: #3a2410; }

/* gold crest banner */
.crest {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; z-index: 2;
  background: linear-gradient(180deg, #e0c04a, var(--gold)); color: #2a2205;
  font-size: 11px; font-weight: 900; letter-spacing: .3px; padding: 5px 12px 6px;
  border-radius: 6px; box-shadow: 0 4px 10px rgba(168,134,26,.45);
}
.crest::before, .crest::after {
  content: ""; position: absolute; bottom: -7px; width: 0; height: 0;
  border-top: 8px solid var(--gold);
}
.crest::before { left: 6px; border-left: 7px solid transparent; }
.crest::after  { right: 6px; border-right: 7px solid transparent; }

.person .who { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; }
.person .who .name { font-weight: 800; font-size: 14.5px; margin-bottom: 1px; }
.name-btn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; line-height: 1.2; }
.name-btn:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }

/* clickable member row (invite modal) */
.member-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.member-row:hover { background: var(--bg); }
.member-name { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.member-row .youtag { color: var(--red); font-weight: 800; }
.member-go { margin-left: auto; color: var(--ink-3); font-weight: 800; font-size: 18px; }

/* member profile modal */
.profile-hero { text-align: center; padding: 4px 0 8px; }
.profile-hero .avatar { margin: 0 auto 10px; }
/* compact profile header: muscle figure to the LEFT of the name */
.profile-hero-row { display: flex; align-items: center; gap: 16px; text-align: left; padding: 4px 0 10px; }
.profile-hero-row .avatar { margin: 0 0 6px; }
.profile-figwrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.figures.mini { background: none; border: none; border-radius: 0; padding: 0; gap: 8px; }
.figures.mini .fig-stage { height: 116px; }
.figures.mini .figure-lbl { display: none; }
.figcap { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-3); }
.profile-id { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.profile-id .profile-name { justify-content: flex-start; }
.profile-hero-row .hero-chips { justify-content: flex-start; }
.profile-name { font-size: 20px; font-weight: 900; letter-spacing: -.3px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.profile-phrase { color: var(--ink-2); font-style: italic; font-size: 14px; margin-top: 4px; }
.profile-log-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin: 16px 0 10px; border-top: 1px solid var(--line); padding-top: 16px; }
/* exercise totals in a profile */
.et-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.et-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; overflow: hidden; flex: none; }
.et-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; }
.et-vals { text-align: right; flex: none; }
.et-vals b { font-weight: 900; font-size: 15px; letter-spacing: -.3px; }
.et-vals .et-sub { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 700; margin-top: 1px; }

/* other-chapter lifter profile */
.gp-lift { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.gp-lift > span:first-child { flex: 1; color: var(--ink-2); font-weight: 600; }
.gp-lift b { font-weight: 800; }
.gp-ratio { color: var(--red); font-weight: 800; font-size: 13px; width: 50px; text-align: right; }
.gp-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.person .who .name .youtag { color: var(--red); font-size: 11px; font-weight: 800; }
.person .who .p-weight { font-size: 11px; font-weight: 800; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.person .who .p-phrase { font-size: 11px; font-style: italic; color: var(--ink-3); text-align: center; line-height: 1.3; }
/* two columns under each person's name; each competition is a row of two cells */
.pgrid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pgrid.single { grid-template-columns: 1fr; }
/* cells in a row stretch to equal height (grid default); the label sits at the top
   and the big value is pushed to the bottom, so values line up horizontally across
   both columns no matter how many lines each label wraps to */
.pcell {
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 6px 10px; text-align: center; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.pcell .plbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .2px; color: var(--ink-3); font-weight: 800; line-height: 1.2; }
.pcell .pbig { font-size: 22px; font-weight: 900; letter-spacing: -.5px; margin-top: auto; padding-top: 4px; }
.pcell .psub { font-size: 10px; font-weight: 800; color: var(--ink-3); min-height: 13px; line-height: 1.2; margin-top: 2px; letter-spacing: .2px; }
.pcell.win .psub { color: var(--gold-deep); }
.pcell .pbig.empty { color: var(--ink-3); font-size: 15px; font-weight: 700; }
.pcell.win { border-color: var(--gold); background: var(--gold-soft); }
.pcell.win .plbl { color: var(--gold-deep); }
/* the paired cells of a winning row share a continuous gold row-band feel */
.pcell.win.left { border-right-color: #ecdca0; }
.pcell.win.right { border-left-color: #ecdca0; }
.person .points {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--ink-2);
}
.pip { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pip.on { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }

.legend { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.6; }
.legend b { color: var(--ink-2); }

/* ---------- wheel picker ---------- */
.lb-moreloc { display: inline-block; margin: 2px 2px 6px; font-size: 12.5px; }

/* trial-reminder banner */
.trial-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2); }
.trial-banner .linklike { margin-left: auto; font-weight: 800; }

/* paywall / upgrade (#66 copy) */
.paywall-feats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.paywall-feats li { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.paywall-feats b { color: var(--ink); }
.paywall-list { margin: 6px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.paywall-disclosure { margin: 10px 2px 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
/* subscription plan picker */
.plan-opt.sel { border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; }
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  cursor: pointer; text-align: left; }
.plan-opt.best { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.plan-opt:hover { border-color: var(--red); }
.plan-opt:disabled { opacity: .5; cursor: default; }
.plan-opt-name { font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.plan-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: #fff; background: var(--red); border-radius: 999px; padding: 2px 8px; }
.plan-opt-price { text-align: right; display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); }
.plan-opt-price b { font-size: 18px; color: var(--ink); }
.plan-opt-price span { font-size: 12px; color: var(--ink-3); }

/* generated invite result */
.invite-made { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.invite-made .invite-link-box { margin: 6px 0; }
.invite-made-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.invite-made .hint { margin-top: 8px; }

/* coach: pending join requests */
#join-reqs .muted { font-size: 13px; color: var(--ink-3); padding: 4px 2px; }
.req-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.req-row:last-child { border-bottom: 0; }
.req-name { flex: 1; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.pickers { display: flex; gap: 12px; justify-content: center; margin: 6px 0 4px; }
.picker-col { flex: 1; max-width: 200px; }
/* three wheels (Weight + % of Max + Reps) need to share the row more tightly */
.pickers.has-pct { gap: 8px; }
.pickers.has-pct .picker-col { max-width: 160px; }
/* % wheel before the lifter has a logged max to scale from */
.wheel-locked {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 10px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; line-height: 1.3;
}
.picker-col .pk-label { text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); margin-bottom: 8px; }
.wheel {
  position: relative; height: 200px; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
}
.wheel-scroll {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none;
  -ms-overflow-style: none; overscroll-behavior: contain;
}
.wheel-scroll::-webkit-scrollbar { display: none; }
.wheel-item {
  height: 40px; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; font-size: 20px; font-weight: 700; color: var(--ink-3);
  transition: color .12s, transform .12s, opacity .12s;
  /* padding-right is set per wheel in JS (buildWheel) to reserve room for the unit label */
}
.wheel-item.active { color: var(--red); font-weight: 900; font-size: 24px; }
.wheel-band {
  position: absolute; left: 8px; right: 8px; top: 50%; height: 40px; transform: translateY(-50%);
  border-top: 2px solid var(--red); border-bottom: 2px solid var(--red);
  background: rgba(200,16,46,.05); border-radius: 9px; pointer-events: none;
}
.wheel-unit { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: var(--ink-3); pointer-events: none; z-index: 4; white-space: nowrap; }
.wheel-item { cursor: pointer; }
.wheel-arrow {
  position: absolute; left: 0; right: 0; height: 34px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 13px; cursor: pointer; border: 0;
}
.wheel-arrow.up { top: 0; background: linear-gradient(180deg, var(--panel) 55%, rgba(28,31,37,0)); }
.wheel-arrow.down { bottom: 0; background: linear-gradient(0deg, var(--panel) 55%, rgba(28,31,37,0)); }
.wheel-arrow:hover { color: var(--red); }
.wheel-arrow:active { color: var(--red-dark); }
.picker-hint {
  margin: 14px 2px 2px; font-size: 12.5px; color: var(--ink-2); background: var(--gold-soft);
  border: 1px solid #ecdca0; border-radius: 10px; padding: 10px 12px; text-align: center;
}
.seg {
  display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 14px;
}
.seg button { flex: 1; padding: 9px; border-radius: 9px; font-weight: 800; font-size: 13.5px; color: var(--ink-2); }
.seg button.on { background: var(--card); color: var(--red); box-shadow: var(--shadow); }

/* ---------- random workout generator ---------- */
.gen-cta { margin-top: 8px; }
.gen-q { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 4px 0 8px; }
.gen-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gen-chip {
  padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg);
  font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.gen-chip.on { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.gen-row { display: flex; gap: 12px; margin-bottom: 16px; }
.gen-field { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.gen-field select {
  padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.gen-seg button { font-size: 12.5px; }
.gen-note { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; line-height: 1.45; }
.lw-gen-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lw-gen-note { font-size: 12px; color: var(--ink-3); font-weight: 600; }

/* ---------- login / splash ---------- */
.splash {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 24px; text-align: center;
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(200,16,46,.08), transparent),
    var(--bg);
}
.splash .logo-lg {
  width: 84px; height: 84px; border-radius: 20px; display: block; object-fit: cover;
  box-shadow: 0 12px 30px rgba(200,16,46,.3); margin-bottom: 18px;
}
.splash h1 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.6px; }
.splash h1 b { color: var(--red); }
.splash .tag { color: var(--ink-2); font-size: 15px; max-width: 320px; margin: 0 0 26px; }
.card-form {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); padding: 22px; text-align: left;
}
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 11px;
  font-size: 15px; font-family: inherit; color: var(--ink); background: var(--card);
}
.field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.form-alt { text-align: center; font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.form-alt a { color: var(--red); font-weight: 800; text-decoration: none; cursor: pointer; }
.linklike { color: var(--red); font-weight: 800; cursor: pointer; font: inherit; font-weight: 800; background: none; border: 0; padding: 0; }
.linklike:hover { text-decoration: underline; }
.fieldlabel { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
.demo-note { margin-top: 16px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* photo upload row */
.upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.upload-row .hint { font-size: 12.5px; color: var(--ink-3); }

/* ---------- toast ---------- */
#toast-root { position: fixed; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.toast {
  background: #262a31; color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg); animation: toastin .2s ease; max-width: 90vw;
}
.toast b { color: var(--gold); }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* misc */
.hide { display: none !important; }
.center-empty { text-align: center; color: var(--ink-3); padding: 40px 12px; }

/* ---------- workouts ---------- */
#workout-list { display: flex; flex-direction: column; gap: 14px; }
.wlog { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.wlog-top {
  display: flex; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg,  rgba(200,16,46, var(--glow)) 0%, rgba(200,16,46,0) 46%),
    linear-gradient(270deg, rgba(201,162,39, var(--glow)) 0%, rgba(201,162,39,0) 46%),
    rgba(18,20,24,.94);
}
.wlog-date { font-weight: 800; font-size: 13px; color: #f4efe0; }
.wlog-del { margin-left: auto; background: none; border: 0; font-size: 15px; cursor: pointer; opacity: .55; }
.wlog-del:hover { opacity: 1; }
.wlog-edit { margin-left: auto; background: none; border: 0; font-size: 14px; cursor: pointer; opacity: .55; }
.wlog-edit:hover { opacity: 1; }
.wlog-top .wlog-edit { margin-left: auto; }
.wlog-top .wlog-edit + .wlog-del { margin-left: 12px; }
/* copy sits with the action group. "muscles ›" (.wlog-see) keeps the margin-left:auto
   that pushes the whole group right, so copy/edit/del stay contiguous after it. */
.wlog-copy { background: none; border: 0; font-size: 15px; cursor: pointer; opacity: .55; }
.wlog-copy:hover { opacity: 1; }
.wlog-top .wlog-copy { margin-left: 12px; }
.wlog-top .wlog-copy ~ .wlog-edit { margin-left: 12px; }
.wlog-cols { display: flex; gap: 10px; padding: 12px 14px; overflow-x: auto; }
.wlog-col { flex: 0 0 auto; min-width: 132px; max-width: 190px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; }
.wlog-ex { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.wlog-emoji { font-size: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
.wlog-emoji .ex-icon-img { width: 100%; height: 100%; }
.wlog-exname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wlog-linked { color: var(--gold-deep); font-size: 11px; font-weight: 800; flex: none; margin-left: auto; }
.wlog-set { font-size: 13.5px; color: var(--ink); font-weight: 600; padding: 3px 0; }
.wlog-empty { text-align: center; color: var(--ink-3); padding: 28px 16px; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); font-size: 14px; }
/* clickable workout entry */
.wlog-click { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s; }
.wlog-click:hover { border-color: var(--red); box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.24); }
.wlog-click:active { transform: translateY(1px); }
.wlog-see { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--red); }
.wlog-top .wlog-del { margin-left: 12px; }

/* ---------- workout detail modal (muscle figure) ---------- */
.figures { display: flex; justify-content: center; align-items: flex-end; gap: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px 10px; }
.figure { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* fix the HEIGHT so front + back match; width follows each view's aspect-ratio (set inline) */
.fig-stage { position: relative; height: 300px; }
.fig-body { height: 100%; width: 100%; display: block; object-fit: contain; }
.muscle-ov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.muscle-ov.s { filter: hue-rotate(14deg) saturate(1.12) brightness(1.03); } /* shift primary orange -> gold for assisting muscles */
.fig-glows { position: absolute; inset: 0; pointer-events: none; }
.glow { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; aspect-ratio: 1; }
.glow.p { background: radial-gradient(circle, rgba(200, 16, 46, .95), rgba(200, 16, 46, .62) 48%, rgba(200, 16, 46, 0) 74%); }
.glow.s { background: radial-gradient(circle, rgba(201, 162, 39, .95), rgba(201, 162, 39, .6) 48%, rgba(201, 162, 39, 0) 74%); }
.figure-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); }
.fig-note { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 10px 14px 4px; line-height: 1.4; }
.fig-legend { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 10px 0 4px; }
.fig-legend .fk { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fig-legend .fk.p { background: var(--fig-primary); margin-left: 6px; }
.fig-legend .fk.s { background: var(--fig-secondary); margin-left: 14px; }

.wd-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.wd-ex { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.wd-ex-head { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 6px; }
.wd-ex-head b { font-weight: 800; }
.wd-sets { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.mtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mtag { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.mtag.p { background: var(--red-soft); border-color: #f3c3cc; color: var(--red); }
.mtag.s { background: var(--gold-soft); border-color: #ecdca0; color: var(--gold-deep); }
.mtag.muted { color: var(--ink-3); }

/* exercise library picker (add an exercise) */
.lib-search { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; margin-bottom: 10px; background: var(--panel); color: var(--ink); }
.lib-search:focus { outline: none; border-color: var(--red); }
.lib-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.lib-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.lib-row:hover { border-color: var(--red); background: var(--red-soft); }
.lib-icon { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-size: 20px; overflow: hidden; }
.lib-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lib-name { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.lib-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lib-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; }
.lib-add { flex: none; color: var(--red); font-weight: 900; font-size: 20px; }

/* log workout modal */
.lw-select { width: 100%; padding: 12px 13px; border: 1.5px solid var(--line); border-radius: 11px; font-size: 15px; font-family: inherit; background: var(--card); color: var(--ink); }
.lw-select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.lw-draft-title { font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-bottom: 6px; }
/* daily quote atop the Goals tab */
.goal-quote { text-align: center; max-width: 620px; margin: 6px auto 16px; padding: 0 8px; }
.goal-quote-text { font-size: 16.5px; font-style: italic; font-weight: 600; line-height: 1.5; color: var(--ink); text-wrap: balance; }
.goal-quote-by { margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--gold-deep); }
.lw-drow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lw-drow-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.lw-icon-btn { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; padding: 5px 7px; border-radius: 8px; opacity: .88; }
.lw-icon-btn:hover { background: var(--bg); opacity: 1; }
.lw-icon-btn.on { background: var(--gold-soft); opacity: 1; }
.lw-icon-btn.danger:hover { background: var(--red-soft); }
.lw-drow-swap { flex: none; font-size: 18px; line-height: 1; padding: 2px; }
.lw-drow-info { flex: 1; min-width: 0; }
.lw-drow-info b { font-size: 14.5px; }
.lw-drow-sets { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
/* tap the icon/name to open the exercise profile (stacked over the builder) */
.lw-drow-view { flex: 1 1 45%; min-width: 45%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.lw-drow-view.static { cursor: default; }
.lw-drow-view:not(.static):hover .lw-drow-info b { color: var(--red); text-decoration: underline; }
.wd-ex-view { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.wd-ex-view:hover b { color: var(--red); text-decoration: underline; }
/* exercise profile shown on top of another sheet (builder / saved workout) */
.overlay-top { z-index: 50; }
.lw-current-head { display: flex; align-items: center; gap: 7px; font-size: 15px; margin: 4px 0 12px; }
.lw-personal { color: var(--ink-3); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.lw-set { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 3px 8px 3px 2px; margin-top: 6px; font-weight: 700; font-size: 14px; }
.lw-set.editing { border-color: var(--red); background: var(--red-soft); }
.lw-set-tap { flex: 1; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); padding: 7px 8px; border-radius: 8px; }
.lw-set-tap:hover { background: var(--card); }
.lw-set.editing .lw-set-tap:hover { background: transparent; }
.lw-set-ed { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: var(--red); margin-left: 6px; }
.lw-set-x { flex: 0 0 auto; }
#lw-sets { margin-top: 2px; }

/* visible keyboard focus */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.wheel-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 15px; }
.ex-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ============================================================
   DARK GLASS EXERCISE CARDS + SINGLE-COLOR SIDE-FADE
   Gold when you're in 1st place (.leader-you), red otherwise.
   The edge color flows from one variable to fade, rail and ring.
   ============================================================ */
.ex-card {
  --edge-r: 214,0,36;                  /* red: you're chasing this lift (tuned) */
  --glow: .23;                         /* edge intensity — exercise-card override */
  --card-fill: 1;                      /* solid dark center — exercise-card override */
  background:
    linear-gradient(90deg,  rgba(var(--edge-r), var(--glow)) 0%, rgba(var(--edge-r),0) 29%),
    linear-gradient(270deg, rgba(var(--edge-r), var(--glow)) 0%, rgba(var(--edge-r),0) 29%),
    rgba(24,26,30, var(--card-fill));
  -webkit-backdrop-filter: blur(17px) saturate(1.05);
  backdrop-filter: blur(17px) saturate(1.05);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0, 0, 0, .48);
}
/* the side-fade replaces the old top wash */
.ex-card::before { display: none; }
.ex-card.leader-you { --edge-r: 214,164,0; border-color: rgba(214, 164, 0, .55); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(214, 164, 0, .3), 0 14px 36px rgba(0, 0, 0, .48); }  /* gold: you're 1st (tuned) */
.ex-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(0, 0, 0, .55); border-color: rgba(255,255,255,.22); }
.ex-card.leader-you:hover { box-shadow: 0 0 0 1px rgba(214, 164, 0, .65), 0 18px 44px rgba(0, 0, 0, .34); }

/* ringed exercise badge */
.ex-card .ex-emoji {
  width: 46px; height: 46px; border-radius: 50%; background: var(--panel); font-size: 22px;
  box-shadow: 0 0 0 2px var(--red), 0 0 0 4px var(--card); overflow: hidden;
}
/* sliced illustration icon inside any badge circle/chip */
.ex-icon-img { width: 82%; height: 82%; object-fit: contain; display: block; }
.ex-card.leader-you .ex-emoji { box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px var(--card); }
.ex-card .ex-name { color: var(--ink); }
.ex-card .ex-type { color: var(--ink-3); }

/* rank tag */
.ex-card .rank-badge { background: var(--bg); border-color: var(--line); color: var(--ink-2); }
.ex-card .rank-badge.lead { background: var(--gold-soft); border-color: rgba(201,162,39,.45); color: var(--gold-deep); }

/* 2x2 grid cells */
.ex-card .pcell { background: var(--bg); border-color: var(--line); }
.ex-card .pcell .plbl { color: var(--ink-3); }
.ex-card .pcell .pbig { color: var(--ink); }
.ex-card .pcell .pbig.empty { color: var(--ink-3); }
.ex-card .pcell.win { background: var(--gold-soft); border-color: var(--gold); }
.ex-card .pcell.win .plbl { color: var(--gold-deep); }
.ex-card .pcell .psub { color: var(--ink-3); }
.ex-card .pcell.win .psub { color: var(--gold-deep); }

/* progress bar */
.ex-card .pbar { background: var(--bg); border-color: var(--line); }
.ex-card .pbar-cap { color: var(--ink-3); }
.ex-card .pbar-cap .crownmini { color: var(--gold-deep); }

/* footer */
.ex-card .ex-foot { border-top: 1px solid var(--line); }
.ex-card .pip { background: rgba(255,255,255,.2); }
.ex-card .pip.on { background: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, .28); }

/* ranked competitor avatars: ordered by place, each stamped with its rank */
.ex-lifters { display: flex; align-items: flex-start; gap: 8px; padding-left: 2px; }
.ex-lifter { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ex-card .ex-lifter .avatar.sm { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px var(--card); }
.ex-lifter.me:not(.lead) .avatar.sm { box-shadow: 0 0 0 2px var(--red); }
.ex-lifter.lead .avatar.sm { box-shadow: 0 0 0 2px var(--gold); }
.ex-lifter .rank-num { font-style: normal; font-size: 10px; font-weight: 900; line-height: 1; color: var(--ink-3); }
.ex-lifter.me:not(.lead) .rank-num { color: var(--red); }
.ex-lifter.lead .rank-num { color: var(--gold-deep); }
.ex-lifter .mini-crown { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 9px; }

/* add-exercise tile */
.ex-add { background: var(--card); border: 2px dashed #d3c288; color: var(--ink-3); box-shadow: 0 8px 22px rgba(0, 0, 0, .24); }
.ex-add:hover { border-color: var(--red); color: var(--red); background: var(--gold-soft); }
.ex-add .plus { color: inherit; }

/* ============================================================
   DARK-PAGE ADJUSTMENTS
   ============================================================ */
/* headings that sit directly on the hazy dark page */
.section-head h1 { color: #f4efe0; }
.section-head .sub { color: rgba(255, 255, 255, .5); }
/* lighter cream layer for inputs, wheels, segmented controls, modal chrome */
.field input, .lw-select, .wheel, .seg button.on, .btn-ghost, .btn-outline-red, .sheet-head, .sheet-foot { background: var(--panel); }
/* login splash lives on the dark page */
.splash { background: radial-gradient(1000px 520px at 50% -10%, rgba(200, 16, 46, .16), transparent), var(--page); }
.splash h1 { color: #f4efe0; }
.splash .tag { color: rgba(255, 255, 255, .62); }
.splash .demo-note { color: rgba(255, 255, 255, .42); }

/* ============================================================
   BODY-REGION COLOR CODE (left rail + matching ring/wash per card)
   Push / Pull / Legs / Core / Cardio / Power.
   Gold stays reserved for the chapter leader (.leader-you wins).
   ============================================================ */
.ex-card.region-push   { --region: #cf5b46; --region-soft: rgba(207, 91, 70, .15); }
.ex-card.region-pull   { --region: #3d7fb0; --region-soft: rgba(61, 127, 176, .15); }
.ex-card.region-legs   { --region: #4e9a52; --region-soft: rgba(78, 154, 82, .15); }
.ex-card.region-core   { --region: #8a5cc0; --region-soft: rgba(138, 92, 192, .15); }
.ex-card.region-cardio { --region: #e0762f; --region-soft: rgba(224, 118, 47, .15); }
.ex-card.region-power  { --region: #c65a92; --region-soft: rgba(198, 90, 146, .15); }

/* left rail follows the card's edge color (gold when 1st, red otherwise) */
.ex-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: rgb(var(--edge-r)); z-index: 3; pointer-events: none;
}
/* badge ring is red for everyone; the leader override below keeps its gold ring */
.ex-card .ex-emoji { box-shadow: 0 0 0 2px var(--red), 0 0 0 4px rgba(24,26,30,.5); }
.ex-card.leader-you .ex-emoji { box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 4px rgba(24,26,30,.5); }

/* owner-only exercise removal */
.owner-tools { margin-top: 14px; display: flex; justify-content: center; }
.pending-row.removal { background: rgba(200, 16, 46, .06); }

/* workout video clips */
.wlog-vid { margin-top: 6px; align-self: flex-start; background: var(--red-soft); color: var(--red); border: 1px solid rgba(216,27,63,.4); border-radius: 8px; font-size: 12px; font-weight: 800; padding: 4px 10px; cursor: pointer; }
.wlog-vid:hover { background: rgba(216,27,63,.22); }
.lw-video { margin-top: 10px; }
.lw-vid-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.lw-vtag { font-size: 12px; }

/* recent-PR feed (under the hero) */
.pr-feed { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
.pr-feed-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 900; font-size: 15px; background: linear-gradient(90deg, var(--red-soft), var(--card)); border-bottom: 1px solid var(--line); }
.pr-rows { max-height: 246px; overflow-y: auto; }  /* 4 full rows (58px each) + a peek of the 5th; scroll for the rest */
.pr-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 14px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pr-row:last-child { border-bottom: 0; }
.pr-row:hover { background: var(--bg); }
.pr-info { flex: 1; min-width: 0; }
.pr-detail { font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.pr-detail b { color: var(--ink); }
.pr-val { font-size: 15px; font-weight: 900; color: var(--red); }
.pr-time { font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; flex: none; }
.pr-empty { padding: 16px; font-size: 13px; color: var(--ink-3); text-align: center; }
.pr-ex { font-size: 22px; }

/* ============================================================
   KEEP AS LIGHT-GOLD CARDS (the previous look) even in dark mode:
   Big 3 records, Recent PRs, Pending approvals. Redefining the
   tokens on each container reverts its whole subtree to cream/gold.
   ============================================================ */
.gboard, .pr-feed, .pending {
  --ink: #1a1a1a; --ink-2: #55565b; --ink-3: #8a8b90;
  --line: #e4d7ab; --bg: #ece0bd; --card: #f7efd4; --panel: #fdf8ec;
  --gold-soft: #f7efd4; --gold-deep: #a8861a; --red-soft: #fdecef;
  background: var(--card); color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,.30), 0 16px 40px rgba(0,0,0,.34);
}
/* dark side-fade header band (the "fade look") capping each cream card */
.gboard-head, .pr-feed-head, .pending-head {
  background:
    linear-gradient(90deg,  rgba(200,16,46, var(--glow)) 0%, rgba(200,16,46,0) 46%),
    linear-gradient(270deg, rgba(201,162,39, var(--glow)) 0%, rgba(201,162,39,0) 46%),
    rgba(18,20,24,.94);
  color: #f4efe0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.gboard-head .gboard-sub { color: var(--gold); }
.pending-head { color: #f4efe0; }

/* video still uploading in the background */
.wlog-vid.uploading { background: var(--bg); color: var(--ink-3); border-color: var(--line); cursor: default; }
.wlog-vid.uploading:hover { background: var(--bg); }

/* placeholder for tabs still being built out */
.tab-soon { text-align: center; padding: 48px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 8px; }
.tab-soon-emoji { font-size: 50px; margin-bottom: 8px; }
.tab-soon h1 { font-size: 24px; margin: 0 0 8px; color: var(--ink); }
.tab-soon p { max-width: 440px; margin: 0 auto; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* ---------- chapter points leaderboard (under the hero) ---------- */
.leaderboard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 15px; margin-bottom: 16px; }
.lb-head { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; }
.lb-sub { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.lb-rows { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }  /* ~top 5 visible, scroll for the rest */
.lb-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; text-align: left; border-radius: 9px; transition: background .12s; }
.lb-row:first-child { border-top: 0; }
.lb-row:hover { background: var(--bg); }
.lb-row.you { background: var(--red-soft); }
.lb-rank { width: 26px; flex: none; text-align: center; font-size: 17px; line-height: 1; }
.lb-num { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.lb-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-you { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--gold-deep); background: var(--gold-soft); border: 1px solid var(--gold); padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.lb-crowns { font-size: 12px; font-weight: 800; color: var(--gold-deep); flex: none; }
.lb-pts { flex: none; display: flex; align-items: baseline; gap: 3px; color: var(--red); }
.lb-pts b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lb-pts small { font-size: 10px; font-weight: 700; color: var(--ink-3); }

/* prominent Log-a-Workout CTA right under the profile hero */
.log-cta { margin-bottom: 16px; font-size: 16px; padding: 14px 18px; }

/* ============================================================
   EXERCISES LIBRARY TAB
   ============================================================ */
.ex-intro { margin-bottom: 8px; }
.ex-intro h1 { font-size: 24px; letter-spacing: -.5px; margin: 0 0 4px; }
.ex-intro p { color: var(--ink-2); margin: 0 0 12px; font-size: 14px; }
.ex-intro .lib-search { width: 100%; }

.ex-cat { margin-top: 22px; }
.ex-cat-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 17.25px; font-weight: 800; letter-spacing: -.2px; color: var(--ink);
  margin: 0 0 11px; padding-bottom: 7px; border-bottom: 2px solid var(--line);
}
.ex-cat-count {
  margin-left: auto; font-size: 12px; font-weight: 800; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px;
}

.ex-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.exlib-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 12px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.exlib-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow-lg); }
.exlib-card:active { transform: translateY(0); }
.exlib-card-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--red-soft);
  display: grid; place-items: center; font-size: 26px; flex: none;
}
.exlib-card-icon .ex-icon-img { width: 40px; height: 40px; object-fit: contain; }
.exlib-card-name { font-weight: 800; font-size: 14px; letter-spacing: -.2px; line-height: 1.2; color: var(--ink); }
.exlib-card-phase {
  font-size: 10.5px; font-weight: 700; color: var(--gold-deep);
  background: var(--gold-soft); border: 1px solid #ecdca0; border-radius: 999px; padding: 1px 8px;
}

/* --- exercise detail modal --- */
.ex-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: middle;
}
.ex-tag.rehab { background: var(--red-soft); border-color: #f3c3cc; color: var(--red); }
.ex-diagram {
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--bg); margin-bottom: 14px; overflow: hidden;
}
.ex-diagram-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 150px; color: var(--ink-3); font-size: 13px; font-weight: 600;
}
.ex-diagram-emoji { font-size: 30px; opacity: .7; }
.ex-diagram img { display: block; width: 100%; height: auto; }
/* rehab exercises have no motion clip, so show their anatomical icon (grey figure with the
   worked muscle in orange) centered as the form diagram instead of a placeholder */
.ex-diagram-fig {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: 10px;
}
.ex-diagram-fig img { width: auto; height: 200px; max-width: 100%; object-fit: contain; }

/* looping form animation: start + end frames cross-fade to show the movement */
.ex-motion {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: #fff; overflow: hidden;
}
.ex-motion-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.ex-motion-frame.base { opacity: 1; }
/* the end frame fades in over the start frame and back, so the motion reads as a loop */
.ex-motion-frame.top { opacity: 0; animation: ex-motion-cross 1.8s ease-in-out infinite; }
@keyframes ex-motion-cross {
  0%, 18% { opacity: 0; }
  42%, 58% { opacity: 1; }
  82%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-motion-frame.top { animation: none; opacity: 0; }
}
.ex-desc { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.ex-muscles { border-top: 1px solid var(--line); padding-top: 14px; }

/* ============================================================
   FEED — chapter chatroom
   ============================================================ */
.wrap.feed-wrap {
  max-width: 720px; padding: 0; margin: 18px auto 24px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.feed-head-row {
  padding: 15px 18px; border-bottom: 1px solid var(--line);
  background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
}
.feed-title { font-size: 19px; letter-spacing: -.3px; margin: 0; color: var(--ink); }
.feed-sub { font-size: 12px; color: var(--ink-3); }

.feed-msgs {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 16px 10px; min-height: 40vh;
}
.feed-empty { color: var(--ink-3); text-align: center; padding: 48px 24px; font-size: 14px; line-height: 1.5; }

/* day divider + system lines (PRs, workouts, videos) — centered pills */
.feed-day { align-self: center; margin: 8px 0 2px; }
.feed-day span {
  font-size: 11px; font-weight: 800; color: var(--ink-3);
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px;
}
.feed-sys {
  align-self: center; max-width: 92%; text-align: center;
  font-size: 12.5px; font-style: italic; color: var(--gold-deep);
  background: var(--gold-soft); border: 1px solid #ecdca0; border-radius: 999px; padding: 5px 14px;
}

/* message rows + bubbles */
.feed-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; align-self: flex-start; }
.feed-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.feed-av-fallback {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--gold-soft); color: var(--gold-deep);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.feed-bubble-wrap { display: flex; flex-direction: column; min-width: 0; }
.feed-author { font-size: 11px; font-weight: 800; color: var(--ink-3); margin: 0 0 3px 12px; }
.feed-bubble {
  padding: 8px 13px; border-radius: 16px; border-bottom-left-radius: 5px;
  font-size: 14px; line-height: 1.38; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.feed-msg.mine .feed-bubble {
  background: var(--red); border-color: var(--red); color: #fff;
  border-bottom-left-radius: 16px; border-bottom-right-radius: 5px;
}
.feed-when { font-size: 10px; color: var(--ink-3); margin: 3px 12px 0; }
.feed-msg.mine .feed-when { text-align: right; }

/* composer pinned to the bottom of the viewport while scrolling chat history */
.feed-composer {
  display: flex; gap: 8px; align-items: center;
  padding: 11px 13px; border-top: 1px solid var(--line);
  background: var(--card); border-radius: 0 0 var(--radius) var(--radius);
  position: sticky; bottom: 0; z-index: 2;
}
.feed-input {
  flex: 1; min-width: 0; font-size: 14px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px;
}
.feed-input::placeholder { color: var(--ink-3); }
.feed-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.feed-send {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  font-size: 17px; display: grid; place-items: center; transition: background .12s ease;
}
.feed-send:hover { background: var(--red-dark); }

/* ---------- Perfect 10 workout plan viewer ---------- */
.plan-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.plan-body { flex: 1 1 auto; min-height: 0; }
.plan-tab { flex: 0 0 auto; padding: 9px 13px; border: 0; background: none; color: var(--ink-2); font-family: inherit; font-weight: 800; font-size: 13.5px; border-bottom: 2.5px solid transparent; cursor: pointer; white-space: nowrap; }
.plan-tab:hover { color: var(--ink); }
.plan-tab.on { color: var(--red); border-bottom-color: var(--red); }
.plan-blurb { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }
.plan-note { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; line-height: 1.5; }
.plan-note-em { border-color: rgba(201,162,39,.35); }
.plan-week { margin-bottom: 16px; }
.plan-week-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.plan-week-h b { color: var(--ink); font-weight: 900; font-size: 14px; }
.plan-week-note { font-size: 11.5px; font-weight: 700; color: var(--gold-deep); }
.plan-days { display: flex; flex-direction: column; gap: 10px; }
.plan-day { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; cursor: pointer; color: var(--ink); font-family: inherit; transition: border-color .12s, background .12s; }
.plan-day:hover { border-color: var(--red); background: var(--bg); }
.pd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pd-n { font-weight: 900; font-size: 15px; }
/* cursor:pointer is required for click events to fire on a non-native element in iOS Safari */
.pd-go { font-size: 12px; font-weight: 800; color: var(--red); white-space: nowrap; cursor: pointer; }
.pd-table { display: flex; flex-direction: column; }
.pd-row { display: grid; grid-template-columns: minmax(108px, 44%) 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.pd-row.pd-head { border-top: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 800; padding-bottom: 3px; }
.pd-ex { font-weight: 700; color: var(--ink); }
.pd-sets { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pd-sets i { color: var(--ink-3); }
.pd-fin { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pd-fin b { color: var(--gold-deep); font-weight: 800; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; margin-right: 6px; }
.plan-sec { margin-bottom: 20px; }
.plan-sec h3 { font-size: 16px; margin: 0 0 4px; color: var(--ink); }
.plan-secsub { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.plan-list { margin: 0; padding-left: 20px; }
.plan-list li { margin-bottom: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.plan-sec p { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; line-height: 1.55; }
.plan-tablewrap { overflow-x: auto; margin-top: 4px; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plan-table th, .plan-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.plan-table th { color: var(--ink); font-weight: 800; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.plan-table td:first-child { color: var(--ink); font-weight: 600; }
.plan-quote { margin: 0; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--bg); border-radius: 0 10px 10px 0; font-style: italic; color: var(--ink); }
@media (max-width: 460px) { .pd-row { grid-template-columns: 1fr; gap: 1px; } .pd-row.pd-head { display: none; } }
.feed-send:active { transform: scale(.94); }

/* create-workout exercise picker: search-filtered list, A-Z sections */
.lw-picklist { max-height: 44vh; }
.lw-pickgroup { display: flex; flex-direction: column; gap: 6px; }
.lw-pickgroup + .lw-pickgroup { margin-top: 10px; }
.lw-pickhead { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); margin: 2px 2px 0; }

/* Workout Plan: tappable exercise names (open the profile stacked over the plan) */
.pd-ex-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.pd-ex-link:hover, .pd-ex-link:focus-visible { text-decoration-style: solid; }

/* ============================================================
   GPS RUN (live tracking + map)
   ============================================================ */
.run-live { display: flex; flex-direction: column; gap: 12px; }
.run-map { height: 220px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--bg); position: relative; z-index: 0; }
.run-map-lg { height: 55vh; min-height: 300px; }
.run-map-ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 24px; color: var(--ink-3); font-size: 13px; }
.leaflet-container { font: inherit; background: #aad3df; }
.run-stats { display: flex; gap: 8px; }
.run-stat { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; }
.run-val { font-size: 26px; font-weight: 900; letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.run-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-top: 2px; }
.run-status { font-size: 13px; color: var(--ink-2); text-align: center; min-height: 18px; }
.run-controls { display: flex; flex-direction: column; }
.run-btn-row { display: flex; gap: 8px; }
.run-splits { min-height: 0; }
.run-chip-row { font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.run-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--gold-soft); color: var(--gold-deep); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.run-chip b { color: var(--gold-deep); font-weight: 900; }
.run-summary { display: flex; flex-direction: column; gap: 10px; }
.run-sum-big { font-size: 24px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; }
.run-sum-big span { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.run-note { font-size: 12.5px; color: var(--ink-3); }
.run-intro { font-size: 13.5px; color: var(--ink-2); margin: 2px 0 12px; }
.wd-splits { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }

/* admin (read-only oversight) */
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-chapmeta { font-size: 12.5px; color: var(--ink-3); margin: 0 2px 12px; }
.admin-members { display: flex; flex-direction: column; gap: 8px; }
.admin-mrow { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.admin-minfo { flex: 1; min-width: 0; }
.admin-mname { font-weight: 800; font-size: 14.5px; color: var(--ink); }
.admin-mlast { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.admin-mstat { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.admin-lastlogin { margin-top: 8px; font-size: 12.5px; color: var(--gold-deep); }

/* goals */
.goal-list { display: flex; flex-direction: column; gap: 12px; }
.goal-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 15px; }
.goal-card.reached { border-color: var(--gold); }
.goal-top { display: flex; align-items: center; gap: 11px; }
.goal-id { flex: 1; min-width: 0; }
.goal-name { font-weight: 800; font-size: 15.5px; color: var(--ink); }
.goal-metric { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
.goal-actions { display: flex; gap: 10px; flex: none; }
.goal-nums { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 13.5px; color: var(--ink-2); flex-wrap: wrap; }
.goal-nums b { color: var(--ink); }
.goal-arrow { color: var(--ink-3); }
.goal-pct { margin-left: auto; font-weight: 900; color: var(--gold-deep); }
.goal-badge { margin-left: auto; font-weight: 800; font-size: 12px; color: #241d05; background: var(--gold); border-radius: 999px; padding: 2px 10px; }
.goal-bar { height: 9px; background: var(--bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.goal-fill { height: 100%; background: linear-gradient(90deg, var(--red-dark), var(--red)); border-radius: 999px; transition: width .4s ease; }
.goal-fill.full { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.goal-rec { margin-top: 12px; }
.sg-field { display: block; margin: 12px 0; }
.sg-field > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 700; }
.sg-num { width: 120px; padding: 9px 11px; font-size: 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.sg-time { display: inline-flex; align-items: center; gap: 8px; }
.sg-time .sg-num { width: 76px; }
.sg-unit { margin-left: 8px; color: var(--ink-3); font-size: 13px; }
.sg-cur { font-size: 13px; color: var(--ink-2); margin: 4px 0 2px; }
.sg-cur b { color: var(--ink); }

/* leaderboards */
.lb-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 2px 2px 7px; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.prof-goals-btn { margin: 4px 0 14px; }
.prof-goals-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 900; padding: 0 6px; margin-left: 4px; }

/* location picker (city search) */
.loc-city { width: 100%; padding: 9px 11px; font-size: 15px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.loc-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.loc-result { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.loc-result:hover, .loc-result:focus-visible { border-color: var(--red); color: var(--ink); }
.loc-note { font-size: 12.5px; color: var(--ink-3); padding: 6px 2px; }
.loc-picked { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.loc-picked-txt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.lb-lifts { margin-top: -2px; }
.lb-chip { background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.lb-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.lb-scope { font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; margin: 4px 2px 8px; }
.lb-scope b { color: var(--ink-2); }
.lb-you { background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold-deep); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.lb-you.muted { background: var(--bg); color: var(--ink-3); font-weight: 600; }
.lb-you b { color: var(--gold-deep); font-weight: 900; }
.lb-rows { display: flex; flex-direction: column; gap: 6px; }
.lb-erow { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.lb-erow.you { border-color: var(--red); background: var(--red-soft); }
.lb-rank { width: 30px; text-align: center; font-size: 16px; flex: none; }
.lb-rank .lb-num { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.lb-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-you-tag { font-size: 10px; font-weight: 900; text-transform: uppercase; color: var(--red); margin-left: 4px; }
.lb-val { font-weight: 800; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.lb-lbs { font-weight: 700; font-size: 11px; color: var(--ink-3); }
/* verification chip (policy 8 Oct): Verified / Pending / Self-reported */
.lb-chk { flex: none; margin-left: 8px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
.lb-chk-ok { color: #137a3b; background: #e6f6ec; border: 1px solid #b8e4c6; }
.lb-chk-pend { color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); }
.lb-chk-self { color: var(--gold-deep); background: var(--gold-soft); border: 1px solid var(--gold); }
.lb-rules-row { margin-top: 14px; font-size: 12px; color: var(--ink-3); text-align: center; }
.lb-rules-row .linklike { color: var(--red); font-weight: 800; }
.lb-need { text-align: center; padding: 22px 12px; color: var(--ink-2); }
.lb-need p { margin: 0 0 12px; }
/* policy pages (Leaderboard Rules / Community Guidelines) */
.policy-body h3 { margin: 0 0 8px; font-size: 19px; }
.policy-body h4 { margin: 18px 0 6px; font-size: 14px; color: var(--red); text-transform: uppercase; letter-spacing: .4px; }
.policy-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.policy-body ul { margin: 0 0 10px; padding-left: 20px; }
.policy-body li { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-bottom: 5px; }
.help-q { font-weight: 800; color: var(--ink); margin: 14px 0 2px; font-size: 14px; }
.help-body p + .help-q { margin-top: 16px; }
.policy-body a { color: var(--red); font-weight: 700; text-decoration: none; }
.policy-switch { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.policy-switch .linklike { color: var(--red); font-weight: 800; }
.billing-test-box { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.billing-test-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 6px; }
.form-agree { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 12px; line-height: 1.45; }
.form-agree .linklike { color: var(--red); font-weight: 700; }
/* coach delete control on a chat message */
.feed-del { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 11px; padding: 0 4px; margin-left: 6px; }
.feed-del:hover { color: var(--red); }

/* weight history */
.wt-list { display: flex; flex-direction: column; gap: 7px; }
.wt-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.wt-w { font-weight: 900; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wt-w small { font-weight: 700; font-size: 12px; color: var(--ink-3); }
.wt-delta { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: var(--bg); }
.wt-delta.up { color: #e2564e; }
.wt-delta.down { color: #1a9d4a; }
.wt-date { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.wt-rm { color: var(--ink-3); }
.wt-rm:hover { color: var(--red); }
.admin-view-bar { display: flex; align-items: center; gap: 10px; background: var(--gold-soft); border: 1px solid var(--line); color: var(--gold-deep); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.admin-view-bar span { flex: 1; min-width: 0; }
.admin-view-bar b { color: var(--gold-deep); }
.run-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; }
.run-tip-ic { font-size: 18px; line-height: 1.3; flex: none; }
.run-tip-main { flex: 1; min-width: 0; }
.run-tip-main b { color: var(--gold-deep); font-size: 13.5px; }
.run-tip-main p { margin: 3px 0 8px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.run-tip-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.run-tip-check input { width: 15px; height: 15px; accent-color: var(--red); }
.run-tip-x { flex: none; align-self: center; background: transparent; border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.run-tip-x:hover { color: var(--ink); }

/* ---------------- Analytics / Coach tools ---------------- */
.an-head h1 { font-size: 22px; font-weight: 900; margin: 4px 0 10px; }
.coach-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.coach-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; margin: 0 0 6px; }
.coach-panel .muted { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.45; }
.coach-panel .btn-primary { width: 100%; }
.coach-mgr { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.coach-mgr h3 { font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.coach-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; font-size: 13px; }
.coach-row em { color: var(--ink-2); font-style: normal; }
.coach-add { display: flex; gap: 8px; margin-top: 8px; }
.coach-add input { flex: 1; min-width: 0; padding: 9px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 14px; }
.coach-add .btn { flex: 0 0 auto; }
.analytics-soon { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.analytics-soon h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; margin: 0 0 6px; }
.analytics-soon .muted { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.45; }

/* ---------------- Coach chat highlight (feed) ---------------- */
/* A coach's chat message is a full-width banner in the Recent-PRs red wash, text a couple sizes
   up from the 14px default, and always labelled with the coach's name. */
/* compound selectors (.feed-msg.feed-msg-coach) so a coach banner overrides the higher-specificity
   .feed-msg.mine rules and looks identical whether the coach is you or someone else */
.feed-msg.feed-msg-coach {
  max-width: 100%;
  align-self: stretch;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(90deg, var(--red-soft), var(--card));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 13px;
  box-sizing: border-box;
}
.feed-msg.feed-msg-coach .feed-bubble-wrap { flex: 1 1 auto; align-items: flex-start; text-align: left; }
.feed-msg.feed-msg-coach .feed-bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.feed-msg.feed-msg-coach .feed-author { margin-left: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.feed-msg.feed-msg-coach .feed-when { margin-left: 0; text-align: left; }
.feed-coach-tag {
  font-size: 10px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: 999px; padding: 1px 7px;
}

/* ---------------- Progression charts (Analytics) ---------------- */
.prog-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.prog-panel h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; margin: 0 0 10px; }
.prog-panel .muted { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; line-height: 1.45; }
.prog-select { width: 100%; padding: 9px 11px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 700; }
.prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.prog-chip { padding: 6px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.prog-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.prog-stats { display: flex; gap: 20px; flex-wrap: wrap; margin: 12px 0 2px; }
.prog-stats > div { display: flex; flex-direction: column; }
.ps-lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); }
.ps-val { font-size: 18px; font-weight: 900; color: var(--ink); }
.ps-val.up { color: #37c26b; }
.ps-val.down { color: var(--red); }
.prog-chart { width: 100%; height: auto; display: block; margin-top: 4px; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; }
.ch-line { stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--red); stroke: var(--card); stroke-width: 1.5; }
.ch-dot.pr { fill: var(--gold); }
.ch-hit { cursor: pointer; outline: none; }
.ch-hit:focus-visible + .ch-dot, .ch-hit:focus-visible { outline: none; }
/* dashed goal line + its label (coloured inline to the member's line colour) */
.ch-goal { stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .85; }
.ch-goal-lab { fill: var(--red); font-size: 11px; font-weight: 800; }
.ch-ylab, .ch-xlab { fill: var(--ink-2); font-size: 10px; font-weight: 600; }
/* hover/tap data-point box */
.ch-tip { position: absolute; z-index: 20; pointer-events: none; max-width: 240px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: 12px; color: var(--ink-2); }
.ch-tip-h { font-weight: 800; color: var(--ink); font-size: 12.5px; margin-bottom: 2px; }
.ch-tip-v b { color: var(--ink); }
.ch-tip-d { color: var(--ink-3); margin-top: 3px; line-height: 1.35; }

/* Roster tab (coach): team table + assign-from-plan picker */
.rost-scroll { overflow-x: auto; margin-top: 12px; }
.rost-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rost-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); font-weight: 800; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rost-table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.rost-name { font-weight: 800; color: var(--ink); white-space: nowrap; }
.rost-namelink { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.rost-namelink:hover { color: var(--red); text-decoration-color: var(--red); }
.rost-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rost-phrase { font-style: italic; max-width: 240px; }
.rost-act { text-align: right; white-space: nowrap; }
.rost-plan-list { display: flex; flex-direction: column; gap: 8px; }
.rost-plan-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin: 10px 2px 2px; }
.rost-plan-group:first-child { margin-top: 0; }

/* dashboard banner: workouts a coach assigned me */
.dash-asg { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; }
.dash-asg-h { font-weight: 900; font-size: 14px; color: var(--gold-deep); margin-bottom: 8px; }
.dash-asg-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--gold); }
.dash-asg-row:first-of-type { border-top: 0; padding-top: 0; }
.dash-asg-main { flex: 1; min-width: 0; }
.dash-asg-name { font-weight: 800; color: var(--ink); font-size: 14px; }
.dash-asg-by { font-size: 12px; color: var(--ink-3); }
.dash-asg-log { flex: 0 0 auto; }

/* appbar notification bell + badge */
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 900; line-height: 16px; text-align: center; border: 1.5px solid var(--bg); box-sizing: content-box; }
/* notifications center */
.notif-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin: 2px 2px 8px; }
.notif-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.notif-row:first-of-type { border-top: 0; padding-top: 2px; }
.notif-ic { font-size: 20px; flex: none; }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-weight: 800; color: var(--ink); font-size: 14px; }
.notif-sub { font-size: 12px; color: var(--ink-3); }
.notif-log { flex: 0 0 auto; }
.notif-empty { text-align: center; padding: 26px 12px; color: var(--ink-2); font-weight: 700; line-height: 1.6; }
.rost-plan-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; cursor: pointer; }
.rost-plan-row:hover { border-color: var(--red); }
.rost-plan-w { font-weight: 800; color: var(--ink); font-size: 14.5px; }
.rost-plan-p { font-size: 12px; font-weight: 600; }
.rost-plan-ex { font-size: 12px; margin-top: 2px; line-height: 1.35; }
/* exercise + numbers list (plan picker rows and the confirm step) */
.rost-ex-list { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px; margin: 8px 0 12px; max-height: 300px; overflow-y: auto; }
.rost-ex-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.rost-ex-row:first-child { border-top: 0; }
.rost-ex-n { font-weight: 700; color: var(--ink); font-size: 13.5px; }
.rost-ex-s { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* tappable exercise names (open the profile) in the assign screens + the log draft */
.rost-ex-link, .lw-drow-name { font: inherit; font-weight: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.rost-ex-link:hover, .lw-drow-name:hover { color: var(--red); text-decoration-color: var(--red); }
.lw-drow-name { font-weight: 800; }
.rost-confirm-name { font-weight: 900; font-size: 16px; color: var(--ink); }
.rost-confirm-note { font-size: 12.5px; color: var(--gold-deep); font-weight: 700; margin-bottom: 10px; }
.rost-confirm-q { font-size: 14px; color: var(--ink-2); margin: 4px 0 12px; }
/* detailed plan picker: collapsible weeks + per-day exercise tables */
.rpl-section-h { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: var(--red); margin: 16px 2px 8px; }
.rpl-section-h:first-child { margin-top: 0; }
.rpl-week { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.rpl-week-h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--card); border: 0; padding: 11px 13px; cursor: pointer; }
.rpl-week-h:hover { background: var(--bg); }
.rpl-caret { color: var(--ink-3); font-size: 11px; transition: transform .12s; flex: none; }
.rpl-week-h.open .rpl-caret { transform: rotate(90deg); }
.rpl-week-t { font-weight: 900; color: var(--ink); font-size: 14px; }
.rpl-week-note { font-size: 11.5px; }
.rpl-week-body { padding: 2px 12px 12px; }
.rpl-day { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.rpl-week-body .rpl-day:first-child { border-top: 0; margin-top: 2px; }
.rpl-day-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.rpl-day-n { font-weight: 800; color: var(--ink); font-size: 14px; }
.rpl-assign { flex: 0 0 auto; }
/* "set weight" warning on an assigned % exercise that still needs weights entered */
.lw-needwt { font-size: 10.5px; font-weight: 800; color: var(--red); white-space: nowrap; }
.prog-weight { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.prog-weight h3 { font-size: 14px; font-weight: 800; margin: 0 0 6px; }

/* progression: compare-members dropdown + removable tags + multi-line legend */
.prog-compare { margin: 12px 0 2px; }
.pc-lbl { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 6px; }
.pc-select { width: 100%; }
.pc-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pc-tag-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pc-tag-x { background: transparent; border: none; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.pc-tag-x:hover { color: var(--red); }
.prog-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 2px; }
.pl-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.pl-item b { color: var(--ink); font-weight: 800; }
.pl-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* ---------------- Workout assignments (coach -> athlete) ---------------- */
.pd-assign {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-deep);
  background: var(--gold-soft);
  border: 1px solid rgba(212,175,55,.45);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.pd-assign:hover { background: rgba(212,175,55,.28); }
.pd-top { display: flex; align-items: center; gap: 8px; }

.assign-body { display: flex; flex-direction: column; gap: 12px; }
.assign-all { font-size: 15px; }
.assign-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 46vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px;
}
.assign-row, .assign-all, .assign-video {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.assign-row:hover { background: var(--bg); }
.assign-row input, .assign-all input, .assign-video input { width: 18px; height: 18px; accent-color: var(--red); }
.assign-video { border-top: 1px solid var(--line); padding-top: 12px; }

.assign-notice { display: flex; flex-direction: column; gap: 10px; }
.assign-card {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); padding: 12px 14px;
}
.assign-card-main { flex: 1; min-width: 0; }
.assign-card-name { font-weight: 800; color: var(--ink); }
.assign-card-by { font-size: 12px; margin-top: 2px; }
.assign-log { flex: none; white-space: nowrap; }

/* ---- Workout plan chooser ---- */
.plan-chooser { display: flex; flex-direction: column; gap: 10px; }
.plan-pick-wrap { display: flex; flex-direction: column; gap: 4px; }
.plan-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  padding: 14px; cursor: pointer; color: var(--ink); font-family: inherit;
  transition: border-color .12s, background .12s;
}
.plan-pick:hover { border-color: var(--red); background: var(--bg); }
.plan-pick-main { flex: 1; min-width: 0; }
.plan-pick-name { font-weight: 800; }
.plan-pick-sub { font-size: 12px; margin-top: 2px; }
.plan-pick-go { font-size: 20px; font-weight: 800; color: var(--red); flex: none; }
.plan-pick-admin { display: flex; gap: 14px; padding: 0 4px 2px; }

/* ---- Custom plan view ---- */
.cplan-body { display: flex; flex-direction: column; gap: 12px; }
.cplan-wk { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.cplan-wk:hover { border-color: var(--red); background: var(--bg); }
.cplan-wk:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cplan-wk-head { display: flex; align-items: baseline; gap: 10px; }
.cplan-wk-name { font-weight: 800; flex: 1; min-width: 0; }
.cplan-wk-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.cplan-wk-ex { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.cplan-exrow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.cplan-wk-admin { display: flex; gap: 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---- Plan editor ---- */
.plan-editor { display: flex; flex-direction: column; gap: 10px; }
.pe-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.pe-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: inherit; font-size: 15px; }
.pe-wk-title { font-weight: 800; margin-top: 6px; }
#pe-wks { display: flex; flex-direction: column; gap: 8px; }
.pe-wk { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px; }
.pe-wk-main { flex: 1; min-width: 0; }
.pe-wk-actions { display: flex; gap: 12px; flex: none; }
.pe-add { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.pe-add .pe-input { flex: 1; }
.pe-add .btn { flex: none; white-space: nowrap; }