/* Oceana vape menu + manager — shares the "On The Water" palette */
:root{
  color-scheme:dark;
  --midnight:#03151F; --navy:#062A44; --deep:#0A4D6E; --ocean:#0E7C9E; --turq:#2ED9D9; --aqua:#5FE0E8;
  --sand:#F2E3C8; --cream:#FFF8EC; --coral:#FF7A4D; --sunset:#FF9E4A; --gold:#FFC46B; --peach:#FFD9A8;
  --bg:var(--midnight); --bg2:#051e2c; --card:rgba(10,45,66,.55); --card2:rgba(14,60,86,.6);
  --ink:#F7FCFD; --dim:#8FB0C0; --dim2:#5d8397; --line:rgba(247,252,253,.1); --line2:rgba(247,252,253,.2);
  --ok:#3FE0A0; --low:#FFC46B; --out:#FF7A4D;
  --display:"Archivo","Helvetica Neue","Arial Black",sans-serif; --body:"Inter",system-ui,-apple-system,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --r:22px; --gut:clamp(16px,4vw,48px); --top:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 64px)}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);min-height:100svh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vmax 50vmax at 0% 0%,rgba(46,217,217,.13),transparent 60%),
             radial-gradient(50vmax 40vmax at 100% 30%,rgba(255,122,77,.09),transparent 60%),
             radial-gradient(60vmax 50vmax at 50% 110%,rgba(14,124,158,.18),transparent 60%),var(--bg)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--turq);outline-offset:2px;border-radius:8px}
.wrap{width:min(1320px,100%);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.h{font-family:var(--display);font-weight:900;font-stretch:112%;letter-spacing:-.035em;line-height:.92;text-transform:uppercase}
.grad{background:linear-gradient(100deg,var(--gold),var(--peach) 40%,var(--turq));-webkit-background-clip:text;background-clip:text;color:transparent}

/* nicotine warning — required on tobacco product ads, kept at the very top */
.warn{background:#fff;color:#000;text-align:center;font:700 clamp(12px,1.6vw,15px)/1.3 var(--body);padding:9px 16px;letter-spacing:.01em}

/* ── top bar ── */
.top{position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:14px;padding:0 var(--gut);
  background:rgba(3,21,31,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line)}
.top .logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.top .logo img{height:26px;width:auto}
.top .logo b{font:900 13px var(--display);font-stretch:120%;letter-spacing:.14em;color:var(--turq);border-left:1px solid var(--line2);padding-left:10px}
.top nav{display:flex;gap:4px;margin-left:auto}
.top nav a{font-size:13px;font-weight:600;color:var(--dim);text-decoration:none;padding:8px 12px;border-radius:99px}
.top nav a:hover{color:var(--ink);background:var(--card)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--dim);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--out);box-shadow:0 0 0 4px rgba(255,122,77,.15)}
.status.open i{background:var(--ok);box-shadow:0 0 0 4px rgba(63,224,160,.16);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(63,224,160,0)}}
.bagbtn{position:relative;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:var(--turq);color:var(--midnight);font-weight:800;font-size:13px}
.bagbtn em{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--midnight);color:var(--turq);font-size:11px;display:grid;place-items:center}
.bagbtn.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.12)}}

/* ── hero ── */
.hero{padding-top:clamp(36px,7vw,90px);padding-bottom:26px;position:relative}
.hero .eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:18px}
.hero .eyebrow span{display:inline-block;width:28px;height:1px;background:var(--turq)}
.hero h1{font-size:clamp(46px,10.4vw,150px)}
.hero h1 .l2{display:block}
.hero p.lede{max-width:560px;color:var(--dim);font-size:clamp(15px,1.5vw,18px);margin-top:18px}
.stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px}
.stats div{display:flex;flex-direction:column}
.stats b{font:900 clamp(26px,3.4vw,42px)/1 var(--display);font-stretch:115%;letter-spacing:-.03em}
.stats b.live{color:var(--ok)}
.notice{margin-top:22px;display:inline-flex;gap:10px;align-items:center;padding:10px 16px;border-radius:14px;background:rgba(255,196,107,.12);border:1px solid rgba(255,196,107,.35);color:var(--peach);font-weight:600}

/* ── genie ── */
.genie{position:relative;margin:26px 0 8px;border-radius:28px;padding:1.5px;isolation:isolate;overflow:hidden}
.genie::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from var(--a,0deg),var(--turq),var(--gold),var(--coral),#b06bff,var(--turq));animation:spin 7s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.genie-in{border-radius:27px;background:linear-gradient(180deg,rgba(6,34,52,.97),rgba(3,21,31,.97));padding:clamp(18px,3vw,30px)}
.genie-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.orb{width:44px;height:44px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 35% 30%,#fff,var(--aqua) 22%,var(--ocean) 55%,#0b2e59 80%);box-shadow:0 0 24px rgba(46,217,217,.55),inset -6px -8px 14px rgba(0,0,0,.35)}
.orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px dashed rgba(95,224,232,.5);animation:spin2 12s linear infinite}
.orb.think{animation:think .9s ease-in-out infinite}
@keyframes think{50%{transform:scale(1.12);box-shadow:0 0 44px rgba(255,196,107,.8),inset -6px -8px 14px rgba(0,0,0,.35)}}
@keyframes spin2{to{transform:rotate(360deg)}}
.genie h2{font:900 clamp(22px,2.6vw,32px)/1 var(--display);font-stretch:118%;letter-spacing:-.02em;text-transform:uppercase}
.genie h2 small{display:block;font:500 13px var(--body);letter-spacing:0;text-transform:none;color:var(--dim);margin-top:5px}
.ask{display:flex;gap:10px;margin-top:18px;background:rgba(247,252,253,.05);border:1px solid var(--line2);border-radius:18px;padding:7px 7px 7px 18px;transition:border-color .2s,box-shadow .2s}
.ask:focus-within{border-color:var(--turq);box-shadow:0 0 0 4px rgba(46,217,217,.14)}
.ask input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:16px}
.ask input::placeholder{color:var(--dim2)}
.ask button{padding:11px 20px;border-radius:13px;background:linear-gradient(100deg,var(--turq),var(--aqua));color:var(--midnight);font-weight:800;white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{padding:8px 13px;border-radius:99px;border:1px solid var(--line2);background:rgba(247,252,253,.04);font-size:13px;font-weight:600;color:var(--ink);transition:.18s;white-space:nowrap}
.chip:hover{border-color:var(--turq);background:rgba(46,217,217,.1)}
.chip.on{background:var(--ink);color:var(--midnight);border-color:var(--ink)}
.reply{margin-top:18px;display:none}
.reply.show{display:block}
.reply .say{font-size:16px;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.reply .say::before{content:"✦";color:var(--gold)}
.picks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;overflow-x:auto;padding:14px 2px 6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pick{scroll-snap-align:start;border-radius:18px;background:var(--card);border:1px solid var(--line);padding:14px;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:start;opacity:0;transform:translateY(10px);animation:rise .45s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.pick .dev{grid-row:span 3;font-size:9px}
.pick h4{font-size:15px;line-height:1.2}
.pick .sub{font-size:12px;color:var(--dim)}
.whys{display:flex;flex-wrap:wrap;gap:4px;grid-column:1/-1;margin-top:4px}
.whys span{font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(46,217,217,.1);color:var(--aqua)}
.pick .row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.slot{font:900 clamp(26px,4vw,44px)/1.1 var(--display);font-stretch:115%;letter-spacing:-.02em;text-transform:uppercase;height:1.15em;overflow:hidden;margin-top:14px}

/* ── filter bar ── */
.filters{position:sticky;top:var(--top);z-index:30;background:rgba(3,21,31,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin-top:26px}
.filters .wrap{display:flex;gap:10px;align-items:center;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none}
.filters .wrap::-webkit-scrollbar{display:none}
.seg{display:flex;background:rgba(247,252,253,.05);border:1px solid var(--line);border-radius:99px;padding:3px;flex:none}
.seg button{padding:7px 13px;border-radius:99px;font-size:13px;font-weight:700;color:var(--dim);white-space:nowrap}
.seg button.on{background:var(--ink);color:var(--midnight)}
.search{display:flex;align-items:center;gap:8px;min-width:190px;flex:1;max-width:320px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:rgba(247,252,253,.04)}
.search input{background:none;border:0;outline:0;width:100%;font-size:14px}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--dim);white-space:nowrap;flex:none;cursor:pointer}
.toggle input{appearance:none;width:36px;height:22px;border-radius:99px;background:var(--line2);position:relative;transition:.2s;cursor:pointer}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:.2s}
.toggle input:checked{background:var(--ok)}
.toggle input:checked::after{left:17px}
.tastes{display:flex;gap:6px;flex:none}
.tastes .chip{padding:6px 11px;font-size:12px}

/* ── menu ── */
.brand{padding-top:46px}
.brand-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line2);padding-bottom:12px}
.brand-h h2{font-size:clamp(40px,7vw,96px)}
.brand-h p{color:var(--dim);max-width:360px}
.line{margin-top:26px;border-radius:var(--r);background:linear-gradient(180deg,rgba(10,45,66,.5),rgba(5,30,44,.35));border:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 900px}
.line-h{display:grid;grid-template-columns:auto 1fr auto;gap:18px 26px;align-items:center;padding:clamp(16px,2.4vw,26px)}
.line-h .dev{font-size:15px}
.line-h h3{font:900 clamp(26px,3.2vw,40px)/1 var(--display);font-stretch:115%;letter-spacing:-.03em;text-transform:uppercase}
.line-h .type{display:inline-block;margin-left:8px;vertical-align:middle;font:800 10px var(--mono);letter-spacing:.1em;padding:4px 8px;border-radius:6px;background:rgba(46,217,217,.14);color:var(--turq)}
.line-h .type.kit{background:rgba(255,196,107,.16);color:var(--gold)}
.line-h .type.pods{background:rgba(255,122,77,.16);color:var(--coral)}
.specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.specs span{font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);color:var(--dim)}
.line-h .fits{font-size:12px;color:var(--aqua);margin-top:8px}
.line-side{text-align:right}
.line-side .price{font:900 clamp(28px,3vw,40px)/1 var(--display);font-stretch:110%}
.line-side .count{font-size:13px;color:var(--dim);margin-top:6px}
.line-side .count b{color:var(--ok)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;padding:0 clamp(12px,2vw,20px) clamp(12px,2vw,20px)}
.more{display:block;margin:0 auto 20px;padding:10px 20px;border-radius:99px;border:1px solid var(--line2);font-weight:700;font-size:13px}
.more:hover{border-color:var(--turq)}
.empty{padding:60px 0;text-align:center;color:var(--dim)}

/* flavor tile */
.tile{position:relative;border-radius:16px;background:rgba(3,21,31,.55);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s;text-align:left;overflow:hidden}
.tile:hover{transform:translateY(-3px);border-color:rgba(46,217,217,.45);background:rgba(10,45,66,.7)}
.tile::before{content:"";position:absolute;inset:-40% -40% auto auto;width:120px;height:120px;border-radius:50%;background:var(--c1);opacity:.14;filter:blur(30px);pointer-events:none}
.tile .art{display:flex;align-items:flex-end;justify-content:center;height:100px}
.tile .art .dev{font-size:10px}
.tile .art img{height:100px;width:100px;object-fit:cover;border-radius:12px}
.tile h4{font-size:14px;font-weight:700;line-height:1.2}
.tile p{font-size:12px;color:var(--dim);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.tile .foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.tile.out{opacity:.5}
.tile.out:hover{opacity:.8}
.add{width:32px;height:32px;border-radius:10px;background:var(--turq);color:var(--midnight);font-size:20px;font-weight:800;line-height:1;display:grid;place-items:center;flex:none;transition:.15s}
.add:hover{transform:scale(1.08)}
.add[disabled]{background:var(--line2);color:var(--dim);cursor:not-allowed;transform:none}
.add.in{background:var(--gold)}
.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap}
.badge.ok{background:rgba(63,224,160,.13);color:var(--ok)}
.badge.low{background:rgba(255,196,107,.15);color:var(--low)}
.badge.out{background:rgba(255,122,77,.13);color:var(--out)}
.badge.unk{background:rgba(143,176,192,.12);color:var(--dim)}
.dna{display:flex;gap:8px}
.dna span{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--dim2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.dna i{width:5px;height:5px;border-radius:50%;background:var(--line2)}
.dna i.f{background:var(--aqua)}
.dna .s i.f{background:var(--peach)}
.dna .o i.f{background:#c6ff5a}
.guess{font-size:10px;color:var(--gold);font-weight:700;letter-spacing:.04em}

/* ── device renders (CSS "product shots"); size = font-size ── */
.dev{--c1:#2ED9D9;--c2:#bff;position:relative;display:inline-flex;flex-direction:column;align-items:center;flex:none;filter:drop-shadow(0 .8em .9em rgba(0,0,0,.45))}
.dev i{display:block;position:relative}
.dev .mp{width:1.5em;height:1.1em;border-radius:.6em .6em .25em .25em;background:linear-gradient(90deg,#0b1d27,#2a4150 45%,#0b1d27);margin-bottom:-.1em;z-index:1}
.dev .bd{width:3.2em;height:5.6em;border-radius:.95em;background:linear-gradient(160deg,var(--c1) 8%,var(--c2) 95%);overflow:hidden}
.dev .bd::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 22%,transparent 45%,rgba(0,0,0,.18) 88%)}
.dev .bd::after{content:"";position:absolute;left:12%;top:5%;width:14%;height:60%;border-radius:1em;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);opacity:.55}
.dev .sc{position:absolute;left:50%;top:38%;translate:-50% 0;width:1.8em;height:1.15em;border-radius:.3em;background:#061018;box-shadow:inset 0 0 0 .08em rgba(255,255,255,.18);z-index:2;overflow:hidden}
.dev .sc::before{content:"";position:absolute;left:18%;right:18%;top:28%;height:.14em;border-radius:1em;background:linear-gradient(90deg,var(--aqua) 70%,rgba(95,224,232,.25) 70%);box-shadow:0 .28em 0 0 rgba(255,196,107,.9)}
.dev .sc::after{content:"";position:absolute;right:14%;bottom:18%;width:.38em;height:.22em;border-radius:.05em;border:.05em solid var(--ok)}
.dev.ice .bd{background:linear-gradient(160deg,var(--c1) 8%,var(--c2) 95%),radial-gradient(circle at 30% 20%,#fff 0 .06em,transparent .08em)}
.dev.ice .bd{box-shadow:inset 0 0 0 .12em rgba(220,248,255,.35),inset 0 -.8em 1.4em rgba(220,248,255,.25)}
/* Geek Bar Pulse X / X2 — bigger, curved screen */
.dev.s-pulsex .bd{width:3.4em;height:6em;border-radius:1.1em}
.dev.s-pulsex .sc{width:2.5em;height:1.35em;top:34%;border-radius:.7em/.45em;background:radial-gradient(120% 90% at 50% 0,#0f2733,#040b10)}
/* Pulse 2 — dome full screen */
.dev.s-pulse2 .sc{top:12%;width:2.6em;height:2.4em;border-radius:1.2em 1.2em .45em .45em;background:radial-gradient(90% 80% at 50% 20%,#123241,#03080c)}
/* RAZ — slimmer, taller, pill corners, screen low */
.dev.s-raz .bd,.dev.s-razrx .bd,.dev.s-razryl .bd,.dev.s-raztn .bd{width:2.8em;height:6.2em;border-radius:1.4em}
.dev.s-raz .mp,.dev.s-razrx .mp,.dev.s-razryl .mp,.dev.s-raztn .mp{width:1.2em;height:1.35em}
.dev.s-raz .sc,.dev.s-razrx .sc,.dev.s-razryl .sc,.dev.s-raztn .sc{top:auto;bottom:16%;width:1.6em;height:1em}
.dev.s-razrx .bd{width:3em;height:6.6em}
.dev.s-razrx .sc{width:2em;height:1.3em}
.dev.s-razryl .mp::after{content:"";position:absolute;left:50%;top:-.7em;translate:-50% 0;width:.9em;height:.9em;border-radius:50%;border:.14em solid #3a5362}
.dev.s-raztn .bd{height:5.4em}
.dev.s-raztn .sc{bottom:auto;top:30%}
/* kits: battery (dark) + pod (flavor) */
.dev .bt{display:none}
.dev.s-mate .bd,.dev.s-vue .bd,.dev.s-foger .bd{height:3.2em;border-radius:.9em .9em .25em .25em}
.dev.s-mate .bt,.dev.s-vue .bt,.dev.s-foger .bt{display:block;width:3.2em;height:3em;margin-top:.12em;border-radius:.25em .25em .9em .9em;background:linear-gradient(160deg,#2c4452,#0d1a22 70%)}
.dev.s-mate .bt::before,.dev.s-vue .bt::before,.dev.s-foger .bt::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 30%)}
.dev.s-mate .sc,.dev.s-vue .sc,.dev.s-foger .sc{top:auto;bottom:.9em}
.dev.s-foger .bd{height:4.3em}
.dev.s-foger .bt{height:1.8em}
.dev.s-foger .sc{bottom:.35em;width:1.6em;height:.8em}
.dev.s-vue .bd{width:3em;border-radius:1.2em 1.2em .25em .25em}
.dev.s-vue .bt{width:3em;height:3.3em;border-radius:.25em .25em 1.2em 1.2em}
/* pods only */
.dev.s-matepod .bd,.dev.s-vuepod .bd,.dev.s-fogerpod .bd{height:3.4em;border-radius:.9em .9em .5em .5em}
.dev.s-fogerpod .bd{height:4.3em}
.dev.s-vuepod .bd{width:3em;border-radius:1.2em 1.2em .5em .5em}
.dev.s-matepod .sc,.dev.s-vuepod .sc,.dev.s-fogerpod .sc{display:none}
.dev.s-matepod .bd::after,.dev.s-vuepod .bd::after,.dev.s-fogerpod .bd::after{height:70%}
.dev.s-matepod i.bt,.dev.s-vuepod i.bt,.dev.s-fogerpod i.bt{display:block;width:2.2em;height:.35em;margin-top:.12em;border-radius:.1em .1em .3em .3em;background:#c9a24a}
/* Viho TRX — see-through tank */
.dev.s-trx .bd{width:3.2em;height:6.2em;border-radius:1em;background:linear-gradient(160deg,#20323c,#0a141a)}
.dev.s-trx .bd::after{left:16%;right:16%;top:7%;width:auto;height:44%;border-radius:.6em;opacity:1;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0 22%,var(--c1) 22%,var(--c2));box-shadow:inset 0 0 0 .08em rgba(255,255,255,.35),inset .3em 0 .5em rgba(255,255,255,.2)}
.dev.s-trx .sc{top:auto;bottom:14%;width:2.2em;height:1.1em;border-radius:.55em/.4em}
.dev.photo{filter:none}

/* ── sheets (detail + bag) ── */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(1,8,12,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:61;right:0;top:0;bottom:0;width:min(460px,100%);background:linear-gradient(180deg,#07283b,#03151F 60%);border-left:1px solid var(--line2);transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.sheet.show{transform:none}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.sheet-h h3{font:900 22px var(--display);font-stretch:115%;text-transform:uppercase;letter-spacing:-.02em}
.x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);font-size:18px;display:grid;place-items:center}
.sheet-b{flex:1;overflow-y:auto;padding:20px;overscroll-behavior:contain}
.sheet-f{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (max-width:640px){
  .sheet{top:auto;left:0;width:100%;max-height:92svh;border-left:0;border-top:1px solid var(--line2);border-radius:24px 24px 0 0;transform:translateY(102%)}
}
.detail-art{height:220px;display:grid;place-items:center;border-radius:20px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c1) 35%,transparent),transparent 70%)}
.detail-art .dev{font-size:22px}
.detail-art img{height:200px;width:auto;border-radius:16px}
.detail h2{font:900 30px/1 var(--display);font-stretch:112%;letter-spacing:-.02em;text-transform:uppercase;margin-top:18px}
.detail .where{color:var(--dim);margin-top:6px}
.detail .note{font-size:17px;margin-top:14px}
.meters{display:grid;gap:10px;margin-top:18px}
.meter{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px;font-size:12px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.meter div{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.meter div span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--turq),var(--aqua));width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.meter.s div span{background:linear-gradient(90deg,var(--gold),var(--peach))}
.meter.o div span{background:linear-gradient(90deg,#8fe03a,#d7ff5a)}
.meter.i div span{background:linear-gradient(90deg,#7fd8ff,#e5fbff)}
.sec{margin-top:22px}
.sec h5{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.mini{display:flex;flex-direction:column;gap:8px}
.mini button{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:left}
.mini button:hover{border-color:var(--turq)}
.mini .dev{font-size:6px}
.mini b{display:block;font-size:14px}
.mini small{color:var(--dim);font-size:12px}
.mini .badge{margin-left:auto}
.qty{display:flex;align-items:center;gap:4px;border:1px solid var(--line2);border-radius:12px;padding:3px}
.qty button{width:30px;height:30px;border-radius:9px;font-size:18px;font-weight:700}
.qty button:hover{background:var(--card2)}
.qty span{min-width:22px;text-align:center;font-weight:700}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 20px;border-radius:16px;background:linear-gradient(100deg,var(--turq),var(--aqua));color:var(--midnight);font-weight:800;font-size:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--ink)}
.bagline{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bagline .dev{font-size:6.5px}
.bagline b{display:block;font-size:14px}
.bagline small{color:var(--dim)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field label{font-size:12px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.field input,.field select,.field textarea{padding:13px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(247,252,253,.05);font-size:16px;outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--turq)}
.field select option{background:var(--bg)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px;color:var(--dim)}
.check input{width:20px;height:20px;accent-color:var(--turq);flex:none;margin-top:1px}
.fine{font-size:12px;color:var(--dim);margin-top:12px}
.err{color:var(--coral);font-weight:600;font-size:14px;margin-top:10px;min-height:1em}
.done{text-align:center;padding:10px 0}
.done .code{font:900 clamp(48px,14vw,72px)/1 var(--display);font-stretch:118%;letter-spacing:-.02em;margin:14px 0 6px;background:linear-gradient(100deg,var(--gold),var(--peach),var(--turq));-webkit-background-clip:text;background-clip:text;color:transparent}
.done ol{text-align:left;margin:18px auto 0;max-width:320px;display:grid;gap:8px;padding-left:20px;color:var(--dim)}
.done ol b{color:var(--ink)}
.myholds{margin-top:30px}
.hold-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-top:8px}
.hold-card b{font:900 20px var(--display);font-stretch:112%}
.pill-st{font-size:12px;font-weight:800;padding:5px 10px;border-radius:99px;background:var(--line);text-transform:uppercase;letter-spacing:.05em}
.pill-st.new{background:rgba(46,217,217,.15);color:var(--turq)}
.pill-st.ready{background:rgba(63,224,160,.16);color:var(--ok)}
.pill-st.done{background:var(--line);color:var(--dim)}
.pill-st.cancelled{background:rgba(255,122,77,.14);color:var(--coral)}

/* ── gate ── */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 30%,rgba(14,124,158,.35),transparent 60%),rgba(3,21,31,.97)}
.gate[hidden]{display:none}
.gate div{max-width:420px;text-align:center}
.gate h2{font-size:clamp(40px,10vw,64px);margin:18px 0 12px}
.gate p{color:var(--dim)}
.gate .row{display:flex;gap:10px;margin-top:24px}

footer{margin-top:80px;border-top:1px solid var(--line);padding:40px 0 60px;color:var(--dim);font-size:14px}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
footer b{color:var(--ink);display:block;margin-bottom:6px}
footer a{color:var(--turq);text-decoration:none}

.toast{position:fixed;left:50%;bottom:24px;z-index:90;translate:-50% 20px;opacity:0;padding:12px 18px;border-radius:14px;background:var(--ink);color:var(--midnight);font-weight:700;font-size:14px;transition:.3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;translate:-50% 0}

@media (max-width:760px){
  .top nav{display:none}
  .top .logo b{display:none}
  .status{margin-left:auto}
  .line-h{grid-template-columns:auto 1fr}
  .line-h .dev{font-size:10px}
  .line-side{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:14px}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tile{padding:10px}
  .ask{flex-wrap:wrap;padding:7px}
  .ask input{padding:8px 10px}
  .ask button{flex:1}
}
@media (max-width:380px){.status span{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:760px){.tile .dna{gap:5px;overflow:hidden}.tile .dna span{font-size:9px;gap:2px}.tile .dna i{width:4px;height:4px}}