/* ============================================================================
   MISSION CONTROL — body-tracker mobile UI design system
   Dark tactical HUD. OLED near-black + HUD cyan. Mono numerals, corner brackets,
   scanline grid, cell bars, status LEDs, reticle empty states.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* surfaces — OLED near-black, cold blue cast */
  --bg0:#04060a; --bg1:#070b12;
  --panel:#0b1119; --panel2:#101a26; --panel3:#162231;
  --line:#1a2534; --line2:#25384e; --line-acc:rgba(65,230,255,.30);

  /* text */
  --txt:#e9f4f7; --txt2:#b1c3ce; --mut:#7c90a2; --faint:#53687c;

  /* THE accent — HUD cyan */
  --acc:#41e6ff; --acc-press:#24c4e0; --acc-ink:#03242c;
  --acc-tint:rgba(65,230,255,.12); --acc-glow:rgba(65,230,255,.38);

  /* semantic */
  --good:#3ddc84; --good-tint:rgba(61,220,132,.12);
  --warn:#ffb020; --warn-tint:rgba(255,176,32,.12);
  --bad:#ff4d5e;  --bad-tint:rgba(255,77,94,.12);

  /* session categories */
  --push:#ff5c7a; --pull:#4f8dff; --legs:#c774ff; --vtaper:#ffd166; --rest:#46586c;

  /* type */
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","SFMono-Regular","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* radii — sharp/tactical */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* elevation = flat + hairline + glow */
  --e1:0 8px 24px -12px rgba(0,0,0,.65);
  --glow:0 0 12px var(--acc-glow);
  --dock-h:64px;
  --ribbon-h:46px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
html { -webkit-text-size-adjust:100%; }

body {
  font-family:var(--font-ui);
  color:var(--txt);
  background:var(--bg0);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}

/* radial base wash */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #0a1420 0%, var(--bg1) 40%, var(--bg0) 100%);
}

/* scanline + grid texture, below content */
body::after {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(120,200,230,.014) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(65,230,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,230,255,.022) 1px, transparent 1px),
    radial-gradient(140% 60% at 50% 0%, rgba(65,230,255,.05), transparent 55%);
  background-size:100% 3px, 44px 44px, 44px 44px, 100% 100%;
  opacity:.9;
}

#fxbg {
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none; display:block;
}

.hidden { display:none !important; }
.sr-only {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important;
}

:where(button, [href], input, select, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--acc);
  outline-offset:2px;
}

/* mono numeral helper */
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.micro {
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mut);
}
.micro-acc { color:var(--acc); }

/* ------------------------------------------------------------------ app shell */
#app { position:relative; z-index:2; }

.appmain {
  position:relative; z-index:2;
  max-width:620px; margin:0 auto;
  padding:var(--s3) var(--s4);
  padding-top:calc(var(--ribbon-h) + var(--s3));
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 84px);
  min-height:100dvh;
}

.view { display:flex; flex-direction:column; gap:var(--s4); }

/* ------------------------------------------------------------------ status ribbon */
.ribbon {
  position:fixed; top:0; left:0; right:0; z-index:20;
  height:calc(var(--ribbon-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex; align-items:center; gap:var(--s3);
  padding-left:var(--s4); padding-right:var(--s3);
  background:linear-gradient(180deg, rgba(4,6,10,.94), rgba(4,6,10,.72) 70%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.ribbon-brand {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-weight:700; font-size:12.5px; letter-spacing:.12em;
  color:var(--txt); white-space:nowrap;
}
.ribbon-brand .glyph {
  width:9px; height:9px; border:1.5px solid var(--acc); border-radius:2px;
  box-shadow:0 0 8px var(--acc-glow); transform:rotate(45deg);
}
.ribbon-read {
  flex:1; min-width:0;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--mut); text-transform:uppercase; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ribbon-read b { color:var(--acc); font-weight:600; }
.icon-btn {
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line2); border-radius:var(--r-md);
  color:var(--txt2); cursor:pointer; font-size:15px;
}
.icon-btn:active { background:var(--panel2); }

/* ------------------------------------------------------------------ tab dock */
.dock {
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:stretch;
  background:linear-gradient(0deg, rgba(4,6,10,.97), rgba(4,6,10,.82));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; background:none; border:0; cursor:pointer; position:relative;
  color:var(--faint); font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:6px 2px;
  -webkit-tap-highlight-color:transparent;
}
.tab svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
.tab.on { color:var(--acc); }
.tab.on::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; background:var(--acc); border-radius:0 0 3px 3px;
  box-shadow:0 0 10px var(--acc-glow);
}

/* desktop: floating pill dock */
@media (min-width:761px) {
  .dock {
    left:50%; right:auto; transform:translateX(-50%); bottom:18px;
    width:min(480px, 92vw); height:60px; padding-bottom:0;
    border:1px solid var(--line2); border-radius:var(--r-pill);
    box-shadow:var(--e1), 0 0 0 1px rgba(65,230,255,.06);
  }
  .appmain { padding-bottom:120px; }
}

/* ------------------------------------------------------------------ FAB */
.fab {
  position:fixed; z-index:21; right:16px;
  bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 14px);
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(145deg, var(--acc), var(--acc-press));
  color:var(--acc-ink); border:0; cursor:pointer;
  display:grid; place-items:center; font-size:28px; font-weight:300; line-height:1;
  box-shadow:0 6px 20px -4px rgba(65,230,255,.5), 0 0 0 1px rgba(255,255,255,.15) inset;
}
.fab:active { transform:scale(.94); }
.fab.pulse { animation:fabpulse 2.4s ease-in-out infinite; }
@keyframes fabpulse {
  0%,100% { box-shadow:0 6px 20px -4px rgba(65,230,255,.5), 0 0 0 1px rgba(255,255,255,.15) inset; }
  50% { box-shadow:0 6px 30px 0 rgba(65,230,255,.75), 0 0 0 1px rgba(255,255,255,.2) inset; }
}
@media (min-width:761px) { .fab { right:calc(50% - 280px); bottom:92px; } }

/* ------------------------------------------------------------------ cards */
.card {
  position:relative;
  background:linear-gradient(180deg, var(--panel), rgba(11,17,25,.7));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s4);
  box-shadow:var(--e1);
}
.card.pad-sm { padding:var(--s3); }

/* corner brackets */
.crn::before, .crn::after {
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border-color:var(--line2); border-style:solid; border-width:0;
}
.crn::before { top:7px; left:7px; border-top-width:1.5px; border-left-width:1.5px; }
.crn::after { bottom:7px; right:7px; border-bottom-width:1.5px; border-right-width:1.5px; }
.crn-acc { border-color:var(--line-acc); }
.crn-acc::before, .crn-acc::after { border-color:var(--acc); box-shadow:0 0 6px var(--acc-glow); }

/* ------------------------------------------------------------------ view head */
.view-head {
  display:flex; align-items:center; gap:10px;
  padding:2px 0 0;
}
.view-head .bar { width:3px; height:18px; background:var(--acc); border-radius:2px; box-shadow:0 0 8px var(--acc-glow); }
.view-head h2 {
  font-family:var(--font-mono); font-size:16px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt);
}
.view-head .meta {
  margin-left:auto; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.08em; color:var(--faint); text-transform:uppercase;
}

.card h3 {
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mut);
  margin-bottom:var(--s3);
}
.cap { font-size:11.5px; color:var(--mut); line-height:1.5; }

/* ------------------------------------------------------------------ buttons / inputs */
button.btn, .btn {
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--acc); color:var(--acc-ink); border:0; border-radius:var(--r-md);
  padding:13px 18px; cursor:pointer; min-height:44px;
  transition:filter .12s, transform .06s;
}
.btn:active { transform:translateY(1px); filter:brightness(1.08); }
.btn.full { width:100%; }
.btn.ghost {
  background:transparent; color:var(--txt2); border:1px solid var(--line2);
}
.btn.ghost:active { background:var(--panel2); }
.btn.sm { padding:8px 12px; min-height:44px; font-size:11px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

input, select, textarea {
  font-family:var(--font-ui); font-size:15px; color:var(--txt);
  background:var(--bg1); border:1px solid var(--line2); border-radius:var(--r-md);
  padding:12px 12px; width:100%; min-height:44px;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-tint);
}
input.mono, input[type=number] { font-family:var(--font-mono); }
label.fld {
  display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
  margin:0 0 5px 2px;
}
select {
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--mut) 50%), linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}

/* segmented control */
.seg {
  display:flex; gap:4px; background:var(--bg1); border:1px solid var(--line);
  border-radius:var(--r-md); padding:4px;
}
.seg-btn {
  flex:1; background:none; border:0; cursor:pointer; border-radius:var(--r-sm);
  padding:9px 6px; min-height:44px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mut); white-space:nowrap;
}
.seg-btn.on { background:var(--acc-tint); color:var(--acc); box-shadow:inset 0 0 0 1px var(--line-acc); }

.filebtn { display:block; }
.filebtn-ui {
  display:flex; align-items:center; gap:8px; justify-content:center;
  border:1px dashed var(--line2); border-radius:var(--r-md); padding:12px;
  color:var(--txt2); font-size:13px; cursor:pointer; min-height:44px;
}
.filebtn:focus-within .filebtn-ui, .attach:focus-within .attach-ui {
  outline:2px solid var(--acc); outline-offset:2px;
}

/* ------------------------------------------------------------------ cell bars */
.cellbar {
  position:relative; height:8px; border-radius:var(--r-xs);
  background:var(--bg1); overflow:hidden; border:1px solid var(--line);
}
.cellbar > span {
  position:absolute; left:0; top:0; bottom:0; display:block;
  background:var(--acc);
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px);
  mask:repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px);
  box-shadow:0 0 8px var(--acc-glow);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.cellbar.p > span { background:var(--good); box-shadow:0 0 8px var(--good-tint); }
.cellbar.c > span { background:var(--pull); }
.cellbar.f > span { background:var(--vtaper); }
.cellbar.tall { height:12px; }
.cellbar.over > span {
  background:repeating-linear-gradient(45deg, var(--bad) 0 6px, #c2384a 6px 12px) !important;
  -webkit-mask:none; mask:none; box-shadow:0 0 10px var(--bad-tint) !important;
}
/* pace tick overlay for burn-down */
.cellbar .tick {
  position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--txt2);
  box-shadow:0 0 4px rgba(0,0,0,.6); z-index:2; border-radius:1px;
}

/* macro/readout row */
.metricrow { display:flex; flex-direction:column; gap:6px; }
.metricrow .top { display:flex; justify-content:space-between; align-items:baseline; }
.metricrow .lab { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.metricrow .val { font-family:var(--font-mono); font-size:12.5px; color:var(--txt); font-variant-numeric:tabular-nums; }
.metricrow.hi .lab { color:var(--good); }

/* readout row with dotted leader */
.readout { display:flex; align-items:baseline; gap:8px; padding:3px 0; }
.readout .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); white-space:nowrap; }
.readout .lead { flex:1; border-bottom:1px dotted var(--faint); transform:translateY(-3px); min-width:12px; }
.readout .v { font-family:var(--font-mono); font-size:12.5px; color:var(--txt); font-variant-numeric:tabular-nums; white-space:nowrap; }
.readout .v.acc { color:var(--acc); }
.readout .v.good { color:var(--good); }
.readout .v.bad { color:var(--bad); }

/* ------------------------------------------------------------------ LEDs & chips */
.led { display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; flex:none; }
.led-good { color:var(--good); } .led-warn { color:var(--warn); } .led-bad { color:var(--bad); } .led-acc { color:var(--acc); } .led-mut { color:var(--faint); }
.led-pulse { animation:ledpulse 2s ease-in-out infinite; }
@keyframes ledpulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  padding:4px 9px; border-radius:var(--r-pill); text-transform:uppercase;
  background:var(--panel2); color:var(--txt2); border:1px solid var(--line2);
}
.chip.acc { background:var(--acc-tint); color:var(--acc); border-color:var(--line-acc); }
.chip.good { background:var(--good-tint); color:var(--good); border-color:rgba(61,220,132,.3); }
.chip.warn { background:var(--warn-tint); color:var(--warn); border-color:rgba(255,176,32,.3); }
.chip.bad { background:var(--bad-tint); color:var(--bad); border-color:rgba(255,77,94,.3); }

.tag {
  font-family:var(--font-mono); font-size:8.5px; font-weight:600; letter-spacing:.08em;
  padding:2px 5px; border-radius:var(--r-xs); text-transform:uppercase;
}
.tag.done { background:var(--good-tint); color:var(--good); }
.tag.log  { background:var(--acc-tint); color:var(--acc); }
.tag.miss { background:var(--bad-tint); color:var(--bad); }
.tag.reb  { background:var(--warn-tint); color:var(--warn); }

/* ------------------------------------------------------------------ reticle empty state */
.reticle { text-align:center; padding:var(--s6) var(--s4); display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.reticle .eye {
  width:56px; height:56px; border-radius:50%; border:1.5px dashed var(--line2);
  position:relative; display:grid; place-items:center;
}
.reticle .eye::before, .reticle .eye::after {
  content:""; position:absolute; background:var(--line2);
}
.reticle .eye::before { width:1px; height:14px; top:-7px; }
.reticle .eye::after { height:1px; width:14px; left:-7px; }
.reticle .eye .dot { width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc-glow); }
.reticle .rt { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--txt2); }
.reticle .rc { font-size:12px; color:var(--mut); max-width:280px; line-height:1.5; }

/* ------------------------------------------------------------------ toast */
.toast {
  position:fixed; left:50%; bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 78px);
  transform:translateX(-50%); z-index:60;
  background:var(--panel3); color:var(--txt); border:1px solid var(--line-acc);
  border-radius:var(--r-md); padding:11px 16px; font-size:13px;
  box-shadow:var(--e1), 0 0 20px -6px var(--acc-glow); max-width:88vw;
  animation:toastin .25s ease;
}
@keyframes toastin { from { opacity:0; transform:translate(-50%, 10px); } }

/* ------------------------------------------------------------------ bottom sheet */
.sheet-wrap {
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(2,4,8,.68); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:fade .2s ease;
}
@keyframes fade { from { opacity:0; } }
.sheet {
  width:100%; max-width:620px; max-height:90dvh; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg, var(--panel), var(--bg1));
  border:1px solid var(--line2); border-bottom:0;
  border-radius:16px 16px 0 0;
  box-shadow:0 -12px 40px -8px rgba(0,0,0,.7);
  padding:var(--s3) var(--s4) calc(env(safe-area-inset-bottom) + var(--s5));
  animation:sheetup .28s cubic-bezier(.2,.9,.2,1);
}
@keyframes sheetup { from { transform:translateY(100%); } }
.sheet-grab { width:36px; height:4px; border-radius:2px; background:var(--line2); margin:2px auto 12px; }
.sheet-head { display:flex; align-items:flex-start; gap:8px; margin-bottom:var(--s4); }
.sheet-head .t { flex:1; }
.sheet-title { font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:.04em; }
@media (min-width:761px) {
  .sheet-wrap { align-items:center; }
  .sheet { border-radius:16px; border-bottom:1px solid var(--line2); max-height:86dvh; }
}

/* ------------------------------------------------------------------ login */
#login {
  position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:var(--s5);
}
.login-card {
  width:100%; max-width:340px; text-align:center;
  display:flex; flex-direction:column; gap:var(--s4); position:relative;
  padding:var(--s8) var(--s5);
}
.login-mark {
  font-family:var(--font-mono); font-size:20px; font-weight:700; letter-spacing:.18em;
  color:var(--txt); display:flex; align-items:center; justify-content:center; gap:10px;
}
.login-mark .glyph { width:14px; height:14px; border:2px solid var(--acc); border-radius:3px; transform:rotate(45deg); box-shadow:0 0 12px var(--acc-glow); }
.login-sub { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.login-err { color:var(--bad); font-size:12px; font-family:var(--font-mono); }

/* ------------------------------------------------------------------ chart canvas wrappers */
.cv { position:relative; width:100%; height:200px; }
.cv.tall { height:230px; }
.cv.ring { height:200px; }
.cv-empty { display:grid; place-items:center; height:100%; color:var(--faint); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* grid helper for two-up */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.trio { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--s2); }

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

html.fx-static #fxbg { display:none; }
html.fx-static body::before {
  background:radial-gradient(120% 80% at 50% -10%, #0b1622 0%, var(--bg1) 45%, var(--bg0) 100%);
}

/* ============================================================================
   VIEW-SPECIFIC
   ========================================================================== */

/* ---------------------------------------------------------- TODAY: hero core */
.hero {
  position:relative; height:250px; padding:0; overflow:hidden;
  display:grid; place-items:center;
}
.hero-mount { position:absolute; inset:0; }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero-fallback {
  position:absolute; inset:0; display:grid; place-items:center;
}
.hero-fallback .ring {
  width:200px; height:200px; border-radius:50%;
  background:
    radial-gradient(closest-side, var(--panel) 78%, transparent 79% 100%),
    conic-gradient(var(--acc) calc(var(--p,0)*1%), var(--line) 0);
  filter:drop-shadow(0 0 14px var(--acc-glow));
}
.hero-fallback.over .ring { background:
    radial-gradient(closest-side, var(--panel) 78%, transparent 79% 100%),
    conic-gradient(var(--bad) calc(var(--p,0)*1%), var(--line) 0); filter:drop-shadow(0 0 14px var(--bad-tint)); }
.hero-overlay {
  position:relative; z-index:3; text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.hero-overlay::before {
  content:""; position:absolute; inset:-60px -30px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(4,6,10,.82), rgba(4,6,10,.5) 55%, transparent 78%);
}
.hero-overlay.tap { pointer-events:auto; cursor:pointer; }
.hero-k {
  font-family:var(--font-mono); font-size:52px; font-weight:700; line-height:1;
  color:var(--acc); text-shadow:0 0 22px var(--acc-glow); font-variant-numeric:tabular-nums;
}
.hero-k.over { color:var(--bad); text-shadow:0 0 22px var(--bad-tint); }
.hero-klabel { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-top:4px; }
.hero-pro { font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--good); margin-top:10px; font-variant-numeric:tabular-nums; }
.hero-pro .u { color:var(--faint); font-size:10px; letter-spacing:.1em; }

/* macro block under hero */
.macro-block { display:flex; flex-direction:column; gap:11px; }

/* deficit/budget duo */
.stat-lab { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.stat-big { font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--txt); line-height:1; font-variant-numeric:tabular-nums; }
.stat-big.good { color:var(--good); } .stat-big.bad { color:var(--bad); }
.stat-sub { font-family:var(--font-mono); font-size:10px; color:var(--mut); margin-top:6px; }

/* mission card */
.mission-head { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.mission-sess { font-family:var(--font-mono); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ex {
  display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line);
}
.ex:first-of-type { border-top:0; }
.ex .ex-main { flex:1; min-width:0; }
.ex .ex-name { font-size:13.5px; font-weight:600; color:var(--txt); }
.ex .ex-musc { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:2px; }
.ex .ex-set {
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--acc);
  background:var(--acc-tint); border:1px solid var(--line-acc); border-radius:var(--r-sm);
  padding:5px 9px; white-space:nowrap;
}
.cardio-row {
  display:flex; align-items:center; gap:10px; margin-top:10px;
  padding:11px 12px; background:var(--warn-tint); border:1px solid rgba(255,176,32,.28); border-radius:var(--r-md);
}
.cardio-row.done { background:var(--good-tint); border-color:rgba(61,220,132,.28); }
.cardio-row .cm { flex:1; min-width:0; }
.cardio-row .cm .n { font-size:13px; font-weight:600; }
.cardio-row .cm .d { font-size:11px; color:var(--mut); }
.cardio-toggle {
  flex:none; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 11px; min-height:44px; border-radius:var(--r-sm); cursor:pointer;
  background:var(--warn); color:#231a03; border:0;
}
.cardio-row.done .cardio-toggle { background:var(--good); color:#04210f; }

/* week rail */
.rail { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin:0 -2px; }
.rail::-webkit-scrollbar { display:none; }
.wday {
  scroll-snap-align:start; flex:none; width:64px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:9px 6px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.wday.today { border-color:var(--acc); box-shadow:0 0 0 1px var(--line-acc), 0 0 12px -2px var(--acc-glow); }
.wday .dow { font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); }
.wday .sess { display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--txt2); white-space:nowrap; }
.wday .ring { width:26px; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, var(--panel2) 68%, transparent 70%), conic-gradient(var(--acc) calc(var(--p,0)*1%), var(--line) 0); }
.wday .k { font-family:var(--font-mono); font-size:9.5px; color:var(--txt2); }
.wday .k .m { color:var(--faint); }
.wday .flags { display:flex; gap:3px; min-height:6px; }
.sdot { width:6px; height:6px; border-radius:50%; flex:none; }
.dot-push { background:var(--push); } .dot-pull { background:var(--pull); } .dot-legs { background:var(--legs); }
.dot-vtaper { background:var(--vtaper); } .dot-rest { background:var(--rest); } .dot-skill { background:var(--vtaper); }

/* streak chips */
.streaks { display:flex; gap:8px; }
.streak { flex:1; text-align:center; padding:10px 4px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); }
.streak .n { font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--acc); font-variant-numeric:tabular-nums; }
.streak .n.zero { color:var(--faint); }
.streak .l { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-top:2px; }

/* rebalance banner */
.rebanner { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; }
.rebanner .ic { font-size:16px; }
.rebanner .body { flex:1; }
.rebanner .h { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); }
.rebanner .d { font-size:12px; color:var(--txt2); margin-top:3px; }

/* ---------------------------------------------------------- PLAN */
.pweek { margin-bottom:var(--s4); }
.pweek-h {
  position:sticky; top:calc(var(--ribbon-h) + env(safe-area-inset-top)); z-index:5;
  display:flex; align-items:center; gap:8px; padding:7px 0; margin-bottom:6px;
  background:linear-gradient(180deg, var(--bg0) 60%, transparent);
}
.pweek-idx { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--acc); }
.pweek-phase { font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
.pweek-prog { margin-left:auto; display:flex; gap:3px; }
.pweek-prog i { width:7px; height:7px; border-radius:2px; background:var(--line2); display:block; }
.pweek-prog i.today { background:var(--acc); box-shadow:0 0 6px var(--acc-glow); }
.pweek-prog i.done { background:var(--good); }
.pweek-prog i.miss { background:var(--bad); opacity:.6; }
.pweek-days { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.ptile {
  position:relative; text-align:left; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--line2);
  border-radius:var(--r-md); padding:10px 11px; min-height:66px;
  display:flex; flex-direction:column; gap:5px;
}
.ptile.today { border-color:var(--acc); border-left-color:var(--acc); box-shadow:0 0 0 1px var(--line-acc), 0 0 14px -3px var(--acc-glow); }
.ptile.miss { opacity:.55; }
.ptile.rest { border-left-color:var(--rest); }
.ptile.push { border-left-color:var(--push); } .ptile.pull { border-left-color:var(--pull); }
.ptile.legs { border-left-color:var(--legs); } .ptile.vtaper { border-left-color:var(--vtaper); } .ptile.skill { border-left-color:var(--vtaper); }
.ptile-sess { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--txt); }
.ptile-k { font-family:var(--font-mono); font-size:11px; color:var(--txt2); }
.ptile-k b { color:var(--txt); } .ptile-k.over b { color:var(--bad); }
.ptile-k .m { color:var(--faint); }
.ptile-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:auto; }
@media (min-width:761px) { .pweek-days { grid-template-columns:repeat(7,1fr); } }

/* ---------------------------------------------------------- TRENDS */
.subnav { display:flex; gap:4px; background:var(--bg1); border:1px solid var(--line); border-radius:var(--r-md); padding:4px; }
.subnav button {
  flex:1; background:none; border:0; cursor:pointer; border-radius:var(--r-sm); padding:9px 4px; min-height:44px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);
}
.subnav button.on { background:var(--acc-tint); color:var(--acc); box-shadow:inset 0 0 0 1px var(--line-acc); }
.kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kpi-tile { background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 10px; position:relative; }
.kpi-label { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.kpi-val { font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--txt); margin-top:5px; font-variant-numeric:tabular-nums; line-height:1; }
.kpi-val .u { font-size:11px; color:var(--mut); margin-left:2px; }
.kpi-d { font-family:var(--font-mono); font-size:10px; font-weight:600; margin-top:5px; }
.kpi-d.up { color:var(--good); } .kpi-d.down { color:var(--bad); }
.kpi-meta { font-family:var(--font-mono); font-size:9px; color:var(--mut); margin-top:5px; }
.bca-tab { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12px; }
.bca-tab th { text-align:right; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:6px 8px; border-bottom:1px solid var(--line); font-weight:600; }
.bca-tab th:first-child, .bca-tab td:first-child { text-align:left; }
.bca-tab td { text-align:right; padding:8px; border-bottom:1px solid var(--line); color:var(--txt2); }
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pcard { background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.pcard img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.pcard figcaption { display:block; font-family:var(--font-mono); font-size:9px; color:var(--mut); padding:5px; text-align:center; }
.banner-warn { display:flex; gap:9px; align-items:center; padding:11px 13px; background:var(--warn-tint); border:1px solid rgba(255,176,32,.28); border-radius:var(--r-md); font-size:12px; color:var(--txt2); }

/* ---------------------------------------------------------- STRENGTH */
.strength-note { border-color:var(--line-acc); }
.strength-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.strength-lift { background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s3); }
.strength-lift .name { min-height:38px; font-size:13px; font-weight:600; color:var(--txt); }
.strength-lift .date { font-family:var(--font-mono); font-size:9px; color:var(--faint); letter-spacing:.06em; margin-top:2px; }
.strength-lift .latest { margin-top:var(--s3); font-family:var(--font-mono); font-size:25px; font-weight:700; color:var(--acc); }
.strength-lift .latest .u { font-size:10px; color:var(--mut); }
.strength-lift .delta { margin-top:4px; font-family:var(--font-mono); font-size:10px; color:var(--mut); }
.strength-lift .delta.up { color:var(--good); }
.strength-lift .delta.down { color:var(--bad); }
@media (max-width:420px) { .strength-grid { grid-template-columns:1fr; } }

/* ---------------------------------------------------------- DAY SHEET */
.cmplist { display:flex; flex-direction:column; gap:12px; }
.cmp { border-top:1px solid var(--line); padding-top:12px; }
.cmplist .cmp:first-child { border-top:0; padding-top:0; }
.cmp-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.cmp-name { font-size:13px; font-weight:600; color:var(--txt); }
.cmp-musc { font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:1px; }
.cmp-pa { font-family:var(--font-mono); font-size:11px; color:var(--txt2); margin-top:7px; display:flex; flex-wrap:wrap; gap:5px; align-items:baseline; }
.cmp-pa .k { color:var(--faint); font-size:9px; letter-spacing:.08em; }
.cmp-pa .arr { color:var(--faint); }
.cmp-pa .did { color:var(--acc); }
.cmp-stat { font-family:var(--font-mono); font-size:10.5px; color:var(--good); margin-top:5px; letter-spacing:.02em; }
.setchips { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.setchip { font-family:var(--font-mono); font-size:10px; color:var(--txt2); background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-xs); padding:2px 6px; }
.meal { border-top:1px solid var(--line); padding:9px 0; }
.meal:first-child { border-top:0; }
.meal-h { display:flex; justify-content:space-between; align-items:baseline; }
.meal-h b { font-size:12.5px; text-transform:capitalize; }

/* ---------------------------------------------------------- COACH */
.chat-card { display:flex; flex-direction:column; padding:0; overflow:hidden;
  height:calc(100dvh - var(--ribbon-h) - var(--dock-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px); }
.chat-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.bot-av { width:34px; height:34px; border-radius:var(--r-md); background:var(--acc-tint); border:1px solid var(--line-acc); display:grid; place-items:center; font-size:17px; flex:none; }
.bot-name { font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.06em; }
.chat-status { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:5px; color:var(--good); }
.chat-status.off { color:var(--warn); }
.chat-actions { margin-left:auto; display:flex; gap:6px; align-items:center; }
.thread-sel { width:auto; min-width:0; max-width:120px; min-height:44px; padding:6px 26px 6px 10px; font-size:12px; }
.chatlog { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px; display:flex; flex-direction:column; gap:9px; }
.msg { max-width:82%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.msg.user { align-self:flex-end; background:var(--acc-tint); border:1px solid var(--line-acc); color:var(--txt); border-bottom-right-radius:3px; }
.msg.assistant { align-self:flex-start; background:var(--panel2); border:1px solid var(--line); border-bottom-left-radius:3px; }
.msg.assistant.muted { color:var(--mut); }
.chat-action { align-self:flex-start; font-family:var(--font-mono); font-size:11px; color:var(--good); background:var(--good-tint); border:1px solid rgba(61,220,132,.25); border-radius:var(--r-sm); padding:5px 9px; }
.chat-action.error { color:var(--bad); background:var(--bad-tint); border-color:rgba(255,77,94,.3); }
.chat-empty { text-align:center; color:var(--faint); font-size:12.5px; padding:30px 20px; }
.pending { margin:0 14px; }
.pending-card { background:var(--warn-tint); border:1px solid rgba(255,176,32,.3); border-radius:var(--r-md); padding:11px 12px; margin-bottom:8px; }
.pending-card .h { font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--warn); display:flex; align-items:center; gap:6px; }
.pending-card .pv { font-family:var(--font-mono); font-size:11px; color:var(--txt2); margin:7px 0; display:flex; flex-direction:column; gap:2px; }
.pending-card .pv span b { color:var(--txt); }
.pending-card .acts { display:flex; gap:8px; }
.composer { display:flex; gap:8px; align-items:center; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg1); }
.composer input[type=text], .composer input:not([type]) { flex:1; }
.attach { flex:none; }
.attach-ui { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line2); border-radius:var(--r-md); font-size:16px; cursor:pointer; color:var(--mut); }
.attach-ui.has-file { color:var(--acc); border-color:var(--acc); }
.send-btn { flex:none; width:44px; height:44px; border-radius:var(--r-md); background:var(--acc); color:var(--acc-ink); border:0; font-size:16px; cursor:pointer; }
.send-btn:disabled { opacity:.4; }

@media (max-width:420px) {
  .chat-head { flex-wrap:wrap; }
  .chat-actions { width:100%; margin-left:0; }
  .thread-sel { flex:1; max-width:none; }
}