/* ═══════════════════════════════════════════════════════════════════
   Gymhub — premium design layer, shared by every page
   Loaded after each page's own styles; it only overrides. Graphite
   surfaces, one accent (the logo's blue), Geist type, hairline borders,
   sentence case. Page-specific parts are scoped by the body class:
   body.coach / body.athlete / body.login.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg: #08090b;
  --surface: #0f1115;
  --surface-2: #151820;
  --surface-3: #1c2029;
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .12);
  --ink: #f4f6f8;
  --ink2: #a4acb9;
  --ink3: #6c7585;
  --accent: #0a74ff;
  --accent-hi: #5a9dff;
  --cy: #5a9dff;                 /* the old cyan accent now follows the brand */
  --grad: linear-gradient(180deg, #2f86ff, #0a6cf0);
  --ok: #2fd17c;
  --warn: #f5a524;
  --bad: #f2555a;
  --hud: "Geist", "Inter", system-ui, sans-serif;
  --txt: "Geist", "Inter", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --r: 14px;
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 1px 2px rgba(0, 0, 0, .45), 0 16px 40px -24px rgba(0, 0, 0, .8);
}
html, body { background: var(--bg); }
body { font: 14.5px/1.5 var(--txt); letter-spacing: -.006em; }
::selection { background: rgba(10, 116, 255, .35); }
a { color: var(--accent-hi); }

/* one soft brand glow, no grid */
.atmos::before {
  inset: -30% -20% auto; height: 90vh; animation: none;
  background: radial-gradient(42% 50% at 28% 8%, rgba(10, 116, 255, .11), transparent 70%),
              radial-gradient(30% 40% at 92% 0%, rgba(99, 102, 241, .06), transparent 70%);
}
.atmos::after { display: none; }

/* ── type ── */
h1, h2, h3 { font-family: var(--hud); font-weight: 650; letter-spacing: -.025em; }
.eyebrow { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; color: var(--ink3); }
.num { font-family: var(--hud); font-weight: 600; letter-spacing: -.02em; }
.grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-hi); }

/* ── surfaces ── */
.glass { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow); }
.glass::before { display: none; }

/* ── buttons ── */
.btn { min-height: 40px; padding: 0 16px; border-radius: 10px; font: 600 14px/1 var(--txt); letter-spacing: -.005em;
  text-transform: none; color: #fff; background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -10px rgba(10, 116, 255, .9); }
.btn:hover { filter: none; background: #1b80ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px -10px rgba(10, 116, 255, 1); }
.btn svg { width: 17px; height: 17px; }
.btn.lg { min-height: 48px; font-size: 15px; border-radius: 12px; }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { background: rgba(242, 85, 90, .12); color: #ff8a8e; border: 1px solid rgba(242, 85, 90, .35); box-shadow: none; }
.btn.danger:hover { background: rgba(242, 85, 90, .2); }
.btn.ok { background: var(--ok); color: #03200f; }
.icon-btn { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line2); }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 8px; }

/* ── forms ── */
.field > span { font: 500 12.5px/1 var(--txt); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.input, select.input, textarea.input { min-height: 42px; border-radius: 10px; background: #0b0d11; border-color: var(--line2); font-size: 15px; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 116, 255, .22); background: #0b0d11; }
.seg { background: #0b0d11; border-radius: 10px; padding: 3px; border-color: var(--line); }
.seg button { min-height: 32px; border-radius: 7px; font: 500 13px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.seg button.on { background: var(--surface-3); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 3px rgba(0, 0, 0, .5); }

/* ── badges ── */
.chip { height: 24px; padding: 0 9px; border-radius: 7px; font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none;
  background: rgba(255, 255, 255, .05); border-color: var(--line); color: var(--ink2); }
.chip.cy { color: #8ebcff; background: rgba(10, 116, 255, .12); border-color: rgba(10, 116, 255, .3); }
.chip.vi { color: #c9bbff; background: rgba(139, 92, 246, .1); border-color: rgba(139, 92, 246, .28); }
.chip.ok { color: #63e3a5; background: rgba(47, 209, 124, .1); border-color: rgba(47, 209, 124, .28); }
.chip.warn { color: #f8c160; background: rgba(245, 165, 36, .1); border-color: rgba(245, 165, 36, .28); }
.chip.bad { color: #ff8a8e; background: rgba(242, 85, 90, .1); border-color: rgba(242, 85, 90, .3); }
.pr-badge { font: 700 10px/1 var(--txt); letter-spacing: .04em; border-radius: 5px; box-shadow: none; padding: 4px 5px; }

/* ── stat tiles ── */
.stat .k { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; color: var(--ink3); }
.stat .v { font: 600 26px/1.1 var(--hud); letter-spacing: -.03em; }

/* ── overlays ── */
.sheet-bg { background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet { background: var(--surface); border-color: var(--line2); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .95); }
@media (min-width: 760px) { .sheet { border-radius: 18px; padding: 24px 26px; } }
.toast { background: rgba(22, 25, 33, .97); border-color: var(--line2); border-radius: 12px; }
.toast.coach { border-color: rgba(10, 116, 255, .55); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .9); }
.toast .eyebrow { color: var(--accent-hi); font-weight: 600; }
.skel { background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); background-size: 200% 100%; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); }

/* ═══ shell ═══ */
.brand small { color: var(--ink3); border-color: var(--line2); font: 600 9.5px/1 var(--txt); letter-spacing: .14em; }
.pulsechip { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; border-radius: 8px; padding: 7px 10px; }
.pulsechip.on { color: var(--ok); border-color: rgba(47, 209, 124, .3); background: rgba(47, 209, 124, .07); }
.badge { background: var(--accent); color: #fff; box-shadow: none; font: 600 11px/18px var(--txt); }
.ctop { background: rgba(8, 9, 11, .94); }
nav.ctabs { background: rgba(10, 11, 14, .97); }
nav.ctabs button { font: 500 10.5px/1 var(--txt); letter-spacing: 0; text-transform: none; }
nav.ctabs button.on { color: var(--ink); }
nav.ctabs button.on svg { filter: none; color: var(--accent-hi); }
@media (min-width: 980px) {
  aside.side { background: #0a0b0e; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 18px 12px; }
  aside .brand { padding: 4px 10px 26px; }
  aside nav { gap: 2px; }
  aside nav button { padding: 9px 10px; border-radius: 8px; border: 0; font: 500 14px/1 var(--txt); letter-spacing: -.005em;
    text-transform: none; color: var(--ink2); }
  aside nav button svg { width: 18px; height: 18px; opacity: .8; }
  aside nav button:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
  aside nav button.on { background: rgba(255, 255, 255, .06); color: var(--ink); border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
  aside nav button.on::before { left: -12px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
  aside nav button.on svg { color: var(--accent-hi); opacity: 1; }
  body.coach main#view { padding: 32px 44px 64px; max-width: 1440px; }
}

/* ── page headers ── */
.ph h1 { font-size: 26px; letter-spacing: -.03em; font-weight: 650; margin-top: 6px; }
@media (min-width: 980px) { .ph h1 { font-size: 32px; } }
.crumb { font: 500 13px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.crumb:hover { color: var(--ink); }
.sect { margin: 30px 2px 12px; }
.sect h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sect h2::before { display: none; }
.sect .faint { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; }

/* ── KPI strip (live board) ── */
.kpi { padding: 16px 18px; }
.kpi .ic { width: 34px; height: 34px; border-radius: 9px; }
.kpi .ic svg { width: 17px; height: 17px; }
.kpi b { font: 600 26px/1 var(--hud); letter-spacing: -.03em; }
.kpi span { font: 500 12.5px/1.3 var(--txt); letter-spacing: 0; text-transform: none; color: var(--ink3); }

/* ── athlete header + underline tabs ── */
.dhead { padding: 22px 24px; }
.dhead::after { background: radial-gradient(circle, rgba(10, 116, 255, .13), transparent 68%); }
.dhead .av { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 30px -12px rgba(0, 0, 0, .9); }
.dhead h1 { font-size: 26px; letter-spacing: -.03em; }
@media (min-width: 720px) { .dhead h1 { font-size: 30px; } }
.dtabs { gap: 2px; border-bottom: 1px solid var(--line); margin: 20px 0 22px; }
.dtabs button { padding: 12px 14px 13px; border: 0; border-radius: 0; background: none; font: 500 14px/1 var(--txt);
  letter-spacing: -.005em; text-transform: none; color: var(--ink3); position: relative; }
.dtabs button:hover { color: var(--ink); }
.dtabs button.on { color: var(--ink); background: none; box-shadow: none; border: 0; }
.dtabs button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }

/* ── live card ── */
.lc.working { border-color: rgba(47, 209, 124, .28); --glow-c: rgba(47, 209, 124, .09); }
.lc.resting { border-color: rgba(10, 116, 255, .34); --glow-c: rgba(10, 116, 255, .12); }
.lc.over { border-color: rgba(242, 85, 90, .45); --glow-c: rgba(242, 85, 90, .13); }
.state { font: 600 12px/1 var(--txt); letter-spacing: 0; text-transform: none; border-radius: 7px; padding: 6px 9px; }
.state.working { color: #63e3a5; background: rgba(47, 209, 124, .1); border-color: rgba(47, 209, 124, .28); }
.state.resting { color: #8ebcff; background: rgba(10, 116, 255, .12); border-color: rgba(10, 116, 255, .3); }
.state.over { color: #ff8a8e; background: rgba(242, 85, 90, .12); border-color: rgba(242, 85, 90, .35); }
.lc .nm { font-weight: 600; letter-spacing: -.02em; }
.lc .ex { font-weight: 650; letter-spacing: -.025em; }
.lc .now .eyebrow { font-size: 12px; }
.lc .sn { font: 500 12.5px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.lc .lastset { font: 600 14px/1 var(--hud); border-radius: 8px; background: var(--surface-2); letter-spacing: -.01em; }
.adjb { font: 600 12.5px/1 var(--txt); letter-spacing: 0; border-radius: 8px; }
.nextup { font-size: 13px; }
.lc .foot { background: rgba(0, 0, 0, .18); }
.lc .foot b { font: 600 18px/1 var(--hud); letter-spacing: -.025em; }
.lc.big .foot b { font-size: 22px; }
.lc .foot span { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.ring .rv b { font-weight: 600; letter-spacing: -.045em; }
.ring .rv span { font: 500 11.5px/1.3 var(--txt); letter-spacing: 0; text-transform: none; }
.lc .pbar i { background: var(--accent); box-shadow: 0 0 10px rgba(10, 116, 255, .55); }
.dots i.d { background: var(--accent); box-shadow: none; }
.dots i.c { background: var(--ok); box-shadow: none; }

/* ── set timeline ── */
.gh h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.gh .gm { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.srow .sn { font: 600 12px/1 var(--txt); background: var(--surface-2); color: var(--ink3); }
.srow .v { font: 600 16px/1 var(--hud); letter-spacing: -.015em; }
.srow.ed:hover, .srow.ed:active { background: rgba(255, 255, 255, .03); }
.rb-t i { background: var(--accent); box-shadow: none; }
.rb > span { font: 600 13px/1 var(--hud); letter-spacing: -.01em; }
.rb > em { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.rlive { font: 600 12.5px/1 var(--txt); letter-spacing: 0; text-transform: none; color: var(--accent-hi); }

/* ── feed ── */
.fi { font-size: 13.5px; }
.fi time { font: 500 11.5px/1.7 var(--mono); letter-spacing: 0; }

/* ── lists, programs, library, settings ── */
.arow:hover { border-color: var(--line2); background: var(--surface-2); }
.arow b { font-weight: 600 !important; letter-spacing: -.015em !important; }
.irow:hover { background: var(--surface-2); }
.pc h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.pc:hover { background: var(--surface-2); }
.exrow:hover { background: var(--surface-2); }
.exrow b { font-weight: 600; letter-spacing: -.01em; }
.daytabs button { font: 500 13.5px/1 var(--txt); letter-spacing: 0; border-radius: 8px; padding: 10px 13px; }
.daytabs button.on { background: var(--accent); color: #fff; box-shadow: none; }
.daytabs button.add { color: var(--accent-hi); }
.tog button { font: 500 13px/1 var(--txt); letter-spacing: 0; border-radius: 8px; }
.tog button.on { color: #fff; border-color: rgba(10, 116, 255, .6); background: rgba(10, 116, 255, .18); box-shadow: none; }
.eqgrid button { font: 500 13.5px/1.2 var(--txt); letter-spacing: 0; border-radius: 10px; }
.eqgrid button.on { border-color: rgba(10, 116, 255, .45); background: rgba(10, 116, 255, .08); }
.eqgrid button.on i { background: var(--accent); }
.qp-head { font: 500 11.5px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.qp-row .cnt { font: 600 11.5px/1 var(--txt); letter-spacing: 0; }
.qp-row .f .input { font: 600 14px/1 var(--hud); min-height: 36px; border-radius: 8px; }
.qp-row .t b { font-weight: 600; letter-spacing: -.01em; }
.item .n { background: var(--surface-2); color: var(--ink2); }
.item .exb b { font-weight: 600; letter-spacing: -.015em; }
.item .fields label span { font: 500 11.5px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.item .fields .input { font: 600 15px/1 var(--hud); }
.empty .big { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.empty svg { color: var(--accent-hi); }
.mrow b { font: 600 13px/1 var(--hud); }
.legend { font: 500 11.5px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.creds { background: rgba(10, 116, 255, .06); border-color: rgba(10, 116, 255, .25); }
.savebar { background: rgba(15, 17, 21, .96); border: 1px solid var(--line2); }

/* ═══ athlete overview (shown when they aren't training) ═══ */
.ov { display: grid; gap: 16px; }
.ov-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kc { padding: 16px 18px 12px; display: grid; gap: 8px; align-content: start; }
.kc .l { font: 500 12.5px/1 var(--txt); color: var(--ink3); }
.kc .v { font: 600 30px/1 var(--hud); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kc .v small { font-size: 14px; color: var(--ink3); font-weight: 500; letter-spacing: -.01em; margin-left: 3px; }
.kc .d { font-size: 12.5px; color: var(--ink3); }
.kc .d.up { color: var(--ok); } .kc .d.down { color: var(--bad); }
.spark { height: 34px; width: 100%; display: block; margin-top: 2px; }
.ov-2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ov-2 { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } }
.panel { padding: 18px 20px 16px; }
.panel h4 { margin: 0 0 14px; font: 600 14.5px/1.2 var(--txt); letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel h4 .link { font: 500 12.5px/1 var(--txt); color: var(--ink3); background: none; border: 0; padding: 0; cursor: pointer; }
.panel h4 .link:hover { color: var(--ink); }
.ls-title { font: 600 21px/1.15 var(--hud); letter-spacing: -.03em; }
.ls-sub { color: var(--ink3); font-size: 13px; margin-top: 4px; }
.ls-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin: 16px 0 6px; }
.ls-meta div { background: var(--surface); padding: 11px 12px; min-width: 0; }
.ls-meta b { display: block; font: 600 16px/1.1 var(--hud); letter-spacing: -.025em; white-space: nowrap; }
.ls-meta b.bad { color: #ff8a8e; } .ls-meta b.warn { color: #f8c160; }
.ls-meta span { font: 500 11.5px/1 var(--txt); color: var(--ink3); }
.ls-ex > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 9px 0; border-top: 1px solid var(--line); }
.ls-ex > div:first-child { border-top: 0; }
.ls-ex .b { color: var(--ink2); font: 600 13px var(--hud); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.nx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.nx-row:first-of-type { border-top: 0; }
.nx-row .pl { color: var(--ink3); font: 600 12.5px/1 var(--hud); white-space: nowrap; }
.tg { font: 600 12px/1 var(--txt); padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.tg.up { color: #63e3a5; background: rgba(47, 209, 124, .1); }
.tg.hold, .tg.retry { color: #8ebcff; background: rgba(10, 116, 255, .12); }
.tg.down { color: #f8c160; background: rgba(245, 165, 36, .12); }
.tg.coach { color: #c9bbff; background: rgba(139, 92, 246, .12); }
.tg.none { color: var(--ink3); background: rgba(255, 255, 255, .04); }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wk > div { display: grid; gap: 7px; justify-items: center; font: 500 11.5px/1 var(--txt); color: var(--ink3); }
.wk i { width: 100%; height: 46px; border-radius: 9px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); display: grid; place-items: center;
  font: 600 12px/1 var(--hud); font-style: normal; color: #fff; }
.wk i.on { background: linear-gradient(180deg, rgba(10, 116, 255, .55), rgba(10, 116, 255, .2)); border-color: rgba(10, 116, 255, .6); }
.wk i.today { outline: 2px solid rgba(255, 255, 255, .22); outline-offset: 2px; }
.wk > div.today { color: var(--ink); }
.prl2 > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.prl2 > div:first-child { border-top: 0; }
.prl2 .b { font: 600 13px var(--hud); color: var(--ink); white-space: nowrap; }
.ov-body { display: grid; grid-template-columns: 1fr 1fr; height: 250px; gap: 4px; }
.ov-body > div { height: 100%; min-height: 0; overflow: hidden; }
.ov-empty { color: var(--ink3); font-size: 13.5px; padding: 6px 0 4px; }
.ov-status { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink2); font-size: 13.5px; }
.ov-status .dot { color: var(--ink3); }
.ov-status.on .dot { color: var(--ok); }


/* ═══ athlete app ═══ */
body.athlete .top { background: rgba(8, 9, 11, .94); }
body.athlete .conn { font: 500 12px/1 var(--txt); letter-spacing: 0; text-transform: none; }
body.athlete .avatar { font: 600 14px/1 var(--txt); color: #0b0d11; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
body.athlete .sect h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
body.athlete .sect a, body.athlete .sect button.link { font: 500 13px/1 var(--txt); letter-spacing: 0; text-transform: none; color: var(--accent-hi); }

nav.tabs { background: rgba(10, 11, 14, .97); }
nav.tabs button { font: 500 11px/1 var(--txt); letter-spacing: 0; text-transform: none; }
nav.tabs button.on { color: var(--ink); }
nav.tabs button.on svg { filter: none; color: var(--accent-hi); }
nav.tabs .fab { width: 58px; height: 58px; border-radius: 50%; margin: -24px auto 4px; background: var(--accent); color: #fff;
  box-shadow: 0 0 0 5px var(--bg), 0 12px 28px -8px rgba(10, 116, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .25); }
nav.tabs .fab svg { width: 24px; height: 24px; }
nav.tabs .fab.go { animation: fabPro 2s ease-in-out infinite; }
@keyframes fabPro { 50% { box-shadow: 0 0 0 5px var(--bg), 0 0 0 10px rgba(10, 116, 255, .22), 0 12px 28px -8px rgba(10, 116, 255, .95); } }

/* home */
.hello h1 { font-size: 28px; letter-spacing: -.035em; font-weight: 650; }
.hero { padding: 20px; }
.hero::after { background: radial-gradient(circle, rgba(10, 116, 255, .2), transparent 65%); }
.hero h2 { font-size: 30px; letter-spacing: -.035em; font-weight: 650; }
.hero .meta div { font: 500 12px/1.2 var(--txt); letter-spacing: 0; text-transform: none; }
.hero .meta b { font: 600 22px/1 var(--hud); letter-spacing: -.035em; margin-top: 6px; }
.daypick button { font: 500 13px/1 var(--txt); letter-spacing: 0; border-radius: 9px; background: var(--surface-2); min-height: 34px; }
.daypick button.on { color: #fff; border-color: rgba(10, 116, 255, .55); background: rgba(10, 116, 255, .18); }
.preview .pi .n { font: 600 12px/1 var(--txt); color: var(--ink3); background: var(--surface-2); border-color: var(--line); }
.preview .pi .sr { font: 600 13px/1 var(--hud); letter-spacing: -.01em; }
.week .d { font: 500 11.5px/1 var(--txt); letter-spacing: 0; }
.week .d i { border-radius: 50%; background: var(--surface-2); }
.week .d.done i { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(10, 116, 255, .85); }
.week .d.today i { border-color: rgba(255, 255, 255, .35); }
.msgc .ic { color: var(--accent-hi); }

/* workout */
.wtop { background: rgba(8, 9, 11, .95); }
.wtop .t { font: 600 30px/1 var(--hud); letter-spacing: -.045em; }
.bar { background: rgba(255, 255, 255, .06); }
.bar i { background: var(--accent); box-shadow: none; }
.ex.open { border-color: rgba(10, 116, 255, .45); box-shadow: 0 0 0 1px rgba(10, 116, 255, .14), var(--shadow); }
.ex .idx { font: 600 14px/1 var(--txt); background: var(--surface-2); border-radius: 10px; }
.ex.open .idx { background: var(--accent); color: #fff; }
.ex.done .idx { background: rgba(47, 209, 124, .14); color: var(--ok); border-color: rgba(47, 209, 124, .35); }
.ex .name { font: 600 17px/1.15 var(--hud); letter-spacing: -.02em; }
.cue { background: var(--surface-2); border-color: var(--line); }
.cue b { color: var(--ink3); font: 600 11px/1 var(--txt); letter-spacing: .06em; }
.cue.coach { background: rgba(139, 92, 246, .08); border-color: rgba(139, 92, 246, .25); }
.setr { background: #0b0d11; border-color: var(--line); border-radius: 12px; }
.setr.cur { border-color: rgba(10, 116, 255, .5); background: rgba(10, 116, 255, .06); }
.setr.logged { background: rgba(47, 209, 124, .05); border-color: rgba(47, 209, 124, .2); }
.setr .no { font: 600 15px/1 var(--hud); }
.setr.cur .no { color: var(--accent-hi); }
.setr .lbl { font: 500 10.5px/1 var(--txt); letter-spacing: .01em; text-transform: none; }
.stepper { background: var(--surface-2); border-color: var(--line2); border-radius: 10px; }
.stepper button { width: 26px; font: 500 20px/1 var(--txt); }
.stepper button:active { background: rgba(10, 116, 255, .15); color: var(--accent-hi); }
.stepper input { font: 600 16.5px/1 var(--hud); letter-spacing: -.035em; }
.logv { font: 600 17px/1 var(--hud); letter-spacing: -.02em; }
.tick { border-radius: 10px; background: var(--surface-2); }
.setr.cur .tick { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -6px rgba(10, 116, 255, .9); }
.setr.logged .tick { background: rgba(47, 209, 124, .16); color: var(--ok); border-color: rgba(47, 209, 124, .35); }
.rest-chip { font: 500 12px/1 var(--txt); letter-spacing: 0; }
.lastline { font: 500 12.5px/1.45 var(--txt); letter-spacing: 0; }
.ptip .ar { font: 600 16px/1 var(--txt); border-radius: 9px; }
.ptip b { font: 600 15.5px/1.25 var(--hud); letter-spacing: -.015em; }
.ptip.hold { border-color: rgba(10, 116, 255, .3); background: rgba(10, 116, 255, .06); }
.ptip.hold .ar { background: rgba(10, 116, 255, .16); color: var(--accent-hi); }
.ptip.new { background: var(--surface-2); }
.hold-go { background: var(--ok); color: #03200f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px -10px rgba(47, 209, 124, .9); }
.hold-go:hover { background: #3ee08a; }

/* rest + hold timers: the ring in brand blue */
.rest { background: radial-gradient(70% 55% at 50% 40%, rgba(10, 32, 70, .97), rgba(6, 7, 9, .99)); }
.rest .rv b { font: 600 clamp(64px, 20vw, 92px)/1 var(--hud); letter-spacing: -.055em; }
.rest .rv span { font: 500 13px/1 var(--txt); letter-spacing: .04em; margin-top: 8px; }
#rg stop:nth-child(1) { stop-color: #7ab0ff; }
#rg stop:nth-child(2) { stop-color: #2f86ff; }
#rg stop:nth-child(3) { stop-color: #0a62e0; }

/* scan */
.lens::before { background: linear-gradient(135deg, #7ab0ff, #0a74ff) border-box; }
.lens::after { background: linear-gradient(180deg, transparent 0%, rgba(10, 116, 255, .35) 50%, transparent 52%); background-size: 100% 220%; }
.lens svg { color: var(--accent-hi); filter: drop-shadow(0 0 14px rgba(10, 116, 255, .6)); }
.scanning::after { background: linear-gradient(180deg, transparent 0%, rgba(10, 116, 255, .45) 50%, transparent 54%); background-size: 100% 240%; }
.plan div { background: var(--surface-2); border-radius: 10px; }
.plan b { font: 600 20px/1 var(--hud); letter-spacing: -.03em; }
.plan span { font: 500 11px/1 var(--txt); letter-spacing: 0; text-transform: none; }
body.athlete .eqgrid button { background: var(--surface-2); }

/* progress + history */
.histc .dd b { font: 600 21px/1 var(--hud); letter-spacing: -.035em; }
.histc .dd span { font: 500 11px/1 var(--txt); letter-spacing: 0; text-transform: none; }
.histc:hover, .prc:hover { background: var(--surface-2); }
#vg stop:nth-child(1) { stop-color: #0a62e0; }
#vg stop:nth-child(2) { stop-color: #5a9dff; }

/* workout summary */
.sum-hero .burst { background: var(--accent); color: #fff; border-radius: 24px; box-shadow: 0 16px 40px -12px rgba(10, 116, 255, .95); }

/* coach rings follow the brand too */
#cgc stop:nth-child(1) { stop-color: #7ab0ff; }
#cgc stop:nth-child(2) { stop-color: #2f86ff; }
#cgc stop:nth-child(3) { stop-color: #0a62e0; }

/* ═══ login ═══ */
body.login .brand small { font: 500 11px/1.2 var(--txt); letter-spacing: .14em; }
body.login .card h1 { letter-spacing: -.035em; font-weight: 650; }
body.login .card p { font-size: 14.5px; }
body.login .foot { font-size: 12.5px; }

/* muscle-map legend matches the figure's ramp */
.legend i { background: linear-gradient(90deg, #4a5466, #38bdf8 18%, #2f86ff 45%, #8b5cf6 75%, #f43f5e); }
.body3d .bview { fill: rgba(164, 172, 185, .55); font: 600 7.5px var(--txt); letter-spacing: .3em; }
.body3d.pick .bm { cursor: pointer; transition: filter .2s; }
.body3d.pick .bm:hover { filter: brightness(1.35); }

/* body maps fit their box at any width: the figure scales down instead of
   overflowing (on a wide screen the columns are wider than the box is tall) */
.prog-body > div, .ov-body > div, .focusmap > div { height: 100%; min-height: 0; overflow: hidden; }
.body3d { max-height: 100%; }