/* Fitness Way — design tokens + components.
   Every colour/radius/stroke comes from a CSS variable; the per-org theme (theme.go) overrides them.
   Logical properties (inline-start/end) keep RTL and a future LTR locale both correct. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font),system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
:root{
  --bg:#F4F3F0;--card:#FFFFFF;--ink:#121316;--ink2:#5B5F68;--ink3:#8C9099;
  --line:rgba(18,19,22,.07);--line2:rgba(18,19,22,.12);--shell:rgba(18,19,22,.035);--track:rgba(18,19,22,.06);
  --brand:#D2336A;--brandInk:#97194A;--brandSoft:#FCE9F0;--onBrand:#fff;
  --ok:#0C8A5F;--okSoft:#E2F5EC;--warn:#A86500;--warnSoft:#FFF2D9;--bad:#C8281C;--badSoft:#FDEBE9;
  --p:#7457F0;--c:#EE9A0A;--f:#12A99A;--wa:#128C4A;--waSoft:#E7F8EE;
  --glass:rgba(255,255,255,.76);
  --sh:0 1px 2px rgba(18,19,22,.04),0 14px 34px -14px rgba(18,19,22,.16);
  --r-card:22px;--r-shell:30px;--r-ctl:14px;
  --font:'Readex Pro';
  --ease:cubic-bezier(.32,.72,0,1);
}
a{color:inherit}
img{max-width:100%}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
[hidden]{display:none!important} /* class display rules (chip, stack, card) must never beat hidden */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- layout ---------- */
.app{min-height:100dvh;display:flex}
.rail{display:none}
.main{flex:1;min-width:0;padding:22px 18px 120px;max-width:1100px;margin-inline:auto;width:100%}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.sb{justify-content:space-between}
.wrap{flex-wrap:wrap}
.f1{flex:1;min-width:0}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:900px){
  .rail{display:flex;flex-direction:column;align-items:center;gap:8px;width:80px;padding:20px 0;box-shadow:inset -1px 0 0 var(--line);position:sticky;top:0;height:100dvh}
  .nav{display:none!important}
  .main{padding:28px 32px 48px}
  .cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
}
.rail a{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--ink2);text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.rail a.on{background:var(--ink);color:var(--bg)}
.rail a:hover:not(.on){background:var(--shell)}

/* ---------- type ---------- */
.eyebrow{font-size:12px;color:var(--ink3)}
.h1{font-size:30px;font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0}
.h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0}
.h3{font-size:15px;font-weight:500;margin:0}
.t11{font-size:11px}.t12{font-size:12px}.t13{font-size:13px}.t14{font-size:14px}.t16{font-size:16px}
.mut{color:var(--ink2)}.mut3{color:var(--ink3)}
.w5{font-weight:500}.w6{font-weight:600}.w3{font-weight:300}
.big{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}

/* ---------- surfaces ---------- */
.shell{background:var(--shell);border-radius:var(--r-shell);padding:5px;box-shadow:inset 0 0 0 1px var(--line)}
.core{background:var(--card);border-radius:calc(var(--r-shell) - 5px);box-shadow:var(--sh)}
.card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh),inset 0 0 0 1px var(--line)}
.pad{padding:18px}
.div{height:1px;background:var(--line)}
.list>*+*{border-top:1px solid var(--line)}

/* ---------- controls ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12px;background:var(--shell);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;text-decoration:none}
button.chip{border:0;font-family:inherit;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg);box-shadow:none}
.chip.brand{background:var(--brandSoft);color:var(--brandInk);box-shadow:none}
.chip.ok{background:var(--okSoft);color:var(--ok);box-shadow:none}
.chip.warn{background:var(--warnSoft);color:var(--warn);box-shadow:none}
.chip.bad{background:var(--badSoft);color:var(--bad);box-shadow:none}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;height:54px;padding-inline:22px 7px;border-radius:999px;background:var(--ink);color:var(--bg);font:500 16px var(--font),system-ui;border:0;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),opacity .2s}
.btn:active{transform:scale(.98)}
.btn .knob{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease)}
.btn:hover .knob{transform:translateX(-3px)}
.btn.block{width:100%}
.btn.brand{background:var(--brand);color:var(--onBrand)}
.btn.wa{background:var(--wa);color:#fff}
.btn.sm{height:40px;font-size:13px;padding-inline:16px 5px}
.btn.sm .knob{width:30px;height:30px}
.btn.plain{padding-inline:20px;justify-content:center}
.ghost{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);font:400 13px var(--font),system-ui;color:var(--ink);border:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.ghost:hover{background:var(--shell)}
.iconbtn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);border:0;flex:none;cursor:pointer;text-decoration:none}
.avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex:none;background:var(--shell);color:var(--ink2)}
.avatar.brand{background:var(--brandSoft);color:var(--brandInk)}
.avatar.ink{background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.04em}
.ic{display:block;flex:none}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.bar{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px}

/* ---------- forms ---------- */
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2)}
.in,select.in,textarea.in{width:100%;height:48px;padding:0 14px;border-radius:var(--r-ctl);border:0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);font:400 15px var(--font),system-ui;color:var(--ink);outline:none;transition:box-shadow .2s}
textarea.in{height:auto;min-height:84px;padding:12px 14px;resize:vertical}
.in:focus{box-shadow:inset 0 0 0 1.5px var(--brand),0 0 0 4px var(--brandSoft)}
.in::placeholder{color:var(--ink3)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.seg input:checked+label{background:var(--ink);color:var(--bg);box-shadow:none}
.seg input:focus-visible+label{box-shadow:0 0 0 3px var(--brandSoft),inset 0 0 0 1.5px var(--brand)}
.yn{display:flex;gap:6px;flex:none}
.q{display:flex;align-items:center;gap:12px;padding:14px 0}
.err{color:var(--bad);font-size:13px}
.fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.step{display:flex;align-items:center;gap:10px}
.step b{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;flex:none}

/* ---------- mobile nav island ---------- */
.nav{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);box-shadow:0 10px 30px -10px rgba(0,0,0,.25),inset 0 0 0 1px var(--line);z-index:10}
.nav a{display:flex;align-items:center;gap:7px;height:48px;padding:0 15px;border-radius:999px;color:var(--ink2);font-size:13px;text-decoration:none;transition:background .35s var(--ease),color .35s var(--ease),padding .35s var(--ease)}
.nav a.on{background:var(--ink);color:var(--bg);padding:0 18px}

/* ---------- bits ---------- */
.flash{padding:12px 16px;border-radius:16px;font-size:14px}
.flash.ok{background:var(--okSoft);color:var(--ok)}
.flash.bad{background:var(--badSoft);color:var(--bad)}
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;font-size:14px}
.kv span:first-child{color:var(--ink2)}
.empty{padding:32px 20px;text-align:center;color:var(--ink2);font-size:14px}
.link-box{font:400 13px ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr;text-align:left;padding:10px 12px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);word-break:break-all;color:var(--ink2)}
.htmx-request .spin{opacity:.5}
.fade-in{animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.drop{background:none;border:0;padding:6px 3px;margin:-6px -3px;cursor:pointer;line-height:0;transition:transform .25s var(--ease)}
.drop:active{transform:scale(.85)}
.ltr+span:not(.ltr){margin-inline-start:4px}

/* ===================== design system: composite components ===================== */
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sec-h a,.sec-h .aside{font-size:13px;color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.hero{padding:20px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.stat{display:flex;flex-direction:column;gap:4px;padding:2px 14px;min-width:0}
.stat+.stat{box-shadow:inset 1px 0 0 var(--line)}
[dir=rtl] .stat+.stat{box-shadow:inset -1px 0 0 var(--line)}
.stat:first-child{padding-inline-start:0}
.stat .v{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.stat .u{font-size:12px;color:var(--ink3);font-weight:300}
.stat .l{font-size:12px;color:var(--ink2)}
.delta{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:99px;font-size:11px;font-weight:500;width:max-content}
.delta.good{background:var(--okSoft);color:var(--ok)}
.delta.bad{background:var(--warnSoft);color:var(--warn)}
.delta.flat{background:var(--shell);color:var(--ink3)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:66px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);font:400 12px var(--font),system-ui;border:0;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s var(--ease);width:100%}
.tile-btn:hover{background:var(--shell)}
.tile-btn:active{transform:scale(.97)}
.tile-btn .ic{color:var(--ink2)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a{flex:1;display:flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:999px;font-size:13px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.tabs a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh);font-weight:500}
.info{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.info .ico{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--shell);color:var(--ink2)}
.info .ico.bad{background:var(--badSoft);color:var(--bad)}
.info .ico.warn{background:var(--warnSoft);color:var(--warn)}
.info .ico.brand{background:var(--brandSoft);color:var(--brandInk)}
.info .k{font-size:12px;color:var(--ink3);margin-bottom:3px}
.info .val{font-size:14px;color:var(--ink);line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip.lg{height:34px;padding:0 14px;font-size:13px}
.chip.sm{height:22px;padding:0 8px;font-size:11px}
.btn-row{display:flex;gap:8px}
.btn-row>*{flex:1;min-width:0;justify-content:center}
.ghost.block{width:100%;justify-content:center;height:46px;font-size:14px}
.trow{display:grid;grid-template-columns:minmax(72px,1fr) repeat(3,minmax(0,1fr));align-items:center;gap:8px;padding:12px 0;font-size:14px}
.trow.head{font-size:11px;color:var(--ink3);padding:4px 0 8px}
.trow .c{display:flex;flex-direction:column;gap:3px;min-width:0}
.callout{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;font-size:13px;line-height:1.55}
.callout.bad{background:var(--badSoft);color:var(--bad)}
.callout.warn{background:var(--warnSoft);color:var(--warn)}
.callout.ok{background:var(--okSoft);color:var(--ok)}
.anchor{scroll-margin-top:16px}
.upload{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-ctl);background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line2);cursor:pointer;transition:box-shadow .2s}
.upload:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}
.upload input{position:absolute;opacity:0;width:1px;height:1px}
.upload .ico{width:40px;height:40px;border-radius:12px;background:var(--brandSoft);color:var(--brandInk);display:flex;align-items:center;justify-content:center;flex:none}
/* ---------- intake wizard ---------- */
.prog{display:flex;gap:4px}
.prog i{flex:1;height:4px;border-radius:99px;background:var(--track);transition:background .4s var(--ease)}
.prog i.done{background:var(--brand)}
.prog i.cur{background:color-mix(in srgb,var(--brand) 45%,transparent)}
.wiz-actions{display:flex;flex-direction:column;gap:6px;position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.consent{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:16px;background:var(--brandSoft);color:var(--brandInk);font-size:14px;line-height:1.7;cursor:pointer}
.consent input{width:22px;height:22px;margin-top:2px;accent-color:var(--brand);flex:none}
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ptile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:3/4;border-radius:18px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line2);color:var(--ink2);cursor:pointer;text-align:center;transition:box-shadow .2s,background .2s}
.ptile:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}
.ptile input{position:absolute;opacity:0;width:1px;height:1px}
.ptile.done,.ptile.picked{background:var(--okSoft);color:var(--ok);box-shadow:none}
.err{display:block}
/* ---------- InBody: original + key numbers ---------- */
.ib{display:flex;gap:14px;align-items:stretch}
.orig{position:relative;flex:none;border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);display:flex;align-items:center;justify-content:center;text-decoration:none}
.orig img{width:100%;height:100%;object-fit:cover;display:block}
.orig .zoom{position:absolute;bottom:6px;left:6px;width:26px;height:26px;border-radius:50%;background:rgba(18,19,22,.7);color:#fff;display:flex;align-items:center;justify-content:center}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start}
.mbox{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:12px;background:var(--bg)}
.segrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.segrow .mbox{padding:8px}
.pending{padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1.5px rgba(168,101,0,.35);margin-top:14px}
@media (max-width:420px){.pending .ib{flex-direction:column}.pending .orig{width:100%!important;height:220px!important}}
.pending .orig{width:min(46%,280px)!important;height:auto!important;aspect-ratio:3/4}
.pending .orig img{object-fit:contain;background:#fff}
/* ---------- light / dark toggle ---------- */
.t-sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .t-sun{display:block}:root:not([data-theme=light]) .t-moon{display:none}}
:root[data-theme=dark] .t-sun{display:block}:root[data-theme=dark] .t-moon{display:none}
:root[data-theme=light] .t-sun{display:none}:root[data-theme=light] .t-moon{display:block}

/* ---------- settings ---------- */
.set-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.set-pv{order:-1}
@media (min-width:760px){.set-cols{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.set-pv{order:0;position:sticky;top:20px}}
.clip{overflow-wrap:anywhere} /* never truncate: text wraps to a second line */
.logo-ring{padding:4px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line2);flex:none}
.swatches{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sw{position:relative;width:38px;height:38px;border-radius:50%;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sw:active{transform:scale(.92)}
.sw.on{box-shadow:0 0 0 3px var(--card),0 0 0 5px currentColor}
.sw.custom{background:conic-gradient(from 0deg,#E4572E,#DBA226,#2E9F5B,#1E9E8A,#2F6FED,#7C5CFF,#D2336A,#E4572E);color:var(--ink);overflow:hidden}
.sw.custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pick.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;padding:14px 8px 12px;border-radius:var(--r-card);background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;font-size:13px;color:var(--ink2);text-align:center;transition:box-shadow .3s var(--ease),color .3s var(--ease)}
.pick input:checked+label{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.pick input:focus-visible+label{box-shadow:0 0 0 3px var(--brandSoft),inset 0 0 0 2px var(--brand)}
.corner{width:30px;height:30px;border-top:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.corner.soft{border-top-right-radius:14px}.corner.sharp{border-top-right-radius:5px}
.pv-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pv{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--r-shell);box-shadow:inset 0 0 0 1px var(--line2),var(--sh);min-width:0;transition:background .4s var(--ease)}
.pv .btn.sm{height:38px;font-size:12px;padding-inline:12px 4px}
.pv .btn.sm .knob{width:28px;height:28px}
.rail a.rail-org{width:auto;height:auto;margin-bottom:16px;border-radius:50%}
.rail a.rail-org:hover{background:none;opacity:.85}
@media (max-width:899px){.set-cols .wiz-actions{bottom:76px;padding-bottom:10px}}
.ava-stack{position:relative;display:block;flex:none}
.ava-stack>img{display:block;border-radius:50%;object-fit:cover}
.ava-badge{position:absolute;bottom:-2px;left:-4px;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}

/* ---------- meal library ---------- */
.search{position:relative;display:block}
.search>.ic{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none}
.search .in{padding-inline-start:42px;height:50px;border-radius:999px;background:var(--card)}
.search .in::-webkit-search-cancel-button{display:none}
.chips-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-18px;padding-inline:18px}
.chips-scroll::-webkit-scrollbar{display:none}
.meal-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:760px){.meal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.meal-card{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.meal-card:active{transform:scale(.99)}
.meal-ph{display:block;flex:none;border-radius:16px;object-fit:cover;background:var(--shell)}
.meal-ph.empty{display:flex;align-items:center;justify-content:center;color:var(--ink3);box-shadow:inset 0 0 0 1.5px var(--line2);background:repeating-linear-gradient(135deg,var(--shell) 0 6px,transparent 6px 12px)}
.macro-line b{font-weight:600}
.ed-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:760px){.ed-cols{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.ed-side{position:sticky;top:20px}}
.ed-side{display:flex;flex-direction:column;gap:12px}
.meal-photo-pick{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;max-height:300px;border-radius:calc(var(--r-shell) - 10px);overflow:hidden;cursor:pointer;background:repeating-linear-gradient(135deg,var(--shell) 0 8px,transparent 8px 16px);box-shadow:inset 0 0 0 1.5px var(--line2)}
.meal-photo-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-hint{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink2);text-align:center;padding:16px}
.ph-hint[hidden],.ph-change[hidden]{display:none}
.ph-change{position:absolute;bottom:12px;inset-inline-end:12px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;color:var(--ink)}
.irow{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.irow .qty{width:74px;height:42px;text-align:center;padding:0 8px}
.irow .unit{width:auto;max-width:150px;height:42px;padding-inline:10px 32px;background-position:left 8px center}
.iconbtn.sm{width:36px;height:36px;color:var(--ink3)}
.picker{position:relative}
.pick-list{display:flex;flex-direction:column;gap:2px}
.pick-list:not(:empty){margin-top:8px;padding:6px;border-radius:18px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.pick-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:none;color:var(--ink);font:inherit;cursor:pointer;text-align:start}
.pick-item:hover,.pick-item:focus-visible{background:var(--card);outline:none}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:420px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ing-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.ing-row:last-child{border-bottom:0}
.ing-vals{display:grid;grid-template-columns:repeat(4,48px);gap:4px;text-align:center;flex:none}
.ing-vals span{display:flex;flex-direction:column;line-height:1.2}
.ing-vals b{font-size:14px;font-weight:600}
.ing-vals small{font-size:10px;color:var(--ink3)}
@media (max-width:480px){.ing-row{flex-wrap:wrap}.ing-vals{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}}
details.shell>summary::-webkit-details-marker{display:none}
.macro-line>span{white-space:nowrap}
@media (max-width:480px){
  .meal-card{gap:10px;padding:10px 10px 10px 8px}
  .meal-card .meal-ph{width:56px!important;height:56px!important}
  .meal-card>svg{width:50px;height:50px}
  .macro-line{gap:8px;font-size:11px}
  .irow{flex-wrap:wrap;row-gap:8px}
  .irow>.f1{flex-basis:100%}
  .irow .qty{flex:1}
  .irow .unit{flex:2;max-width:none}
}

/* selects: one quiet caret in the icon style, on the reading end's opposite side */
select.in{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M210.83 98.83l-80 80a4 4 0 0 1-5.66 0l-80-80a4 4 0 0 1 5.66-5.66L128 170.34l77.17-77.17a4 4 0 1 1 5.66 5.66Z' fill='%238C9099'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:16px;background-position:left 12px center;padding-inline-end:36px;cursor:pointer}
[dir=ltr] select.in{background-position:right 12px center}
select.in::-ms-expand{display:none}

/* ---------- barcode scanner ---------- */
.scan-dlg{width:min(440px,calc(100vw - 32px));padding:18px;border:0;border-radius:var(--r-shell);background:var(--card);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.scan-dlg::backdrop{background:rgba(10,10,11,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scan-view{position:relative;aspect-ratio:4/3;border-radius:calc(var(--r-shell) - 10px);overflow:hidden;background:#0A0A0B}
.scan-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;inset:22% 12%;border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.9)}
.scan-frame::after{content:"";position:absolute;inset-inline:10%;top:50%;height:2px;background:var(--brand);box-shadow:0 0 12px var(--brand);animation:scanline 1.8s var(--ease) infinite alternate}
@keyframes scanline{from{transform:translateY(-38px)}to{transform:translateY(38px)}}
.fade-in{animation:fadein .5s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- program builder ---------- */
.t15{font-size:15px}
.tone-ok{color:var(--ok)}.tone-warn{color:var(--warn)}.tone-mut{color:var(--ink3)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:4px;border-radius:22px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.days a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px;border-radius:18px;font-size:14px;color:var(--ink2);text-decoration:none;transition:background .3s var(--ease)}
.days a.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:var(--sh)}
.days .dot{width:7px;height:7px}
.dot.ok{background:var(--ok)}.dot.off{background:var(--warn)}.dot.none{background:var(--line2)}
.days.compact{display:flex;overflow-x:auto;scrollbar-width:none}
.days.compact a{flex:1 0 auto;min-width:64px}
@media (max-width:560px){.days:not(.compact){grid-template-columns:repeat(4,minmax(0,1fr))}}
.bld-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:980px){.bld-cols{grid-template-columns:minmax(0,1fr) 360px;align-items:start}.bld-panel{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto}}
.bld-panel{padding:16px;border-radius:var(--r-shell);background:var(--card);box-shadow:var(--sh),inset 0 0 0 1px var(--line)}
.slot-row{display:flex;gap:14px;align-items:flex-start}
.slot-label{width:96px;flex:none;display:flex;flex-direction:column;gap:2px;padding-top:14px}
@media (max-width:560px){.slot-row{flex-direction:column;gap:6px}.slot-label{flex-direction:row;gap:8px;align-items:baseline;padding-top:0;width:auto}}
.pm-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;transition:box-shadow .3s var(--ease)}
.pm-card.bad{box-shadow:var(--sh),inset 0 0 0 1.5px var(--bad)}
.pm-card.sel{box-shadow:var(--sh),inset 0 0 0 2px var(--brand)}
.pm-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--line)}
.scale{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px;border-radius:999px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.scale button{width:26px;height:26px;border:0;border-radius:50%;background:var(--card);color:var(--ink);font:500 16px var(--font),system-ui;cursor:pointer;line-height:1}
.scale span{min-width:44px;text-align:center;font-size:13px;font-weight:500}
.alts{display:flex;flex-direction:column;gap:2px;margin:-2px 12px 4px;padding:8px 12px;border-radius:0 0 18px 18px;background:var(--brandSoft)}
.alt-row{color:var(--brandInk)}
.add-slot{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;border-radius:var(--r-card);border:1.5px dashed var(--line2);color:var(--ink3);font-size:14px;text-decoration:none;transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.add-slot:hover,.add-slot.on{border-color:var(--brand);color:var(--brandInk);background:var(--brandSoft)}
.panel-meal{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.panel-meal:last-child{border-bottom:0}
.panel-meal.dim{opacity:.55}
.totals-bar{position:sticky;bottom:12px;z-index:4}
@media (max-width:899px){.totals-bar{bottom:84px}}
@media (max-width:640px){.totals-bar{position:static}}
.totals-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:18px;align-items:end}
@media (max-width:640px){.totals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.left-hint{grid-column:1/-1}}
.left-hint{padding-inline-start:16px;border-inline-start:1px solid var(--line)}
@media (max-width:640px){.left-hint{padding-inline-start:0;border:0}}
.copy-day>summary{list-style:none;cursor:pointer}
.copy-day>summary::-webkit-details-marker{display:none}
.wo-row{padding:14px}
.wo-num{width:28px;height:28px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--shell);font-size:13px;font-weight:600}
.wo-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wo-fields .wide{grid-column:span 2}
.wo-fields .in{height:42px}
@media (max-width:560px){.wo-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.program-link{padding:14px 16px;text-decoration:none;color:inherit}
.tm-photo{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--r-shell) - 12px);display:block;background:var(--shell)}
.tm-more{border-top:1px solid var(--line);padding-top:10px}
.tm-more>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:13px;color:var(--ink2)}
.tm-more>summary::-webkit-details-marker{display:none}
.tw-row{padding:12px 0;border-bottom:1px solid var(--line)}
.tw-row:last-child{border-bottom:0}

/* ---------- follow-up card ---------- */
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.tri button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:0 10px;border:0;border-radius:14px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:400 14px var(--font),system-ui;cursor:pointer;transition:background .25s var(--ease),transform .2s var(--ease)}
.tri button:active{transform:scale(.97)}
.tri button.on{background:var(--ink);color:var(--bg);box-shadow:none}
.card-meal.st-done,.card-meal.st-alt{box-shadow:var(--sh),inset 0 0 0 1.5px var(--ok)}
.card-meal.st-skipped{opacity:.7}
.moods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.moods button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:0;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2);cursor:pointer;font-family:var(--font);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.moods button .emoji{font-size:26px;line-height:1}
.moods button.on{box-shadow:inset 0 0 0 2px var(--brand);background:var(--brandSoft);color:var(--brandInk);transform:translateY(-2px)}
.checkin-cta{padding:14px 16px;text-decoration:none;color:inherit;box-shadow:var(--sh),inset 0 0 0 1.5px var(--brand)}
.stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{font-size:34px;line-height:1;color:var(--line2);cursor:pointer;transition:color .2s}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:var(--c)}
.fu-tiles .h3{font-size:18px;font-weight:600}
.ci-new{box-shadow:var(--sh),inset 0 0 0 1.5px var(--brand)}

/* ---------- money ---------- */
.money-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.money-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi-m{padding:14px 14px 13px;border-radius:20px}
.money-big{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.money-big small{font-size:12px;font-weight:400;color:var(--ink3)}
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;height:180px}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.bar-track{flex:1;width:100%;max-width:44px;display:flex;align-items:flex-end;border-radius:12px;background:var(--shell)}
.bar-track i{display:block;width:100%;border-radius:12px;background:var(--brandSoft);transition:height .6s var(--ease)}
.bar-col.now .bar-track i{background:var(--brand)}
.bar-v{color:var(--ink2);min-height:16px;white-space:nowrap}
.sub-row{padding:12px 14px;text-decoration:none;color:inherit}
.sub-row.st-expired{opacity:.7}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-items:start}
.pkg.off{opacity:.6}
.pkg-add>summary::-webkit-details-marker,.act>summary::-webkit-details-marker{display:none}
.act>summary{list-style:none;cursor:pointer}
.act[open]{flex-basis:100%}
.offer-row{padding:12px 14px}
.offer-row.o-ended,.offer-row.o-off{opacity:.6}
.pay-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.pay-row:last-child{border-bottom:0}
.void{opacity:.5;text-decoration:line-through}
.pkg-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.pkg-pick input{position:absolute;opacity:0;pointer-events:none}
.pkg-pick label{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;transition:box-shadow .25s var(--ease)}
.pkg-pick input:checked+label{box-shadow:inset 0 0 0 2px var(--brand);background:var(--brandSoft)}
.paid-now:has(input[name=paid]:not(:checked)) .grid2,.paid-now:has(input[name=paid]:not(:checked)) .seg{display:none}
.st-chip-active{background:var(--okSoft);color:var(--ok);box-shadow:none}
.st-chip-ending{background:var(--warnSoft);color:var(--warn);box-shadow:none}
.st-chip-grace,.st-chip-expired{background:var(--badSoft);color:var(--bad);box-shadow:none}
.st-chip-upcoming{background:var(--brandSoft);color:var(--brandInk);box-shadow:none}
@media (max-width:560px){.money-tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:22px}}
/* trainee pay page */
.pay-box>summary{list-style:none;cursor:pointer}
.pay-box>summary::-webkit-details-marker{display:none}
.pay-box .pay-chev{color:var(--ink3);transition:transform .35s var(--ease)}
.pay-box[open] .pay-chev{transform:rotate(-90deg)}
.pay-box[open]>summary{margin-bottom:20px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;margin-inline-end:6px;vertical-align:2px}
.pay-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pay-opts.one{grid-template-columns:1fr}
.pay-opts input{position:absolute;opacity:0;pointer-events:none}
.pay-opts label{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.pay-opts input:checked+label{box-shadow:inset 0 0 0 2px var(--brand);background:var(--brandSoft)}
.pay-opts input:focus-visible+label,.pm-radio:focus-visible+.pay-method{box-shadow:0 0 0 3px var(--brandSoft),inset 0 0 0 2px var(--brand)}
.pm-radio{position:absolute;opacity:0;pointer-events:none}
.pay-method{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);cursor:pointer;transition:box-shadow .25s var(--ease)}
.pm-radio:checked+.pay-method{box-shadow:inset 0 0 0 2px var(--brand)}
.pay-method .avatar{background:var(--shell);color:var(--ink2)}
.pm-radio:checked+.pay-method .avatar{background:var(--brandSoft);color:var(--brandInk)}
.pm-tick{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);color:transparent;transition:background .25s var(--ease),color .25s var(--ease)}
.pm-radio:checked+.pay-method .pm-tick{background:var(--brand);color:#fff;box-shadow:none}
.pm-detail{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--bg)}
.pm-val{overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.copy-btn .ic-done{display:none}
.copy-btn.done{background:var(--okSoft);color:var(--ok);box-shadow:none}
.copy-btn.done .ic-copy{display:none}.copy-btn.done .ic-done{display:inline-flex}
.pm-link{align-self:flex-start;height:36px;font-size:13px}
.receipt-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:16px;border-radius:20px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line2);cursor:pointer;text-align:center;transition:box-shadow .2s,background .2s}
.receipt-drop:hover{box-shadow:inset 0 0 0 1.5px var(--brand)}
.receipt-drop.picked{background:var(--okSoft);box-shadow:inset 0 0 0 1.5px var(--ok)}
.receipt-drop.bad{box-shadow:inset 0 0 0 1.5px var(--bad)}
.receipt-prev{max-height:260px;max-width:100%;border-radius:12px;object-fit:contain}
.pay-st-pending{background:var(--warnSoft);color:var(--warn)}
.pay-st-confirmed{background:var(--okSoft);color:var(--ok)}
.pay-st-rejected{background:var(--badSoft);color:var(--bad)}
/* receipts waiting for the trainer */
.receipt-card{padding:14px}
.receipt-thumb{flex:none;width:64px;height:84px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--shell);color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line)}
.receipt-thumb img{width:100%;height:100%;object-fit:cover}
.rej>summary{list-style:none;cursor:pointer}
.rej>summary::-webkit-details-marker{display:none}
.rej[open]{flex-basis:100%}
/* trainee home: today's meals and workout */
.home-meal{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.home-meal:last-child{border-bottom:0}
.home-meal.st-done .meal-ph,.home-meal.st-alt .meal-ph,.home-meal.st-skipped .meal-ph{opacity:.55}
.home-meal.next{margin:4px -8px;padding:10px 8px;border-radius:16px;border-bottom-color:transparent;background:var(--brandSoft)}
.home-mark{display:inline-flex;align-items:center;gap:4px;flex:none;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500}
.mark-done,.mark-alt,.mark-partial{background:var(--okSoft);color:var(--ok)}
.mark-skipped{background:var(--shell);color:var(--ink3)}
.home-wo{display:block;color:inherit;text-decoration:none}
.home-ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.home-ex li{display:flex;align-items:center;gap:10px}
/* settings: her saved profile pictures */
.av-grid{display:flex;flex-wrap:wrap;gap:12px}
.av-opt{position:relative}
.av-pick{display:block;padding:3px;border:0;border-radius:50%;background:none;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .25s var(--ease),transform .2s var(--ease)}
.av-pick:hover{transform:scale(1.04)}
.av-pick:active{transform:scale(.97)}
.av-pick img{display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--shell)}
.av-opt.on .av-pick{box-shadow:inset 0 0 0 2.5px var(--brand)}
.av-tick{position:absolute;bottom:2px;inset-inline-end:2px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;box-shadow:0 0 0 2px var(--card)}
.av-del{position:absolute;top:-2px;inset-inline-start:-2px;width:22px;height:22px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink3);box-shadow:var(--sh),inset 0 0 0 1px var(--line2);cursor:pointer;opacity:0;transition:opacity .2s}
.av-opt:hover .av-del,.av-opt:focus-within .av-del{opacity:1}
@media (hover:none){.av-del{opacity:1}}
.av-add{width:78px;height:78px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--brandInk);background:var(--brandSoft);cursor:pointer;text-align:center;line-height:1.1}
.av-pick.htmx-request,form.htmx-request .av-pick{transform:scale(.92);box-shadow:inset 0 0 0 2.5px var(--brandSoft)}
#avatar.htmx-settling .logo-ring img{animation:av-in .35s var(--ease)}
@keyframes av-in{from{opacity:.4;transform:scale(.96)}to{opacity:1;transform:none}}
/* exercise videos (two angles side by side, 2:1) */
.ex-vid{display:block;width:100%;aspect-ratio:2/1;border-radius:14px;background:var(--shell);object-fit:cover;margin:4px 0 2px;cursor:pointer}
/* drawing a meal photo */
.ph-draw{align-self:flex-start}
.ph-draw .ph-draw-busy{display:none}
.ph-draw.htmx-request .ph-draw-idle{display:none}
.ph-draw.htmx-request .ph-draw-busy{display:inline}
.ph-draw.htmx-request svg{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* exercise library */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.ex-card,.ex-card *{text-decoration:none}
.ex-card{display:flex;flex-direction:column;padding:0;overflow:hidden;color:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ex-card:hover{transform:translateY(-2px)}
.ex-card .ex-vid{margin:0;border-radius:0}
.ex-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:2/1;color:var(--ink3);text-align:center;padding:12px;background:repeating-linear-gradient(135deg,var(--shell) 0 8px,transparent 8px 16px);border-radius:inherit}
.ex-card .ex-soon{border-radius:0;aspect-ratio:3/1}
.ex-vid.sq{aspect-ratio:1/1;max-width:520px;margin-inline:auto}
.ex-vid.big{margin:0}
.ex-progress{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.ex-progress i{display:block;height:100%;background:var(--brand);border-radius:inherit}
/* YouTube / Vimeo videos: a still with a play button, the player loads on tap */
.ext-vid{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:14px;overflow:hidden;background:#111;cursor:pointer;color:#fff}
.ex-card .ext-vid{border-radius:0;aspect-ratio:2/1}
.ext-vid img{width:100%;height:100%;object-fit:cover;display:block}
.ext-vimeo{position:absolute;inset:0;background:linear-gradient(135deg,#1ab7ea,#0f6f9a)}
.ext-play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s var(--ease)}
.ext-vid>span.ext-play{margin:auto}
.ext-vid:hover .ext-play{transform:scale(1.06)}
.ext-tag{position:absolute;bottom:8px;inset-inline-start:8px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.6);font-size:11px}
iframe.ext-vid{cursor:auto}
.ext-more{border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.ext-more>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;font-size:14px;font-weight:500}
.ext-more>summary::-webkit-details-marker{display:none}
.ext-chev{flex:none;opacity:.5;transition:transform .25s var(--ease)}
.ext-more[open] .ext-chev{transform:rotate(180deg)}
.ext-more>.ext-vid{border-radius:0 0 14px 14px}
.ext-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;flex:none}
.join-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.join-steps li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink2)}
.join-steps li>span{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.join-steps li.on{color:var(--ink);font-weight:500}
.join-steps li.on>span{background:var(--brand);color:#fff;box-shadow:none}
.join-steps li.done>span{background:var(--okSoft);color:var(--ok);box-shadow:none}
.nc-pay:not(:has(#pay-paid:checked)) .pay-paid,.nc-pay:not(:has(#pay-app:checked)) .pay-hint-app,.nc-pay:not(:has(#pay-none:checked)) .pay-hint-none{display:none}
.file-pick{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--ink2)}
.file-pick span{overflow-wrap:anywhere}
.setup-dot{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1.5px var(--line2);margin-top:1px}
.setup-dot.done{background:var(--okSoft);color:var(--ok);box-shadow:none}
.legal{display:flex;flex-direction:column;gap:12px;padding-bottom:48px}
.legal h2{margin-top:14px}
.legal p,.legal li{font-size:15px;line-height:1.85;color:var(--ink2);margin:0}
.legal ul{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:8px}
.legal b{color:var(--ink);font-weight:600}
.lvl-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:520px){.lvl-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.in.check{box-shadow:inset 0 0 0 1.5px var(--warn);background:var(--warnSoft)}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.nc-pay:has(select[name=package] option[value=""]:checked) .nc-deal,.nc-deal:not(:has(#deal-price:checked)) .deal-price,.nc-deal:not(:has(#deal-pct:checked)) .deal-pct,.nc-deal:has(#deal-none:checked) .deal-hint{display:none}
.task-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
a.task-row:hover{background:var(--shell)}
.chip.wa{background:var(--waSoft);color:var(--wa);box-shadow:none;flex:none}
#digest:not(:has(#digest-on:checked)) .digest-time{display:none}
.msg{padding:0;overflow:hidden}
.msg-sum{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.msg-sum::-webkit-details-marker{display:none}
.msg[open] .msg-chev{transform:rotate(-90deg)}
.msg-chev{transition:transform .25s var(--ease)}
.msg-form{padding:0 16px 16px}
.msg-preview{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:16px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--line)}
.msg-preview.wa{background:var(--waSoft)}
.msg-m>summary{cursor:pointer}
.msg-var-inline{font-family:inherit;padding:0 6px;border-radius:6px;background:var(--brandSoft);color:var(--brandInk)}
form:has(input[name=where][value=gym]:checked) .wiz-gear,form:not(:has(input[name=where]:checked)) .wiz-gear{display:none}
.chip-sep{width:1px;align-self:stretch;background:var(--line);margin:4px 4px}
.note-row{padding:14px 16px;text-decoration:none;color:inherit;align-items:flex-start}
.note-row.unread{box-shadow:var(--sh),inset 0 0 0 1.5px var(--brandSoft);background:var(--card)}
.note-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;margin-top:6px}

/* reviews: stars to tap (first on the right), stars to read, the video and its upload bar */
.nav:has(a:nth-child(6)) a{padding:0 12px}
.nav:has(a:nth-child(6)) a.on{padding:0 15px}
.star-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.star-pick{display:inline-flex;flex-direction:row-reverse;gap:2px}
.star-pick input{position:absolute;opacity:0;pointer-events:none}
.star-pick label{color:var(--line2);cursor:pointer;padding:3px;border-radius:10px;transition:color .15s,transform .15s var(--ease)}
.star-pick input:checked~label,.star-pick label:hover,.star-pick label:hover~label{color:#F2B01E}
.star-pick label:active{transform:scale(.88)}
.star-pick input:focus-visible+label{box-shadow:0 0 0 2px var(--brand)}
.star-show{display:inline-flex;gap:1px;color:var(--line2)}
.star-show .on{color:#F2B01E}
.review-video{width:100%;max-height:70vh;border-radius:18px;background:#000;display:block}
.vid-drop{min-height:120px}
.vid-drop.picked{min-height:0;padding:8px}
.vid-prev{width:100%;max-height:52vh;border-radius:14px;background:#000}
.vid-note.warn{color:var(--warn)}
.vid-note.bad{color:var(--bad)}
.upload-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.upload-bar span{display:block;height:100%;width:0;background:var(--brand);border-radius:999px;transition:width .2s}