/* ============================================================
   APOLLO — app stylesheet
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font:var(--t-body);color:var(--ink);background:#000;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overscroll-behavior:none;
}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{color:var(--tint);text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:color-mix(in srgb,var(--apollo) 34%,transparent)}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.serif{font-family:var(--ff-serif);font-style:italic;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ desktop stage: the app sits in an iPhone ============ */
#stage{
  min-height:100dvh;display:grid;place-items:center;padding:0;
  background:
    radial-gradient(1100px 620px at 50% -12%,rgba(232,50,63,.16),transparent 62%),
    radial-gradient(900px 700px at 88% 108%,rgba(90,200,250,.09),transparent 60%),
    #060708;
  position:relative;
}
#stage::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0);
  background-size:4px 4px;
}
.stagewrap{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(24px,4vw,64px)}

/* the marketing rail beside the phone (desktop only) */
.rail{width:min(400px,34vw);color:#EAECEF;display:none}
.rail .eyebrow{font:var(--t-cap2);letter-spacing:.22em;text-transform:uppercase;color:var(--apollo-soft);margin-bottom:14px}
.rail h1{font:700 clamp(2rem,3.1vw,2.9rem)/1.06 var(--ff);letter-spacing:-.035em;margin-bottom:8px}
.rail h1 em{font-family:var(--ff-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--apollo-soft)}
.rail p{font:var(--t-callout);color:#98A2AF;margin-bottom:26px;max-width:34ch}
.rail .rl{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:var(--hair) solid rgba(255,255,255,.09)}
.rail .rl svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--apollo-soft)}
.rail .rl b{display:block;font:var(--t-sub);font-weight:600;color:#EAECEF}
.rail .rl span{font:var(--t-foot);color:#7A8492}
.rail .foot{margin-top:24px;font:var(--t-foot);color:#6B7480}
.rail .foot code{font-family:var(--ff-mono);font-size:.75rem;color:#98A2AF}

/* the device */
.device{
  /* Insets live here, not on .app — #toasts and #sheets are siblings of
     .app and must resolve the same values. */
  --top-inset:54px; --bot-inset:26px;
  position:relative;width:min(393px,100vw);height:min(852px,100dvh);
  background:var(--bg);overflow:hidden;
  border-radius:56px;box-shadow:
    0 0 0 11px #16181C, 0 0 0 12.5px #303338, 0 0 0 15px #0A0B0D,
    0 44px 100px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.5);
}
.device .notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:124px;height:34px;border-radius:20px;background:#000;z-index:900;pointer-events:none;
}
.device .homebar{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:138px;height:5px;border-radius:3px;background:var(--ink);opacity:.32;z-index:901;pointer-events:none;
}
/* status bar */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:880;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;padding:16px 30px 0;
  font:600 .8125rem/1 var(--ff);color:var(--ink);letter-spacing:-.01em;
}
.statusbar .sb-r{display:flex;align-items:center;gap:5px}
.statusbar .sb-r svg{width:16px;height:11px;color:var(--ink)}

@media (min-width:1120px) and (min-height:820px){ .rail{display:block} }
@media (max-width:900px), (max-height:880px){
  #stage{padding:0;place-items:stretch}
  #stage::after{display:none}
  .stagewrap{gap:0;width:100%}
  .device{
    width:100%;height:100dvh;border-radius:0;box-shadow:none;
  }
  .device .notch{display:none}
  .device .homebar{display:none}
  .statusbar{display:none}
}

/* ============ app shell ============ */
.app{
  position:absolute;inset:0;display:flex;flex-direction:column;
  background:var(--bg-grouped);isolation:isolate;
}
/* Full-bleed on a real phone: hand the insets back to the OS.
   NOTE: env() reads 0 in a headless browser, so layout here must be
   verified with the insets injected — see docs/PRODUCT-SPEC.md. */
/* The demo bar sits in the safe area and absorbs the top inset, so the
   nav bars below it must not add it a second time. */
@media (max-width:900px), (max-height:880px){
  .device{
    --top-inset:max(8px, env(safe-area-inset-top));
    --bot-inset:max(6px, env(safe-area-inset-bottom));
  }
}
.app:has(.demobar) .nav{padding-top:6px}
.app:has(.demobar) .fc-top{padding-top:10px}

/* ---- nav bar ---- */
.nav{
  position:relative;z-index:60;flex:none;
  padding-top:var(--top-inset);
  background:var(--chrome);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  transition:box-shadow var(--d) var(--e-out),background var(--d) var(--e-out);
}
.nav.scrolled{box-shadow:0 var(--hair) 0 var(--line)}
.nav-bar{display:flex;align-items:center;gap:6px;height:46px;padding:0 8px}
.nav-side{display:flex;align-items:center;gap:2px;min-width:56px}
.nav-side.r{justify-content:flex-end}
.nav-mid{flex:1;text-align:center;min-width:0}
.nav-mid .t{
  font:var(--t-head);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(7px);transition:opacity var(--d) var(--e-out),transform var(--d) var(--e-out);
}
.nav.scrolled .nav-mid .t,.nav.compact .nav-mid .t{opacity:1;transform:none}
.nav-large{padding:0 var(--gut) 8px;overflow:hidden}
.nav-large h1{
  font:var(--t-large);letter-spacing:-.038em;
  transform-origin:left bottom;
  transition:opacity var(--d) var(--e-out),transform var(--d) var(--e-out);
}
.nav.scrolled .nav-large h1{opacity:0;transform:translateY(-9px) scale(.9)}
.nav-large .sub{font:var(--t-foot);color:var(--ink-3);margin-top:3px;transition:opacity var(--d) var(--e-out)}
.nav.scrolled .nav-large .sub{opacity:0}

.iconbtn{
  width:36px;height:36px;border-radius:var(--r-full);display:grid;place-items:center;
  color:var(--tint);transition:background var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);
  position:relative;
}
.iconbtn svg{width:22px;height:22px}
.iconbtn:active{background:var(--fill-2);transform:scale(.9)}
.iconbtn.plain{color:var(--ink)}
.iconbtn .dot{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--apollo);box-shadow:0 0 0 2px var(--chrome)}
.backbtn{display:flex;align-items:center;gap:1px;color:var(--tint);padding:6px 6px 6px 2px;font:var(--t-body);letter-spacing:-.015em;border-radius:var(--r-sm)}
.backbtn svg{width:19px;height:19px;flex:none}
.backbtn:active{opacity:.45}
.navlink{color:var(--tint);font:var(--t-body);letter-spacing:-.015em;padding:6px 8px;border-radius:var(--r-sm)}
.navlink:active{opacity:.45}
.navlink.strong{font-weight:600}

/* ---- scroll body ---- */
.scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:2px 0 calc(var(--bot-inset) + 74px);scrollbar-width:none;
  overscroll-behavior-y:contain;
}
.scroll::-webkit-scrollbar{display:none}
.scroll.notabs{padding-bottom:calc(var(--bot-inset) + 20px)}
.pad{padding-left:var(--gut);padding-right:var(--gut)}

/* ---- tab bar (liquid glass) ---- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:70;
  padding:6px 6px calc(var(--bot-inset) + 4px);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px);
  box-shadow:0 calc(var(--hair)*-1) 0 var(--line);
}
.tabbar[hidden]{display:none}
.tab{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 2px;
  color:var(--ink-3);transition:color var(--d-fast) var(--e-out);position:relative;
}
.tab svg{width:25px;height:25px;transition:transform var(--d) var(--e-spring)}
.tab .lb{font:var(--t-cap2);letter-spacing:.005em}
.tab.on{color:var(--tint)}
.tab.on svg{transform:scale(1.06)}
.tab:active svg{transform:scale(.86)}
.tab .badge{
  position:absolute;top:3px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 5px;
  border-radius:var(--r-full);background:var(--apollo);color:#fff;
  font:700 .625rem/17px var(--ff);text-align:center;
}

/* ---- screen transitions ---- */
.screenhost{flex:1;position:relative;overflow:hidden}
.screen{display:flex;flex-direction:column;position:absolute;inset:0;background:var(--bg-grouped)}
.screen.push-in{animation:pushIn .38s var(--e-out) both}
.screen.push-out{animation:pushOut .38s var(--e-out) both}
.screen.pop-away{animation:popAway .38s var(--e-out) both;z-index:3}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes pushOut{from{transform:none;opacity:1}to{transform:translateX(-24%);opacity:.55}}
@keyframes popAway{from{transform:none}to{transform:translateX(100%)}}
.fade-in{animation:fadeIn .3s var(--e-out) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* stagger helper */
.stagger>*{animation:fadeIn .42s var(--e-out) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}
.stagger>*:nth-child(6){animation-delay:.22s}
.stagger>*:nth-child(7){animation-delay:.26s}
.stagger>*:nth-child(n+8){animation-delay:.3s}

/* ============ primitives ============ */

/* section header */
.sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:22px var(--gut) 8px;
}
.sechead h2{font:var(--t-title3);letter-spacing:-.022em}
.sechead .more{font:var(--t-sub);color:var(--tint);font-weight:500}
.sechead.tight{padding-top:12px}
.grouplabel{
  padding:20px var(--gut) 7px;font:var(--t-cap);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink-3);
}

/* inset grouped list */
.list{background:var(--surface);border-radius:var(--r);margin:0 var(--gut);overflow:hidden;box-shadow:var(--shadow-1)}
.row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left;
  position:relative;transition:background var(--d-fast) var(--e-out);min-height:48px;
}
.row+.row::before{content:"";position:absolute;top:0;left:14px;right:0;height:var(--hair);background:var(--line)}
.row.inset+.row::before{left:58px}
.row:active{background:var(--fill-2)}
.row .ico{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--fill);color:var(--ink-2);
}
.row .ico svg{width:17px;height:17px}
.row .ico.tinted{background:var(--tint);color:var(--on-tint)}
.row .txt{flex:1;min-width:0}
.row .txt b{display:block;font:var(--t-body);font-weight:500;letter-spacing:-.015em}
.row .txt span{display:block;font:var(--t-foot);color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .val{font:var(--t-sub);color:var(--ink-3);flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .chev{width:15px;height:15px;color:var(--ink-4);flex:none}
.row.danger .txt b{color:var(--red)}

/* cards */
.card{
  background:var(--surface);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--shadow-1);position:relative;overflow:hidden;
}
.card.pad0{padding:0}
.cards{display:flex;flex-direction:column;gap:12px;padding:0 var(--gut)}

/* hero card */
.hero{
  margin:6px var(--gut) 0;border-radius:var(--r-xl);padding:20px;color:#fff;
  background:linear-gradient(148deg,var(--apollo) 0%,var(--apollo-deep) 58%,#6E0F1A 100%);
  box-shadow:0 14px 40px -14px rgba(232,50,63,.6),var(--shadow-1);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(560px 220px at 100% -20%,rgba(255,255,255,.3),transparent 60%);
}
.hero::after{
  content:"";position:absolute;right:-52px;bottom:-72px;width:220px;height:220px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16);pointer-events:none;
}
.hero>*{position:relative}
.hero .eyebrow{font:var(--t-cap2);letter-spacing:.16em;text-transform:uppercase;opacity:.82;margin-bottom:8px}
.hero h2{font:var(--t-title1);letter-spacing:-.03em;margin-bottom:5px}
.hero p{font:var(--t-sub);opacity:.86;margin-bottom:16px}
.hero .metrics{display:flex;gap:20px;margin-bottom:16px}
.hero .metrics div span{display:block;font:var(--t-cap2);letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.hero .metrics div b{font:600 1.28rem/1.1 var(--ff-mono);letter-spacing:-.03em}
.hero .metrics div b.t,.kpi b.t,.factgrid b.t{font-family:var(--ff);font-size:.98rem;letter-spacing:-.02em}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 18px;border-radius:var(--r-full);font:var(--t-head);letter-spacing:-.015em;
  transition:transform var(--d-fast) var(--e-out),opacity var(--d-fast) var(--e-out),background var(--d-fast);
  white-space:nowrap;
}
.btn:active{transform:scale(.96);opacity:.9}
.btn svg{width:18px;height:18px;flex:none}
.btn-fill{background:var(--tint);color:var(--on-tint)}
.btn-tint{background:color-mix(in srgb,var(--tint) 15%,transparent);color:var(--tint)}
.btn-gray{background:var(--fill);color:var(--ink)}
.btn-plain{color:var(--tint);padding:10px 6px}
.btn-onhero{background:#fff;color:var(--apollo-deep);font-weight:650}
.btn-ghost-hero{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font:var(--t-sub);font-weight:600}
.btn-sm svg{width:15px;height:15px}
.btn:disabled{opacity:.4;pointer-events:none}
.btnrow{display:flex;gap:9px}
.btnrow>.btn{flex:1}

/* segmented control */
.seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;
  background:var(--fill-2);border-radius:9px;margin:0 var(--gut);position:relative;
}
.seg button{
  padding:7px 6px;border-radius:7px;font:var(--t-sub);font-weight:500;color:var(--ink-2);
  transition:color var(--d-fast),background var(--d) var(--e-out),box-shadow var(--d);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.seg.dense button{padding:6px 4px;font:var(--t-foot);font-weight:500}

/* chips / filter scroller */
.chips{display:flex;gap:7px;overflow-x:auto;padding:10px var(--gut);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:7px 13px;border-radius:var(--r-full);background:var(--fill-2);
  font:var(--t-foot);font-weight:500;color:var(--ink-2);border:var(--hair) solid transparent;
  transition:all var(--d-fast) var(--e-out);
}
.chip.on{background:var(--tint);color:var(--on-tint);font-weight:600}
.chip:active{transform:scale(.94)}

/* pills / tags */
.pill{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;
  font:var(--t-cap2);letter-spacing:.02em;background:var(--fill);color:var(--ink-2);
}
.pill svg{width:11px;height:11px}
.pill.rehab{background:color-mix(in srgb,var(--teal) 17%,transparent);color:var(--teal)}
.pill.strength{background:color-mix(in srgb,var(--apollo) 17%,transparent);color:var(--apollo-soft)}
.pill.mobility{background:color-mix(in srgb,var(--indigo) 18%,transparent);color:var(--indigo)}
.pill.balance{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.pill.cond{background:color-mix(in srgb,var(--green) 17%,transparent);color:var(--green)}
.pill.ok{background:color-mix(in srgb,var(--green) 17%,transparent);color:var(--green)}
.pill.warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.pill.bad{background:color-mix(in srgb,var(--red) 17%,transparent);color:var(--red)}
:root[data-theme="light"] .pill.strength{color:var(--apollo-deep)}

/* search field */
.searchwrap{padding:6px var(--gut) 8px}
.search{
  display:flex;align-items:center;gap:7px;background:var(--fill-2);border-radius:10px;padding:8px 10px;
}
.search svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.search input{flex:1;font:var(--t-callout);min-width:0}
.search input::placeholder{color:var(--ink-3)}
.search .clr{width:18px;height:18px;border-radius:50%;background:var(--ink-4);display:none;place-items:center;flex:none}
.search .clr svg{width:10px;height:10px;color:var(--surface)}
.search.filled .clr{display:grid}

/* avatars */
.av{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:600 .8125rem/1 var(--ff);letter-spacing:.01em;color:#fff;position:relative;
  background:linear-gradient(150deg,var(--a1,#4A5260),var(--a2,#252A33));
}
.av.lg{width:60px;height:60px;font-size:1.2rem}
.av.xl{width:84px;height:84px;font-size:1.7rem}
.av.sm{width:30px;height:30px;font-size:.68rem}
.av .on-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--surface)}
.av-1{--a1:#3E7BD6;--a2:#1E3E7A} .av-2{--a1:#0E9488;--a2:#0A4F4A}
.av-3{--a1:#B45AC9;--a2:#5C2470} .av-4{--a1:#D97A2B;--a2:#7A3E0E}
.av-5{--a1:#4B9E4E;--a2:#1F5424} .av-6{--a1:#D65472;--a2:#7A2438}
.av-7{--a1:#6F72D6;--a2:#32357A} .av-8{--a1:#5C6672;--a2:#2A3038}
.av.coach::after{
  content:"";position:absolute;inset:-2.5px;border-radius:50%;
  border:1.5px solid var(--apollo);
}

/* progress ring */
.ring{position:relative;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.16)}
.ring .fg{stroke:currentColor;transition:stroke-dashoffset 1s var(--e-out)}
.ring.good{color:var(--green)} .ring.mid{color:var(--amber)} .ring.low{color:var(--red)}
.ring .mid{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 .8rem/1 var(--ff-mono);letter-spacing:-.03em;
}

/* meters */
.meter{height:6px;border-radius:3px;background:var(--fill);overflow:hidden}
.meter i{display:block;height:100%;border-radius:3px;background:var(--tint);transition:width .9s var(--e-out)}
.meter.green i{background:var(--green)} .meter.amber i{background:var(--amber)} .meter.red i{background:var(--red)}

/* switch */
.sw{width:50px;height:30px;border-radius:15px;background:var(--fill);position:relative;flex:none;transition:background var(--d) var(--e-out)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform var(--d) var(--e-out)}
.sw.on{background:var(--green)}
.sw.on::after{transform:translateX(20px)}

/* stepper */
.stepper{display:flex;align-items:center;background:var(--fill-2);border-radius:8px;overflow:hidden}
.stepper button{width:34px;height:32px;display:grid;place-items:center;color:var(--tint);font-weight:600}
.stepper button:active{background:var(--fill)}
.stepper .v{min-width:38px;text-align:center;font:600 .9rem/1 var(--ff-mono);border-left:var(--hair) solid var(--line);border-right:var(--hair) solid var(--line);padding:9px 0}

/* empty state */
.empty{padding:52px 34px;text-align:center;color:var(--ink-3)}
.empty svg{width:42px;height:42px;margin:0 auto 14px;color:var(--ink-4)}
.empty b{display:block;font:var(--t-head);color:var(--ink-2);margin-bottom:5px}
.empty p{font:var(--t-foot);line-height:1.5}

/* demo banner */
.demobar{
  flex:none;display:flex;align-items:center;gap:7px;
  padding:calc(var(--top-inset) + 5px) 14px 5px;
  background:linear-gradient(var(--bg) 0 var(--top-inset),
    color-mix(in srgb,var(--amber) 15%,var(--bg)) var(--top-inset) 100%);
  color:var(--amber);font:var(--t-cap2);letter-spacing:.03em;z-index:75;position:relative;
}
.demobar svg{width:12px;height:12px;flex:none}
.demobar button{margin-left:auto;color:inherit;font:inherit;text-decoration:underline;opacity:.8}

/* toast */
#toasts{position:absolute;left:0;right:0;bottom:calc(var(--bot-inset) + 84px);z-index:400;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 20px}
.toast{
  display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:var(--r-full);
  background:var(--surface-3);box-shadow:var(--shadow-2);color:var(--ink);
  font:var(--t-sub);font-weight:500;max-width:100%;
  animation:toastIn .4s var(--e-spring) both;
  backdrop-filter:blur(20px);
}
.toast.out{animation:toastOut .28s var(--e-in-out) both}
.toast svg{width:16px;height:16px;flex:none;color:var(--green)}
.toast.err svg{color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.96)}}

/* ============ sheets ============ */
#sheets{position:absolute;inset:0;z-index:300;pointer-events:none}
.backdrop{
  position:absolute;inset:0;background:var(--scrim);opacity:0;
  transition:opacity var(--d) var(--e-out);pointer-events:none;
  backdrop-filter:blur(1px);
}
.backdrop.show{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:94%;display:flex;flex-direction:column;
  background:var(--bg-grouped);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
  transform:translateY(100%);transition:transform var(--d-slow) var(--e-out);
  pointer-events:auto;overflow:hidden;
}
.sheet.show{transform:none}
.sheet.full{top:calc(var(--top-inset) - 6px);max-height:none;border-radius:var(--r-xl) var(--r-xl) 0 0}
.sheet-grab{flex:none;padding:8px 0 2px;display:grid;place-items:center;cursor:grab;touch-action:none}
.sheet-grab i{width:38px;height:5px;border-radius:3px;background:var(--ink-4)}
.sheet-head{
  flex:none;display:flex;align-items:center;gap:10px;padding:6px 12px 10px;
}
.sheet-head h3{flex:1;font:var(--t-title3);letter-spacing:-.022em;text-align:center;padding-left:0}
.sheet-head .navlink{min-width:56px}
.sheet-head .navlink:last-child{text-align:right}
.sheet-body{flex:1;overflow-y:auto;scrollbar-width:none;padding-bottom:calc(var(--bot-inset) + 18px);overscroll-behavior:contain}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-foot{
  flex:none;padding:10px var(--gut) calc(var(--bot-inset) + 12px);
  background:var(--chrome);backdrop-filter:blur(20px);box-shadow:0 calc(var(--hair)*-1) 0 var(--line);
}

/* action sheet */
.actionsheet{position:absolute;left:10px;right:10px;bottom:calc(var(--bot-inset) + 10px);transform:translateY(140%);transition:transform var(--d-slow) var(--e-out);pointer-events:auto}
.actionsheet.show{transform:none}
.actionsheet .grp{background:var(--surface-glass);backdrop-filter:blur(24px);border-radius:var(--r);overflow:hidden;margin-bottom:8px}
.actionsheet .grp .t{padding:13px 16px;text-align:center;font:var(--t-foot);color:var(--ink-3);box-shadow:0 var(--hair) 0 var(--line)}
.actionsheet button{width:100%;padding:16px;font:var(--t-title3);font-weight:400;color:var(--tint);text-align:center}
.actionsheet button+button{box-shadow:0 calc(var(--hair)*-1) 0 var(--line) inset}
.actionsheet button:active{background:var(--fill-2)}
.actionsheet button.destructive{color:var(--red)}
.actionsheet button.cancel{font-weight:600;background:var(--surface);border-radius:var(--r)}

/* alert */
.alert{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);opacity:0;
  width:272px;background:var(--surface-glass);backdrop-filter:blur(28px);border-radius:var(--r);
  overflow:hidden;pointer-events:auto;transition:transform var(--d) var(--e-spring),opacity var(--d);
  box-shadow:var(--shadow-3);
}
.alert.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.alert .abody{padding:19px 16px 16px;text-align:center}
.alert h4{font:var(--t-head);margin-bottom:5px}
.alert p{font:var(--t-foot);color:var(--ink-2);line-height:1.45}
.alert .abtns{display:flex;box-shadow:0 var(--hair) 0 var(--line) inset}
.alert .abtns button{flex:1;padding:13px;font:var(--t-body);color:var(--tint)}
.alert .abtns button+button{box-shadow:var(--hair) 0 0 var(--line) inset}
.alert .abtns button.strong{font-weight:600}
.alert .abtns button.destructive{color:var(--red)}

/* ============ exercise / movement animation stage ============ */
.movstage{
  aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;position:relative;
  background:
    radial-gradient(120% 90% at 50% 0%,var(--surface-3),var(--surface-2) 70%);
}
.movstage.sq{aspect-ratio:1}
.movstage svg{position:absolute;inset:0;width:100%;height:100%}
.movstage .floor{stroke:var(--ink-4);stroke-width:1.5;opacity:.5}
.movstage .fig{stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}
.movstage .fig.hi{stroke:var(--apollo)}
.movstage .head{fill:var(--ink);stroke:none}
.movstage .head.hi{fill:var(--apollo)}
.movstage .grid{stroke:var(--line);stroke-width:1}
.movstage .badge{position:absolute;top:9px;left:9px}
.movstage .repchip{
  position:absolute;bottom:8px;right:9px;padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.34);color:#fff;font:600 .625rem/1.3 var(--ff-mono);letter-spacing:.02em;
  backdrop-filter:blur(6px);
}
@media (prefers-reduced-motion:reduce){
  .movstage *{animation:none !important}
  .stagger>*{animation:none}
}

/* exercise grid */
.exgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:4px var(--gut) 0}
.excard{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1);text-align:left;transition:transform var(--d-fast) var(--e-out)}
.excard:active{transform:scale(.97)}
.excard .movstage{border-radius:0}
.excard .meta{padding:9px 10px 11px}
.excard .meta b{display:block;font:var(--t-sub);font-weight:600;letter-spacing:-.015em;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.excard .meta .r{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.excard .meta small{font:var(--t-cap2);color:var(--ink-3);letter-spacing:.02em}

/* exercise detail */
.exhero{padding:0 var(--gut)}
.cuelist{counter-reset:c;padding:2px 0}
.cuelist li{
  display:flex;gap:11px;padding:10px 14px;font:var(--t-callout);color:var(--ink);
  position:relative;list-style:none;
}
.cuelist li+li::before{content:"";position:absolute;top:0;left:44px;right:0;height:var(--hair);background:var(--line)}
.cuelist li::marker{content:none}
.cuelist li i{
  counter-increment:c;flex:none;width:21px;height:21px;border-radius:50%;background:var(--tint);color:var(--on-tint);
  font:700 .6875rem/21px var(--ff-mono);text-align:center;font-style:normal;
}
.cuelist li i::before{content:counter(c)}
.factgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin:0 var(--gut)}
.factgrid div{background:var(--surface);padding:12px 13px}
.factgrid span{display:block;font:var(--t-cap2);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.factgrid b{font:600 1.05rem/1.2 var(--ff-mono);letter-spacing:-.03em}
.note{
  margin:0 var(--gut);padding:12px 14px;border-radius:var(--r);font:var(--t-foot);line-height:1.5;
  background:color-mix(in srgb,var(--amber) 11%,var(--surface));color:var(--ink-2);
  border-left:3px solid var(--amber);
}
.note b{color:var(--amber);display:block;margin-bottom:3px;font:var(--t-cap2);letter-spacing:.06em;text-transform:uppercase}
.note.feel{background:color-mix(in srgb,var(--teal) 11%,var(--surface));border-left-color:var(--teal)}
.note.feel b{color:var(--teal)}

/* ============ calendar ============ */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:4px var(--gut) 12px}
.wd{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0 7px;border-radius:11px;
  transition:background var(--d-fast) var(--e-out);position:relative;
}
.wd span{font:var(--t-cap2);color:var(--ink-3);letter-spacing:.04em}
.wd b{font:600 .95rem/1 var(--ff-mono);letter-spacing:-.03em}
.wd .dots{display:flex;gap:2.5px;height:5px;align-items:center}
.wd .dots i{width:4.5px;height:4.5px;border-radius:50%;background:var(--ink-4)}
.wd .dots i.pt{background:var(--teal)} .wd .dots i.st{background:var(--apollo)} .wd .dots i.ap{background:var(--amber)} .wd .dots i.done{background:var(--green)}
.wd.today b{color:var(--tint)}
.wd.on{background:var(--tint)}
.wd.on span,.wd.on b{color:var(--on-tint)}
.wd.on .dots i{background:rgba(255,255,255,.85)}

.monthgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 var(--gut)}
.monthgrid .dow{text-align:center;font:var(--t-cap2);color:var(--ink-3);padding:4px 0 8px;letter-spacing:.05em}
.mday{
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:10px;position:relative;transition:background var(--d-fast);
}
.mday b{font:500 .875rem/1 var(--ff-mono);letter-spacing:-.02em}
.mday.out b{color:var(--ink-4)}
.mday.today b{color:var(--tint);font-weight:700}
.mday.on{background:var(--tint)} .mday.on b{color:var(--on-tint)}
.mday .dots{display:flex;gap:2px;height:4px}
.mday .dots i{width:4px;height:4px;border-radius:50%}
.mday .dots i.pt{background:var(--teal)} .mday .dots i.st{background:var(--apollo)} .mday .dots i.ap{background:var(--amber)} .mday .dots i.done{background:var(--green)}
.mday.on .dots i{background:rgba(255,255,255,.9)}

/* session block */
.sessblock{
  display:flex;gap:11px;padding:13px 14px;background:var(--surface);border-radius:var(--r);
  box-shadow:var(--shadow-1);text-align:left;width:100%;position:relative;overflow:hidden;
  transition:transform var(--d-fast) var(--e-out);
}
.sessblock:active{transform:scale(.985)}
.sessblock .stripe{position:absolute;left:0;top:0;bottom:0;width:3.5px;background:var(--ink-4)}
.sessblock.pt .stripe{background:var(--teal)}
.sessblock.st .stripe{background:var(--apollo)}
.sessblock.ap .stripe{background:var(--amber)}
.sessblock.done .stripe{background:var(--green)}
.sessblock .tm{flex:none;width:52px;font:600 .78rem/1.35 var(--ff-mono);color:var(--ink-2);letter-spacing:-.02em;padding-left:4px}
.sessblock .tm small{display:block;font:var(--t-cap2);color:var(--ink-3);font-family:var(--ff)}
.sessblock .bd{flex:1;min-width:0}
.sessblock .bd b{display:block;font:var(--t-callout);font-weight:600;letter-spacing:-.015em;margin-bottom:3px}
.sessblock .bd p{font:var(--t-foot);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessblock .bd .tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.sessblock.done .bd b{color:var(--ink-2)}
.sessblock .tick{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--fill);color:var(--ink-3)}
.sessblock.done .tick{background:var(--green);color:#fff}
.sessblock .tick svg{width:13px;height:13px}

/* who-edited log */
.editlog{display:flex;align-items:center;gap:6px;padding:9px 16px;font:var(--t-cap);color:var(--ink-3)}
.editlog svg{width:12px;height:12px;flex:none}

/* ============ messaging ============ */
.threadlist .row .txt span{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.chat{flex:1;overflow-y:auto;padding:14px var(--gut) 12px;display:flex;flex-direction:column;gap:3px;scrollbar-width:none;overscroll-behavior:contain}
.chat::-webkit-scrollbar{display:none}
.daystamp{align-self:center;font:var(--t-cap2);color:var(--ink-3);padding:12px 0 8px;letter-spacing:.04em}
.bub{
  max-width:78%;padding:9px 13px;border-radius:19px;font:var(--t-callout);line-height:1.38;
  position:relative;animation:bubIn .34s var(--e-spring) both;word-wrap:break-word;
}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.bub.them{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:6px}
.bub.me{align-self:flex-end;background:var(--tint);color:var(--on-tint);border-bottom-right-radius:6px}
.bub+.bub.them{border-top-left-radius:6px}
.bub+.bub.me{border-top-right-radius:6px}
.bub .tm{display:block;font:var(--t-cap2);opacity:.55;margin-top:4px;letter-spacing:.03em}
.bub.att{padding:9px;max-width:72%}
.bub.att .movstage{border-radius:13px;margin-bottom:7px}
.bub.att .lbl{font:var(--t-foot);font-weight:500;padding:0 4px 3px;display:flex;align-items:center;gap:5px}
.bub.att .lbl svg{width:13px;height:13px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 15px;background:var(--surface-2);border-radius:19px;border-bottom-left-radius:6px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.composer{
  flex:none;display:flex;align-items:flex-end;gap:8px;padding:8px var(--gut) calc(var(--bot-inset) + 8px);
  background:var(--chrome);backdrop-filter:blur(20px);box-shadow:0 calc(var(--hair)*-1) 0 var(--line);
}
.composer .fieldwrap{
  flex:1;display:flex;align-items:flex-end;gap:6px;background:var(--fill-2);border-radius:19px;
  padding:7px 6px 7px 13px;border:var(--hair) solid var(--line-2);
}
.composer textarea{flex:1;resize:none;max-height:96px;font:var(--t-callout);line-height:1.35;padding:2px 0}
.composer textarea::placeholder{color:var(--ink-3)}
.composer .send{width:29px;height:29px;border-radius:50%;background:var(--tint);color:var(--on-tint);display:grid;place-items:center;flex:none;transition:transform var(--d-fast) var(--e-spring),opacity var(--d-fast)}
.composer .send svg{width:15px;height:15px}
.composer .send:disabled{opacity:.3}
.composer .send:active{transform:scale(.85)}

/* ============ community ============ */
.post{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-1);overflow:hidden}
.post .ph{display:flex;align-items:center;gap:10px;padding:13px 14px 9px}
.post .ph .who{flex:1;min-width:0}
.post .ph b{display:block;font:var(--t-sub);font-weight:600;letter-spacing:-.01em}
.post .ph span{font:var(--t-cap);color:var(--ink-3)}
.post .body{padding:0 14px 12px;font:var(--t-callout);line-height:1.47}
.post .winbadge{
  display:flex;align-items:center;gap:9px;margin:0 14px 12px;padding:12px 14px;border-radius:var(--r);
  background:linear-gradient(135deg,color-mix(in srgb,var(--amber) 17%,transparent),color-mix(in srgb,var(--apollo) 12%,transparent));
  border:var(--hair) solid color-mix(in srgb,var(--amber) 34%,transparent);
}
.post .winbadge svg{width:24px;height:24px;color:var(--amber);flex:none}
.post .winbadge b{display:block;font:var(--t-sub);font-weight:650;letter-spacing:-.015em}
.post .winbadge span{font:var(--t-cap);color:var(--ink-3)}
.post .acts{display:flex;gap:2px;padding:4px 8px 8px;box-shadow:0 var(--hair) 0 var(--line) inset}
.post .acts button{
  display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:9px;
  font:var(--t-foot);font-weight:500;color:var(--ink-2);transition:background var(--d-fast),color var(--d-fast);
}
.post .acts button svg{width:16px;height:16px}
.post .acts button.on{color:var(--apollo)}
.post .acts button:active{background:var(--fill-2)}
.post .acts .sp{flex:1}
.reacts{display:flex;align-items:center;gap:5px;padding:0 14px 10px}
.reacts .stack{display:flex}
.reacts .stack i{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10px;
  background:var(--surface-3);box-shadow:0 0 0 1.5px var(--surface);margin-left:-5px;
}
.reacts .stack i:first-child{margin-left:0}
.reacts span{font:var(--t-cap);color:var(--ink-3)}

/* member cards */
.memrow{display:flex;gap:9px;overflow-x:auto;padding:2px var(--gut) 4px;scrollbar-width:none}
.memrow::-webkit-scrollbar{display:none}
.memcard{
  flex:none;width:110px;padding:14px 10px;border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow-1);text-align:center;transition:transform var(--d-fast) var(--e-out);
}
.memcard:active{transform:scale(.96)}
.memcard .av{margin:0 auto 9px}
.memcard b{display:block;font:var(--t-foot);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memcard span{display:block;font:var(--t-cap2);color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ programs / store ============ */
.progcard{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-2);position:relative;
  text-align:left;width:100%;transition:transform var(--d-fast) var(--e-out);background:var(--surface);
}
.progcard:active{transform:scale(.98)}
.progcard .top{padding:19px 17px;color:#fff;position:relative;overflow:hidden;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end}
.progcard .top::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 190px at 88% 6%,rgba(255,255,255,.24),transparent 62%)}
.progcard .top::after{content:"";position:absolute;right:-38px;top:-56px;width:170px;height:170px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);pointer-events:none}
.progcard .top>*{position:relative}
.progcard .top .kick{font:var(--t-cap2);letter-spacing:.16em;text-transform:uppercase;opacity:.82;margin-bottom:7px}
.progcard .top h3{font:var(--t-title2);letter-spacing:-.028em;margin-bottom:4px}
.progcard .top p{font:var(--t-foot);opacity:.85}
.progcard .btm{padding:13px 15px;display:flex;align-items:center;gap:11px}
.progcard .btm .price{font:600 1.15rem/1 var(--ff-mono);letter-spacing:-.035em}
.progcard .btm .price small{font:var(--t-cap);color:var(--ink-3);font-family:var(--ff);margin-left:3px}
.progcard .btm .sp{flex:1}
.progcard .stats{display:flex;gap:13px;padding:0 15px 13px;flex-wrap:wrap}
.progcard .stats div{display:flex;align-items:center;gap:5px;font:var(--t-cap);color:var(--ink-3)}
.progcard .stats svg{width:13px;height:13px}
.gr-1{background:linear-gradient(140deg,#E8323F,#8E121F)}
.gr-2{background:linear-gradient(140deg,#0E7490,#134E7A)}
.gr-3{background:linear-gradient(140deg,#4338CA,#6D28D9)}
.gr-4{background:linear-gradient(140deg,#166534,#0B7A5A)}
.gr-5{background:linear-gradient(140deg,#B45309,#92400E)}

/* jane strip */
.janestrip{
  display:flex;align-items:center;gap:11px;margin:0 var(--gut);padding:13px 14px;border-radius:var(--r);
  background:var(--surface);box-shadow:var(--shadow-1);
}
.janestrip .jm{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:#0E7C7B;color:#fff;font:700 .8rem/1 var(--ff);letter-spacing:-.02em;
}
.janestrip .bd{flex:1;min-width:0}
.janestrip .bd b{display:block;font:var(--t-sub);font-weight:600}
.janestrip .bd span{font:var(--t-cap);color:var(--ink-3)}

/* connection state dots */
.statedot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-4)}
.statedot.live{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent);animation:pulseDot 2.4s ease-in-out infinite}
.statedot.warn{background:var(--amber)}
@keyframes pulseDot{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 0%,transparent)}}

/* scope list for the OAuth consent screen */
.scopelist li{display:flex;gap:10px;padding:10px 14px;list-style:none;position:relative;align-items:flex-start}
.scopelist li+li::before{content:"";position:absolute;top:0;left:44px;right:0;height:var(--hair);background:var(--line)}
.scopelist svg{width:17px;height:17px;flex:none;color:var(--green);margin-top:2px}
.scopelist b{display:block;font:var(--t-sub);font-weight:500}
.scopelist span{font:var(--t-foot);color:var(--ink-3)}
.scopelist code{font:var(--t-cap2);font-family:var(--ff-mono);color:var(--ink-3);background:var(--fill-2);padding:1px 5px;border-radius:4px}

/* ============ coach: client rows, adherence ============ */
.clientrow .txt b{display:flex;align-items:center;gap:6px}
.spark{display:flex;align-items:flex-end;gap:2px;height:22px;flex:none}
.spark i{width:4px;border-radius:1.5px;background:var(--fill);min-height:2px}
.spark i.on{background:var(--green)}
.spark i.miss{background:color-mix(in srgb,var(--red) 55%,transparent)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:0 var(--gut)}
.kpi{background:var(--surface);border-radius:var(--r);padding:13px 12px;box-shadow:var(--shadow-1)}
.kpi span{display:block;font:var(--t-cap2);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.kpi b{font:600 1.42rem/1 var(--ff-mono);letter-spacing:-.04em}
.kpi small{font:var(--t-cap);color:var(--ink-3);display:block;margin-top:3px}
.kpi small.up{color:var(--green)} .kpi small.dn{color:var(--red)}

/* builder */
.buildslot{
  display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow-1);position:relative;
}
.buildslot .drag{color:var(--ink-4);flex:none;cursor:grab;touch-action:none;padding:4px}
.buildslot .drag svg{width:17px;height:17px}
.buildslot .bd{flex:1;min-width:0}
.buildslot .bd b{display:block;font:var(--t-sub);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buildslot .bd span{font:var(--t-cap);color:var(--ink-3);font-family:var(--ff-mono)}
.buildslot.dragging{opacity:.45;box-shadow:var(--shadow-2)}
.buildslot.over{transform:translateY(2px)}

/* ============ FORM CHECK (ported from Coach's Eye) ============ */
.fc{position:absolute;inset:0;display:flex;flex-direction:column;background:#000;z-index:1}
.fc-top{
  flex:none;display:flex;align-items:center;gap:8px;padding:calc(var(--top-inset) + 4px) 10px 8px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(20px);color:#fff;
}
.fc-top .ttl{flex:1;min-width:0}
.fc-top .ttl b{display:block;font:var(--t-sub);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-top .ttl span{font:var(--t-cap2);color:rgba(255,255,255,.5)}
.fc-top .iconbtn{color:#fff}
.fc-stage{flex:1;min-height:0;display:grid;grid-template-columns:1fr;gap:6px;padding:0 6px;position:relative}
.fc-stage.compare{grid-template-rows:1fr 1fr}
.fc-box{position:relative;background:#000;border-radius:var(--r);overflow:hidden;min-height:0}
.fc-fit{position:absolute;inset:0;transform-origin:center center}
.fc-fit video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.fc-fit canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.fc-tag{
  position:absolute;top:8px;left:8px;z-index:5;padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.55);color:#fff;font:var(--t-cap2);letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(6px);pointer-events:none;
}
.fc-empty{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.45);font:var(--t-foot);text-align:center;padding:24px;z-index:4}
body.fc-pen canvas.fc-draw{cursor:crosshair}
body.fc-hand canvas.fc-draw{cursor:grab}

.fc-scrub{flex:none;display:flex;align-items:center;gap:10px;padding:9px 14px 6px;color:#fff}
.fc-scrub .pb{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none;transition:transform var(--d-fast) var(--e-spring)}
.fc-scrub .pb:active{transform:scale(.88)}
.fc-scrub .pb svg{width:17px;height:17px;color:#fff}
.fc-track{flex:1;position:relative;display:flex;align-items:center;height:30px}
.fc-track input[type=range]{
  width:100%;height:4px;border-radius:2px;-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.22);outline:none;
}
.fc-track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:pointer}
.fc-track input[type=range]::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:#fff}
.fc-track .tick{position:absolute;top:6px;bottom:6px;width:2.5px;border-radius:2px;background:var(--teal);pointer-events:none;box-shadow:0 0 5px var(--teal)}
.fc-track .noteflag{position:absolute;top:-1px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--amber);border:1.5px solid #000;pointer-events:auto;cursor:pointer}
.fc-tc{font:600 .78rem/1 var(--ff-mono);color:rgba(255,255,255,.85);min-width:64px;text-align:right;letter-spacing:-.02em}

.fc-dock{
  flex:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;
  padding:5px 7px calc(var(--bot-inset) + 5px);background:rgba(0,0,0,.72);backdrop-filter:blur(20px);
}
.fc-dock button{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:11px;
  color:rgba(255,255,255,.62);transition:all var(--d-fast) var(--e-out);
}
.fc-dock button svg{width:20px;height:20px}
.fc-dock button .dl{font:var(--t-cap2);letter-spacing:.02em}
.fc-dock button.on{background:rgba(255,255,255,.16);color:#fff}
.fc-dock button:active{transform:scale(.9)}

.fc-tools{
  position:absolute;left:0;right:0;bottom:0;z-index:80;
  background:rgba(22,25,30,.94);backdrop-filter:blur(26px);
  border-radius:var(--r-xl) var(--r-xl) 0 0;color:#fff;
  transform:translateY(102%);transition:transform var(--d-slow) var(--e-out);
  padding:8px 14px calc(var(--bot-inset) + 16px);max-height:72%;overflow-y:auto;scrollbar-width:none;
}
.fc-tools::-webkit-scrollbar{display:none}
.fc-tools.show{transform:none}
.fc-tools .grab{width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);margin:0 auto 12px}
.fc-grp{padding:11px 0;box-shadow:0 var(--hair) 0 rgba(255,255,255,.09) inset}
.fc-grp:first-of-type{box-shadow:none}
.fc-grp .lb{font:var(--t-cap2);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:8px}
.fc-grp .btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fc-grp .btns button{
  padding:8px 13px;border-radius:9px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.8);
  font:var(--t-foot);font-weight:500;transition:all var(--d-fast) var(--e-out);
}
.fc-grp .btns button svg{width:18px;height:18px;display:inline-block;vertical-align:-3px}
.fc-grp .btns button.on{background:#fff;color:#000;font-weight:600}
.fc-grp .btns button:active{transform:scale(.94)}
.fc-sw{width:28px;height:28px;border-radius:8px;padding:0;border:2px solid transparent}
.fc-sw.on{border-color:#fff}

.fc-notes{padding:4px 0 0}
.fc-note{display:flex;gap:9px;align-items:flex-start;padding:9px 0;box-shadow:0 var(--hair) 0 rgba(255,255,255,.09) inset}
.fc-note:first-child{box-shadow:none}
.fc-note .t{
  flex:none;padding:3px 8px;border-radius:6px;background:rgba(255,159,10,.18);color:var(--amber);
  font:600 .68rem/1.3 var(--ff-mono);letter-spacing:-.01em;
}
.fc-note .tx{flex:1;font:var(--t-foot);line-height:1.45;color:rgba(255,255,255,.9)}
.fc-note .tx small{display:block;color:rgba(255,255,255,.4);font:var(--t-cap2);margin-top:3px}
.fc-note .x{color:rgba(255,255,255,.35);padding:2px 4px;flex:none}
.fc-note .x svg{width:13px;height:13px}
.fc-addnote{display:flex;gap:7px;margin-top:10px}
.fc-addnote .at{flex:none;padding:9px 11px;border-radius:9px;background:rgba(255,159,10,.18);color:var(--amber);font:600 .72rem/1.2 var(--ff-mono)}
.fc-addnote input{flex:1;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.09);font:var(--t-foot);color:#fff;min-width:0}
.fc-addnote input::placeholder{color:rgba(255,255,255,.35)}
.fc-addnote .go{padding:9px 14px;border-radius:9px;background:var(--apollo);color:#fff;font:var(--t-foot);font-weight:600}

/* skeletons */
.sk{background:var(--sk);border-radius:6px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shim 1.4s infinite}
@keyframes shim{100%{transform:translateX(100%)}}

/* big check-off control in the session runner */
.tickbig{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.8px solid var(--ink-4);color:transparent;
  transition:all var(--d) var(--e-spring);
}
.tickbig svg{width:16px;height:16px}
.tickbig.on{background:var(--green);border-color:var(--green);color:#fff}
.tickbig:active{transform:scale(.86)}

/* layout atoms used inside cards */
.rowflex{display:flex;align-items:center;gap:14px}
.rowflex-bd{flex:1;min-width:0}
.rowflex-bd b{display:block;font:var(--t-callout);font-weight:600;letter-spacing:-.015em;margin-bottom:3px}
.rowflex-bd span{display:block;font:var(--t-foot);color:var(--ink-3);margin-bottom:9px}
.progmark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.progmark svg{width:21px;height:21px}

/* inline inputs inside list rows */
.inputline{
  text-align:right;font:var(--t-sub);color:var(--ink-2);background:none;border:none;
  max-width:52%;font-family:var(--ff);
}
.inputline::placeholder{color:var(--ink-4)}
input[type=date].inputline,input[type=time].inputline{color-scheme:dark}
:root[data-theme="light"] input[type=date].inputline,
:root[data-theme="light"] input[type=time].inputline{color-scheme:light}
.bigtext{width:100%;resize:none;font:var(--t-callout);line-height:1.45;color:var(--ink);min-height:88px}
.bigtext::placeholder{color:var(--ink-4)}

/* misc helpers */
.nojs{color:#fff;text-align:center;padding:40px;font:var(--t-body)}
.hr{height:var(--hair);background:var(--line);margin:0 var(--gut)}
.center{text-align:center}
.muted{color:var(--ink-3)}
.tiny{font:var(--t-cap);color:var(--ink-3);line-height:1.45}
.spacer{height:14px}
.spacer.lg{height:26px}
.legend{display:flex;gap:13px;flex-wrap:wrap;padding:2px var(--gut) 0}
.legend div{display:flex;align-items:center;gap:5px;font:var(--t-cap);color:var(--ink-3)}
.legend i{width:7px;height:7px;border-radius:50%}
.legend i.pt{background:var(--teal)} .legend i.st{background:var(--apollo)} .legend i.ap{background:var(--amber)} .legend i.done{background:var(--green)}