/* GYM — one hue, two tones. Light studio grey, white card. */
:root{
  --bg:#e8e8ea; --bg2:#dedee1;
  --card:#fff; --ink:#1c1c1e; --ink2:#8e8e93; --ink3:#b8b8bd;
  --line:#e9e9ec; --tile1:#f4f4f6; --tile2:#dcdce0;
  --go:#1c1c1e; --skip:#c7c7cc;
  --pad:20px; --r:30px;
  font-synthesis-weight:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  letter-spacing:-0.01em;overscroll-behavior:none;
  display:flex;flex-direction:column;align-items:center;
}
#app{width:100%;max-width:430px;flex:1;display:flex;flex-direction:column;padding:0 var(--pad) 96px;position:relative}

/* ---------- header ---------- */
header{padding:22px 2px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.h-date{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.h-title{font-size:23px;font-weight:700;letter-spacing:-.03em;margin-top:3px;line-height:1.15}
.h-sub{font-size:12.5px;color:var(--ink2);margin-top:3px}
.daynav{display:flex;gap:4px;margin-top:2px}
.daynav button{
  width:26px;height:26px;border:0;border-radius:9px;background:transparent;color:var(--ink3);
  font:600 10px/1 -apple-system,system-ui,sans-serif;letter-spacing:.02em;cursor:pointer;
}
.daynav button.on{background:var(--ink);color:#fff}
.daynav button.has{color:var(--ink)}

/* ---------- progress ---------- */
.prog{display:flex;gap:3px;padding:0 2px 14px}
.prog i{flex:1;height:3px;border-radius:2px;background:#d2d2d7;transition:background .25s}
.prog i.done{background:var(--ink)}
.prog i.skip{background:var(--skip)}

/* ---------- deck ---------- */
.deck{position:relative;flex:1;min-height:480px;display:flex;align-items:flex-start;justify-content:center}
.card{
  position:absolute;top:0;left:0;right:0;
  background:var(--card);border-radius:var(--r);
  padding:14px 14px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -6px rgba(0,0,0,.13),0 30px 60px -20px rgba(0,0,0,.16);
  will-change:transform;touch-action:none;user-select:none;
}
.card.behind{pointer-events:none}

/* image tile */
.tile{
  position:relative;width:100%;aspect-ratio:1/.70;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,var(--tile1) 0%,var(--tile2) 100%);
  display:flex;align-items:center;justify-content:center;
}
.tile svg{width:66%;height:66%;overflow:visible}
/* These are anatomical diagrams, not photos. `cover` would crop off heads and feet,
   so the figure is CONTAINED on a white ground — same as the studio-shot reference. */
.tile.shot{background:#fff}
.tile.shot .ghost{display:none}   /* the figure owns the tile; dots + pill already say the set */
.tile .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5%;display:block}
.tile .ghost{
  position:absolute;right:14px;bottom:-22px;font-size:96px;font-weight:800;letter-spacing:-.06em;
  color:rgba(28,28,30,.055);line-height:1;pointer-events:none;font-variant-numeric:tabular-nums;
}
.setdots{position:absolute;top:12px;right:12px;display:flex;gap:4px}
.setdots i{width:6px;height:6px;border-radius:50%;background:rgba(28,28,30,.18)}
.setdots i.on{background:var(--ink)}

/* pills row */
.pills{display:flex;gap:6px;flex-wrap:wrap;margin:14px 2px 10px}
.pill{
  display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:10.5px;font-weight:500;color:var(--ink2);
  letter-spacing:-.005em;white-space:nowrap;
}
.pill i{font-size:9px;color:var(--ink3)}

/* titles */
.name{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1.08;margin:0 2px}
.name2{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1.08;color:var(--ink3);margin:0 2px 8px}
.cue{font-size:11.5px;line-height:1.55;color:var(--ink2);margin:0 2px;max-width:96%}

/* inputs */
.inputs{display:flex;gap:8px;margin:16px 2px 0}
.ip{
  flex:1;position:relative;display:flex;align-items:center;
  background:#f6f6f8;border:1px solid var(--line);border-radius:999px;height:52px;padding:0 14px;
  transition:border-color .15s,background .15s;
}
.ip:focus-within{border-color:var(--ink);background:#fff}
.ip label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:600;pointer-events:none}
.ip input{
  flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;text-align:right;
  font:700 19px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink);
  touch-action:auto;
}
.ip input::-webkit-outer-spin-button,.ip input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ip .unit{font-size:12px;font-weight:600;color:var(--ink3);margin-left:4px}
.reps-quick{display:flex;gap:5px;margin:10px 2px 0;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.reps-quick::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;min-width:42px;height:40px;border-radius:14px;border:1px solid var(--line);
  background:#f6f6f8;color:var(--ink2);font:700 15px/1 -apple-system,system-ui,sans-serif;
  letter-spacing:-.02em;cursor:pointer;transition:background .13s,color .13s,border-color .13s;
}
.chip.tgt{background:#fff;color:var(--ink);border-color:#dcdce0}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* the reps field asks for attention until it has a number — reps are the whole point */
.ip.want{border-color:#c7c7cc;background:#fff}
.ip.want label{color:var(--ink2)}
.lastline{font-size:10.5px;color:var(--ink3);margin:10px 4px 0;text-align:center;letter-spacing:-.005em}

/* swipe stamps */
.stamp{
  position:absolute;top:26px;padding:7px 13px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;
}
.stamp.go{left:26px;background:var(--ink);color:#fff}
.stamp.no{right:26px;background:#fff;color:var(--ink3);border:1px solid var(--line)}

/* ---------- hint + undo ---------- */
.hint{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;
  font-size:11px;color:var(--ink3);letter-spacing:-.005em}
.hint b{font-weight:600;color:var(--ink2)}
.undo{
  position:absolute;left:50%;transform:translateX(-50%);bottom:104px;
  height:34px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font:600 12px/1 -apple-system,system-ui,sans-serif;color:var(--ink2);display:none;align-items:center;gap:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);cursor:pointer;
}
.undo.show{display:inline-flex}

/* ---------- rest timer ---------- */
.rest{
  position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:40;
  background:var(--ink);color:#fff;border-radius:999px;height:40px;padding:0 8px 0 16px;
  display:none;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  font:600 13px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em;
}
.rest.show{display:flex}
.rest .t{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}
.rest button{border:0;background:rgba(255,255,255,.16);color:#fff;height:26px;padding:0 11px;border-radius:999px;
  font:600 11px/1 -apple-system,system-ui,sans-serif;cursor:pointer}

/* ---------- done screen ---------- */
.done{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  flex:1;min-height:460px;gap:6px;padding:0 10px}
.done.show{display:flex}
.done .big{font-size:44px;font-weight:700;letter-spacing:-.04em}
.done .lbl{font-size:12px;color:var(--ink2);max-width:280px;line-height:1.55}
.done .stats{display:flex;gap:8px;margin:22px 0 18px;width:100%}
.done .stat{flex:1;background:#fff;border-radius:20px;padding:16px 10px;box-shadow:0 8px 22px -12px rgba(0,0,0,.18)}
.done .stat b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em}
.done .stat span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.btn{height:50px;padding:0 26px;border-radius:999px;border:0;background:var(--ink);color:#fff;
  font:600 14px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink2);border:1px solid var(--line)}

/* ---------- bottom nav ---------- */
nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;justify-content:center;gap:6px;padding:8px 0 max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(232,232,234,0) 0%,var(--bg) 42%);
}
nav .tabs{display:flex;gap:4px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);padding:5px;border-radius:999px;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.7)}
nav button{
  display:flex;align-items:center;gap:7px;height:40px;padding:0 17px;border:0;border-radius:999px;
  background:transparent;color:var(--ink2);font:600 12.5px/1 -apple-system,system-ui,sans-serif;
  letter-spacing:-.01em;cursor:pointer;transition:background .18s,color .18s;
}
nav button.on{background:var(--ink);color:#fff}
nav button svg{width:15px;height:15px;fill:currentColor}

/* ---------- other pages ---------- */
.page{display:none;flex:1;flex-direction:column}
.page.on{display:flex}
.sheet{background:#fff;border-radius:26px;padding:20px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 26px -14px rgba(0,0,0,.16)}
.sheet h3{margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.025em}
.sheet p{margin:0;font-size:12px;color:var(--ink2);line-height:1.55}
.bar{height:7px;border-radius:4px;background:#eeeef0;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:4px;transition:width .4s}
.row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.row b{font-size:17px;font-weight:700;letter-spacing:-.03em}
.row span{color:var(--ink3);font-size:11px}
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  flex:1;gap:10px;color:var(--ink2);padding:40px 20px}
.soon svg{width:36px;height:36px;fill:var(--ink3)}
.soon h3{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink);margin:6px 0 0}
.soon p{font-size:12.5px;line-height:1.6;max-width:290px;margin:0}

/* ================= MEALS ================= */
.phase{
  height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font:600 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);cursor:pointer;white-space:nowrap;flex:0 0 auto;
}
.phase.cut{background:var(--ink);color:#fff;border-color:var(--ink)}

.coach{
  background:var(--ink);color:#fff;border-radius:22px;padding:14px 16px;margin:0 0 10px;
  font-size:12.5px;line-height:1.5;letter-spacing:-.012em;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.55);
}

/* four numbers, tight */
.rings{display:flex;gap:6px;margin-bottom:10px}
.ring{flex:1;background:#fff;border-radius:18px;padding:11px 6px 10px;text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 20px -16px rgba(0,0,0,.22)}
.ring b{display:block;font-size:17px;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.ring b small{font-size:9.5px;font-weight:600;color:var(--ink3);letter-spacing:-.01em}
.ring span{display:block;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;margin-top:2px}
.ring .b{height:3px;border-radius:2px;background:#ececef;margin-top:7px;overflow:hidden}
.ring .b i{display:block;height:100%;background:var(--ink);border-radius:2px;
  transition:width .45s cubic-bezier(.2,.8,.25,1)}
.ring.over .b i{background:#c7c7cc}

/* ---- water: everything on this card is editable in place ---- */
.wcard{background:#fff;border-radius:24px;padding:16px 16px 14px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 26px -18px rgba(0,0,0,.22)}
.wtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wl{display:flex;align-items:baseline;gap:7px}
.wnow{font-size:26px;font-weight:700;letter-spacing:-.04em}
.wof{font-size:12px;color:var(--ink3);font-weight:600}
.wswap{height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#f6f6f8;
  font:600 10.5px/1 -apple-system,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink2);cursor:pointer}
.bottles{display:flex;gap:7px;margin:13px 0 12px}
.bottle{flex:1 1 0;min-width:0;height:58px;border-radius:16px;border:1px solid var(--line);
  background:#f6f6f8;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .16s,border-color .16s,transform .09s}
.bottle:active{transform:scale(.94)}
.bottle svg{width:16px;height:21px;fill:none;stroke:var(--ink3);stroke-width:1.7}
.bottle.full{background:var(--ink);border-color:var(--ink)}
.bottle.full svg{stroke:#fff;fill:rgba(255,255,255,.25)}
.wedit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px}
.wedit label{font-size:11px;color:var(--ink3);font-weight:600}
.wedit label.sp{margin-left:6px}
.wedit input{width:66px;height:40px;border:1px solid var(--line);border-radius:13px;background:#f6f6f8;
  text-align:center;font:700 17px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.03em;
  color:var(--ink);outline:0;transition:border-color .14s,background .14s}
.wedit input:focus{border-color:var(--ink);background:#fff}
.wedit .u{font-size:11px;color:var(--ink3);font-weight:600}
.wcalc{font-size:10.5px;color:var(--ink3);font-weight:600;margin-top:9px;letter-spacing:-.005em}

/* ---- meal tiles ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.tilecard{
  position:relative;border-radius:26px;overflow:hidden;background:#fff;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px -16px rgba(0,0,0,.25);
  transition:transform .12s,box-shadow .2s;
}
.tilecard:active{transform:scale(.985)}
.tilecard .hero{
  height:104px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:12px 13px;background:linear-gradient(158deg,#f3f3f5 0%,#e2e2e6 100%);position:relative;
}
.tilecard .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tilecard .pnum{font-size:30px;font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--ink);
  position:relative}
.tilecard .pnum i{font-size:12px;font-weight:600;font-style:normal;color:var(--ink3);letter-spacing:-.01em}
.tilecard .plbl{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-top:2px;position:relative}
.tilecard .foot{padding:11px 13px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tilecard h4{margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.tilecard .sub{font-size:10.5px;color:var(--ink3);font-weight:500;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:98px}
.tilecard .act{
  flex:0 0 auto;height:30px;padding:0 12px;border-radius:999px;border:0;background:var(--ink);color:#fff;
  font:600 11px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.tilecard .act svg{width:10px;height:10px;fill:currentColor}
/* eaten — the card goes dark, so the page fills in as the day goes */
.tilecard.ate{background:var(--ink)}
.tilecard.ate .hero{background:linear-gradient(158deg,#2c2c2e 0%,#1c1c1e 100%)}
.tilecard.ate .pnum{color:#fff}
.tilecard.ate .pnum i,.tilecard.ate .plbl{color:rgba(255,255,255,.45)}
.tilecard.ate h4{color:#fff}
.tilecard.ate .sub{color:rgba(255,255,255,.45)}
.tilecard.ate .act{background:rgba(255,255,255,.16);color:#fff}
.tilecard.skip{opacity:.42}
.tilecard.skip .act{background:#f2f2f5;color:var(--ink3)}

.addmeal{width:100%;height:46px;border-radius:22px;border:1px dashed #d3d3d9;background:transparent;
  color:var(--ink2);font:600 12.5px/1 -apple-system,system-ui,sans-serif;cursor:pointer;margin-bottom:8px}

/* ---- per-meal edit sheet ---- */
.sheetwrap{position:fixed;inset:0;z-index:60;background:rgba(20,20,22,.34);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;
  align-items:flex-end;justify-content:center}
.sheetwrap.show{display:flex}
.esheet{width:100%;max-width:430px;max-height:92vh;overflow-y:auto;background:var(--bg);
  border-radius:28px 28px 0 0;padding:0 18px calc(20px + env(safe-area-inset-bottom));
  animation:up .26s cubic-bezier(.2,.85,.25,1)}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:translateY(0);opacity:1}}
.esheet .eh{position:sticky;top:0;background:var(--bg);padding:16px 0 12px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.esheet .grab{position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:2px;background:#c9c9cf}
.esheet h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.035em}
.ebtn{height:36px;padding:0 15px;border-radius:999px;border:0;background:var(--ink);color:#fff;
  font:600 12.5px/1 -apple-system,system-ui,sans-serif;cursor:pointer;flex:0 0 auto}
.ebtn.g{background:#fff;color:var(--ink2);border:1px solid var(--line)}
.ebtn.d{background:#fff;color:#b03636;border:1px solid var(--line)}
.card2{background:#fff;border-radius:22px;padding:15px 15px 14px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 20px -16px rgba(0,0,0,.2)}
.card2 .lbl{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;margin-bottom:8px}
.nmrow{display:flex;gap:7px}
.nmrow input{border:1px solid var(--line);border-radius:13px;height:44px;padding:0 12px;background:#f6f6f8;
  font:700 16px/1 -apple-system,system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink);outline:0;min-width:0}
.nmrow input:focus{border-color:var(--ink);background:#fff}
.nmrow .nm{flex:1}
.nmrow .tm{width:88px;text-align:center;font-size:15px;font-weight:600}
.eitem{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.eitem select{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:13px;
  background:#f6f6f8;padding:0 10px;font:500 14px/1 -apple-system,system-ui,sans-serif;
  color:var(--ink);outline:0;-webkit-appearance:none;appearance:none}
.eitem input{width:78px;height:44px;border:1px solid var(--line);border-radius:13px;background:#f6f6f8;
  text-align:right;padding:0 10px;font:700 17px/1 -apple-system,system-ui,sans-serif;
  letter-spacing:-.03em;color:var(--ink);outline:0}
.eitem input:focus{border-color:var(--ink);background:#fff}
.eitem .u{font-size:10.5px;color:var(--ink3);font-weight:600;width:18px}
.eitem .x{width:32px;height:32px;border-radius:50%;border:0;background:#f2f2f5;color:var(--ink3);
  font:600 16px/1 -apple-system,system-ui,sans-serif;cursor:pointer;flex:0 0 auto}
.eadd{width:100%;height:42px;border-radius:14px;border:1px dashed #d3d3d9;background:transparent;
  color:var(--ink2);font:600 12.5px/1 -apple-system,system-ui,sans-serif;cursor:pointer;margin-top:6px}
.etot{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.etot span{font-size:10.5px;font-weight:600;color:var(--ink2);background:#f4f4f6;
  border-radius:999px;padding:5px 10px;letter-spacing:-.005em}
.verdict{border-radius:22px;padding:15px 16px;font-size:12.5px;line-height:1.55;margin-bottom:10px;
  background:var(--ink);color:#fff}
.verdict.good{background:#14301f;color:#b8f5cf}
.verdict.bad{background:#331818;color:#ffc6c6}
.verdict b{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  opacity:.55;margin-bottom:5px;font-weight:600}

/* ================= BAND ================= */
.dot{width:9px;height:9px;border-radius:50%;background:#c7c7cc;flex:0 0 auto;margin-top:8px}
.dot.live{background:#1c1c1e;box-shadow:0 0 0 4px rgba(28,28,30,.10)}
.bighero{background:#fff;border-radius:26px;padding:20px 18px 18px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 26px -18px rgba(0,0,0,.22)}
.bighero .k{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.bighero .v{font-size:46px;font-weight:700;letter-spacing:-.05em;line-height:1;margin:7px 0 2px}
.bighero .v small{font-size:15px;font-weight:600;color:var(--ink3);letter-spacing:-.02em}
.bighero .msg{font-size:12.5px;line-height:1.5;color:var(--ink2);margin-top:9px}
.bighero .bar{height:6px;border-radius:3px;background:#ececef;margin-top:13px;overflow:hidden}
.bighero .bar i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .5s}
.bstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.bstat{background:#fff;border-radius:20px;padding:14px 14px 13px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 20px -16px rgba(0,0,0,.2)}
.bstat .k{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.bstat .v{font-size:23px;font-weight:700;letter-spacing:-.04em;margin-top:4px;line-height:1}
.bstat .v small{font-size:11px;font-weight:600;color:var(--ink3)}
.bstat .n{font-size:10.5px;color:var(--ink3);margin-top:4px;line-height:1.4}
.trend{background:#fff;border-radius:24px;padding:17px 16px 14px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 26px -18px rgba(0,0,0,.22)}
.trend h3{margin:0 0 2px;font-size:15px;font-weight:700;letter-spacing:-.028em}
.trend p{margin:0 0 14px;font-size:11.5px;color:var(--ink2);line-height:1.5}
.tbars{display:flex;align-items:flex-end;gap:5px;height:88px}
.tbars .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.tbars .bx{width:100%;border-radius:6px 6px 3px 3px;background:#e2e2e6;position:relative;min-height:3px}
.tbars .bx.hit{background:var(--ink)}
.tbars .lb{font-size:8.5px;color:var(--ink3);font-weight:600}
.tline{position:absolute;left:0;right:0;border-top:1px dashed #c7c7cc;pointer-events:none}
/* setup */
.setup{background:#fff;border-radius:26px;padding:20px 18px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 26px -18px rgba(0,0,0,.22)}
.setup h3{margin:0 0 5px;font-size:17px;font-weight:700;letter-spacing:-.03em}
.setup p{margin:0 0 4px;font-size:12.5px;color:var(--ink2);line-height:1.55}
.setup ol{margin:14px 0 0;padding-left:19px}
.setup li{font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:9px}
.setup li b{color:var(--ink);font-weight:600}
.urlbox{background:#1c1c1e;border-radius:16px;padding:13px 14px;margin:12px 0 4px;position:relative}
.urlbox code{display:block;font:500 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#fff;word-break:break-all;letter-spacing:-.01em}
.urlbox button{margin-top:10px;height:32px;padding:0 14px;border-radius:999px;border:0;
  background:rgba(255,255,255,.16);color:#fff;font:600 11px/1 -apple-system,system-ui,sans-serif;cursor:pointer}
.warn{background:#331818;color:#ffc6c6;border-radius:18px;padding:13px 15px;font-size:12px;line-height:1.55;margin-top:12px}
.warn b{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;opacity:.6;margin-bottom:4px}