/* LootLab — "night market".
   An ink canvas, quiet glass surfaces and one violet signal colour. The chrome stays neutral so the loot
   carries the colour; rarity tiers keep their own hues, and only Secret items get the iridescent finish.
   Layout: kinetic hero with a 3D drag carousel, velocity marquees, ranked hot drops, sticky filter rail over
   the card grid, bento explainer. Display face for headings and numbers, a plain grotesk for everything else. */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root{
  color-scheme:dark;
  /* surfaces */
  --bg:#0b0b10; --bg2:#101017; --card:#15151d; --card2:#1c1c26; --glass:rgba(21,21,29,.82);
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12); --line3:rgba(255,255,255,.2);
  /* ink */
  --fg:#f3f3f6; --muted:#a3a3b5; --faint:#6e6e82;
  /* brand: one signal colour */
  --accent:#7b61ff; --accent-strong:#6a4ff5; --accent-hi:#b3a6ff; --accent-lo:rgba(123,97,255,.14); --accent-ring:rgba(123,97,255,.55);
  /* meaning */
  --mint:#34d399; --gold:#fbbf24; --red:#f43f5e; --red-hi:#fb7185; --cyan:#38bdf8; --orange:#fb923c;
  --violet:var(--accent); --pink:#f472b6; --lime:#a3e635;
  /* Secret tier only */
  --holo:linear-gradient(90deg,#f472b6,#a78bfa,#38bdf8,#34d399,#fbbf24,#f472b6);
  /* type */
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); --snap:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:150px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1320px;margin:0 auto;padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}
.mono{font-variant-numeric:tabular-nums}
.i{flex:none}
.vh-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes ang{to{--ang:360deg}}
@keyframes holo{to{background-position:300% 0}}
@keyframes fade{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes bob{50%{transform:translateY(-6px) rotate(-1.5deg)}}
@keyframes float{50%{transform:translateY(-4px)}}
@keyframes tw{50%{opacity:.15;transform:scale(.4)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}80%,100%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.2) rotate(-6deg)}65%{transform:scale(.95) rotate(3deg)}100%{transform:scale(1)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes flick{0%,100%{transform:scale(1) rotate(-3deg)}25%{transform:scale(1.1,.94) rotate(3deg)}50%{transform:scale(.96,1.08) rotate(-2deg)}75%{transform:scale(1.04) rotate(2deg)}}
@keyframes floatUp{0%{transform:translate3d(0,0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate3d(var(--dx),-260px,0) scale(1);opacity:0}}
@keyframes shim{to{background-position:-200% 0}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes grow2{from{transform:scaleX(0)}}

/* ---------- ambient background ---------- */
.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(1100px 560px at 72% -12%,rgba(123,97,255,.13),transparent 62%)}
.blob{position:absolute;width:48vmax;height:48vmax;border-radius:50%;filter:blur(110px);opacity:.14}
.b1{background:#7b61ff;top:-24vmax;left:-16vmax}
.b2{background:#3b5bdb;top:24vh;right:-28vmax;opacity:.09}
.b3{background:#7b61ff;bottom:-32vmax;left:30vw;opacity:.06}
.page{position:relative;z-index:2}

/* ---------- mode bar + nav ---------- */
.modebar{font-size:12.5px;font-weight:500;color:var(--muted);text-align:center;padding:8px 16px;background:rgba(123,97,255,.07);border-bottom:1px solid var(--line)}
.modebar b{color:var(--fg);font-weight:600}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(11,11,16,.74);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav-in{height:64px;display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.logo-mk{width:32px;height:32px;border-radius:10px;background:var(--accent-strong);display:grid;place-items:center;color:#fff;box-shadow:0 6px 18px -6px rgba(123,97,255,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .5s var(--spring)}
.logo:hover .logo-mk{transform:rotate(-14deg) scale(1.06)}
.logo b{font-weight:700;color:var(--fg)}
.tabs{display:flex;gap:2px;margin-left:18px;position:relative}
.tabs a{position:relative;padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:500;text-decoration:none;font-size:14.5px;transition:color .2s,background .2s}
.tabs a:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.tabs a.on{color:var(--fg);background:rgba(255,255,255,.06)}
.tabs a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-13px;height:2px;border-radius:2px;background:var(--accent);animation:tabIn .45s var(--ease)}
@keyframes tabIn{from{transform:scaleX(0)}}
.nact{margin-left:auto;display:flex;gap:8px;align-items:center}
.ib{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.03);display:grid;place-items:center;transition:transform .25s var(--spring),background .2s,border-color .2s;color:var(--fg);padding:0}
.ib:hover{background:rgba(255,255,255,.07);border-color:var(--line3)}
.ib:active{transform:scale(.92)}
.ib.on{border-color:var(--accent-ring);background:var(--accent-lo);color:var(--accent-hi)}
.cnt{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg);font-variant-numeric:tabular-nums}
.cnt[data-n="0"]{display:none}
.bump{animation:bump .5s var(--spring)}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);font-weight:600;font-size:14.5px;white-space:nowrap;text-decoration:none;transition:transform .2s var(--ease),background .2s,box-shadow .25s,opacity .2s,border-color .2s}
.btn > *{position:relative;z-index:1}
.btn:hover{background:rgba(255,255,255,.08);border-color:var(--line3)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-hot{border-color:rgba(255,255,255,.08);background:var(--accent-strong);color:#fff;box-shadow:0 8px 22px -10px rgba(123,97,255,.9),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-hot::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);z-index:0;pointer-events:none}
.btn-hot:hover{background:var(--accent);border-color:rgba(255,255,255,.14);box-shadow:0 12px 28px -10px rgba(123,97,255,1),inset 0 1px 0 rgba(255,255,255,.22);transform:translateY(-1px)}
.btn-hot:hover::after{animation:shine .8s var(--ease)}
@keyframes shine{to{left:125%}}
.btn-v{background:rgba(255,255,255,.08);color:var(--fg)}
.btn-v:hover{background:rgba(255,255,255,.12)}
.btn-lg{height:52px;padding:0 22px;font-size:15.5px;border-radius:14px}
.btn-sm{height:34px;padding:0 12px;border-radius:10px;font-size:13px}
.btn-ok{border-color:transparent;background:var(--mint);color:#052e1f}
.btn-ok:hover{background:#4ade9f;border-color:transparent}
.btn-no{background:transparent;border-color:rgba(244,63,94,.4);color:var(--red-hi)}
.btn-no:hover{background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.6)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--fg);background:rgba(255,255,255,.05);border-color:transparent}
.av{width:38px;height:38px;border-radius:50%;border:1px solid var(--accent-ring);background:var(--accent-lo);color:var(--accent-hi);display:grid;place-items:center;font-weight:700;font-size:12.5px;letter-spacing:.02em;padding:0;transition:transform .3s var(--spring),background .2s}
.av:hover{transform:scale(1.06);background:rgba(123,97,255,.24)}
@media (max-width:980px){.tabs a{padding:8px 10px}.tabs a.on::after{left:10px;right:10px}}
@media (max-width:760px){.tabs,.hide-sm{display:none!important}.nav-in{gap:8px;height:58px}.logo{font-size:19px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:56px 72px}
.floor{position:absolute;left:-40%;right:-40%;bottom:-10px;height:300px;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px;transform:perspective(420px) rotateX(64deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(transparent,#000 80%);mask-image:linear-gradient(transparent,#000 80%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:center}
.hero-in > div{min-width:0}
@media (max-width:1040px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.live{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 13px 0 11px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line2);font-weight:500;font-size:13px;color:var(--muted);animation:popIn .8s var(--spring) both}
.live b{color:var(--fg);font-weight:600}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pulse 1.8s infinite;flex:none}
.kin{font-family:var(--display);font-size:clamp(46px,6.4vw,92px);line-height:1;letter-spacing:-.045em;font-weight:700;margin:22px 0 24px;perspective:600px}
.kin .ln{display:block;overflow:hidden;padding:.05em .02em .14em;margin-bottom:-.14em}
.kin .ch{display:inline-block;transform-origin:50% 100%;animation:chIn .9s var(--spring) both;animation-delay:calc(var(--i) * 32ms + 120ms)}
.kin .sp{display:inline-block;width:.24em}
@keyframes chIn{from{transform:translateY(110%) rotate(8deg);opacity:0}}
.kin.done .ln:not(.wl) .ch{animation:none}
.kin.done .ln:not(.wl) .ch:hover{animation:jelly .7s var(--spring)}
@keyframes jelly{0%{transform:scale(1)}25%{transform:scale(1.18,.84) translateY(3%)}50%{transform:scale(.9,1.12) translateY(-8%)}75%{transform:scale(1.05,.96)}100%{transform:scale(1)}}
.rw{display:inline-block;white-space:nowrap;color:var(--accent-hi)}
.rw .ch{background:linear-gradient(180deg,#ddd6ff 10%,#8f7bff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:chFlip .7s var(--spring) both;animation-delay:calc(var(--i) * 45ms + var(--d,0ms))}
.rw .ch.out{animation:chOut .34s var(--snap) forwards;animation-delay:calc(var(--i) * 24ms)}
@keyframes chFlip{from{transform:translateY(80%) rotateX(-90deg);opacity:0}}
@keyframes chOut{to{transform:translateY(-80%) rotateX(90deg);opacity:0}}
.stk{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font);font-size:.19em;font-weight:600;letter-spacing:0;vertical-align:middle;color:var(--mint);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);padding:.45em .9em;border-radius:999px;margin-left:.45em;transform:translateY(-.3em);animation:stkIn .7s .9s var(--spring) both;white-space:nowrap}
.stk svg{width:1.2em;height:1.2em}
@keyframes stkIn{from{opacity:0;scale:.6}}
.sub{font-size:18px;color:var(--muted);max-width:50ch;margin:0 0 28px;line-height:1.6;animation:rise .9s .35s var(--ease) both}
.hsearch{display:flex;align-items:center;gap:10px;max-width:580px;height:58px;padding:0 7px 0 18px;border-radius:16px;background:rgba(21,21,29,.75);border:1px solid var(--line2);color:var(--muted);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .2s,box-shadow .3s;animation:rise .9s .45s var(--ease) both}
.hsearch:focus-within{border-color:var(--accent-ring);box-shadow:0 0 0 4px rgba(123,97,255,.16)}
.hsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;font-weight:500;color:var(--fg)}
.hsearch input::placeholder{color:var(--faint)}
.hsearch .btn{height:44px}
.hstats{display:flex;gap:36px;flex-wrap:wrap;max-width:580px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);animation:rise .9s .55s var(--ease) both}
.hstats b{display:block;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.hstats span{font-size:13px;color:var(--muted);font-weight:500}
@media (max-width:560px){.kin{font-size:clamp(38px,11.5vw,56px)}.stk{display:flex;width:max-content;margin:.75em 0 .1em;font-size:.3em;transform:none}.hsearch{height:56px}.hstats{gap:22px}.hstats b{font-size:24px}}

/* 3D carousel */
.hero-stage{position:relative;height:clamp(400px,42vw,560px);animation:fade 1.2s .2s both}
@media (max-width:1040px){.hero-stage{height:430px;margin-top:6px}}
@media (max-width:560px){.hero-stage{height:350px}}
.carousel{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 30%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;--cw:156px;--R:305px}
@media (max-width:1240px){.carousel{--cw:140px;--R:268px}}
@media (max-width:560px){.carousel{--cw:108px;--R:178px;perspective:900px}}
.carousel.dragging{cursor:grabbing}
.spin{position:absolute;left:50%;top:44%;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(var(--ry,0deg))}
.slot{position:absolute;width:var(--cw);height:calc(var(--cw) * 1.36);left:calc(var(--cw) * -.5);top:calc(var(--cw) * -.68);transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--R));transform-style:preserve-3d;cursor:pointer}
.cc{position:relative;width:100%;height:100%;border-radius:18px;padding:1.5px;background:var(--rc,rgba(255,255,255,.14));-webkit-box-reflect:below 10px linear-gradient(transparent 66%,rgba(255,255,255,.12));transition:transform .4s var(--spring)}
.slot:hover .cc{transform:translateY(-10px) scale(1.04)}
.cci{position:relative;height:100%;border-radius:16.5px;background:linear-gradient(170deg,#1d1d28,#121218);overflow:hidden;display:flex;flex-direction:column;padding:6px}
.cci .art{border-radius:12px;flex:none}
.ccb{padding:7px 4px 0;min-width:0}
.ccb b{display:block;font-size:12.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccb span{display:block;font-family:var(--display);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.shade{position:absolute;inset:0;background:#07070b;opacity:var(--dim,0);pointer-events:none;border-radius:16.5px;transition:opacity .1s linear}
.portal{position:absolute;left:50%;top:80%;width:min(82%,520px);aspect-ratio:1;translate:-50% -50%;transform:rotateX(78deg);border-radius:50%;pointer-events:none}
.portal::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--ang),transparent 0 25%,rgba(123,97,255,.5) 50%,#cfc6ff 64%,#7b61ff 74%,transparent 92%),rgba(123,97,255,.2);animation:ang 6s linear infinite;-webkit-mask:radial-gradient(circle,transparent 60.5%,#000 61.5%,#000 63.5%,transparent 64.5%);mask:radial-gradient(circle,transparent 60.5%,#000 61.5%,#000 63.5%,transparent 64.5%);filter:drop-shadow(0 0 10px rgba(123,97,255,.9))}
.portal::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(123,97,255,.36),rgba(123,97,255,.1) 45%,transparent 70%);animation:ppulse 4s ease-in-out infinite}
@keyframes ppulse{50%{transform:scale(1.12);opacity:.7}}
.sparks{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparks i{position:absolute;bottom:18%;width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);animation:floatUp var(--t) linear infinite;animation-delay:var(--dl)}
.stage-hint{position:absolute;left:50%;bottom:4px;translate:-50% 0;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);display:flex;align-items:center;gap:8px;white-space:nowrap}
.stage-hint::before,.stage-hint::after{content:"";width:26px;height:1px;background:var(--line2)}

/* ---------- kinetic band ---------- */
.band{position:relative;overflow:hidden;padding:20px 0;margin:8px 0 4px;border-block:1px solid var(--line);background:rgba(255,255,255,.015)}
.band-row{display:flex;width:max-content;white-space:nowrap;font-family:var(--display);font-size:clamp(34px,5.4vw,76px);font-weight:700;letter-spacing:-.04em;line-height:1.1;will-change:transform}
.band-row > span{display:inline-flex;align-items:center;gap:.35em;padding-right:.35em}
.band-row.solid{color:var(--fg)}
.band-row.outline{color:transparent;-webkit-text-stroke:1.2px rgba(243,243,246,.2)}
.band-row .bstar{display:inline-grid;place-items:center;width:.46em;height:.46em;color:var(--accent);-webkit-text-stroke:0;animation:spin 9s linear infinite}
.band-row.outline .bstar{color:rgba(123,97,255,.5)}
.band-row .bstar svg{width:100%;height:100%}

/* ---------- live sales ---------- */
.sales{position:relative;padding:22px 0 24px}
.sales-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:600;font-size:16px}
.sales-h .tag{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--mint);display:flex;align-items:center;gap:7px}
.sales-h .ct{margin-left:auto;font-size:13px;color:var(--muted);font-weight:500}
.sales-h .ct b{color:var(--fg);font-weight:600}
.mq{display:flex;flex-direction:column;gap:10px;overflow:hidden;padding-block:6px;margin-block:-6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq-row{display:flex;gap:10px;width:max-content;will-change:transform}
.sale{display:flex;align-items:center;gap:10px;height:56px;padding:6px 14px 6px 6px;border-radius:14px;background:rgba(21,21,29,.82);border:1px solid var(--line);white-space:nowrap;transition:border-color .2s,transform .3s var(--spring),background .2s;text-align:left}
.sale:hover{border-color:var(--line2);transform:translateY(-2px);background:rgba(28,28,38,.95)}
.mini{width:42px;height:42px;border-radius:10px;overflow:hidden;flex:none;display:block}
.mini svg,.mini img{display:block;width:100%;height:100%;object-fit:cover}
.sale b{display:block;font-size:13.5px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.sale span{font-size:12px;color:var(--muted);font-weight:500;display:flex;gap:6px;align-items:center}
.sale .p{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.sale .x{font-size:10.5px;font-weight:600;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--fg)}
.sales-empty{padding:4px 0 2px;color:var(--muted);font-weight:500}

/* ---------- sections ---------- */
.sec{padding-top:88px}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.sh h2{font-family:var(--display);font-size:clamp(30px,3.8vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.04;margin:0;text-wrap:balance}
.sh h2 em{font-style:normal;color:var(--accent-hi)}
.sh p{margin:8px 0 0;color:var(--muted)}
.rv.in{animation:rise .9s var(--ease) both}
.rv.in.d1{animation-delay:.08s}.rv.in.d2{animation-delay:.16s}.rv.in.d3{animation-delay:.24s}

/* hot drops */
.drops{display:flex;gap:20px;overflow-x:auto;padding:16px 6px 22px;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.drops::-webkit-scrollbar{display:none}
.drops.dragging{cursor:grabbing}
.drops.dragging .drop{pointer-events:none}
.drop{position:relative;flex:none;width:252px;padding-left:64px;text-align:left;background:none;border:0;user-select:none;-webkit-user-select:none}
.drop .rk{position:absolute;left:-6px;bottom:-12px;font-family:var(--display);font-size:150px;font-weight:800;line-height:1;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16);z-index:0;transition:-webkit-text-stroke-color .3s,color .4s}
.drop:hover .rk{-webkit-text-stroke-color:var(--accent);color:rgba(123,97,255,.12)}
.drop .art{position:relative;z-index:1;border-radius:18px;box-shadow:0 24px 44px -24px #000;transition:transform .45s var(--spring)}
.drop:hover .art{transform:translateY(-8px) rotate(-3deg)}
.drop b{position:relative;z-index:1;display:block;margin-top:12px;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop span{position:relative;z-index:1;font-size:12.5px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- filter bar ---------- */
.fbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:40;padding-block:12px;margin:0 -24px 6px;padding-inline:24px;background:linear-gradient(rgba(11,11,16,.94) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (max-width:760px){.fbar{top:calc(env(safe-area-inset-top,0px) + 58px);margin-inline:-16px;padding-inline:16px}}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fsearch{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--muted);transition:border-color .2s,box-shadow .2s}
.fsearch:focus-within{border-color:var(--accent-ring);box-shadow:0 0 0 4px rgba(123,97,255,.14)}
.fsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font-weight:500;color:var(--fg)}
.sel{height:46px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line2);font-weight:500;outline:none}
.sel option{background:var(--card);color:var(--fg)}
.tg{position:relative;overflow:hidden;height:46px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line2);font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:background .2s,border-color .2s,transform .25s var(--spring),color .2s}
.tg.on{background:var(--accent-lo);border-color:var(--accent-ring);color:var(--accent-hi)}
.tg:active{transform:scale(.96)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{position:relative;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 11px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-weight:500;font-size:13.5px;color:var(--muted);transition:color .2s,border-color .2s,background .25s,transform .25s var(--spring)}
.chip:hover{color:var(--fg);border-color:var(--line2)}
.chip:active{transform:scale(.96)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c);transition:transform .3s var(--spring)}
.chip.on{color:#0b0b10;background:var(--fg);border-color:transparent;font-weight:600}
.chip.on i{transform:scale(1.2);box-shadow:0 0 0 2px #0b0b10}
.chip em{font-style:normal;font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
.chip.rar{height:32px;font-size:12.5px;padding:0 12px}
.res{font-size:13px;color:var(--muted);font-weight:500;margin:6px 0 16px;display:flex;justify-content:space-between}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card .bdg{font-size:9px;padding:3px 6px;letter-spacing:.04em}.card .bdg svg{width:10px;height:10px}.card .lk{height:28px;padding:0 7px}.card .lk span{display:none}}
.card{--rc:var(--line);position:relative;border-radius:20px;padding:1px;background:var(--rc);cursor:pointer;min-width:0;transform:perspective(1000px) translateY(var(--ty,0px));transition:transform .4s var(--ease),box-shadow .4s;animation:cardIn .7s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes cardIn{from{opacity:0;transform:perspective(1000px) translateY(28px) rotateX(10deg) scale(.96)}}
.card:hover{--ty:-6px;box-shadow:0 30px 60px -32px var(--glow,rgba(123,97,255,.6))}
.card.r-legendary{--rc:linear-gradient(150deg,rgba(251,191,36,.85),rgba(251,191,36,.14) 42%,rgba(251,191,36,.06) 62%,rgba(251,191,36,.55))}
.card.r-mythic{--rc:linear-gradient(150deg,rgba(244,114,182,.85),rgba(244,114,182,.12) 45%,rgba(167,139,250,.55))}
.card.r-secret{--rc:conic-gradient(from var(--ang),#f472b6,#a78bfa,#38bdf8,#34d399,#fbbf24,#f472b6);padding:1.5px;animation:cardIn .7s var(--ease) both,ang 4s linear infinite;animation-delay:calc(var(--i,0) * 40ms),0s}
.card.fresh{--rc:var(--accent);box-shadow:0 0 0 3px rgba(123,97,255,.25),0 30px 60px -28px rgba(123,97,255,.8)}
.cin{position:relative;height:100%;border-radius:19px;background:var(--card);padding:8px 8px 12px;overflow:hidden;display:flex;flex-direction:column}
.card.r-secret .cin{border-radius:18.5px}
.cin::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.07),transparent 42%);opacity:0;transition:opacity .35s}
.card:hover .cin::after{opacity:1}
.art{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;isolation:isolate;background:var(--card2)}
.art > svg,.art > img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.art .al{position:absolute;inset:-6%;width:112%;height:112%;display:block;transition:transform .6s var(--ease)}
.art .al.bg{transform:translate(calc(var(--px,0) * 7px),calc(var(--py,0) * 7px)) scale(1.02)}
.art .al.fg{transform:translate(calc(var(--px,0) * -16px),calc(var(--py,0) * -16px))}
.card:hover .art .al.fg,.dart:hover .art .al.fg{transform:translate(calc(var(--px,0) * -16px),calc(var(--py,0) * -16px)) scale(1.07)}
.art > img{transition:transform .6s var(--ease)}
.card:hover .art > img{transform:scale(1.05)}
.holo .art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 22%,rgba(244,114,182,.45) 38%,rgba(56,189,248,.45) 50%,rgba(52,211,153,.35) 62%,transparent 78%);background-size:260% 260%;background-position:var(--hx,30%) var(--hy,30%);mix-blend-mode:color-dodge;opacity:.25;transition:opacity .35s;pointer-events:none;z-index:2}
.holo:hover .art::after{opacity:.6}
.bob{transform-origin:100px 120px;animation:bob 3.6s ease-in-out infinite}
.rb{animation:bob 3.6s ease-in-out infinite,hue 6s linear infinite}
.paused .bob,.paused .rb{animation-play-state:paused}
.bdg{position:absolute;left:8px;top:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:7px;color:#0b0b10}
.bdg.boost{background:var(--accent-strong);color:#fff;box-shadow:0 6px 16px -6px rgba(123,97,255,.9)}
.bdg.boost svg{animation:flick 1.2s ease-in-out infinite}
.bdg.new{background:rgba(255,255,255,.92)}
.bdg.hot{background:var(--orange)}
.bdg.hot svg{animation:flick 1s ease-in-out infinite}
.lk{position:absolute;right:8px;top:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:9px;background:rgba(11,11,16,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;transition:transform .3s var(--spring),background .2s}
.lk:hover{transform:scale(1.08);background:rgba(11,11,16,.75)}
.lk.on svg{fill:var(--red);stroke:var(--red)}
.lk.pop{animation:bump .5s var(--spring)}
.lk.pop::after{content:"";position:absolute;inset:-6px;border-radius:13px;border:2px solid var(--red);animation:ring .6s var(--ease) forwards}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.vt{position:absolute;left:8px;bottom:8px;z-index:3;font-size:10px;font-weight:700;letter-spacing:.08em;padding:4px 8px;border-radius:7px;background:rgba(11,11,16,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:var(--rc2,#fff)}
.vt.rbw{color:#0b0b10;background:var(--holo);background-size:300% 100%;animation:holo 4s linear infinite;border-color:transparent}
.qty{position:absolute;right:8px;bottom:8px;z-index:3;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:7px;background:rgba(11,11,16,.6);border:1px solid rgba(255,255,255,.12)}
.glint{position:absolute;z-index:5;width:12px;height:12px;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,transparent 20%),linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat;filter:drop-shadow(0 0 5px rgba(251,191,36,.8));animation:tw 2.6s ease-in-out infinite;opacity:.75}
.glint.g1{top:14px;left:46%;animation-delay:-.4s}.glint.g2{top:46%;right:14px;animation-delay:-1.3s}.glint.g3{bottom:34%;left:12px;animation-delay:-2s}
.ci{padding:10px 4px 0;display:flex;flex-direction:column;flex:1}
.cg{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cg i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.ct{font-size:15px;font-weight:600;line-height:1.3;margin:5px 0 3px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cs{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);font-weight:500;min-width:0}
.cs span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vck{flex:none;color:var(--accent)}
.vck path:first-child{fill:var(--accent);stroke:none}
.probadge{flex:none;font-size:9px;font-weight:700;letter-spacing:.08em;padding:1px 5px;border-radius:5px;color:var(--accent-hi);background:var(--accent-lo);border:1px solid rgba(123,97,255,.4)}
.cp{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:10px 0}
.price{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dl{display:flex;gap:4px}
.dl span{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--faint)}
.add{position:relative;overflow:hidden;margin-top:auto;width:100%;height:40px;border-radius:11px;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--fg);font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .2s,border-color .2s,transform .2s var(--ease),box-shadow .3s,color .2s}
.add > *{position:relative;z-index:1}
.add:hover{background:var(--accent-strong);border-color:transparent;color:#fff;box-shadow:0 10px 22px -10px rgba(123,97,255,.9)}
.add:hover svg{animation:bump .5s var(--spring)}
.add:active{transform:scale(.96)}
.add.done{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4);color:var(--mint);box-shadow:none}
.add[disabled]{opacity:.7;cursor:default;background:transparent;color:var(--faint);border-style:dashed;box-shadow:none}
.more{display:flex;justify-content:center;margin-top:34px}
.empty{grid-column:1/-1;text-align:center;padding:64px 20px;border:1px dashed var(--line2);border-radius:20px}
.empty h3{font-family:var(--display);font-size:24px;font-weight:700;margin:0 0 6px;letter-spacing:-.03em}
.empty p{color:var(--muted);margin:0 0 18px}
.sk{border-radius:20px;background:var(--card);padding:8px;border:1px solid var(--line)}
.shim{background:linear-gradient(100deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 70%);background-size:200% 100%;animation:shim 1.2s linear infinite;border-radius:8px}
.sk .shim.a{aspect-ratio:1;border-radius:14px}
.sk .shim.l{height:12px;margin:12px 4px 0}

/* ---------- bento explainer ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bx{position:relative;overflow:hidden;border-radius:20px;padding:26px;background:var(--glass);border:1px solid var(--line);min-height:210px;transition:transform .4s var(--ease),border-color .3s}
.bx:hover{transform:translateY(-4px);border-color:var(--line2)}
.bx::before{content:"";position:absolute;width:220px;height:220px;right:-90px;top:-90px;border-radius:50%;background:var(--accent);filter:blur(70px);opacity:.12;transition:opacity .4s,transform .6s var(--ease)}
.bx:hover::before{opacity:.22;transform:scale(1.15)}
.bx.flow{grid-column:1/-1;min-height:0}
.bxi{position:relative;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--accent-lo);border:1px solid rgba(123,97,255,.35);color:var(--accent-hi);margin-bottom:18px;animation:float 5s ease-in-out infinite}
.bx h3{position:relative;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.03em;margin:0 0 8px;line-height:1.1}
.bx p{position:relative;margin:0;color:var(--muted);max-width:42ch;line-height:1.55}
.flowsvg{position:relative;display:block;width:100%;height:auto;margin-top:14px;overflow:visible}
.flowsvg .lane{stroke:rgba(255,255,255,.14);stroke-width:3;stroke-dasharray:6 10;animation:lane 1s linear infinite}
@keyframes lane{to{stroke-dashoffset:-16}}
.flowsvg text{fill:var(--fg);font-family:var(--font);font-weight:600;font-size:17px}
.flowsvg text.s{fill:var(--muted);font-weight:400;font-size:13px}
@media (max-width:900px){.bento{grid-template-columns:1fr}}
@media (max-width:620px){.flowsvg text{font-size:22px}.flowsvg text.s{display:none}}

/* ---------- footer ---------- */
footer{margin-top:110px;border-top:1px solid var(--line);background:rgba(0,0,0,.25);overflow:hidden}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:36px 10px}
.foot p{color:var(--muted);font-size:13.5px;max-width:62ch;margin:10px 0 0}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a,.foot nav button{color:var(--muted);text-decoration:none;background:none;border:0;padding:0;font-weight:500}
.foot nav a:hover,.foot nav button:hover{color:var(--fg)}
.huge{display:flex;justify-content:center;font-family:var(--display);font-size:clamp(70px,16vw,230px);font-weight:800;letter-spacing:-.06em;line-height:.85;padding:24px 0 30px;user-select:none}
.huge span{display:inline-block;background:linear-gradient(180deg,rgba(179,166,255,.34),rgba(179,166,255,0) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:wave 3s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-8%)}}
@media (max-width:760px){footer{padding-bottom:96px}}

/* ---------- mobile tab bar ---------- */
.tabbar{display:none}
@media (max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:70;height:64px;padding:0 6px;border-radius:20px;background:rgba(16,16,22,.9);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--line2);box-shadow:0 20px 50px -18px #000}
  .tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none;background:none;border:0;padding:0;transition:color .2s,transform .3s var(--spring)}
  .tabbar .on{color:var(--fg)}
  .tabbar .on svg{color:var(--accent-hi)}
  .tabbar a:active,.tabbar button:active{transform:scale(.9)}
  .tabbar .fab{width:54px;height:54px;margin:-24px auto 0;border-radius:16px;background:var(--accent-strong);color:#fff;box-shadow:0 10px 26px -8px rgba(123,97,255,.9),inset 0 1px 0 rgba(255,255,255,.2);font-size:0;gap:0}
  .tabbar .cnt{top:2px;right:calc(50% - 22px)}
  .toasts{bottom:calc(env(safe-area-inset-bottom,0px) + 90px)!important}
}

/* ---------- overlays ---------- */
.ov{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(5,5,8,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade .3s}
.ov.closing{animation:fade .22s reverse forwards}
.md{position:relative;width:min(1000px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:linear-gradient(180deg,#17171f,#111117);border:1px solid var(--line2);border-radius:24px;box-shadow:0 60px 120px -30px #000;animation:mdIn .5s var(--spring);overscroll-behavior:contain}
.md.sm{width:min(540px,100%)}
.ov.closing .md{animation:mdOut .22s var(--snap) forwards}
@keyframes mdIn{from{opacity:0;transform:translateY(36px) scale(.96)}}
@keyframes mdOut{to{opacity:0;transform:translateY(24px) scale(.97)}}
.md.shake{animation:shake .5s var(--ease)}
.mx{position:absolute;top:16px;right:16px;z-index:8}
.grab{display:none}
@media (max-width:620px){
  .ov{place-items:end center;padding:0}
  .md,.md.sm{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;animation:sheetIn .5s var(--spring)}
  .ov.closing .md{animation:sheetOut .25s var(--snap) forwards}
  .grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--line3);margin:10px auto 0}
}
@keyframes sheetIn{from{transform:translateY(100%)}}
@keyframes sheetOut{to{transform:translateY(100%)}}
.dt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;padding:28px}
@media (max-width:820px){.dt{grid-template-columns:1fr;padding:18px}}
.dart{position:relative;border-radius:20px;padding:6px;background:var(--card);border:1px solid var(--line2);align-self:start}
.dart.holo{background:linear-gradient(var(--card),var(--card)) padding-box,var(--holo) border-box;border-color:transparent}
.dart .art{border-radius:15px}
.dh .cg{font-size:12px}
.dh h2{font-family:var(--display);font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:8px 0 14px;padding-right:48px;text-wrap:balance}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tag2{font-size:11px;font-weight:600;letter-spacing:.06em;padding:5px 9px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid var(--line2)}
.box{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.lbl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.seller{display:flex;align-items:center;gap:12px}
.sav{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#0b0b10;background:var(--c);flex:none;font-size:17px}
.seller b{display:flex;align-items:center;gap:6px;font-weight:600}
.seller > div > span{font-size:12.5px;color:var(--muted);font-weight:500}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:440px){.opts{grid-template-columns:1fr}}
.opt{position:relative;overflow:hidden;text-align:left;display:flex;gap:11px;align-items:flex-start;padding:13px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line2);transition:border-color .2s,background .2s,transform .2s var(--ease)}
.opt:active{transform:scale(.98)}
.opt .oi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);flex:none;transition:background .25s,color .25s,transform .4s var(--spring)}
.opt b{display:block;font-size:14.5px;font-weight:600}
.opt small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:2px}
.opt.on{border-color:var(--accent-ring);background:var(--accent-lo)}
.opt.on .oi{background:var(--accent-strong);color:#fff;transform:scale(1.04)}
.opt .ck{position:absolute;top:9px;right:10px;color:var(--accent-hi);opacity:0;transform:scale(.3);transition:all .35s var(--spring)}
.opt.on .ck{opacity:1;transform:none}
.opt[disabled]{opacity:.32;pointer-events:none}
.step{display:inline-flex;align-items:center;height:46px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line2);overflow:hidden}
.step button{width:42px;height:100%;border:0;background:none;font-size:19px;font-weight:600;transition:background .2s}
.step button:hover{background:rgba(255,255,255,.07)}
.step output{min-width:32px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.brk{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted);font-weight:500;padding:4px 0}
.brk b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.brk.t{color:var(--fg);font-weight:600;font-size:16px;border-top:1px dashed var(--line2);margin-top:6px;padding-top:12px}
.brk.t b{font-family:var(--display);font-size:20px;font-weight:700}
.sim{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 28px 28px}
@media (max-width:820px){.sim{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 18px 18px}}
.simc{border-radius:14px;background:var(--card);border:1px solid var(--line);padding:6px;text-align:left;transition:transform .3s var(--spring),border-color .2s}
.simc:hover{transform:translateY(-4px);border-color:var(--line2)}
.simc .art{border-radius:10px}
.simc b{display:block;font-size:12.5px;font-weight:600;margin:7px 3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simc span{display:block;font-size:12.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;margin:0 3px 3px}
.note{display:flex;gap:9px;font-size:12.5px;font-weight:500;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:11px 13px;line-height:1.45}
.note.w{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.28);color:var(--fg)}
.note svg{flex:none;margin-top:1px}

/* drawer */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(5,5,8,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}
.dw{position:fixed;top:0;right:0;bottom:0;z-index:85;width:min(430px,100%);background:linear-gradient(180deg,#17171f,#111117);border-left:1px solid var(--line2);transform:translateX(105%);transition:transform .55s var(--spring);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(env(safe-area-inset-bottom,0px) + 18px)}
.dw.open{transform:none;box-shadow:-40px 0 80px -30px #000}
.dwh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dwh h3{margin:0;font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em}
.dwl{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.cr{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border-radius:14px;background:var(--card);border:1px solid var(--line);animation:crIn .5s var(--spring) both;animation-delay:calc(var(--i) * 60ms);transition:opacity .3s,transform .3s var(--ease),max-height .35s var(--ease),padding .35s,margin .35s;max-height:120px;overflow:hidden}
@keyframes crIn{from{opacity:0;transform:translateX(32px)}}
.cr.gone{opacity:0;transform:translateX(60px);max-height:0;padding-block:0;margin-block:-5px}
.cr .art{border-radius:10px}
.cr b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.cr small.mono{color:var(--fg);font-weight:600}
.cr .step{height:32px;border-radius:9px}
.cr .step button{width:28px;font-size:15px}
.cr .step output{min-width:22px;font-size:13px}
.cr .rm{display:block;margin-top:6px;margin-left:auto;border:0;background:none;color:var(--faint);font-size:12px;font-weight:600;padding:0}
.cr .rm:hover{color:var(--red-hi)}
.dwf{border-top:1px solid var(--line);padding-top:14px}

/* checkout */
.co{padding:28px}
.co h2{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.04em;margin:0 0 4px;line-height:1.05}
.prog{display:flex;gap:6px;margin:16px 0 22px}
.prog i{flex:1;height:4px;border-radius:2px;background:var(--line2);overflow:hidden;position:relative}
.prog i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.prog i.on::after{transform:none}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.fld > label,.fld > .lbl{font-size:13px;font-weight:600;color:var(--muted);margin:0}
.inp{height:50px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line2);padding:0 14px;font-weight:500;outline:none;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--accent-ring);box-shadow:0 0 0 4px rgba(123,97,255,.14)}
.inp::placeholder{color:var(--faint)}
textarea.inp{height:auto;min-height:96px;padding:13px 14px;resize:vertical;line-height:1.5}
.ckb{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;margin:6px 0 12px}
.ckb input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--accent);flex:none}

/* sell */
.sell{padding:24px 26px 0}
.sell-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sell-h h2{margin:0;font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em}
.photo{position:relative;display:grid;place-items:center;width:170px;aspect-ratio:1;margin:0 auto;border-radius:20px;background:rgba(0,0,0,.25);cursor:pointer;overflow:hidden;transition:transform .4s var(--spring)}
.photo:hover{transform:scale(1.03)}
.photo.drag{transform:scale(1.06)}
.photo .ants{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.photo .ants rect{fill:none;stroke:var(--line3);stroke-width:2;stroke-dasharray:8 8;animation:ants 1.4s linear infinite;transition:stroke .2s}
.photo:hover .ants rect,.photo.drag .ants rect{stroke:var(--accent)}
@keyframes ants{to{stroke-dashoffset:-16}}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:polaroid .6s var(--spring)}
@keyframes polaroid{from{transform:rotateY(80deg) scale(.7);opacity:0}}
.photo .pi{text-align:center;color:var(--muted);font-weight:600;font-size:13.5px;pointer-events:none}
.photo .pi svg{margin:0 auto 6px;display:block;color:var(--fg);animation:float 3s ease-in-out infinite}
.ph-cap{text-align:center;font-size:12.5px;color:var(--faint);font-weight:500;margin:8px 0 18px}
.combo{border-radius:14px;border:1px solid var(--accent-ring);background:rgba(0,0,0,.25);overflow:hidden;box-shadow:0 0 0 4px rgba(123,97,255,.1);animation:fade .25s}
.combo-i{display:flex;align-items:center;gap:10px;height:50px;padding:0 10px 0 14px;border-bottom:1px solid var(--line);color:var(--muted)}
.combo-i input{flex:1;min-width:0;border:0;background:none;outline:none;font-weight:500;color:var(--fg)}
.combo-l{max-height:290px;overflow:auto;padding:6px}
.combo-g{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--faint);padding:8px 10px 6px}
.cbo{display:flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 12px;border:0;border-radius:9px;background:none;text-align:left;font-weight:500;animation:popIn .4s var(--spring) both;animation-delay:calc(var(--i,0) * 30ms);transition:background .15s,padding .25s var(--spring)}
.cbo i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.cbo.on,.cbo:hover{background:var(--accent-lo);padding-left:16px}
.cbo.add-g{color:var(--accent-hi)}
.picked{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-radius:14px;border:1px solid var(--accent-ring);background:var(--accent-lo);font-weight:600;animation:popIn .45s var(--spring)}
.picked button{margin-left:auto;border:0;background:none;color:var(--accent-hi);font-weight:600}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.cur{position:relative}
.cur > span{position:absolute;left:14px;top:50%;translate:0 -50%;font-weight:600;color:var(--muted);pointer-events:none}
.cur .inp{padding-left:30px;font-variant-numeric:tabular-nums}
.sell-f{position:sticky;bottom:0;padding:14px 26px 22px;background:linear-gradient(transparent,#111117 32%);margin-top:6px;z-index:3}
.sell-f .btn{width:100%}
.hint{font-size:13px;font-weight:500;color:var(--fg);margin:-6px 0 16px}
.err{color:var(--red-hi);font-weight:600;font-size:13px;min-height:20px;margin:4px 0 8px}

/* toasts + pops */
.toasts{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:220;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:13px 16px 15px;border-radius:14px;background:rgba(28,28,38,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line2);box-shadow:0 24px 50px -18px #000;font-weight:500;font-size:14px;animation:tIn .5s var(--spring);max-width:min(400px,calc(100vw - 32px))}
.toast svg{color:var(--mint)}
.toast.bad svg{color:var(--red-hi)}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;animation:tbar 3.2s linear forwards}
@keyframes tbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.out{animation:tOut .3s forwards}
@keyframes tIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes tOut{to{opacity:0;transform:translateX(30px)}}
.pops{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:70;pointer-events:none}
.popc{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:14px;background:rgba(24,24,32,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line2);box-shadow:0 24px 44px -16px #000;font-size:13px;font-weight:500;animation:pIn .6s var(--spring);max-width:min(360px,calc(100vw - 32px))}
.popc.out{animation:pOut .45s forwards}
.popc b{color:var(--fg);font-weight:600}
.popc span{color:var(--muted)}
.popc .p{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
@keyframes pIn{from{opacity:0;transform:translateX(-30px) scale(.96)}}
@keyframes pOut{to{opacity:0;transform:translateY(20px)}}
@media (max-width:560px){.pops{display:none}}
#fxc{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:250}

/* ---------- app views ---------- */
.view{min-height:60vh}
.vh{padding-block:52px 26px}
.vh h1{font-family:var(--display);font-size:clamp(38px,5.2vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1;margin:0}
.vh h1 em{font-style:normal;color:var(--accent-hi)}
.vh h1 .ch{display:inline-block;animation:chIn .9s var(--spring) both;animation-delay:calc(var(--i) * 30ms)}
.vh p{color:var(--muted);margin:12px 0 0;max-width:60ch;animation:rise .8s .2s var(--ease) both}
.panel{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:18px;animation:popIn .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.panel h3{margin:0 0 4px;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.025em}
.panel > p.m{margin:0 0 14px;color:var(--muted);font-size:14px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
@media (max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{position:relative;overflow:hidden;border-radius:18px;padding:20px;background:var(--glass);border:1px solid var(--line);animation:popIn .65s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms);transition:transform .35s var(--spring),border-color .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--line2)}
.tile::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:var(--c);filter:blur(50px);opacity:.16}
.tile span{position:relative;display:block;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.08em}
.tile b{position:relative;display:block;font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.tile small{position:relative;display:block;color:var(--faint);font-size:12px;font-weight:500;margin-top:4px}
.setup{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.setup .ic{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:var(--accent-lo);border:1px solid rgba(123,97,255,.4);color:var(--accent-hi);animation:float 5s ease-in-out infinite;flex:none}
.setup > div{flex:1;min-width:220px}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.awaiting{background:rgba(251,191,36,.12);color:var(--gold)}
.pill.sent{background:rgba(56,189,248,.12);color:var(--cyan)}
.pill.confirmed,.pill.paid{background:rgba(52,211,153,.12);color:var(--mint)}
.pill.disputed,.pill.failed,.pill.rejected{background:rgba(244,63,94,.12);color:var(--red-hi)}
.pill.refunded,.pill.cancelled{background:rgba(255,255,255,.06);color:var(--muted)}
.pill.requested,.pill.processing{background:var(--accent-lo);color:var(--accent-hi)}
.pill.boosting{background:var(--accent-strong);color:#fff}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.02);border:1px solid var(--line);animation:popIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms);transition:border-color .2s,background .2s}
.row:hover{border-color:var(--line2);background:rgba(255,255,255,.04)}
.row .art{border-radius:10px}
.row b{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row small{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:2px}
.row .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.row{grid-template-columns:56px minmax(0,1fr)}.row .acts{grid-column:1/-1;justify-content:flex-start}}
.tl{display:flex;align-items:center;gap:0;margin-top:8px;max-width:340px}
.tl .s{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--faint);flex:none;width:58px}
.tl .s i{width:13px;height:13px;border-radius:50%;background:var(--line2);border:2px solid var(--card);transition:background .4s}
.tl .s.done{color:var(--fg)}
.tl .s.done i{background:var(--mint)}
.tl .s.cur i{background:var(--gold);animation:pulse 1.8s infinite}
.tl .b{flex:1;height:2px;border-radius:2px;background:var(--line2);position:relative;overflow:hidden;margin-top:-16px}
.tl .b::after{content:"";position:absolute;inset:0;background:var(--mint);transform:scaleX(var(--f,0));transform-origin:left;animation:grow2 1s var(--ease) both;animation-delay:.3s}
.ord{margin-bottom:16px}
.ord-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-weight:600}
.ord-h span{color:var(--muted);font-weight:500;font-size:13px}
.copy{font-family:var(--mono);font-size:.95em;font-weight:500;color:var(--fg);background:rgba(255,255,255,.06);border:1px dashed var(--line3);border-radius:6px;padding:1px 7px;cursor:copy}
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.t th{text-align:left;font-size:11px;letter-spacing:.08em;color:var(--faint);font-weight:600;padding:0 10px 10px;white-space:nowrap;text-transform:uppercase}
table.t td{padding:11px 10px;border-top:1px solid var(--line);white-space:nowrap;vertical-align:middle}
table.t td.r,table.t th.r{text-align:right}
table.t tbody tr{animation:fade .5s both;animation-delay:calc(var(--i,0) * 40ms)}
table.t tbody tr:hover td{background:rgba(255,255,255,.02)}
.wd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
@media (max-width:560px){.wd{grid-template-columns:1fr}}
.seg2{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line2);gap:3px;flex-wrap:wrap}
.seg2 button{position:relative;overflow:hidden;height:40px;padding:0 14px;border:0;border-radius:9px;background:none;font-weight:600;color:var(--muted);transition:background .25s,color .25s}
.seg2 button.on{background:var(--accent-strong);color:#fff}
.seg2 button[disabled]{opacity:.4}
.feeline{font-size:13px;color:var(--muted);font-weight:500;margin-top:10px}
.feeline b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.tabs2{display:flex;gap:6px;margin:0 46px 18px 0}                              /* clear of the close button */
.tabs2 button{flex:1;height:44px;border-radius:11px;border:1px solid var(--line2);background:none;font-weight:600;color:var(--muted);transition:all .25s}
.tabs2 button.on{background:var(--accent-lo);border-color:var(--accent-ring);color:var(--fg)}
.auth{padding:30px}
.auth h2{font-family:var(--display);font-size:32px;font-weight:700;letter-spacing:-.04em;margin:0 0 6px;line-height:1.05}
.mylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ml{position:relative;border-radius:14px;background:rgba(255,255,255,.02);border:1px solid var(--line);padding:7px;animation:popIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.ml.boosted{border-color:var(--accent-ring);background:linear-gradient(180deg,rgba(123,97,255,.12),rgba(255,255,255,.02) 60%)}
.ml .art{border-radius:10px}
.ml b{display:block;font-size:13.5px;font-weight:600;margin:8px 4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml small{display:flex;justify-content:space-between;margin:2px 4px 8px;color:var(--muted);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.ml .mla{display:grid;grid-template-columns:1fr auto;gap:6px}
.none{color:var(--muted);font-weight:500;padding:20px;text-align:center;border:1px dashed var(--line2);border-radius:14px}
.banner{display:flex;gap:10px;align-items:center;padding:13px 16px;border-radius:14px;margin-bottom:18px;font-weight:600;background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.3);animation:popIn .6s var(--spring)}
.banner svg{color:var(--mint)}
.banner.w{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.28)}
.banner.w svg{color:var(--gold)}
.duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:stretch;margin-bottom:18px}
.duo > .panel{margin-bottom:0}
.earn{display:flex;flex-direction:column}
.earn .bars{flex:1;height:auto;min-height:150px}
@media (max-width:920px){.duo{grid-template-columns:1fr}}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px}
.bars .bar{position:relative;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.bars .bar i{display:block;width:100%;max-width:24px;height:var(--h);min-height:3px;border-radius:4px 4px 0 0;background:var(--accent);transform-origin:bottom;animation:grow .9s var(--spring) both;animation-delay:calc(var(--i) * 45ms);transition:background .2s}
.bars .bar:hover i{background:var(--accent-hi)}
.bars .bar.zero i{background:var(--line2)}
.bars .bar span{font-size:10px;color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
.bars .bar em{position:absolute;bottom:calc(var(--h) + 24px);font-style:normal;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .2s;white-space:nowrap;background:var(--card2);border:1px solid var(--line2);padding:2px 6px;border-radius:6px;pointer-events:none}
.bars .bar:hover em{opacity:1}
.pro{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,300px);gap:24px;align-items:center}
.pmath{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid var(--line)}
.pmath .brk{font-size:13.5px}
.pmath .brk.t b{font-size:17px;color:var(--mint)}
@media (max-width:1100px){.pro{grid-template-columns:minmax(0,300px) minmax(0,1fr)}.pmath{grid-column:1/-1}}
@media (max-width:760px){.pro{grid-template-columns:1fr}}
.pcard{position:relative;aspect-ratio:1.586;max-width:100%;border-radius:18px;padding:18px 20px;overflow:hidden;background:linear-gradient(135deg,#251f4a,#13121c 55%,#1d1733);box-shadow:0 30px 60px -28px rgba(123,97,255,.7),inset 0 0 0 1px rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:space-between;color:#fff;user-select:none}
.pcard::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 25%,rgba(179,166,255,.2) 44%,rgba(255,255,255,.12) 50%,transparent 66%);background-size:250% 250%;background-position:20% 20%;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{50%{background-position:85% 75%}}
.pcard.off{filter:grayscale(.7) brightness(.8)}
.pcard.off::before{animation:none}
.pcard > *{position:relative}
.pcard .pc1{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:20px}
.pcard .chipx{width:38px;height:28px;border-radius:6px;background:linear-gradient(135deg,#fde68a,#b7791f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.pcard .pc2{font-family:var(--mono);font-size:14px;letter-spacing:.14em;opacity:.8}
.pcard .pc3{display:flex;justify-content:space-between;align-items:flex-end;font-size:10.5px;letter-spacing:.12em;font-weight:600;text-transform:uppercase;opacity:.75}
.pcard .pc3 b{display:block;font-size:14.5px;letter-spacing:.01em;opacity:1;text-transform:none;font-weight:600}
.perks{list-style:none;margin:12px 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.perks li{display:flex;gap:10px;align-items:center;font-weight:500}
.perks li svg{color:var(--mint)}
.cntd{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.bk{display:flex;gap:2px;height:12px;margin:12px 0 10px}
.bk i{display:block;height:100%;width:var(--w);background:var(--c);border-radius:3px;transform-origin:left;animation:grow2 1s var(--ease) both}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;font-weight:500;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.legend b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- withdrawals + payouts ---------- */
.warnline{color:var(--red-hi)}
.dim{color:var(--muted);font-size:12.5px;font-weight:500}
.bankbox{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.03);margin-bottom:14px}
.bankbox b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bankbox span{display:block;color:var(--muted);font-size:13px;font-family:var(--mono);margin-top:2px}
.f3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr);gap:10px}
.f3 .fld{margin-bottom:10px}
@media (max-width:1200px) and (min-width:921px),(max-width:600px){.f3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.f3 .fld:first-child{grid-column:1/-1}}
.inp.mono{font-family:var(--mono);letter-spacing:.04em}
.gcs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.gc{position:relative;flex:1;min-width:84px;height:68px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--fg);transition:transform .3s var(--spring),border-color .2s,background .2s}
.gc::after{content:"";position:absolute;right:10px;top:10px;width:16px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--accent-hi),var(--accent-strong));opacity:.55}
.gc:hover{transform:translateY(-2px);border-color:var(--line3)}
.gc.on{border-color:var(--accent-ring);background:linear-gradient(160deg,rgba(123,97,255,.22),rgba(123,97,255,.06));box-shadow:0 0 0 3px rgba(123,97,255,.14)}
.gc.on::after{opacity:1}
.gc[disabled]{opacity:.35;transform:none;cursor:not-allowed}
.copy.code{letter-spacing:.08em;font-size:.92em}
.pq{display:flex;flex-direction:column;gap:12px}
.pqi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);animation:popIn .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.pqi .who b{font-weight:600}
.pqi .who small{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:2px}
.pqd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px;font-size:13px;color:var(--muted);font-weight:500}
.pqd b{font-weight:600;color:var(--fg)}
.pqd .copy{margin-left:4px}
.pqa{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pqa .inp{height:38px;width:220px;font-family:var(--mono);font-size:13.5px}
@media (max-width:760px){.pqi{grid-template-columns:1fr}.pqa{justify-content:flex-start}.pqa .inp{flex:1;width:auto}}
.pv{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:2px;border-radius:6px;font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hi);background:var(--accent-lo);border:1px solid rgba(123,97,255,.35)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* =====================================================================
   Chats, checkout and the order-placed page
   ===================================================================== */
.sk:empty{background:linear-gradient(100deg,var(--card) 30%,#1d1d27 50%,var(--card) 70%);background-size:200% 100%;animation:shim 1.2s linear infinite}
.ub{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.btn .ub{margin-left:2px}
.lnk{display:inline-flex;align-items:center;gap:5px;color:var(--accent-hi);font-weight:600;font-size:14px;text-decoration:none}
.lnk:hover{text-decoration:underline}
.shopchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--accent-ring);background:var(--accent-lo);color:var(--accent-hi);font-weight:600;font-size:13px}
.arp{display:flex;gap:10px;align-items:flex-end}
.arp textarea{height:auto;min-height:64px;padding:12px 14px;resize:vertical;line-height:1.45}
@media (max-width:560px){.arp{flex-direction:column;align-items:stretch}}

/* ---------- chats layout ---------- */
.chats{display:grid;grid-template-columns:minmax(280px,350px) minmax(0,1fr);gap:16px;padding:18px 0 22px;height:calc(100dvh - var(--chrome,64px));min-height:520px}
.cl,.cv{display:flex;flex-direction:column;min-height:0;background:var(--glass);border:1px solid var(--line);border-radius:20px;overflow:hidden;animation:popIn .5s var(--ease) both}
.cv{animation-delay:70ms}
.cl-h{padding:18px 16px 14px;border-bottom:1px solid var(--line)}
.cl-h h1{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.04em;margin:0 0 12px;line-height:1}
.cseg{display:flex;width:100%}
.cseg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.scnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(255,255,255,.14);font-size:10.5px;font-weight:700;color:#fff}
.cseg button:not(.on) .scnt{background:var(--accent)}
.cl-list{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:4px;overscroll-behavior:contain}
.cl-list .sk{border-radius:14px;flex:none}
.clr{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px;border-radius:14px;text-decoration:none;border:1px solid transparent;transition:background .2s,border-color .2s;animation:popIn .45s var(--ease) both}
.cl-list.still .clr{animation:none}
.clr:hover{background:rgba(255,255,255,.04)}
.clr.on{background:var(--accent-lo);border-color:rgba(123,97,255,.35)}
.clav{width:48px;border-radius:12px}
.clm{min-width:0;display:flex;flex-direction:column;gap:1px}
.clt{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.clt b{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clt time{font-size:11.5px;color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
.clr.new .clt time{color:var(--accent-hi);font-weight:600}
.cli{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clp{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clp svg{flex:none}
.clr.new .clp{color:var(--fg);font-weight:600}
.clx{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.clx .pill{height:22px;font-size:11px;padding:0 8px}
.pill.refunding,.pill.refunded{background:rgba(56,189,248,.12);color:var(--cyan)}
.cl-none{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 18px;color:var(--muted);font-size:13.5px}
.cl-none svg{color:var(--faint);margin-bottom:4px}
.cl-none b{color:var(--fg);font-size:15px}
.cl-none .btn{margin-top:8px}

/* ---------- one conversation ---------- */
.cv-empty{margin:auto;max-width:340px;text-align:center;padding:30px 20px;color:var(--muted);font-size:14px}
.cv-empty h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--fg);margin:12px 0 6px}
.cv-empty .btn{margin-top:14px}
.cv-ic{width:64px;height:64px;margin:0 auto;border-radius:18px;display:grid;place-items:center;background:var(--accent-lo);border:1px solid rgba(123,97,255,.35);color:var(--accent-hi);animation:float 5s ease-in-out infinite}
.cv-load{padding:16px}
.cvh{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(11,11,16,.35)}
.cvback{display:none;flex:none;text-decoration:none}
.cvh .sav{width:40px;height:40px;border-radius:50%;font-size:16px}
.cvt{min-width:0;flex:1;display:flex;flex-direction:column}
.cvt b{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.cvt b .pill{height:20px;font-size:10.5px}
.cvt span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* status card: where the order is up to, and what to do next */
.stg{position:relative;margin:12px 12px 0;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.025);padding:12px 14px 14px;flex:none;max-height:min(58%,430px);overflow:auto;transition:border-color .3s,background .3s}
.stg.hot{border-color:var(--accent-ring);background:linear-gradient(180deg,rgba(123,97,255,.1),rgba(123,97,255,.03))}
.stg.ok{border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.05)}
.stg.warn{border-color:rgba(251,191,36,.38);background:rgba(251,191,36,.06)}
.stg.blue{border-color:rgba(56,189,248,.32);background:rgba(56,189,248,.05)}
.stg-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.stg-bar i{position:relative;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.stg-bar i.done{background:var(--mint)}
.stg.blue .stg-bar i.done{background:var(--cyan)}
.stg-bar i.hold{background:var(--gold)}
.stg-bar i.cur{background:linear-gradient(90deg,var(--accent) 0 22%,rgba(255,255,255,.08) 22%)}
.stg-bar i.cur::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:barrun 2.2s ease-in-out infinite}
@keyframes barrun{to{transform:translateX(100%)}}
.stg-h{display:flex;align-items:center;gap:10px;width:100%;padding:0;border:0;background:none;text-align:left}
.stg-h b{flex:1;min-width:0;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.stg-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.07);color:var(--fg)}
.stg.hot .stg-ic{background:var(--accent-strong);color:#fff}
.stg.ok .stg-ic{background:var(--mint);color:#052e1f}
.stg.warn .stg-ic{background:var(--gold);color:#3a2604}
.stg.blue .stg-ic{background:var(--cyan);color:#062033}
.stg-clk{flex:none;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 9px;border-radius:8px;background:rgba(255,255,255,.07);color:var(--fg)}
.stg-cv{flex:none;color:var(--muted);transition:transform .3s var(--ease)}
.stg.fold .stg-cv{transform:rotate(-90deg)}
.stg.fold .stg-b{display:none}
.stg.fold{padding-bottom:12px}
.stg-b{margin-top:10px;animation:fade .3s}
.stg-p{margin:0 0 10px;font-size:14px;color:var(--muted);line-height:1.5}
.stg-p b{color:var(--fg)}
.stg-p a{color:var(--accent-hi);font-weight:600}
.stg-note{display:flex;gap:7px;align-items:flex-start;margin:8px 0 0;font-size:12.5px;color:var(--muted);font-weight:500}
.stg-note svg{flex:none;margin-top:2px}
.stg-to{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line2);margin-bottom:10px}
.stg-to small{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.stg-to b{display:block;font-size:17px;font-weight:700;color:var(--accent-hi);margin-top:2px;word-break:break-all}
.stg-warn{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.25);font-size:13px;color:var(--muted);margin-bottom:12px}
.stg-warn svg{flex:none;color:var(--gold);margin-top:2px}
.stg-warn b{color:var(--fg);font-variant-numeric:tabular-nums}
.stg-main,.stg-alt{width:100%}
.stg-alt{margin-top:8px}
.stg-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin-top:10px}
.stg-links button{border:0;background:none;padding:2px 0;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line3)}
.stg-links button:hover{color:var(--fg)}
.stg-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* messages */
.cmsgs{flex:1;min-height:0;overflow:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain}
.mday{display:flex;justify-content:center;margin:12px 0 8px}
.mday span{font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.06)}
.msg{display:flex;flex-direction:column;max-width:min(78%,560px);margin-top:6px;animation:msgIn .35s var(--spring) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start;align-items:flex-start}
.bub{border-radius:18px;padding:9px 13px;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere;background:var(--card2);border:1px solid var(--line)}
.msg.me .bub{background:var(--accent-strong);border-color:transparent;color:#fff;border-bottom-right-radius:6px}
.msg.them .bub{border-bottom-left-radius:6px}
.msg.auto .bub{background:rgba(255,255,255,.035);border-style:dashed;border-color:var(--line3);color:var(--fg)}
.msg.me.auto .bub{background:rgba(123,97,255,.16);border-color:var(--accent-ring)}
.bub p{margin:0}
.mauto{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--gold)}
.msg.pic .bub{padding:5px}
.msg.pic .bub p{padding:5px 8px 3px}
.mimg{display:block;padding:0;border:0;background:#fff;border-radius:14px;overflow:hidden;cursor:zoom-in;max-width:240px}
.mimg img{display:block;width:100%;max-height:300px;object-fit:cover}
.mcap{display:flex;align-items:center;gap:6px;padding:7px 8px 3px;font-size:13px;font-weight:600}
.msg time{font-size:10.5px;color:var(--faint);margin:3px 6px 0;font-variant-numeric:tabular-nums}
.mwho{font-size:11px;font-weight:600;color:var(--muted);margin:0 6px 3px}
.msys{align-self:center;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:min(90%,520px);margin:10px 0 4px;text-align:center;animation:msgIn .35s var(--ease) both}
.msys span{font-size:12.5px;color:var(--muted);font-weight:500;line-height:1.45;padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.msys time{font-size:10.5px;color:var(--faint)}
.msup{align-self:center;width:min(92%,560px);margin:10px 0 4px;padding:11px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(123,97,255,.2),rgba(123,97,255,.1));border:1px solid var(--accent-ring);animation:msgIn .35s var(--ease) both}
.msup b{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--accent-hi);margin-bottom:4px}
.msup p{margin:0;font-size:14px;line-height:1.5}
.msup .mimg{margin-top:8px}
.msup time{display:block;text-align:right;font-size:10.5px;color:var(--muted);margin-top:4px}

/* composer */
.cmp{flex:none;padding:10px 12px 12px;border-top:1px solid var(--line);background:rgba(11,11,16,.4)}
.cmp-row{display:flex;align-items:flex-end;gap:8px}
.cmp-cam{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--muted);transition:color .2s,background .2s,transform .2s var(--spring)}
.cmp-cam:hover{color:var(--fg);background:rgba(255,255,255,.09)}
.cmp-cam:active{transform:scale(.92)}
#cmpTxt{flex:1;min-width:0;min-height:46px;max-height:140px;resize:none;border-radius:23px;border:1px solid var(--line2);background:rgba(0,0,0,.3);padding:12px 18px;line-height:1.4;outline:none;transition:border-color .2s,box-shadow .2s}
#cmpTxt:focus{border-color:var(--accent-ring);box-shadow:0 0 0 4px rgba(123,97,255,.12)}
#cmpTxt::placeholder{color:var(--faint)}
.cmp-send{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--accent-strong);color:#fff;box-shadow:0 8px 20px -8px rgba(123,97,255,.9);transition:transform .2s var(--spring),opacity .2s}
.cmp-send:hover{transform:scale(1.06)}
.cmp-send:active{transform:scale(.92)}
.cmp-send[disabled]{opacity:.5}
.cmp-prev{margin-bottom:8px}
.cmp-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 5px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line2);max-width:100%;font-size:12.5px;color:var(--muted)}
.cmp-chip img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none}
.cmp-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-chip button{flex:none;width:26px;height:26px;border-radius:8px;border:0;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--fg)}

.md.zoomd{width:auto;max-width:min(92vw,900px);background:#0b0b10;padding:0}
.zoomi img{display:block;max-width:100%;max-height:86dvh;margin:0 auto}
.ask-img{display:block;max-width:100%;max-height:260px;margin:0 auto 16px;border-radius:14px;border:1px solid var(--line2)}

@media (max-width:900px){
  .chats{grid-template-columns:minmax(0,1fr);height:auto;min-height:calc(100dvh - 160px);padding:14px 0 18px}
  .chats.open .cl{display:none}
  .chats:not(.open) .cv{display:none}
  .chats.open .cv{position:fixed;inset:0;z-index:80;border:0;border-radius:0;background:var(--bg);animation:chatIn .35s var(--ease);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .cvback{display:grid}
  .cl{min-height:60vh}
  .msg{max-width:84%}
  .stg{max-height:52%}
}
@keyframes chatIn{from{opacity:0;transform:translateX(30px)}}
body.in-chat .tabbar{display:none}
@media (max-width:900px){body.in-chat{overflow:hidden}}

/* ---------- checkout page ---------- */
.co2{max-width:600px;margin:0 auto;padding:22px 0 28px}
.co2-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.co2-h h1{margin:0;font-family:var(--display);font-size:clamp(28px,4vw,38px);font-weight:700;letter-spacing:-.04em}
.co2 .panel{padding:16px}
.coi{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.coi .art{border-radius:12px}
.coi-m{min-width:0;display:flex;flex-direction:column;gap:2px}
.coi-m b{font-size:15.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coi-m small{font-size:12.5px;color:var(--muted)}
.coi-p{font-size:15px;font-variant-numeric:tabular-nums}
.seg3{display:inline-flex;gap:4px;margin-top:6px}
.seg3 button{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:12px;font-weight:600;color:var(--muted)}
.seg3 button.on{border-color:var(--accent-ring);background:var(--accent-lo);color:var(--accent-hi)}
.seg3 button[disabled]{opacity:.35}
.co2-sum .brk b.free{color:var(--mint)}
.co2-sec{display:flex;flex-direction:column}
.rbxrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--line2);margin-bottom:14px;font-size:14px;color:var(--muted)}
.rbxrow b{color:var(--fg)}
.rbxrow button{border:0;background:none;color:var(--accent-hi);font-weight:700;font-size:14px;padding:0}
.ckr{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.02);margin-bottom:8px;font-size:14px;color:var(--muted);cursor:pointer;transition:border-color .2s,background .2s}
.ckr:has(input:checked){border-color:var(--accent-ring);background:var(--accent-lo);color:var(--fg)}
.ckr b{color:var(--fg)}
.ckr input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}
.co2-l{margin:20px 0 10px}
.pays{display:flex;flex-direction:column;gap:8px}
.payo{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;width:100%;padding:14px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.03);text-align:left;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.payo:active{transform:scale(.99)}
.payo .oi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07)}
.payo.on{border-color:var(--accent-ring);background:var(--accent-lo)}
.payo.on .oi{background:var(--accent-strong);color:#fff}
.payo[disabled]{opacity:.45;pointer-events:none}
.po-m{min-width:0}
.po-m b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.po-m small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.po-a{font-size:15.5px;font-variant-numeric:tabular-nums}
.nofee{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:6px;background:rgba(52,211,153,.14);color:var(--mint)}
.rad{width:20px;height:20px;border-radius:50%;border:2px solid var(--line3);transition:all .25s var(--spring)}
.payo.on .rad{border:6px solid var(--accent);background:#fff}
.co2-bar{position:sticky;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:20;margin:0 auto 20px;max-width:600px}
.co2-bar-in{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:20px;background:rgba(16,16,22,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:0 20px 50px -20px #000}
.co2-bar .btn{width:100%}
.co2-bar small{font-size:11.5px;color:var(--faint);text-align:center}
body.in-co .tabbar{display:none}
@media (max-width:760px){.co2-bar{bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}.co2-bar-in{padding:10px;gap:6px;border-radius:18px}}

/* ---------- order placed ---------- */
.bought{max-width:560px;margin:0 auto;padding:44px 0 40px;text-align:center}
.bk-ic{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:#04261a;box-shadow:0 0 0 10px rgba(52,211,153,.12),0 24px 60px -20px rgba(52,211,153,.8);animation:bkPop .7s var(--spring) both}
.bk-ic svg{stroke-width:3}
.bk-ic.wait{background:rgba(255,255,255,.08);color:var(--fg);box-shadow:0 0 0 10px rgba(255,255,255,.04)}
.bk-ic.wait svg{animation:spin 2.4s linear infinite}
.bk-ic.bad{background:rgba(244,63,94,.16);color:var(--red-hi);box-shadow:none}
@keyframes bkPop{from{opacity:0;transform:scale(.3) rotate(-30deg)}}
.bought h1{font-family:var(--display);font-size:clamp(32px,5vw,44px);font-weight:700;letter-spacing:-.04em;margin:0 0 8px;animation:rise .6s .1s var(--ease) both}
.bk-sub{color:var(--muted);margin:0 0 22px;animation:rise .6s .18s var(--ease) both}
.bk-sub b{color:var(--fg)}
.bk-steps{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.bk-steps li{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--line);animation:popIn .5s var(--ease) both}
.bk-steps li:nth-child(2){animation-delay:.08s}.bk-steps li:nth-child(3){animation-delay:.16s}.bk-steps li:nth-child(4){animation-delay:.24s}
.bk-steps li.done{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.35)}
.bk-steps .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;background:rgba(255,255,255,.07);border:1px solid var(--line2)}
.bk-steps li.done .n{background:var(--mint);color:#04261a;border-color:transparent}
.bk-steps b{display:block;font-size:15px}
.bk-steps small{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.bk-dc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line2);background:rgba(255,255,255,.03);text-decoration:none;text-align:left;margin-bottom:18px;transition:border-color .2s}
.bk-dc:hover{border-color:var(--accent-ring)}
.bk-dc .oi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#5865f2;color:#fff;flex:none}
.bk-dc > span:nth-child(2){flex:1;min-width:0}
.bk-dc b{display:block;font-size:14.5px}
.bk-dc small{display:block;font-size:12.5px;color:var(--muted)}
.bk-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.bk-btns .btn{flex:1;min-width:180px}
.bk-more{text-align:left}
.bk-more h3{margin:0;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.025em}
.bk-more .m{color:var(--muted);font-size:13.5px}
.bk-more .sim{display:flex;gap:12px;padding:2px 2px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.bk-more .simc{flex:0 0 156px;scroll-snap-align:start}

/* ---------- payout time: big and bold so nobody misses it ---------- */
.paytime{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:10px 0 14px;border-radius:16px;background:linear-gradient(120deg,rgba(52,211,153,.16),rgba(52,211,153,.05));border:1px solid rgba(52,211,153,.38)}
.paytime > svg{color:var(--mint);flex:none}
.paytime b{display:block;font-family:var(--display);font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.paytime span{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:3px}
.paytime.sm{padding:10px 13px;margin:0 0 16px;gap:10px;border-radius:13px}
.paytime.sm b{font-size:19px}
.ptb{font-weight:800;color:var(--mint);font-size:13.5px;white-space:nowrap}

/* withdraw tabs */
.seg2 .soon{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-left:7px;padding:2px 6px;border-radius:6px;background:rgba(251,191,36,.16);color:var(--gold);vertical-align:2px}
.seg2 button.on .soon{background:rgba(255,255,255,.2);color:#fff}
.soonbox{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 16px;border-radius:16px;border:1px dashed var(--line3);background:rgba(255,255,255,.02)}
.soonbox svg{color:var(--gold);margin-bottom:4px}
.soonbox b{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em}
.soonbox span{color:var(--muted);font-size:13.5px}
.gpg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch;margin-bottom:14px}
.gpget{display:flex;flex-direction:column;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid var(--accent-ring);background:var(--accent-lo)}
.gpget span{font-size:12px;font-weight:600;color:var(--muted)}
.gpget b{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;line-height:1.15}
.gpget small{font-size:11.5px;color:var(--accent-hi);font-weight:600}
.gpsteps{margin:0 0 14px;padding-left:20px;color:var(--muted);font-size:13.5px;line-height:1.55}
.gpsteps li{margin-bottom:4px}
.gpsteps b{color:var(--fg)}
@media (max-width:480px){.gpg{grid-template-columns:1fr}}

/* balance strip + crypto deposits */
.wallet{padding:16px 18px}
.wl-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.wl-m{display:flex;align-items:center;gap:13px;min-width:0}
.wl-i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-lo);color:var(--accent-hi);flex:none}
.wl-l{display:block;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.08em}
.wl-m b{display:block;font-family:var(--display);font-size:28px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.wl-m small{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:2px}
.wl-deps{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.wl-dep{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.02);text-align:left;font-size:13.5px;font-weight:600}
.wl-dep:hover{border-color:var(--accent-ring)}
.wl-dep > svg{margin-left:auto;color:var(--muted)}
.dep{padding:28px}
.dep h2{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.04em;margin:0 0 6px;line-height:1.05}
.dep p.m{color:var(--muted);margin:0 0 18px;font-size:14px}
.dep p.m b{color:var(--fg)}
.dep-coins button{display:inline-flex;align-items:center;gap:7px}
.dep-coins small{font-size:11px;font-weight:600;opacity:.75}
.dep-amt{display:flex;align-items:baseline;gap:10px;width:100%;margin:6px 0 14px;padding:16px 18px;border-radius:16px;border:1px solid var(--accent-ring);background:var(--accent-lo);text-align:left;cursor:copy}
.dep-amt b{font-family:var(--display);font-size:clamp(34px,8vw,46px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;line-height:1}
.dep-amt span{font-weight:700;color:var(--accent-hi);font-size:18px}
.dep-amt > svg{margin-left:auto;align-self:center;color:var(--accent-hi)}
.dep-net{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:12px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);font-size:13px;font-weight:500;margin-bottom:16px}
.dep-net svg{color:var(--gold);flex:none;margin-top:1px}
.dep-addr{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:12px;border:1px dashed var(--line3);background:rgba(0,0,0,.25);text-align:left;cursor:copy;font-size:13.5px;word-break:break-all;margin-bottom:16px}
.dep-addr > svg{flex:none;color:var(--muted)}
.dep-st{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.03);margin-bottom:14px}
.dep-st b{display:block;font-weight:700}
.dep-st small b{display:inline;color:var(--fg)}
.dep-st small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.dep-st.credited{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.1)}
.dep-st.credited svg{color:var(--mint)}
.dep-st.review svg{color:var(--accent-hi)}
.dep-st.expired svg,.dep-st.rejected svg{color:var(--red-hi)}
.dspin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent-hi);animation:spin .9s linear infinite;flex:none}
.dep-more{border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:12px}
.dep-more summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--muted)}
.dep-more p{font-size:13px;color:var(--muted);margin:10px 0}
.dep-more .inp{height:44px;font-size:12.5px}
.dep-wallet{font-size:13px}
.co2-top{margin-top:12px;font-size:13.5px;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.coi-d{display:inline-flex;align-items:center;gap:5px;margin-top:4px}
.opts.one{grid-template-columns:1fr}
.ml small{flex-wrap:wrap;row-gap:2px}
.mlv{display:flex;align-items:center;gap:4px;width:100%;color:var(--faint)}

/* ---------- notifications ---------- */
.nf{max-width:720px;margin:0 auto;padding:22px 0 40px}
.nf-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.nf-h h1{margin:0;font-family:var(--display);font-size:clamp(26px,4vw,34px);font-weight:700;letter-spacing:-.04em}
.nf-day{font-size:12.5px;font-weight:700;color:var(--muted);margin:20px 4px 8px}
.nf-list{border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:var(--glass)}
.nfr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 16px;text-decoration:none;border-top:1px solid var(--line);animation:popIn .45s var(--ease) both;animation-delay:calc(min(var(--i,0),12) * 30ms);transition:background .2s}
.nfr:first-child{border-top:0}
.nfr:hover{background:rgba(255,255,255,.04)}
.nfr.new{background:rgba(123,97,255,.08)}
.nfr.new:hover{background:rgba(123,97,255,.13)}
.nfi{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--fg);flex:none}
.nfi.v{background:var(--accent-lo);color:var(--accent-hi)}
.nfi.mint{background:rgba(52,211,153,.13);color:var(--mint)}
.nfi.gold{background:rgba(251,191,36,.16);color:var(--gold)}
.nfi.red{background:rgba(244,63,94,.13);color:var(--red-hi)}
.nfi.face{border-radius:50%;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);font-weight:800;font-size:14px}
.nfm{min-width:0}
.nft{display:block;font-size:14.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nft b{color:var(--fg);font-weight:700}
.nfm small{display:block;color:var(--muted);font-size:13px;font-weight:500;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nfr time{font-size:12px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
#bellBtn .cnt{background:var(--red)}
@media (max-width:560px){.nfr{padding:12px 13px;gap:11px}.nf{padding-top:14px}}

/* ---------- real photos only: what shows when a listing has none ---------- */
.noph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card2);color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.02em;text-align:center;padding:8px}
.noph svg{opacity:.8}
.art > .noph{z-index:1}
.mini{display:grid;place-items:center;background:var(--card2);color:var(--faint)}
.mini svg{width:16px;height:16px}
.mini img{width:100%;height:100%}
button.art.addph{display:block;width:100%;border:1px dashed var(--line3);padding:0;cursor:pointer;font:inherit;color:inherit}
button.art.addph:hover .noph,button.art.addph:focus-visible .noph{color:var(--fg);background:rgba(123,97,255,.12)}
.ml.nop{border-style:dashed}
.ph-cap.need{color:var(--red-hi);font-weight:700}

/* ---------- add funds: bank or crypto ---------- */
.dep-tabs{display:flex;margin:0 46px 18px 0}                       /* clear of the close button */
.dep-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}

/* ---------- Terms and Privacy pages (served at /terms and /privacy) ---------- */
.legal-page{min-height:100vh}
.legal-top{position:sticky;top:0;z-index:20;background:rgba(11,11,16,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.legal-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.wrap.legal{max-width:780px;padding-block:44px 30px}
.legal-kicker{margin:0 0 8px;color:var(--faint);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.legal h1{font-family:var(--display);font-size:clamp(34px,6vw,52px);line-height:1.02;letter-spacing:-.035em;margin:0 0 14px}
.legal-lead{font-size:17px;color:var(--muted);margin:0 0 26px;max-width:62ch}
.legal h2{font-family:var(--display);font-size:22px;letter-spacing:-.02em;line-height:1.2;margin:38px 0 10px}
.legal section{scroll-margin-top:84px}
.legal p,.legal li{color:#d6d6e0;font-size:15.5px;line-height:1.65}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin:0 0 8px}
.legal li::marker{color:var(--accent-hi)}
.legal b{color:var(--fg)}
.legal a{color:var(--accent-hi);text-underline-offset:3px;overflow-wrap:anywhere}
.legal a:hover{color:#fff}
.legal code{font-family:var(--mono);font-size:.88em;background:var(--card2);border:1px solid var(--line2);border-radius:6px;padding:1px 6px}
.legal-short{background:var(--accent-lo);border:1px solid rgba(123,97,255,.35);border-radius:18px;padding:18px 22px 8px;margin:0 0 6px}
.legal-short h2{margin:0 0 10px;font-size:19px}
.legal-foot{border-top:1px solid var(--line);margin-top:40px}
.legal-foot-in{display:flex;justify-content:space-between;gap:12px 22px;flex-wrap:wrap;padding-block:22px 34px;color:var(--faint);font-size:13.5px}
.legal-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.legal-foot a{color:var(--muted);text-decoration:none}
.legal-foot a:hover,.legal-foot a[aria-current]{color:var(--fg)}
.auth-legal{color:var(--faint);font-size:12.5px;line-height:1.5;margin:12px 0 0;text-align:center}
.auth-legal a{color:var(--muted);text-underline-offset:2px}
.auth-legal a:hover{color:var(--fg)}
@media (max-width:560px){.wrap.legal{padding-block:28px 20px}.legal-short{padding:16px 16px 6px}.legal-top-in{height:58px}.legal p,.legal li{font-size:15px}}