/* ============================================================
   PUMPD — design system
   ============================================================ */

:root{
  --bg:#0A0708;
  --bg-elev:#120C0E;
  --card:rgba(255,255,255,.048);
  --card-2:rgba(255,255,255,.075);
  --card-3:rgba(255,255,255,.11);
  --stroke:rgba(255,255,255,.085);
  --stroke-2:rgba(255,255,255,.16);
  --text:#F6F2F1;
  --dim:#A09496;
  --dim-2:#6B6162;
  --red:#E2382C;
  --red-soft:#FF5A47;
  --red-deep:#8C1A16;
  --cream:#EFE9E5;
  --green:#4ADE80;
  --amber:#F5B544;

  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  --pad:18px;
  --tab-h:64px;

  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);

  --ease:cubic-bezier(.32,.72,0,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;margin:0;padding:0}

body{
  background:#050405;
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

input,textarea,select,button{font-family:inherit;font-size:inherit;color:inherit}
input,textarea{-webkit-user-select:text;user-select:text}
button{border:0;background:none;padding:0;cursor:pointer;color:inherit}
img,svg{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}

/* ---------- device shell ---------- */
#app{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  background:var(--bg);
  isolation:isolate;
}
#frame-glow{display:none}
#island{display:none}

#bg-layer{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -8%, rgba(196,32,24,.42) 0%, rgba(126,20,18,.20) 38%, rgba(10,7,8,0) 72%),
    radial-gradient(90% 50% at 108% 8%, rgba(255,80,60,.16) 0%, rgba(10,7,8,0) 60%),
    linear-gradient(180deg,#150C0D 0%, #0A0708 46%, #080506 100%);
  transition:opacity .5s var(--ease);
}
#bg-layer::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(90% 46% at 50% 4%, #000 0%, transparent 78%);
  mask-image:radial-gradient(90% 46% at 50% 4%, #000 0%, transparent 78%);
}
body.dim-bg #bg-layer{opacity:.55}

#view{
  position:absolute;inset:0;z-index:1;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding-bottom:calc(var(--tab-h) + var(--sab) + 12px);
}
body.no-tabs #view{padding-bottom:var(--sab)}
body.no-tabs #tabbar{transform:translateY(140%);pointer-events:none}

.page{min-height:100%;animation:pageIn .42s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
.page.flat{animation:fadeIn .3s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.pad{padding-inline:var(--pad)}
.top-safe{height:calc(var(--sat) + 8px)}

/* ---------- typography ---------- */
.h1{font-size:30px;font-weight:800;letter-spacing:-.03em}
.h2{font-size:22px;font-weight:750;letter-spacing:-.025em}
.h3{font-size:17px;font-weight:700;letter-spacing:-.015em}
.label{font-size:11px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--dim-2)}
.sub{font-size:13.5px;color:var(--dim);font-weight:450}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- generic bits ---------- */
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.row{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between}
.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap14{gap:14px}
.grow{flex:1;min-width:0}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.mt18{margin-top:18px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{text-align:center}

.icon-btn{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--card-2);border:1px solid var(--stroke);
  transition:transform .18s var(--ease),background .18s;
}
.icon-btn:active{transform:scale(.9);background:var(--card-3)}
.icon-btn.light{background:#F2EDEA;border-color:transparent;color:#141011}
.icon-btn svg{width:18px;height:18px}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:56px;border-radius:999px;font-size:16px;font-weight:650;letter-spacing:-.01em;
  transition:transform .18s var(--ease),filter .18s,opacity .18s;
  width:100%;
}
.btn:active{transform:scale(.975)}
.btn.primary{background:linear-gradient(180deg,#F6F1EE,#DFD6D1);color:#15100F;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.btn.ghost{background:rgba(255,255,255,.055);border:1px solid var(--stroke-2);color:var(--text)}
.btn.red{background:linear-gradient(180deg,var(--red-soft),var(--red));color:#fff;box-shadow:0 12px 34px rgba(226,56,44,.32)}
.btn.sm{height:44px;font-size:14.5px;width:auto;padding-inline:20px}
.btn[disabled]{opacity:.45;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:999px;
  background:rgba(20,14,15,.55);border:1px solid rgba(255,255,255,.13);
  font-size:12.5px;font-weight:550;letter-spacing:-.01em;white-space:nowrap;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.chip svg{width:13px;height:13px;opacity:.85}
.chip.solid{background:var(--card-2);border-color:var(--stroke)}

.pill-tabs{display:flex;gap:6px;padding:4px;background:var(--card);border:1px solid var(--stroke);border-radius:999px}
.pill-tabs button{flex:1;height:36px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--dim);transition:.2s var(--ease)}
.pill-tabs button.on{background:var(--card-3);color:var(--text)}

.divider{height:1px;background:var(--stroke);margin:14px 0}

.thumb{
  width:52px;height:52px;flex:0 0 52px;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;position:relative;
}
.thumb svg{width:26px;height:26px;opacity:.92}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb.lg{width:64px;height:64px;flex-basis:64px;border-radius:18px}
.thumb.sm{width:42px;height:42px;flex-basis:42px;border-radius:12px}

.progress{height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.progress i{display:block;height:100%;background:var(--cream);border-radius:2px;transition:width .5s var(--ease)}

.seg{display:flex;gap:5px}
.seg i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.13);overflow:hidden;position:relative}
.seg i.on::after{content:"";position:absolute;inset:0;background:var(--cream)}
.seg i.part::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--cream)}

/* ---------- tab bar ---------- */
#tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:40;
  height:calc(var(--tab-h) + var(--sab));
  padding-bottom:var(--sab);
  display:flex;align-items:center;
  background:rgba(12,8,9,.72);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.07);
  transition:transform .38s var(--ease);
}
#tabbar button{
  flex:1;height:var(--tab-h);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--dim-2);font-size:10px;font-weight:600;letter-spacing:.01em;
  transition:color .22s var(--ease);
}
#tabbar button svg{width:22px;height:22px;transition:transform .3s var(--ease)}
#tabbar button.on{color:var(--text)}
#tabbar button.on svg{transform:translateY(-1px) scale(1.04)}
#tabbar button:active svg{transform:scale(.88)}

/* ---------- welcome ---------- */
.welcome{position:relative;min-height:100%;display:flex;flex-direction:column;overflow:hidden}
.welcome-hero{position:absolute;inset:0;z-index:0}
.welcome-hero img{width:100%;height:100%;object-fit:cover}
.welcome-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,6,7,.35) 0%,rgba(10,6,7,0) 26%,rgba(10,6,7,.55) 62%,#0A0607 88%);
}
.welcome-inner{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;padding:0 22px calc(26px + var(--sab))}
.float-stat{position:absolute;z-index:2;font-size:13px;line-height:1.25;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.float-stat b{display:block;font-weight:750}
.float-stat span{color:rgba(255,255,255,.62);font-weight:450}

.wordmark{display:flex;align-items:center;gap:9px}
.wordmark svg{width:40px;height:44px}
.wordmark span{font-size:38px;font-weight:800;letter-spacing:-.045em}

/* ---------- forms ---------- */
.field{position:relative;margin-top:12px}
.field label{position:absolute;top:11px;left:18px;font-size:10.5px;font-weight:650;letter-spacing:.11em;text-transform:uppercase;color:var(--dim-2);pointer-events:none}
.field input,.field textarea,.field select{
  width:100%;background:var(--card);border:1px solid var(--stroke);border-radius:var(--r-md);
  padding:30px 18px 13px;font-size:16px;font-weight:500;outline:none;
  transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:112px;resize:none;line-height:1.45}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(255,255,255,.28);background:var(--card-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--dim-2)}
.field.plain input{padding:15px 18px}
.field .suffix{position:absolute;right:14px;bottom:11px;font-size:12px;color:var(--dim-2)}

.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{
  padding:15px 15px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--stroke);
  text-align:left;transition:.2s var(--ease);
}
.opt.on{background:rgba(226,56,44,.14);border-color:rgba(255,90,71,.55)}
.opt:active{transform:scale(.97)}
.opt b{display:block;font-size:14.5px;font-weight:650}
.opt small{display:block;margin-top:3px;font-size:11.5px;color:var(--dim)}

.switch{width:48px;height:29px;flex:0 0 48px;border-radius:999px;background:rgba(255,255,255,.13);position:relative;transition:background .25s var(--ease)}
.switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .28s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.switch.on{background:var(--red)}
.switch.on::after{transform:translateX(19px)}

/* ---------- home ---------- */
.greet-row{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:15px;background:linear-gradient(140deg,#F0685A,#B4231C);color:#fff;position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar.lg{width:74px;height:74px;flex-basis:74px;font-size:26px}

.week-strip{display:flex;gap:7px}
.wday{
  flex:1;padding:9px 0 10px;border-radius:15px;text-align:center;
  background:var(--card);border:1px solid var(--stroke);transition:.2s var(--ease);
}
.wday small{display:block;font-size:9.5px;font-weight:650;letter-spacing:.06em;color:var(--dim-2);text-transform:uppercase}
.wday b{display:block;margin-top:5px;font-size:15px;font-weight:700}
.wday .dot{width:5px;height:5px;border-radius:50%;margin:5px auto 0;background:transparent}
.wday.done .dot{background:var(--green)}
.wday.rest .dot{background:rgba(255,255,255,.2)}
.wday.today{background:rgba(226,56,44,.16);border-color:rgba(255,90,71,.5)}
.wday.today .dot{background:var(--red-soft)}

.hero-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  min-height:214px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;
}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(9,6,7,.15) 0%,rgba(9,6,7,.55) 55%,rgba(9,6,7,.92) 100%)}
.hero-card>*{position:relative;z-index:2}
.hero-card:active{transform:scale(.985);transition:transform .2s var(--ease)}

.stat-card{padding:16px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--stroke);min-width:150px;flex:0 0 auto}
.stat-card .v{font-size:27px;font-weight:780;letter-spacing:-.035em;margin-top:10px}
.stat-card .v em{font-style:normal;font-size:13px;font-weight:600;color:var(--dim);margin-left:3px}

.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1);scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start}
.hscroll::after{content:"";flex:0 0 6px}
/* full-bleed variant: for scrollers that are direct children of .page */
.hscroll.edge{margin-inline:0}

.list-row{display:flex;align-items:center;gap:13px;padding:12px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--stroke);transition:.18s var(--ease);width:100%;text-align:left}
.list-row:active{transform:scale(.985);background:var(--card-2)}
.list-row .chev{color:var(--dim-2);flex:0 0 auto}
.list-row .chev svg{width:16px;height:16px}

/* ---------- coach ---------- */
.coach{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid rgba(255,255,255,.09);padding:16px;display:flex;gap:14px;align-items:center;
  background:linear-gradient(120deg,rgba(226,56,44,.20),rgba(255,255,255,.03) 62%)}
.coach .medal{position:absolute;right:-14px;top:-16px;width:104px;height:104px;opacity:.17}

/* ---------- train ---------- */
.train-head{position:sticky;top:0;z-index:20;padding:calc(var(--sat) + 10px) var(--pad) 12px;
  background:linear-gradient(180deg,rgba(10,7,8,.96) 55%,rgba(10,7,8,0));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.grabber{width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 14px}

.ex-card{border-radius:var(--r-xl);background:rgba(255,255,255,.052);border:1px solid var(--stroke);padding:14px;transition:.3s var(--ease)}
.ex-card.dim{opacity:.5}
.ex-card.dim .sets-tbl{opacity:.38}

.note-pill{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-top:12px;padding:11px 13px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid var(--stroke);font-size:13px;color:var(--dim);transition:.18s var(--ease)}
.note-pill:active{background:var(--card-2)}
.note-pill svg{width:15px;height:15px;flex:0 0 15px;opacity:.7}

.sets-tbl{margin-top:14px}
.sets-head,.set-row{display:grid;grid-template-columns:64px 1fr 1fr 1fr 34px;gap:7px;align-items:center}
.sets-head{padding:0 4px 8px}
.sets-head span{font-size:9.5px;font-weight:700;letter-spacing:.11em;color:var(--dim-2);text-transform:uppercase;display:flex;align-items:center;gap:3px}
.sets-head span svg{width:10px;height:10px}
.set-row{margin-bottom:7px;transition:opacity .3s var(--ease)}
.set-row.done .cell{background:rgba(255,255,255,.028);color:var(--dim)}
.cell{height:46px;border-radius:14px;background:rgba(255,255,255,.058);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;gap:3px;font-size:15px;font-weight:600;position:relative;transition:.2s var(--ease)}
.cell:active{background:rgba(255,255,255,.1)}
.cell.idx{justify-content:flex-start;padding-left:12px;font-size:14px;gap:5px}
.cell.idx em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--dim-2)}
.cell .caret{width:9px;height:9px;opacity:.4}
.cell input{width:100%;height:100%;background:none;border:0;text-align:center;font-size:15px;font-weight:600;outline:none;padding:0}
.set-check{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:.22s var(--ease)}
.set-check svg{width:15px;height:15px;opacity:.35;transition:.2s}
.set-check.on{background:#fff;border-color:#fff}
.set-check.on svg{opacity:1;color:#141011}
.set-check:active{transform:scale(.85)}

.rest-bar{
  position:absolute;left:10px;right:10px;bottom:calc(10px + var(--sab));z-index:45;
  display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:26px;
  background:rgba(22,15,16,.82);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  animation:barIn .45s var(--ease) both;
}
@keyframes barIn{from{transform:translateY(120%)}to{transform:none}}
.rest-bar .link{font-size:12.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rest-bar .time{font-size:26px;font-weight:700;letter-spacing:-.03em;min-width:70px;text-align:center}

/* ---------- summary ---------- */
.sum-hero{position:relative;min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--pad) 44px}
.sum-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sum-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,6,7,.45) 0,rgba(10,6,7,.1) 30%,rgba(10,6,7,.7) 72%,rgba(10,6,7,.95) 100%)}
.sum-hero>*{position:relative;z-index:2}
.sum-band{position:relative;z-index:3;margin-top:-30px;background:#F3EEEB;color:#15100F;border-radius:26px 26px 0 0;padding:13px 0 2px;text-align:center;
  font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.sum-band::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;background:#F3EEEB;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 100%, transparent 68%, #000 68.5%);
  mask-image:radial-gradient(120% 100% at 50% 100%, transparent 68%, #000 68.5%)}

.chips-wrap{display:flex;flex-wrap:wrap;gap:7px}

/* ---------- stats ---------- */
.bars{display:flex;align-items:flex-end;gap:9px;height:130px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.bars .b i{display:block;width:100%;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,rgba(255,90,71,.95),rgba(140,26,22,.5));animation:grow .6s var(--ease) both}
.bars .b.max i{background:linear-gradient(180deg,#F7F1EE,rgba(255,255,255,.28))}
.bars .b small{font-size:9.5px;color:var(--dim-2);font-weight:600}
@keyframes grow{from{transform:scaleY(.02);opacity:0}to{transform:none;opacity:1}}
.bars .b i{transform-origin:bottom}

.ring{width:112px;height:112px;flex:0 0 112px;position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .val{font-size:24px;font-weight:780;letter-spacing:-.03em}
.ring .cap{font-size:10px;color:var(--dim-2);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.dist-row{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.dist-row .bar{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.dist-row .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--red),var(--red-soft));animation:wide .7s var(--ease) both}
@keyframes wide{from{width:0!important}}

/* ---------- exercise detail ---------- */
.media{position:relative;height:290px;border-radius:0 0 var(--r-xl) var(--r-xl);overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,7,.55) 0,transparent 40%,rgba(10,6,7,.85) 100%)}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.2s var(--ease)}
.play:active{transform:translate(-50%,-50%) scale(.9)}
.play svg{width:24px;height:24px;margin-left:3px}

.step{display:flex;gap:13px;margin-bottom:15px}
.step .n{width:25px;height:25px;flex:0 0 25px;border-radius:50%;background:var(--card-2);border:1px solid var(--stroke);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--dim)}
.step p{font-size:14px;color:#D6CDCD;line-height:1.5}

/* ---------- studio ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:var(--card-2);border:1px solid var(--stroke);font-size:11px;font-weight:600;color:var(--dim)}
.tag.live{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.34);color:#8BEFB2}
.tag.draft{background:rgba(245,181,68,.13);border-color:rgba(245,181,68,.3);color:#F5C979}

/* ---------- sheet ---------- */
#sheet-host{position:absolute;inset:0;z-index:60;pointer-events:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);opacity:0;transition:opacity .32s var(--ease);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;
  background:#161011;border:1px solid var(--stroke);border-bottom:0;
  border-radius:28px 28px 0 0;padding:10px var(--pad) calc(20px + var(--sab));
  transform:translateY(100%);transition:transform .38s var(--ease);
}
#sheet-host.open{pointer-events:auto}
#sheet-host.open .scrim{opacity:1}
#sheet-host.open .sheet{transform:none}

/* ---------- toast ---------- */
#toast{
  position:absolute;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 18px);transform:translate(-50%,20px);
  z-index:80;padding:12px 20px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:rgba(240,235,232,.97);color:#14100F;box-shadow:0 12px 34px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.32s var(--ease);white-space:nowrap;max-width:88%;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- empty ---------- */
.empty{padding:52px 24px;text-align:center;color:var(--dim-2)}
.empty svg{width:44px;height:44px;margin:0 auto 14px;opacity:.35}

/* ============================================================
   Desktop: iPhone 17 Pro frame
   ============================================================ */
@media (min-width:760px) and (min-height:820px){
  body{display:grid;place-items:center;background:radial-gradient(90% 70% at 50% 0%,#1B1113 0%,#050405 60%)}
  #app{
    width:402px;height:874px;
    border-radius:56px;
    border:11px solid #17181A;
    box-shadow:0 0 0 2px #3A3B3E, 0 60px 120px rgba(0,0,0,.75), 0 0 90px rgba(226,56,44,.10);
    --sat:52px;--sab:22px;
  }
  #island{
    display:block;position:fixed;z-index:200;
    top:calc(50vh - 437px + 22px);left:50%;transform:translateX(-50%);
    width:124px;height:35px;border-radius:20px;background:#000;pointer-events:none;
  }
  #frame-glow{
    display:block;position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(60% 40% at 50% 0%,rgba(226,56,44,.10),transparent 70%);
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}