/* Shared look for the client app and the coach hub: midnight navy + champagne gold. */
:root{
  --bg:#ECEEF3;--surface:#FFFFFF;--surface-2:#F4F5F8;--line:#DCE0E8;
  --ink:#0E1626;--muted:#596377;--faint:#8992A3;--on-fill:#FFFFFF;
  --gold:#8E6B1D;--gold-fill:#C9A04A;--gold-ink:#1B1406;--gold-soft:rgba(201,160,74,.17);
  --good:#1B7F53;--good-fill:#22955F;--good-soft:rgba(34,149,95,.12);
  --bad:#B23A3A;--bad-soft:rgba(178,58,58,.1);
  --p1:#A88229;--p2:#3D7A8F;--p3:#8B5878;--p4:#4F6BAE;
  --p1s:rgba(201,160,74,.17);--p2s:rgba(61,122,143,.14);--p3s:rgba(139,88,120,.14);--p4s:rgba(79,107,174,.14);
  --hero-a:#0F1A2E;--hero-b:#24324F;--hero-fg:#F3EFE6;--hero-muted:#A8B2C6;--hero-track:rgba(243,239,230,.15);
  --shadow:0 1px 2px rgba(14,22,38,.05),0 6px 20px rgba(14,22,38,.06);
  --display:'Barlow Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080C14;--surface:#111826;--surface-2:#172031;--line:#232D41;
  --ink:#ECEFF5;--muted:#98A3B6;--faint:#6A758A;--on-fill:#FFFFFF;
  --gold:#DDBA6B;--gold-fill:#D2AD5B;--gold-ink:#17110A;--gold-soft:rgba(210,173,91,.15);
  --good:#4CC892;--good-fill:#2FA872;--good-soft:rgba(76,200,146,.14);
  --bad:#F07C7C;--bad-soft:rgba(240,124,124,.12);
  --p1:#D2AD5B;--p2:#5EA3BA;--p3:#BA86A7;--p4:#8EA6E0;
  --p1s:rgba(210,173,91,.15);--p2s:rgba(94,163,186,.16);--p3s:rgba(186,134,167,.16);--p4s:rgba(142,166,224,.16);
  --hero-a:#1A2642;--hero-b:#0E1628;--hero-fg:#F3EFE6;--hero-muted:#9CA8BE;--hero-track:rgba(243,239,230,.13);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#080C14;--surface:#111826;--surface-2:#172031;--line:#232D41;
  --ink:#ECEFF5;--muted:#98A3B6;--faint:#6A758A;--on-fill:#FFFFFF;
  --gold:#DDBA6B;--gold-fill:#D2AD5B;--gold-ink:#17110A;--gold-soft:rgba(210,173,91,.15);
  --good:#4CC892;--good-fill:#2FA872;--good-soft:rgba(76,200,146,.14);
  --bad:#F07C7C;--bad-soft:rgba(240,124,124,.12);
  --p1:#D2AD5B;--p2:#5EA3BA;--p3:#BA86A7;--p4:#8EA6E0;
  --p1s:rgba(210,173,91,.15);--p2s:rgba(94,163,186,.16);--p3s:rgba(186,134,167,.16);--p4s:rgba(142,166,224,.16);
  --hero-a:#1A2642;--hero-b:#0E1628;--hero-fg:#F3EFE6;--hero-muted:#9CA8BE;--hero-track:rgba(243,239,230,.13);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
button:disabled{opacity:.4;cursor:default}
a{color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--gold-fill);outline-offset:2px}
svg{display:block;flex:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}

.pad{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow.gold{color:var(--gold)}
.muted{color:var(--muted)}
.small{font-size:13px}
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.98}

.card{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.card.col{flex-direction:column;align-items:stretch;gap:10px}
.card.center{align-items:center;text-align:center}
.ctitle{font-size:17px;font-weight:800;letter-spacing:-.01em}
.csub{font-size:13px;color:var(--muted)}
.tail{color:var(--faint)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;font-size:16px;font-weight:800;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.btn.gold{background:var(--gold-fill);color:var(--gold-ink);box-shadow:0 8px 22px var(--gold-soft)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);min-height:44px;font-size:15px}
.btn.danger{background:var(--bad);color:var(--on-fill);min-height:44px;font-size:15px}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px}
.btn.wide{width:100%}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.txtbtn{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--gold);font-size:14px;padding:8px 2px;white-space:nowrap}
.avatar-pick{position:relative;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.avatar-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* Profile photo cropper (App.cropPhoto): the photo moves and zooms behind a round frame. */
.crop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(6,10,18,.72)}
.crop .box{width:min(100%,380px);display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:22px;background:var(--surface);color:var(--ink)}
.crop h2{margin:0;font-family:var(--display);font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.crop p{margin:0}
.crop .stage{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:16px;background:#000;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.crop .stage:active{cursor:grabbing}
.crop .stage img{position:absolute;left:50%;top:50%;max-width:none;pointer-events:none;-webkit-user-drag:none}
.crop .cropring{position:absolute;inset:6%;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 999px rgba(0,0,0,.55);pointer-events:none}
.crop input[type=range]{width:100%;accent-color:var(--gold-fill)}
.crop .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.txtbtn.ok{color:var(--good)}
.txtbtn.danger{color:var(--bad)}
.ib{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--ink);flex:none}
.ib:hover{background:var(--surface-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px;font-weight:600}
textarea.field{min-height:96px;resize:vertical;line-height:1.45}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field::placeholder{color:var(--faint);font-weight:500}
.hint{font-size:12.5px;color:var(--muted)}
.err{font-size:13.5px;font-weight:700;color:var(--bad)}
.fieldset{display:flex;flex-direction:column;gap:8px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 10px;border-radius:10px;font-size:12.5px;font-weight:700;background:var(--surface);border:1px solid var(--line)}
.pick{padding:10px 14px;border-radius:999px;font-size:14px;font-weight:700;background:var(--surface);border:1.5px solid var(--line)}
.pick[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold-fill);color:var(--gold)}
.pill{padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.grey{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}

.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;background:linear-gradient(140deg,var(--hero-a),var(--hero-b));color:var(--gold-fill);font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.05em;box-shadow:inset 0 0 0 1px var(--gold-soft)}
.av img{width:100%;height:100%;object-fit:cover}
.av.sm{width:36px;height:36px;font-size:14px}
.av.lg{width:84px;height:84px;font-size:30px}
.av.xl{width:112px;height:112px;font-size:38px}

.tile{position:relative;overflow:hidden;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;flex:none;background:linear-gradient(150deg,var(--hero-a),var(--hero-b));color:var(--gold-fill)}
.tile.sm{width:42px;height:42px;border-radius:11px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .vb{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--gold-fill);color:var(--gold-ink)}
.tile.sm .vb{right:3px;bottom:3px;width:14px;height:14px}

.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:22px;background:linear-gradient(145deg,var(--hero-a),var(--hero-b));color:var(--hero-fg);box-shadow:var(--shadow)}
.hero::after{content:"";position:absolute;right:-70px;top:-80px;width:220px;height:220px;border-radius:50%;border:1px solid var(--hero-track);pointer-events:none}

.empty{padding:6px 0;font-size:14px;color:var(--muted)}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold-fill);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center-screen{min-height:70vh;display:grid;place-items:center;text-align:center;padding:24px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:60;max-width:min(92vw,440px);padding:12px 16px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;box-shadow:var(--shadow)}
.toast.bad{background:var(--bad);color:var(--on-fill)}

.media{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;border-radius:20px;overflow:hidden;background:radial-gradient(120% 100% at 15% 0%,var(--hero-b),var(--hero-a));color:var(--gold-fill);text-decoration:none}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .ghost{position:absolute;opacity:.28}
.media .soon{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--hero-track);color:var(--hero-fg);font-size:12px;font-weight:700}
.playbig{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--gold-fill);color:var(--gold-ink)}
.vcap{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted)}
.vcap a{color:var(--gold);font-weight:800;text-decoration:none;white-space:nowrap}

.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.photo{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:12.5px;font-weight:700;text-align:center}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .tag{position:absolute;left:6px;bottom:6px;padding:3px 8px;border-radius:999px;background:rgba(8,12,20,.6);color:#F3EFE6;font-size:11px;font-weight:800;text-transform:capitalize}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer}

.spark path{fill:none;stroke:var(--gold-fill);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spark circle{fill:var(--gold-fill)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}