/* ============================================================
   360FIT MEMBER PLATFORM — shared design system
   Black + light blue brand (from fitin6.360fit.uk)
   Akshar display · DM Sans body. Reskin of the 360FIT tool DNA.
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --bg2:#0e0e0e;
  --card:#141414;
  --card2:#191919;
  --border:#222222;
  --border-hi:#2e2e2e;
  /* brand blue */
  --blue:#45a8f5;
  --blue-deep:#1863dc;
  --blue-glow:rgba(69,168,245,.12);
  --blue-border:rgba(69,168,245,.45);
  /* text */
  --white:#f1f1f1;
  --mid:#a8a8a8;
  --grey:#777777;
  --faint:#4a4a4a;
  /* status */
  --green:#3ddc84;
  --green-bg:rgba(61,220,132,.13);
  --amber:#f5b945;
  --amber-bg:rgba(245,185,69,.13);
  --red:#f0655a;
  --red-bg:rgba(240,101,90,.13);
  --pink:#ff6fb3;
  --pink-deep:#e0468f;
  --pink-glow:rgba(255,111,179,.13);
  --pink-border:rgba(255,111,179,.5);
  --r:14px;
  --shadow:0 18px 40px -22px rgba(0,0,0,.7);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'DM Sans',system-ui,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.bg-overlay{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 88% 6%, rgba(69,168,245,.08) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 4% 92%, rgba(24,99,220,.06) 0%, transparent 55%);
}
a{color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#262626;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- typography ---------- */
.display{font-family:'Akshar',sans-serif;font-weight:600;letter-spacing:.5px;line-height:1}
.label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.8px;color:var(--grey)}
.num{font-family:'Akshar',sans-serif;font-weight:600;line-height:1}
.blue{color:var(--blue)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 24px;border:none;border-radius:13px;cursor:pointer;text-decoration:none;
  font-family:'Akshar',sans-serif;font-size:17px;font-weight:600;letter-spacing:.9px;
  color:#04121f;background:linear-gradient(135deg,#62b6f8 0%,#2f86ec 52%,#1863dc 100%);
  box-shadow:0 7px 20px -5px rgba(24,99,220,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .16s, box-shadow .16s, filter .16s;position:relative;overflow:hidden;
}
.btn::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 13px 28px -6px rgba(24,99,220,.62), inset 0 1px 0 rgba(255,255,255,.45);filter:brightness(1.04)}
.btn:hover::after{left:135%}
.btn:active{transform:translateY(0);box-shadow:0 4px 12px -4px rgba(24,99,220,.5)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn.full{width:100%}
.btn.lg{padding:17px 26px;font-size:19px;letter-spacing:1.2px}
.btn.sm{padding:10px 16px;font-size:14px;letter-spacing:.4px;border-radius:10px}
.btn .bi{display:inline-flex;align-items:center}
.btn .bi svg{width:19px;height:19px;stroke-width:2}
.btn.ghost{background:transparent;border:1.5px solid var(--border-hi);color:var(--mid);box-shadow:none}
.btn.ghost::after{display:none}
.btn.ghost:hover{border-color:var(--blue);color:var(--white);background:var(--blue-glow);transform:translateY(-1px);box-shadow:none;filter:none}
.btn.dark{background:linear-gradient(135deg,#1c1c1c,#141414);color:var(--white);border:1px solid var(--border-hi);box-shadow:0 6px 16px -8px rgba(0,0,0,.8)}
.btn.dark .bi{color:var(--blue)}
.btn.dark:hover{border-color:var(--blue-border)}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px}
.card.pad-sm{padding:16px}
.card-h{font-family:'Akshar',sans-serif;font-weight:600;font-size:21px;letter-spacing:.5px;margin-bottom:4px}
.card-sub{font-size:13px;color:var(--grey);line-height:1.55;margin-bottom:18px}
.section-title{font-family:'Akshar',sans-serif;font-weight:600;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mid);margin:26px 0 12px}
.muted{color:var(--mid)}.faint{color:var(--grey)}

/* ---------- form ---------- */
.fg{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--grey)}
input,select,textarea{
  background:var(--bg);border:1px solid var(--border-hi);border-radius:9px;padding:11px 13px;
  color:var(--white);font-family:'DM Sans',sans-serif;font-size:15px;width:100%;
  transition:border-color .18s,box-shadow .18s;appearance:none;-webkit-appearance:none;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(69,168,245,.12)}
input::placeholder,textarea::placeholder{color:#3a3a3a}
select{cursor:pointer}select option{background:#191919}
/* the period picker in a page head - sits on the right of the title, same
   height as the heading block so it does not drag the row taller */
.sel{width:auto;min-width:148px;padding:9px 12px;font-size:13px}
textarea{resize:vertical;min-height:64px;line-height:1.5}

/* toggle pills */
.tog-row{display:flex;gap:8px;flex-wrap:wrap}
.tog{flex:1;min-width:64px;padding:11px;background:var(--bg);border:1px solid var(--border-hi);border-radius:9px;color:var(--grey);font-size:14px;font-weight:500;cursor:pointer;transition:all .18s;text-align:center;font-family:'DM Sans',sans-serif}
.tog.on{background:var(--blue-glow);border-color:var(--blue);color:var(--blue)}

/* 1-5 scale */
.scale{display:flex;gap:6px}
.scale .sdot{flex:1;aspect-ratio:1;max-width:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-hi);border-radius:9px;background:var(--bg);color:var(--grey);font-weight:600;cursor:pointer;transition:all .15s;font-size:14px}
.scale .sdot.on{background:var(--blue);border-color:var(--blue);color:#04121f}

/* ---------- TILE GRID (member hub — infographic cards) ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tile{
  position:relative;aspect-ratio:1/.96;border-radius:18px;padding:15px 15px 13px;cursor:pointer;
  background:linear-gradient(157deg,#181818 0%,#0e0e0e 100%);
  border:1px solid var(--border);display:flex;flex-direction:column;
  transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden;
}
.tile::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(150deg,var(--blue-border),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;transition:opacity .25s;pointer-events:none}
.tile:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 16px 34px -18px rgba(69,168,245,.55)}
.tile:hover::before{opacity:1}
.tile:hover .tile-chip{box-shadow:0 0 0 4px var(--blue-glow)}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
.tile-chip{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--blue);
  background:linear-gradient(150deg,rgba(69,168,245,.26),rgba(69,168,245,.05));border:1px solid var(--blue-border);transition:box-shadow .25s}
.tile-chip svg{width:23px;height:23px}
.tile-wm{position:absolute;right:-16px;bottom:-18px;color:var(--blue);opacity:.06;z-index:0;pointer-events:none}
.tile-wm svg{width:104px;height:104px;stroke-width:1.4}
.tile-meta{margin-top:auto;position:relative;z-index:1}
.tile-badge{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);background:var(--blue-glow);border:1px solid var(--blue-border);padding:3px 9px;border-radius:20px}
.tile-t{font-family:'Akshar',sans-serif;font-weight:600;font-size:19px;letter-spacing:.3px;line-height:1.04;margin-top:11px}
.tile-d{font-size:11px;color:var(--grey);line-height:1.4;margin-top:3px}
.tile-foot{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--blue);margin-top:9px;position:relative;z-index:1}
.tile-foot .fdot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 7px var(--blue)}
.tile-prog{height:6px;border-radius:5px;background:#1d1d1d;overflow:hidden;margin-top:9px;position:relative;z-index:1}
.tile-prog>span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.tile.span{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;align-items:center;gap:15px;padding:16px 18px}
.tile.span .tile-chip{flex-shrink:0}
.tile.span .tile-meta{flex:1;margin:0}
.tile.span .tile-t{margin-top:0}

/* ---------- stat cards ---------- */
.stat-row{display:grid;gap:10px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.stat .v{font-family:'Akshar',sans-serif;font-weight:600;font-size:30px;line-height:1;color:var(--blue)}
.stat .v.plain{color:var(--white)}
.stat .l{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey);margin-top:5px}
.stat .sub{font-size:11px;color:var(--mid);margin-top:3px}

/* macro/metric strip */
.mstrip{display:flex;gap:9px;flex-wrap:wrap}
.mbox{flex:1;min-width:70px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 8px;text-align:center}
.mbox .mv{font-family:'Akshar',sans-serif;font-weight:600;font-size:24px;color:var(--blue);line-height:1}
.mbox .ml{font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey);margin-top:4px}

/* weekly summary grid (all 12 metrics) */
.wsum{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ws{background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:11px 8px;text-align:center}
.ws .wv{font-family:'Akshar',sans-serif;font-weight:600;font-size:22px;color:var(--blue);line-height:1}
.ws .wl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--grey);margin-top:4px;line-height:1.2}

/* goal card (client) + banner (coach) */
.goal-card{background:linear-gradient(150deg,rgba(69,168,245,.15),rgba(16,16,16,.5));border:1px solid var(--blue-border);border-radius:16px;padding:18px;margin-bottom:16px}
.goal-card.editing{background:var(--card2)}
.goal-cat{display:inline-flex;align-items:center;gap:8px;font-family:'Akshar',sans-serif;font-weight:600;font-size:16px;letter-spacing:.4px;color:var(--blue)}
.goal-ic{display:inline-flex;color:var(--blue)}
.goal-ic svg{width:20px;height:20px}
.goal-why{font-size:15px;line-height:1.45;margin:11px 0 15px;color:var(--white)}
.goal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-top:1px solid var(--border);padding-top:14px}
.goal-stats .gs-v{font-family:'Akshar',sans-serif;font-weight:600;font-size:25px;color:var(--white);line-height:1}
.goal-stats .gs-v small{font-size:12px;color:var(--grey)}
.goal-stats .gs-l{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--grey);margin-top:4px}
.goal-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(150deg,rgba(69,168,245,.17),rgba(16,16,16,.4));border:1px solid var(--blue-border);border-radius:13px;padding:14px 16px;margin:14px 0 2px}
.goal-banner .goal-ic svg{width:24px;height:24px}
.goal-banner .gb-cat{font-family:'Akshar',sans-serif;font-weight:600;font-size:15px;color:var(--blue);letter-spacing:.3px}
.goal-banner .gb-why{font-size:13px;color:var(--white);margin-top:2px;line-height:1.35}
.goal-banner .gb-meta{text-align:right;flex-shrink:0}
.goal-banner .gb-meta>div:first-child{font-family:'Akshar',sans-serif;font-weight:600;font-size:20px}
.goal-banner .gb-meta .faint{font-size:11px}
.goal-banner.col{flex-direction:column;align-items:flex-start;gap:10px}
.goal-chips,.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gchip{font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-glow);border:1px solid var(--blue-border);padding:3px 10px;border-radius:20px}
.goal-foot{font-size:12.5px;color:var(--mid);margin-top:12px;border-top:1px solid var(--border);padding-top:11px}
.gp-grid{display:flex;flex-direction:column;width:100%}
.gp-row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--border);font-size:12.5px}
.gp-row:first-child{border-top:none}
.gp-l{color:var(--grey);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.6px;padding-top:1px}
.gp-v{color:var(--white);line-height:1.4}

/* challenges — track choice + female (pink) track */
.track-pick{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:6px}
.track-card{border-radius:16px;padding:24px 16px;text-align:center;cursor:pointer;border:1px solid var(--border);transition:transform .16s,box-shadow .16s}
.track-card .track-ic{display:inline-flex;margin-bottom:8px}
.track-card .track-t{font-family:'Akshar',sans-serif;font-weight:700;font-size:25px;letter-spacing:.5px}
.track-card .track-d{font-size:11.5px;color:var(--mid);margin-top:5px;line-height:1.4}
.track-card.male{background:linear-gradient(160deg,rgba(69,168,245,.16),rgba(16,16,16,.5));border-color:var(--blue-border)}
.track-card.male .track-ic,.track-card.male .track-t{color:var(--blue)}
.track-card.male:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(69,168,245,.55)}
.track-card.female{background:linear-gradient(160deg,var(--pink-glow),rgba(16,16,16,.5));border-color:var(--pink-border)}
.track-card.female .track-ic,.track-card.female .track-t{color:var(--pink)}
.track-card.female:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(255,111,179,.5)}
.lad-note{font-size:11.5px;color:var(--grey);margin:-3px 0 9px;font-style:italic}
.challenges-female .lad-cat .c{color:var(--pink)}
.challenges-female .lvl.done{border-color:var(--pink-border);background:linear-gradient(110deg,var(--pink-glow) 0%,var(--card) 60%)}
.challenges-female .lvl.done .lvl-tick{background:var(--pink);border-color:var(--pink);color:#1a0410}
.challenges-female .event.done{border-color:var(--pink-border);background:linear-gradient(160deg,var(--pink-glow),var(--card))}

/* benchmark inline editor */
.bm-edit{background:var(--card2);border:1px solid var(--blue-border);border-radius:11px;padding:14px;margin:-4px 0 12px}
.bm-edit .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bm-edit label{margin-bottom:5px}
.bm-edit .full{grid-column:1/-1}
.bench-edit-btn{background:none;border:1px solid var(--border-hi);color:var(--mid);width:34px;height:34px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.bench-edit-btn:hover{border-color:var(--blue);color:var(--blue)}
.bench-edit-btn svg{width:17px;height:17px}
.bm-note{font-size:11px;color:var(--mid);margin-top:5px;font-style:italic}

/* progress bar / ring */
.bar{height:8px;border-radius:6px;background:#202020;overflow:hidden}
.bar > span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.spark path{stroke:var(--blue)}
.ring-wrap{display:flex;align-items:center;justify-content:center}

/* pills / status */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;letter-spacing:.3px}
.pill.green{color:var(--green);background:var(--green-bg)}
.pill.amber{color:var(--amber);background:var(--amber-bg)}
.pill.red{color:var(--red);background:var(--red-bg)}
.pill.blue{color:var(--blue);background:var(--blue-glow)}
.pill.grey{color:var(--mid);background:#1d1d1d}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}

/* ---------- benchmark rows ---------- */
.bm{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:10px}
.bm-main{flex:1;min-width:0}
.bm-name{font-weight:600;font-size:14px}
.bm-sub{font-size:11px;color:var(--grey);margin-top:2px}
.bm-vals{display:flex;align-items:baseline;gap:14px;text-align:right}
.bm-cur{font-family:'Akshar',sans-serif;font-weight:600;font-size:26px;color:var(--white);line-height:1}
.bm-tgt{font-size:12px;color:var(--grey)}
.bm-tgt b{color:var(--blue);font-weight:600}
.pr-flag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#04121f;background:var(--green);padding:2px 7px;border-radius:5px;margin-left:6px}

/* ---------- challenges (bucket list) ---------- */
.ladder{margin-bottom:8px}
.lad-cat{font-family:'Akshar',sans-serif;font-weight:600;font-size:18px;letter-spacing:.5px;margin:18px 0 10px;display:flex;align-items:center;gap:9px}
.lad-cat .c{font-size:11px;color:var(--grey);font-family:'DM Sans',sans-serif;font-weight:600}
.lvl{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--card);margin-bottom:8px;position:relative}
.lvl.done{border-color:var(--blue-border);background:linear-gradient(110deg,var(--blue-glow) 0%,var(--card) 60%)}
.lvl-tick{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:2px solid var(--border-hi);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--grey)}
.lvl.done .lvl-tick{background:var(--blue);border-color:var(--blue);color:#04121f}
.lvl-body{flex:1;min-width:0}
.lvl-t{font-weight:600;font-size:14px}
.lvl.done .lvl-t{color:var(--white)}
.lvl-c{font-size:11.5px;color:var(--grey);margin-top:2px}
.lvl-n{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);font-weight:700}
.event-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.event{padding:13px 14px;border:1px solid var(--border);border-radius:11px;background:var(--card);text-align:center}
.event.done{border-color:var(--blue-border);background:linear-gradient(160deg,var(--blue-glow),var(--card))}
.event .ei{font-size:22px}
.event .et{font-weight:600;font-size:12.5px;margin-top:6px}
.event .es{font-size:10px;color:var(--grey);margin-top:3px}

/* ---------- content lists (hub sections) ---------- */
.acc{border:1px solid var(--border);border-radius:11px;margin-bottom:9px;overflow:hidden;background:var(--card)}
.acc-h{display:flex;align-items:center;gap:11px;padding:15px 16px;cursor:pointer;user-select:none}
.acc-h .ai{font-size:18px}
.acc-h .at{flex:1;font-weight:600;font-size:14.5px}
.acc-h .ar{color:var(--grey);transition:transform .2s;font-size:13px}
.acc.open .ar{transform:rotate(90deg);color:var(--blue)}
.acc-b{display:none;padding:0 16px 16px;font-size:13.5px;color:var(--mid);line-height:1.6}
.acc.open .acc-b{display:block}
.acc-b ul{margin:4px 0 0 2px;list-style:none}
.acc-b li{padding:7px 0 7px 20px;position:relative;border-top:1px solid var(--border)}
.acc-b li:first-child{border-top:none}
.acc-b li::before{content:'';position:absolute;left:2px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.linkout{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;background:var(--card);margin-bottom:8px;text-decoration:none;transition:all .16s}
.linkout:hover{border-color:var(--blue-border);transform:translateX(2px)}
.linkout .lt{font-weight:600;font-size:14px}
.linkout .ld{font-size:11px;color:var(--grey);margin-top:2px}
.linkout .lg{color:var(--blue);font-size:18px}
.vplaceholder{aspect-ratio:16/9;border-radius:12px;border:1px dashed var(--border-hi);background:linear-gradient(160deg,#141414,#0d0d0d);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--grey);margin-bottom:14px}

/* coach team cards */
.coach-list{display:flex;flex-direction:column;gap:12px}
.coach-card{background:var(--card);border:1px solid var(--border);border-radius:15px;overflow:hidden}
.coach-photo{position:relative;width:100%;aspect-ratio:3/2;background:linear-gradient(150deg,var(--blue-glow),#101010);display:flex;align-items:center;justify-content:center}
.coach-ini{font-family:'Akshar',sans-serif;font-weight:700;font-size:52px;color:var(--blue);opacity:.55;letter-spacing:1px}
.coach-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.coach-body{padding:15px 17px 17px}
.coach-name{font-family:'Akshar',sans-serif;font-weight:600;font-size:20px;letter-spacing:.3px}
.coach-role{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--blue);margin-top:2px}
.coach-facts{margin-top:13px;display:flex;flex-direction:column}
.cf{padding:9px 0;border-top:1px solid var(--border)}
.cf:first-child{border-top:none;padding-top:4px}
.cf-l{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--grey)}
.cf-v{font-size:13.5px;color:var(--white);line-height:1.5;margin-top:3px}
.vplaceholder .vp-ic{font-size:34px;color:var(--blue)}
.placeholder-note{font-size:11px;color:var(--amber);background:var(--amber-bg);border:1px solid rgba(245,185,69,.25);border-radius:8px;padding:9px 12px;margin-bottom:12px;line-height:1.5}
.vid-embed{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#000;margin-bottom:14px}
.vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- timeline (daily logs) ---------- */
.tl{position:relative;padding-left:18px}
.tl::before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 16px}
.tl-item::before{content:'';position:absolute;left:-18px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--bg)}
.tl-date{font-size:11px;color:var(--grey);font-weight:600;letter-spacing:.4px}
.tl-body{font-size:13px;color:var(--mid);margin-top:3px;line-height:1.5}

/* ================= CLIENT APP SHELL (mobile-first) ================= */
.client-wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:0 16px 96px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 2px 14px;position:sticky;top:0;background:linear-gradient(180deg,var(--bg) 70%,transparent);z-index:20}
.brand{display:flex;align-items:center;gap:9px}
.brand .logo{font-family:'Akshar',sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px}
.brand .logo b{color:var(--blue)}
.brand .tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin-top:-2px}
.tb-right{display:flex;align-items:center;gap:9px}
/* The only sign-out used to be in footer(), which renders on Home, Report and Goals
   - three screens of twelve, and at the very bottom of a long page. Anyone on any
   other screen, or part way through setup, had no way out at all. */
.tb-signout{background:transparent;border:1px solid var(--border-hi);color:var(--grey);font-size:11.5px;font-weight:600;padding:7px 12px;border-radius:100px;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap}
.tb-signout:hover{border-color:var(--blue);color:var(--blue)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-glow);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--blue);font-size:14px;font-family:'Akshar',sans-serif}
.greet{font-family:'Akshar',sans-serif;font-weight:600;font-size:26px;letter-spacing:.4px;margin:6px 2px 2px}
.greet-sub{font-size:13px;color:var(--grey);margin:0 2px 18px}
.cscreen{display:none;animation:fade .35s ease both}
.cscreen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--mid);background:none;border:none;cursor:pointer;padding:8px 0;font-family:'DM Sans',sans-serif;font-weight:600}
.back:hover{color:var(--blue)}
.screen-head{font-family:'Akshar',sans-serif;font-weight:600;font-size:28px;letter-spacing:.4px;margin:2px 0 3px}
.screen-intro{font-size:13px;color:var(--grey);line-height:1.55;margin-bottom:20px}

/* bottom nav */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(13,13,13,.92);backdrop-filter:blur(14px);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:9px 8px calc(9px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto}
.navb{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--grey);font-family:'DM Sans',sans-serif;padding:2px;transition:color .15s}
.navb .ni{display:flex;align-items:center;justify-content:center;width:42px;height:30px;border-radius:11px;transition:background .18s,box-shadow .18s}
.navb .ni svg{width:22px;height:22px}
.navb .nl{font-size:10px;font-weight:600;letter-spacing:.3px}
.navb.on{color:var(--blue)}
.navb.on .ni{background:var(--blue-glow);box-shadow:inset 0 0 0 1px var(--blue-border)}

/* ================= COACH APP SHELL (desktop) ================= */
.coach-shell{display:flex;min-height:100vh;position:relative;z-index:1}
.sidebar{width:236px;flex-shrink:0;border-right:1px solid var(--border);padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;background:var(--bg2)}
.sidebar .brand{padding:4px 8px 20px}
.navlink{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;color:var(--mid);cursor:pointer;font-size:14px;font-weight:600;transition:all .15s;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.navlink .nli{width:18px;text-align:center;font-size:15px}
.navlink:hover{background:#171717;color:var(--white)}
.navlink.on{background:var(--blue-glow);color:var(--blue)}
.navlink .badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--blue);color:#04121f;border-radius:20px;padding:1px 7px}
.sidebar .side-foot{margin-top:auto;font-size:10px;color:var(--faint);padding:8px;line-height:1.5}

/* coach cohorts */
.cohort-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.cohort-h{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);font-weight:700;padding:0 13px 8px}
.cohortlink{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;cursor:pointer;padding:8px 13px;border-radius:9px;color:var(--mid);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;transition:all .15s}
.cohortlink:hover{background:#171717;color:var(--white)}
.cohortlink.on{background:var(--blue-glow);color:var(--blue)}
.cohortlink .cn{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--grey);background:#1d1d1d;border-radius:20px;padding:1px 8px}
.cohortlink.on .cn{background:var(--blue);color:#04121f}
.cohort-sel{max-width:190px;padding:8px 11px;font-size:13px}
.main{flex:1;min-width:0;padding:26px 30px 60px;max-width:1280px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-family:'Akshar',sans-serif;font-weight:600;font-size:30px;letter-spacing:.4px}
.page-head p{font-size:13px;color:var(--grey);margin-top:3px}
.cscreen-c{display:none}.cscreen-c.active{display:block;animation:fade .3s ease both}

/* coach overview cards */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:17px 18px}
.kpi .kv{font-family:'Akshar',sans-serif;font-weight:600;font-size:34px;line-height:1;color:var(--white)}
.kpi.accent .kv{color:var(--blue)}
.kpi.warn .kv{color:var(--amber)}
.kpi.bad .kv{color:var(--red)}
.kpi .kl{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey);margin-top:7px}
.kpi .kd{font-size:11px;color:var(--mid);margin-top:4px}

/* filters */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:7px 14px;border:1px solid var(--border-hi);border-radius:20px;background:var(--card);color:var(--mid);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--blue-border);color:var(--white)}
.chip.on{background:var(--blue-glow);border-color:var(--blue);color:var(--blue)}
.toolbar .spacer{flex:1}
.search{max-width:230px}

/* table */
.tbl-wrap{border:1px solid var(--border);border-radius:13px;overflow:hidden;background:var(--card)}
table.roster{width:100%;border-collapse:collapse;font-size:13.5px}
table.roster thead th{text-align:left;padding:13px 14px;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--grey);font-weight:700;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none;background:var(--bg2)}
table.roster thead th:hover{color:var(--blue)}
table.roster thead th.sorted{color:var(--blue)}
table.roster tbody td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.roster tbody tr{cursor:pointer;transition:background .12s}
table.roster tbody tr:hover{background:#181818}
table.roster tbody tr:last-child td{border-bottom:none}
.cell-name{display:flex;align-items:center;gap:11px}
.cell-name .ava{width:34px;height:34px;border-radius:50%;background:#1d1d1d;border:1px solid var(--border-hi);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:var(--mid);font-family:'Akshar',sans-serif;flex-shrink:0}
.cell-name .nm{font-weight:600}
.cell-name .rl{font-size:11px;color:var(--grey)}
.mini-bar{width:74px;height:7px;border-radius:5px;background:#202020;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}
.mini-bar > span{display:block;height:100%}
.delta{font-weight:600}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}.delta.flat{color:var(--grey)}
.right{text-align:right}.center{text-align:center}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:opacity .25s;z-index:40}
.scrim.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100vh;width:600px;max-width:94vw;background:var(--bg2);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:50;overflow-y:auto;padding:24px 26px 50px}
.drawer.show{transform:translateX(0)}
/* A closed drawer is off screen but it takes .28s to slide there, and for those
   .28s it still sat over the roster and ate the click. Close one member, go
   straight for the next, nothing happens - which is the browsing-between-clients
   complaint. Nothing that is not open should be catching a click. */
.drawer:not(.show){pointer-events:none}
/* Sticky, not absolute. The drawer IS the scroll container, and an absolutely
   positioned child of a scroll container scrolls away with the content - so this
   sat 18px from the top of a very long report and went off screen the moment a
   coach scrolled down to read one. There was then no way out but a refresh.
   Not float:right - .dh below is a flex container, so it would shrink away from a
   float rather than sit under it and squash the member's name. A right aligned
   sticky block does the same job, and the -34px bottom margin hands the vertical
   space back so the header renders exactly where it always did. */
.drawer-x{position:sticky;top:18px;display:block;margin:0 0 -34px auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-hi);background:var(--card);color:var(--mid);cursor:pointer;font-size:16px;z-index:60}
.drawer-x:hover{color:var(--white);border-color:var(--blue-border)}
.dh{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.dh .ava{width:54px;height:54px;border-radius:50%;background:var(--blue-glow);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;color:var(--blue);font-family:'Akshar',sans-serif}
.dh h2{font-family:'Akshar',sans-serif;font-weight:600;font-size:24px;letter-spacing:.3px}
.dh .sub{font-size:12.5px;color:var(--grey)}
.drawer .sec{margin-top:22px}
.drawer .sec > .section-title{margin:0 0 11px}

/* footer */
.foot{text-align:center;padding:30px 10px 10px;color:var(--grey)}
.foot .ft{font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.foot a{color:var(--blue);text-decoration:none;font-size:12.5px;font-weight:600}
.foot a:hover{text-decoration:underline}

/* download bar (reused from 360 tools, reskinned blue) */
.dl-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--card);border:1.5px solid var(--blue);border-radius:12px;padding:13px 17px;margin-bottom:18px}
.dl-bar-txt{font-family:'Akshar',sans-serif;font-weight:600;font-size:17px;letter-spacing:.5px}
.dl-btn{background:var(--blue);color:#04121f;border:none;border-radius:9px;padding:11px 19px;cursor:pointer;font-family:'Akshar',sans-serif;font-weight:600;font-size:16px;letter-spacing:.6px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:all .18s}
.dl-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
body.capturing .dl-bar{display:none!important}

/* toast */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);background:#1c1c1c;border:1px solid var(--blue-border);color:var(--white);padding:12px 20px;border-radius:30px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .3s;z-index:120;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gap-sm{height:10px}.gap{height:18px}
hr.div{border:none;border-top:1px solid var(--border);margin:18px 0}

/* ---------- in-app tools (calorie + pace) ---------- */
.tool-hero{text-align:center;padding:28px 18px 24px;border-radius:16px;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(69,168,245,.16) 0%,rgba(14,14,14,.4) 70%);border:1px solid var(--blue-border)}
.tool-hero::before{content:'';position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(69,168,245,.22) 0%,transparent 70%)}
.tool-hero .th-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--grey);position:relative}
.tool-hero .th-num{font-family:'Akshar',sans-serif;font-weight:700;font-size:66px;line-height:1;color:var(--blue);text-shadow:0 0 42px rgba(69,168,245,.45);position:relative}
.tool-hero .th-unit{font-size:13px;color:var(--mid);margin-top:2px;position:relative}
.pace-list{margin-bottom:6px}
.prow{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border:1px solid var(--border);border-radius:11px;background:var(--card);margin-bottom:8px;border-left:3px solid var(--blue-border)}
.prow.hot{border-left-color:var(--blue)}
.prow .pz{font-weight:600;font-size:14px}
.prow .pd{font-size:11px;color:var(--grey);margin-top:2px}
.prow .pv{font-family:'Akshar',sans-serif;font-weight:600;font-size:21px;color:var(--blue);text-align:right}
.prow .pv small{font-size:11px;color:var(--grey);font-family:'DM Sans',sans-serif;font-weight:600}
.predict-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.predict{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 6px;text-align:center}
.predict .pdv{font-family:'Akshar',sans-serif;font-weight:600;font-size:18px;color:var(--white)}
.predict .pdl{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--grey);margin-top:3px}
.embed-wrap{margin:0 -2px}
.embed-frame{width:100%;height:74vh;border:1px solid var(--border);border-radius:14px;background:#0a0a0a;display:block}
.embed-tabs{display:flex;gap:8px;margin-bottom:12px}
.embed-tabs .et{flex:1;padding:10px;border:1px solid var(--border-hi);border-radius:10px;background:var(--card);color:var(--mid);font-weight:600;font-size:13px;text-align:center;cursor:pointer;font-family:'DM Sans',sans-serif}
.embed-tabs .et.on{background:var(--blue-glow);border-color:var(--blue);color:var(--blue)}
.tool-launch{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;margin-bottom:10px;cursor:pointer;
  background:linear-gradient(135deg,rgba(69,168,245,.13),rgba(20,20,20,.5));border:1px solid var(--blue-border);transition:transform .16s,box-shadow .16s}
.tool-launch:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(69,168,245,.5)}
.tool-launch .tli{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--blue);
  background:linear-gradient(150deg,rgba(69,168,245,.24),rgba(69,168,245,.05));border:1px solid var(--blue-border)}
.tool-launch .tli svg{width:24px;height:24px}
.tool-launch .tlt{font-family:'Akshar',sans-serif;font-weight:600;font-size:17px;letter-spacing:.3px}
.tool-launch .tld{font-size:11.5px;color:var(--mid);margin-top:2px}
.tool-launch .tlg{margin-left:auto;color:var(--blue);font-size:22px}

/* ---------- responsive ---------- */
@media(max-width:1100px){.kpi-row{grid-template-columns:repeat(3,1fr)}.main{padding:22px 18px 60px}}
@media(max-width:680px){
  .sidebar{display:none}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .coach-mobile-note{display:block}
}
@media(min-width:560px){
  .client-wrap{padding:0 18px 96px}
  .tiles{gap:15px}
}
.coach-mobile-note{display:none;background:var(--amber-bg);border:1px solid rgba(245,185,69,.3);color:var(--amber);padding:14px 16px;border-radius:11px;font-size:13px;margin-bottom:18px;line-height:1.5}

/* ---------- weight over time (member progress) ---------- */
.wr-pills{display:flex;gap:5px;flex-shrink:0}
.wr-pill{background:var(--bg);border:1px solid var(--border-hi);color:var(--grey);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer;transition:all .15s}
.wr-pill:hover{border-color:var(--blue-border);color:var(--white)}
.wr-pill.on{background:var(--blue-glow);border-color:var(--blue);color:var(--blue)}
.wchart-svg{display:block;margin-top:8px;width:100%;height:auto}

/* ---------- coach: daily nutrition (full month) ---------- */
.dn-scroll{max-height:340px;overflow-y:auto;border:1px solid var(--border);border-radius:11px}
.dn-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.dn-tbl thead th{position:sticky;top:0;background:var(--bg2);text-align:right;padding:9px 10px;font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--grey);font-weight:700;border-bottom:1px solid var(--border);z-index:1}
.dn-tbl thead th:first-child,.dn-tbl thead th:last-child{text-align:left}
.dn-tbl tbody td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:right;color:var(--white)}
.dn-tbl tbody tr:last-child td{border-bottom:none}
.dn-tbl tbody tr:hover td{background:#181818}
.dn-tbl .dn-day{text-align:left;font-weight:600}
.dn-tbl .dn-sess{text-align:left;color:var(--mid);font-size:11.5px}
.dn-well{font-weight:600}
.dn-well.green{color:var(--green)}.dn-well.amber{color:var(--amber)}.dn-well.red{color:var(--red)}

/* ---------- coach: dated notes list ---------- */
.note-list{display:flex;flex-direction:column;gap:9px;margin-bottom:13px}
.note-item{position:relative;background:var(--card);border:1px solid var(--border);border-radius:11px;padding:12px 14px}
.note-item.editing{border-color:var(--blue-border)}
.note-meta{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--grey);font-weight:700;margin-bottom:5px}
.note-text{font-size:13.5px;color:var(--white);line-height:1.5;white-space:pre-wrap;padding-right:56px}
.note-actions{position:absolute;top:11px;right:11px;display:flex;gap:6px}
.note-item.editing .note-actions{position:static;margin-top:9px}
.note-act{width:28px;height:28px;border-radius:8px;border:1px solid var(--border-hi);background:var(--card2);color:var(--mid);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;font-size:13px}
.note-act:hover{border-color:var(--blue);color:var(--blue)}
.note-act.del:hover{border-color:var(--red);color:var(--red)}
.note-add textarea{min-height:58px}

/* ============================================================
   AI MEMBER REPORT (weekly + monthly) — member app + coach drawer
   ============================================================ */
.ar-toggle{display:flex;gap:7px;margin-bottom:14px}
.ar-tg{flex:1;padding:11px;background:var(--bg);border:1px solid var(--border-hi);border-radius:10px;color:var(--grey);font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .16s}
.ar-tg.on{background:var(--blue-glow);border-color:var(--blue);color:var(--blue)}
.ar-toggle.sm{margin:0;max-width:190px}.ar-toggle.sm .ar-tg{padding:7px 12px;font-size:12px}
.ar-coach-note{font-size:11.5px;color:var(--grey);font-style:italic;margin-bottom:12px}

.ar-head{background:linear-gradient(160deg,rgba(69,168,245,.16),rgba(16,16,16,.4));border:1px solid var(--blue-border);border-radius:18px;padding:22px 22px;margin-bottom:14px}
.ar-k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:7px}
.ar-title{font-family:'Akshar',sans-serif;font-weight:600;font-size:27px;letter-spacing:.3px;line-height:1.05;margin-bottom:14px}
.ar-score{display:flex;align-items:center;gap:16px}
.ar-score-l{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--grey);font-weight:700;margin-bottom:4px}
.ar-summary p{font-size:14px;color:var(--white);line-height:1.5}
.ar-summary-p{font-size:14.5px;color:var(--mid);line-height:1.55}
.ar-summary-p b{color:var(--white)}

.arsec{background:var(--card);border:1px solid var(--border);border-radius:15px;padding:18px 19px;margin-bottom:13px;break-inside:avoid}
.arsec-h{font-family:'Akshar',sans-serif;font-weight:600;font-size:16px;letter-spacing:.6px;margin-bottom:14px;color:var(--white)}
.ar-say{font-size:13.5px;color:var(--mid);line-height:1.55;margin-top:13px}
.ar-foot-note{font-size:11px;color:var(--grey);line-height:1.5;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-style:italic}

.ar-bar-row{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:11px;margin-bottom:9px}
.ar-bar-l{font-size:12px;color:var(--mid)}
.ar-bar-v{font-family:'Akshar',sans-serif;font-weight:600;font-size:14px;color:var(--blue);text-align:right}

.ar-lvl{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--border)}
.ar-lvl:first-of-type{border-top:none}
.ar-lvl-ic{font-size:20px;flex-shrink:0}
.ar-lvl-main{flex:1;min-width:0}
.ar-lvl-name{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-lvl-badge{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--blue);background:var(--blue-glow);border:1px solid var(--blue-border);padding:2px 8px;border-radius:20px}
.ar-lvl-next{font-size:11px;color:var(--grey);margin-top:5px}
.ar-lvl-cur{font-family:'Akshar',sans-serif;font-weight:600;font-size:19px;color:var(--white);flex-shrink:0}

.ar-win,.ar-opp{border-radius:14px;padding:16px 18px;margin-bottom:13px;break-inside:avoid}
.ar-win{background:var(--green-bg);border:1px solid rgba(61,220,132,.4);border-left:4px solid var(--green)}
.ar-opp{background:var(--amber-bg);border:1px solid rgba(245,185,69,.4);border-left:4px solid var(--amber)}
.ar-win p,.ar-opp p{font-size:14px;color:var(--white);line-height:1.5}
.ar-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;margin-bottom:8px;display:inline-block}
.ar-badge.win{color:var(--green)}.ar-badge.opp{color:var(--amber)}

.ar-focus{margin:0;padding-left:0;list-style:none;counter-reset:arf}
.ar-focus li{counter-increment:arf;position:relative;padding:11px 0 11px 40px;border-top:1px solid var(--border);font-size:14px;color:var(--white);line-height:1.45}
.ar-focus li:first-child{border-top:none}
.ar-focus li b{color:var(--blue)}
.ar-focus li::before{content:counter(arf);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:50%;background:var(--blue-glow);border:1px solid var(--blue-border);color:var(--blue);font-family:'Akshar',sans-serif;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center}

.ar-pot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.ar-pot-col{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:12px 13px}
.ar-pot-h{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--grey);font-weight:700;margin-bottom:9px}
.ar-pot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--mid);padding:4px 0}
.ar-pot-since{font-size:12px;color:var(--white);padding:5px 0;border-top:1px solid var(--border);line-height:1.35}
.ar-pot-since:first-child{border-top:none}
.ar-d{font-weight:600;font-size:11.5px;white-space:nowrap}
.ar-d.up{color:var(--green)}.ar-d.down{color:var(--red)}.ar-d.flat{color:var(--grey)}

.ar-levelup{background:linear-gradient(150deg,var(--green-bg),rgba(16,16,16,.4));border:1px solid rgba(61,220,132,.4);border-radius:15px;padding:18px 19px;margin-bottom:13px;break-inside:avoid}
.ar-lu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px}
.ar-lu{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:13px;text-align:center}
.ar-lu-ic{font-size:22px}
.ar-lu-name{font-weight:600;font-size:12.5px;margin-top:5px}
.ar-lu-move{font-size:11px;color:var(--mid);margin-top:3px}
.ar-lu-move b{color:var(--green)}

.ar-sc-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:11px}
.ar-sc{width:100%;border-collapse:collapse;font-size:12.5px;min-width:340px}
.ar-sc thead th{text-align:right;padding:10px 12px;font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--grey);font-weight:700;border-bottom:1px solid var(--border);background:var(--bg2)}
.ar-sc thead th:first-child{text-align:left}
.ar-sc tbody td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:right;color:var(--white);font-family:'Akshar',sans-serif;font-weight:500}
.ar-sc tbody tr:last-child td{border-bottom:none}
.ar-sc .ar-sc-l{text-align:left;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--mid)}
.ar-sc .ar-d{font-family:'DM Sans',sans-serif}

.ar-s2w{display:flex;align-items:center;gap:14px;margin-top:14px}
.ar-s2w-col{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:13px;text-align:center}
.ar-s2w-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--grey);font-weight:700}
.ar-s2w-v{font-family:'Akshar',sans-serif;font-weight:600;font-size:26px;margin-top:5px;color:var(--white)}
.ar-s2w-v.hl{color:var(--blue)}
.ar-s2w-t{font-size:10px;color:var(--grey);margin-top:2px}
.ar-s2w-arrow{color:var(--blue);font-size:20px;flex-shrink:0}

@media(max-width:520px){.ar-pot{grid-template-columns:1fr}.ar-bar-row{grid-template-columns:110px 1fr 36px}}

/* ---- meal plan builder (ported from 360calorie 12 Aug 2026) ----
   Deliberately built on the existing tokens and the .card / .mstrip components
   so a reskin lands on this for free. */
.slot-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.slot-name{font-family:'Akshar',sans-serif;font-weight:600;font-size:17px;color:var(--white)}
.slot-target{font-size:11px;color:var(--grey);font-weight:600;white-space:nowrap}
.slot-select{width:100%;margin-top:9px;padding:10px 12px;border-radius:10px;background:var(--card2);
  border:1px solid var(--border-hi);color:var(--white);font-family:'DM Sans',sans-serif;font-size:13.5px;
  font-weight:600;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(1em + 1px),calc(100% - 12px) calc(1em + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.slot-select:focus{outline:none;border-color:var(--blue-border)}
.ing-list{border-top:1px solid var(--border);padding-top:8px}
.ing-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;color:var(--mid)}
.ing-row span:last-child{color:var(--white);font-weight:600;white-space:nowrap}
.meal-note{margin-top:9px;font-size:11.5px;color:var(--grey);font-style:italic}

/* ============================================================================
   MOMENTUM — the direction Ben picked, 12 Aug 2026.
   A visual layer, NOT a restructure: every selector below overrides an existing
   component, the markup and the information architecture are unchanged, because
   Ian signed those off on 11 Aug.
   Scoped to body.momentum, which only client/index.html carries — the coach
   console shares this stylesheet and must stay as it is.
   The idea: this is a performance brand, not a spreadsheet. The number is the
   hero graphic. Type gets bigger and tighter, the grid breaks sideways, and
   light moves behind everything.
   ============================================================================ */
body.momentum{--r:20px}

/* ---- atmosphere: a slow field of light, plus grain so gradients don't band ---- */
body.momentum .bg-overlay{
  inset:-20% -20% auto -20%;height:130vh;
  background:
    radial-gradient(38% 26% at 22% 10%,rgba(24,99,220,.30),transparent 62%),
    radial-gradient(34% 22% at 84% 28%,rgba(69,168,245,.17),transparent 62%),
    radial-gradient(46% 30% at 50% 76%,rgba(24,99,220,.11),transparent 66%);
  filter:blur(18px);animation:mo-drift 24s ease-in-out infinite alternate;
}
@keyframes mo-drift{to{transform:translate3d(-3%,3%,0) scale(1.1)}}
body.momentum .mo-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- editorial type ---- */
body.momentum .greet{font-size:40px;letter-spacing:-1.4px;line-height:.98;margin:14px 0 2px;font-weight:600}
body.momentum .greet-sub{font-size:13.5px;color:var(--grey);margin:8px 2px 22px;letter-spacing:.1px}
body.momentum .screen-head{font-size:38px;letter-spacing:-1.2px;line-height:1;margin:6px 0 6px}
body.momentum .screen-intro{font-size:14px;line-height:1.6;margin-bottom:24px;max-width:34ch}
body.momentum .card-h{font-size:24px;letter-spacing:-.4px}

/* section titles become kickers with a leading rule */
body.momentum .section-title{
  font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:2.4px;
  color:var(--blue);display:flex;align-items:center;gap:10px;margin:34px 0 14px;
}
body.momentum .section-title::before{content:'';width:22px;height:2px;background:var(--blue);flex-shrink:0}
body.momentum .label{font-size:10.5px;letter-spacing:2.2px;color:var(--blue);font-weight:700}

/* ---- the number as hero graphic ---- */
body.momentum .num{letter-spacing:-1.4px}
body.momentum .tool-hero{border-radius:var(--r);padding:34px 20px 30px}
body.momentum .tool-hero .th-num{
  font-size:76px;letter-spacing:-3.4px;line-height:.88;
  background:linear-gradient(170deg,#fff 8%,var(--blue) 58%,var(--blue-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.momentum .tool-hero .th-tag{letter-spacing:2.4px;color:var(--blue);font-weight:700;font-size:10.5px}

/* ---- surfaces: glass, rounder, lifted ---- */
body.momentum .card{
  border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);border-color:var(--border);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.9);
}
body.momentum .mbox{border-radius:14px;background:rgba(255,255,255,.04);padding:14px 8px}
body.momentum .mbox .mv{font-family:'Akshar',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.6px}
body.momentum .acc{border-radius:16px;overflow:hidden}
body.momentum .linkout{border-radius:16px}

/* ---- tiles: the grid breaks sideways, and the type grows ---- */
body.momentum .tiles{gap:14px}
body.momentum .tile{
  border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.016));
  backdrop-filter:blur(8px);box-shadow:0 20px 40px -22px rgba(0,0,0,.9);
}
body.momentum .tile:nth-child(odd){margin-left:-4px}
body.momentum .tile:nth-child(even){margin-right:-4px;transform:translateY(10px)}
body.momentum .tile:nth-child(even):hover{transform:translateY(7px)}
body.momentum .tile.span{margin:0;transform:none}
body.momentum .tile.span:hover{transform:translateY(-3px)}
body.momentum .tile-t{font-size:21px;letter-spacing:-.4px;line-height:1.02;margin-top:13px}
body.momentum .tile-d{font-size:11.5px;margin-top:5px}
body.momentum .tile-foot{letter-spacing:1.6px;font-size:9.5px}

/* ---- benchmarks: a headline, not a table row ---- */
body.momentum .bm{
  display:block;padding:20px;border-radius:var(--r);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);box-shadow:0 20px 40px -22px rgba(0,0,0,.9);margin-bottom:14px;
}
body.momentum .bm-name{font-family:'Akshar',sans-serif;font-weight:600;font-size:22px;letter-spacing:-.4px}
body.momentum .bm-sub{font-size:12.5px;margin-top:4px}
body.momentum .bm-vals{text-align:left;margin-top:16px;gap:22px}
body.momentum .bm-cur{font-family:'Akshar',sans-serif;font-weight:700;font-size:42px;letter-spacing:-1.8px;line-height:.95}
body.momentum .bm-tgt{font-size:12.5px;color:var(--grey);margin-top:6px}
body.momentum .bm-note{font-size:12.5px;margin-top:10px}

/* ---- levels as a run of chevrons that lift ---- */
body.momentum .lvl{border-radius:14px;transition:transform .3s cubic-bezier(.34,1.5,.5,1)}
body.momentum .lvl.done{
  background:linear-gradient(150deg,rgba(69,168,245,.26),rgba(24,99,220,.10) 70%);
  border-color:rgba(69,168,245,.5);
}
body.momentum .lvl-t{font-family:'Akshar',sans-serif;font-weight:600;font-size:16px;letter-spacing:-.2px}
body.momentum .lad-cat{font-size:24px;letter-spacing:-.5px;margin:30px 0 12px}
body.momentum .lad-note{
  font-style:normal;font-size:13px;color:var(--mid);line-height:1.75;
  background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:16px;padding:15px 17px;margin:2px 0 14px;
}
body.momentum .lad-note b{color:var(--white);font-weight:600;display:block;margin-bottom:8px;letter-spacing:-.1px}

/* ---- buttons and the nav go pill-shaped ---- */
body.momentum .btn{border-radius:100px;letter-spacing:.6px}
body.momentum .btn.sm{border-radius:100px}
body.momentum .bottomnav{
  left:14px;right:14px;bottom:14px;max-width:432px;border-radius:100px;border:1px solid var(--border-hi);
  background:rgba(18,18,20,.84);backdrop-filter:blur(20px) saturate(160%);padding:6px;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.95);
}
body.momentum .navb{border-radius:100px;padding:8px 0;gap:2px;transition:.24s}
body.momentum .navb.on{background:linear-gradient(180deg,var(--blue),var(--blue-deep));color:#04131f;font-weight:700}
body.momentum .navb.on .ni{background:none;box-shadow:none;color:#04131f}
body.momentum .client-wrap{padding-bottom:96px}

/* ---- meal builder picks up the same language ---- */
body.momentum .slot-name{font-size:20px;letter-spacing:-.3px}
body.momentum .slot-select{border-radius:14px}
body.momentum .ing-row{font-size:13px}

/* ---- one orchestrated arrival per screen, rather than scattered fidgets ---- */
body.momentum #view>*{animation:mo-rise .55s cubic-bezier(.2,.8,.2,1) both}
body.momentum #view>*:nth-child(1){animation-delay:.01s}
body.momentum #view>*:nth-child(2){animation-delay:.06s}
body.momentum #view>*:nth-child(3){animation-delay:.11s}
body.momentum #view>*:nth-child(4){animation-delay:.16s}
body.momentum #view>*:nth-child(5){animation-delay:.21s}
body.momentum #view>*:nth-child(6){animation-delay:.26s}
body.momentum #view>*:nth-child(n+7){animation-delay:.3s}
@keyframes mo-rise{from{opacity:0;transform:translateY(18px)}}
@media(prefers-reduced-motion:reduce){
  body.momentum #view>*{animation:none}
  body.momentum .bg-overlay{animation:none}
}

/* ============================================================
   360SuperBase + 360RunBase — the two names Ian settled on the call.
   Built off the existing brand rather than beside it: same Akshar, same blue,
   same near-black. "360" stays light and the name carries the weight, which is
   exactly how the 360FIT lockup already reads, so these sit as members of one
   family instead of three competing logos.
   ============================================================ */
.wordmark{font-family:'Akshar',sans-serif;font-weight:700;letter-spacing:.4px;line-height:1;color:var(--ink)}
.wordmark .n{font-weight:400;opacity:.72}          /* the "360" */
.wordmark .a{color:var(--blue)}                    /* the name */

/* the identity block that heads a section */
.ident{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r,16px);
  background:linear-gradient(135deg,rgba(69,168,245,.14),rgba(20,20,20,.6));padding:20px 20px 18px;margin-bottom:14px}
.ident::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(69,168,245,.20),transparent 70%);pointer-events:none}
.ident .wordmark{font-size:30px}
.ident .id-sub{font-size:12.5px;color:var(--mid);margin-top:8px;line-height:1.55;max-width:34ch;position:relative}
.ident .id-kick{font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--blue);margin-bottom:9px}

body.momentum .ident{border-radius:20px}
body.momentum .ident .wordmark{font-size:34px}