/* ═══════════════════════════════════════════════════════
   CLOUT EXCHANGE — ARENA · production arena.css
   This is Claude Design's arena.css, wrapped verbatim in @scope so its
   selectors only ever match inside .arena-scope subtrees. Not a rewrite:
   every rule/value below this comment block is byte-identical to
   design-reference/arena/arena.css (the untouched original deliverable).

   WHY @scope: arena.css and the app's own style.css independently reuse
   ~18 short class names for unrelated components (.pt = portfolio tab
   button vs Arena's poster title; .t1–.t4 = tier accent vars; .toast,
   .screen, .up, .dn, .win, .more, .less, .gold, .ok, .over, .sm, .urgent,
   .sc-name). Loading arena.css unscoped would let its rules leak onto
   Market/Portfolio/the app's global toast — @scope contains it with zero
   edits to the design's actual CSS. :root/body rules inside stay inert
   here (html/body are ancestors, not descendants, of .arena-scope) —
   harmless no-ops since style.css already defines the same tokens
   globally; everything else scopes correctly.
═══════════════════════════════════════════════════════ */
@scope (.arena-scope) {
/* ═══════════════════════════════════════════════════════
   CLOUT EXCHANGE — ARENA · arena.css
   Vanilla CSS. Tokens mirror public/css/style.css :root.
   Sections: tokens · shell · header · slate · duels ·
   sheets · screens · draft · misc
═══════════════════════════════════════════════════════ */
:root{
--bg:#0d0b12;--bg2:#15131d;--bg3:#1c1929;--bg4:#272234;
--ink:#f5f3fb;--ink2:#d8d3e8;--mid:#9a93b2;--mid2:#6b6483;
--acc:#b8a3fc;--acc2:#9a82f2;--glow:rgba(154,130,242,.45);
--pos:#7fe3a8;--neg:#fb8c7e;--gold:#f3c34e;--pink:#ff7ec6;--mint:#5fe6cf;
--line:rgba(184,163,252,.13);--line2:rgba(184,163,252,.26);--line3:rgba(184,163,252,.40);
--acc-d:rgba(184,163,252,.13);--gold-d:rgba(243,195,78,.14);--pos-d:rgba(127,227,168,.14);--neg-d:rgba(251,140,126,.14);
--disp:'Bebas Neue',sans-serif;--sans:'Outfit',system-ui,sans-serif;--mono:'DM Mono',ui-monospace,monospace;--hand:'Caveat',cursive;
--r-s:11px;--r:16px;--r-l:22px;--r-xl:30px;--dur:.36s;--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:#08070b;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc2)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* ── shell ── */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 18% 0%,rgba(157,131,245,.14),transparent 55%),#08070b}
.device{position:relative;width:min(428px,100vw);height:min(900px,100vh);background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media(min-width:540px){.device{border-radius:40px;border:1px solid var(--line2);height:min(880px,94vh);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 120px rgba(157,131,245,.1)}}
.demo{position:fixed;left:16px;top:16px;display:flex;gap:6px;z-index:200}
.demo button{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid);background:var(--bg2);border:1px solid var(--line);border-radius:30px;padding:6px 12px}
.demo button.on{color:var(--acc);border-color:var(--line2);background:var(--acc-d)}
@media(max-width:760px){.demo{display:none}}
.sbar{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 0;font-family:var(--mono);font-size:12.5px;flex:none;opacity:.9}
.screens{flex:1;position:relative;min-height:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column;min-height:0}
.screen.on{display:flex;animation:screenIn .3s var(--ease)}
.screen.push{animation:screenInR .3s var(--ease)}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}
.pb-tab{padding-bottom:110px}
.pad{padding:0 16px}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}}
@keyframes screenInR{from{opacity:0;transform:translateX(26px)}}
/* ── header ── */
.ahead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 2px;flex-wrap:wrap}
.ah-t{font-family:var(--disp);font-size:33px;letter-spacing:.8px;line-height:1}
.ah-t .ac{color:var(--acc)}
.cpill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;background:var(--bg3);border:1px solid var(--line2);border-radius:30px;padding:7px 12px;color:var(--ink2);white-space:nowrap;flex:none}
.cpill .i{color:var(--gold)}
.cpill b{font-weight:500;color:var(--ink);white-space:nowrap}
.cpill.lk{background:var(--neg-d);border-color:rgba(251,140,126,.32);color:var(--neg)}
.cpill.lk .i{color:var(--neg)}
.backb{width:34px;height:34px;border-radius:50%;background:var(--bg3);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s}
.backb:active{transform:scale(.9)}
.seg2{display:flex;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px;margin:12px 16px 0}
.seg2 button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 4px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--mid);letter-spacing:.2px;transition:all .2s}
.seg2 button.on{background:var(--acc);color:#15111e}
.seg2 .cnt{font-family:var(--mono);font-size:9.5px;background:var(--gold);color:#241a06;border-radius:8px;padding:1px 6px}
.seg2 button.on .cnt{background:#15111e;color:var(--gold)}
.rep{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);margin:12px 16px 0;padding:13px 4px 11px}
.rep>div{text-align:center;border-left:1px solid var(--line)}
.rep>div:first-child{border-left:none}
.rv{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:-.3px;display:flex;align-items:center;justify-content:center;gap:4px}
.rv .i{color:var(--gold)}
.rl{font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:1.3px;color:var(--mid);margin-top:4px}
/* ── results marquee ── */
.marq{position:relative;display:flex;align-items:center;gap:12px;margin:12px 16px 0;padding:15px 16px;border-radius:18px;border:1px solid var(--line3);background:linear-gradient(140deg,rgba(184,163,252,.2),var(--bg2) 62%);box-shadow:0 10px 34px rgba(154,130,242,.16);cursor:pointer;transition:transform .18s;width:auto;text-align:left}
.marq:hover{transform:translateY(-2px)}
.marq .mq-m{flex:1;min-width:0}
.mq-t{font-family:var(--disp);font-size:22px;letter-spacing:.8px}
.mq-t .st{color:var(--acc)}
.mq-s{font-family:var(--mono);font-size:10.5px;color:var(--mid);margin-top:3px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mq-s a{color:var(--acc);white-space:nowrap;flex:none}
.mq-s span{min-width:0}
.mq-c{width:32px;height:32px;border-radius:50%;background:var(--acc-d);color:var(--acc);display:flex;align-items:center;justify-content:center;flex:none}
.marq.seen{border-color:var(--line);background:var(--bg2);box-shadow:none;padding:12px 16px}
.marq.seen .mq-t{display:none}
/* ── section label / misc type ── */
.slbl{display:flex;align-items:baseline;justify-content:space-between;margin:22px 18px 10px;gap:8px}
.slbl h3{font-family:var(--disp);font-size:19px;letter-spacing:.8px;font-weight:400}
.slbl h3 b{color:var(--acc);font-weight:400}
.slbl .r{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--mid);text-align:right}
.hand{font-family:var(--hand);font-size:19px;color:var(--acc);transform:rotate(-1.6deg);display:inline-block}
.tag{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--mid)}
.eyeb{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1.8px;color:var(--mid)}
.mline{font-family:var(--mono);font-size:11.5px;color:var(--ink2);letter-spacing:-.2px;white-space:nowrap}
.hair{height:1px;background:var(--line);margin:14px 0}
.rw{display:flex;align-items:center}
.sb2{justify-content:space-between}
/* ── cover art ── */
.cov{position:absolute;inset:0;background:linear-gradient(150deg,var(--cf),var(--ct));overflow:hidden}
.cv-mono{position:absolute;right:-4px;bottom:-12px;font-family:var(--disp);line-height:.8;font-size:52px;color:rgba(255,255,255,.92);mix-blend-mode:overlay;letter-spacing:-1px}
.grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:7px 7px;mix-blend-mode:overlay;opacity:.6}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,7,11,.5))}
.d-eq{position:absolute;left:8px;right:8px;bottom:0;height:68%;display:flex;align-items:flex-end;gap:3px;opacity:.5;mix-blend-mode:soft-light}
.d-eq i{flex:1;background:#fff;border-radius:2px 2px 0 0}
.d-eq i:nth-child(1){height:40%}.d-eq i:nth-child(2){height:70%}.d-eq i:nth-child(3){height:55%}.d-eq i:nth-child(4){height:90%}.d-eq i:nth-child(5){height:45%}.d-eq i:nth-child(6){height:75%}.d-eq i:nth-child(7){height:60%}.d-eq i:nth-child(8){height:85%}.d-eq i:nth-child(9){height:50%}.d-eq i:nth-child(10){height:65%}.d-eq i:nth-child(11){height:80%}.d-eq i:nth-child(12){height:42%}
.d-rings{position:absolute;right:-24px;top:-24px;width:110px;height:110px;opacity:.5;mix-blend-mode:soft-light}
.d-rings i{position:absolute;border:2px solid #fff;border-radius:50%;inset:0}
.d-rings i:nth-child(2){inset:16px}.d-rings i:nth-child(3){inset:32px}.d-rings i:nth-child(4){inset:48px}
.d-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 2px,transparent 2.5px);background-size:18px 18px;opacity:.35;mix-blend-mode:soft-light}
.d-diag{position:absolute;inset:0;background:repeating-linear-gradient(58deg,rgba(255,255,255,.14) 0 8px,transparent 8px 20px);opacity:.5;mix-blend-mode:soft-light}
.avc{border-radius:50%;overflow:hidden;position:relative;flex:none;border:1px solid var(--line2)}
.avc .cv-mono{font-size:18px;right:-2px;bottom:-4px}
.thumb{width:34px;height:34px;border-radius:10px;overflow:hidden;position:relative;flex:none}
.thumb .cv-mono{font-size:20px;right:-2px;bottom:-5px}
/* ── slate card ── */
.scard{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:0 16px 12px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.scard::before{content:'';position:absolute;top:0;left:14px;right:14px;height:2.5px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--tc),transparent);z-index:6}
.scard:hover{transform:translateY(-4px)}
.t1{--tc:var(--gold)}.t2{--tc:var(--acc)}.t3{--tc:var(--pink)}.t4{--tc:var(--mint)}
.t1:hover{box-shadow:0 12px 32px rgba(243,195,78,.18)}.t2:hover{box-shadow:0 12px 32px rgba(154,130,242,.18)}.t3:hover{box-shadow:0 12px 32px rgba(255,126,198,.18)}.t4:hover{box-shadow:0 12px 32px rgba(95,230,207,.18)}
.sc-cover{height:56px;position:relative}
.sc-body{padding:11px 14px 14px;display:flex;flex-direction:column;gap:10px}
.sc-name{font-size:16.5px;font-weight:700;letter-spacing:-.2px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.sc-name .i{color:var(--mid2);width:13px;height:13px}
.sc-name:hover .i{color:var(--acc)}
.tpx{font-family:var(--mono);font-size:10px;letter-spacing:.3px;padding:4px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tpx::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.tpx.t1{color:var(--gold);background:var(--gold-d)}.tpx.t2{color:var(--acc);background:var(--acc-d)}.tpx.t3{color:var(--pink);background:rgba(255,126,198,.12)}.tpx.t4{color:var(--mint);background:rgba(95,230,207,.12)}
.chg{font-family:var(--mono);font-size:11.5px;font-weight:500;padding:4px 9px;border-radius:8px;letter-spacing:-.2px;white-space:nowrap}
.chg.up{color:var(--pos);background:var(--pos-d)}
.chg.dn{color:var(--neg);background:var(--neg-d)}
.spk{display:block}
.odds{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.oc{display:flex;flex-direction:column;gap:6px}
.ob{display:flex;align-items:baseline;justify-content:center;gap:7px;font-weight:700;font-size:13.5px;letter-spacing:.4px;padding:12px 8px;border-radius:12px;transition:all .18s}
.ob b{font-family:var(--mono);font-weight:500;font-size:12.5px}
.ob.more{background:var(--gold-d);border:1px solid rgba(243,195,78,.32);color:var(--gold)}
.ob.more:hover{background:var(--gold);color:#241a06;box-shadow:0 6px 20px rgba(243,195,78,.3)}
.ob.less{background:var(--pos-d);border:1px solid rgba(127,227,168,.3);color:var(--pos)}
.ob.less:hover{background:var(--pos);color:#0c2417;box-shadow:0 6px 20px rgba(127,227,168,.3)}
.ol{font-family:var(--mono);font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid2);text-align:center}
.lkd{background:var(--bg2);border:1.5px dashed var(--line2);border-radius:18px;margin:0 16px 12px;padding:13px 14px;display:flex;flex-direction:column;gap:9px}
.lkd .rw.sb2{flex-wrap:wrap;gap:4px 10px}
.lkd .mline{flex:none}
.lkd.off{opacity:.55}
.stampx{font-family:var(--disp);font-size:11px;letter-spacing:1.6px;border:2px solid var(--gold);color:var(--gold);padding:3px 10px;border-radius:7px;transform:rotate(-2deg);white-space:nowrap;animation:stampIn .45s var(--ease) backwards}
.stampx.win{border-color:var(--acc);color:var(--acc);box-shadow:0 0 24px var(--glow);transform:rotate(-4deg)}
@keyframes stampIn{from{opacity:0;transform:rotate(-2deg) scale(1.5)}}
/* ── buttons ── */
.bp,.bgold,.bgh{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-weight:600;font-size:14.5px;padding:15px;border-radius:15px;transition:transform .14s,filter .18s}
.bp:active,.bgold:active,.bgh:active{transform:scale(.975)}
.bp{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#15111e;box-shadow:0 8px 26px var(--glow)}
.bgold{background:linear-gradient(135deg,#f7d580,var(--gold));color:#241a06;box-shadow:0 8px 26px rgba(243,195,78,.28)}
.bgh{background:var(--bg3);border:1px solid var(--line2);color:var(--ink)}
.bgh:hover{background:var(--bg4)}
.bp:disabled{background:var(--bg4);color:var(--mid2);box-shadow:none;cursor:not-allowed}
.bsm{padding:11px 14px;font-size:13px;border-radius:12px}
/* ── tab bar ── */
.tbar{position:absolute;left:0;right:0;bottom:0;z-index:50;padding:8px 14px calc(10px + env(safe-area-inset-bottom))}
.tb-in{display:flex;background:rgba(28,25,41,.92);backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:20px;padding:6px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:14px;color:var(--mid2);font-size:9.5px;font-weight:600;letter-spacing:.2px;transition:color .2s}
.tb .i{width:20px;height:20px}
.tb.on{color:var(--acc);background:var(--acc-d)}
.tb:active{transform:scale(.94)}
/* ── overlay / sheet ── */
.overlay{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:flex-end}
.overlay-bg{position:absolute;inset:0;background:rgba(6,5,10,.68);backdrop-filter:blur(2px);animation:fade var(--dur) var(--ease)}
.sheet{position:relative;background:var(--bg2);border:1px solid var(--line2);border-bottom:none;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom));max-height:92%;overflow-y:auto;animation:sheetUp var(--dur) var(--ease);box-shadow:0 -20px 60px rgba(0,0,0,.55)}
.sheet::-webkit-scrollbar{width:0}
.grab{width:38px;height:4px;border-radius:4px;background:var(--bg4);margin:4px auto 16px}
@keyframes fade{from{opacity:0}}
@keyframes sheetUp{from{transform:translateY(100%)}}
.thead{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.thead .th-cov{width:46px;height:46px;border-radius:13px;overflow:hidden;position:relative;flex:none}
.thead .th-cov .cv-mono{font-size:26px}
.thead .th-n{font-size:17px;font-weight:700;letter-spacing:-.2px}
.thead .th-m{font-family:var(--mono);font-size:10.5px;color:var(--mid);margin-top:3px}
.sidep{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;padding:6px 11px;border-radius:30px;white-space:nowrap}
.sidep.g{color:var(--gold);background:var(--gold-d);border:1px solid rgba(243,195,78,.3)}
.sidep.m{color:var(--pos);background:var(--pos-d);border:1px solid rgba(127,227,168,.3)}
.stp{display:flex;align-items:center;justify-content:space-between;background:var(--bg3);border:1px solid var(--line);border-radius:16px;padding:8px;margin:10px 0 12px}
.stb{width:46px;height:46px;border-radius:12px;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink);transition:transform .12s}
.stb:active{transform:scale(.9)}
.stb:disabled{color:var(--mid2)}
.stv{text-align:center;font-family:var(--mono)}
.stv .n{font-size:27px;font-weight:500;letter-spacing:-.5px}
.stv .l{font-size:8.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--mid);margin-top:3px}
.qk{display:flex;gap:8px;align-items:center}
.qa{flex:1;font-family:var(--mono);font-size:12px;padding:9px 4px;border-radius:11px;background:var(--bg3);border:1px solid var(--line);color:var(--ink2);text-align:center;transition:all .15s}
.qa.on{background:var(--acc-d);border-color:var(--line2);color:var(--acc)}
.capn{font-family:var(--mono);font-size:9px;color:var(--mid2);text-transform:uppercase;letter-spacing:.6px;text-align:right;margin-top:7px}
.sum{background:var(--bg3);border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin:14px 0}
.sr{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px}
.sr .l{color:var(--mid)}
.sr .v{font-family:var(--mono);color:var(--ink);letter-spacing:-.2px}
.sr.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:13px}
.sr.tot .l{color:var(--ink);font-weight:600;font-size:14px}
.sr.tot .v{font-size:18px;font-weight:500;color:var(--gold)}
.inpw{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--line2);border-radius:13px;padding:13px 15px;transition:border-color .2s}
.inpw:focus-within{border-color:var(--acc)}
.inpw .at{font-family:var(--mono);color:var(--mid)}
.inpw input{flex:1;background:none;border:none;outline:none;color:var(--ink);font-size:15px;font-weight:600;min-width:0}
.inpw input::placeholder{color:var(--mid2);font-weight:400}
.noteb{border:1.5px dashed var(--line2);border-radius:12px;padding:11px 14px;font-size:12px;color:var(--mid);line-height:1.5;margin-bottom:14px}
/* ── ceremony / graded ── */
.cerem{background:radial-gradient(120% 60% at 50% 0%,rgba(154,130,242,.26),transparent 62%),var(--bg)}
.grade{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:14px 15px;margin:0 16px 11px;display:flex;flex-direction:column;gap:9px}
.grade.w{border-color:var(--line2);background:linear-gradient(150deg,rgba(184,163,252,.09),var(--bg2) 55%)}
.misp{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--neg);background:var(--neg-d);border:1px solid rgba(251,140,126,.28);border-radius:7px;padding:4px 9px}
.barl{font-family:var(--mono);font-size:12px;color:var(--ink2)}
.barl b{color:var(--neg);font-weight:500}
.net{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;font-size:14px}
.net .v{font-family:var(--mono);font-size:16px;font-weight:500;display:flex;align-items:center;gap:6px}
/* ── duel cards ── */
.dc{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin:0 16px 10px;display:flex;flex-direction:column;gap:9px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.dc:hover{transform:translateY(-3px)}
.dc.urgent{border-color:rgba(243,195,78,.5);background:linear-gradient(150deg,rgba(243,195,78,.13),var(--bg2) 60%);box-shadow:0 0 0 1px rgba(243,195,78,.12),0 10px 32px rgba(243,195,78,.14);cursor:pointer}
.dc.calm{border:1.5px dashed var(--line2);background:var(--bg)}
.dcn{font-family:var(--disp);font-size:19px;letter-spacing:.8px}
.dcn.g{color:var(--gold)}
.dtitle{font-size:14.5px;font-weight:700}
.rpill{font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--neg);background:var(--neg-d);border:1px solid rgba(251,140,126,.3);border-radius:30px;padding:5px 11px;white-space:nowrap}
.ppill{font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;border-radius:30px;padding:5px 11px;white-space:nowrap}
.ppill.q{color:var(--mid);background:var(--bg3);border:1px solid var(--line)}
.ppill.k{color:var(--pos);background:var(--pos-d);border:1px solid rgba(127,227,168,.28)}
.sealed{border:1.5px dashed var(--line2);border-radius:10px;padding:8px 11px;font-family:var(--mono);font-size:10px;color:var(--mid);text-align:center;letter-spacing:.5px}
/* ── marketplace ── */
.mrow{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:12px 13px;margin:0 16px 9px;transition:transform .16s,border-color .2s,opacity .3s}
.mrow:hover{border-color:var(--line2);transform:translateY(-2px)}
.mrow .mm{flex:1;min-width:0}
.mrow .mn{font-size:14px;font-weight:700;letter-spacing:-.2px}
.mrow .mc{font-family:var(--mono);font-size:9.5px;color:var(--mid);margin-top:3px;letter-spacing:.2px}
.mrow .mc b{color:var(--gold);font-weight:500}
.mrow .mr{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mrow .mv{font-family:var(--mono);font-size:14.5px;letter-spacing:-.3px}
.claim{background:var(--acc);color:#15111e;font-weight:700;font-size:10.5px;letter-spacing:1.2px;padding:7px 15px;border-radius:30px;transition:filter .15s}
.claim:hover{filter:brightness(1.08)}
.fchip{font-family:var(--mono);font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid);background:var(--bg3);border:1px solid var(--line);border-radius:30px;padding:5px 10px}
/* ── constraint poster ── */
.poster{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line3);text-align:center}
.poster .pin{position:relative;z-index:3;padding:24px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:10px}
.poster .pt{font-family:var(--disp);font-size:38px;letter-spacing:1.2px;line-height:.9;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.poster .pr2{font-size:13px;color:rgba(255,255,255,.85)}
.poster.sm .pin{padding:16px 16px;gap:8px}
.poster.sm .pt{font-size:27px}
.poster.sm .pr2{font-size:11.5px}
.poster .cv-mono{font-size:130px;right:-14px;bottom:-30px}
.poster.sm .cv-mono{font-size:84px;right:-10px;bottom:-20px}
.twist{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);background:rgba(13,11,18,.55);border:1px solid rgba(243,195,78,.45);border-radius:30px;padding:6px 13px;backdrop-filter:blur(4px)}
.poster.sm .twist{font-size:8.5px;padding:5px 11px}
/* ── draft ── */
.bud{height:7px;border-radius:5px;background:var(--bg4);overflow:hidden;margin:7px 16px 0}
.bud i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .3s var(--ease)}
.bud i.over{background:linear-gradient(90deg,#e0604f,var(--neg))}
.slot{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line);border-radius:15px;padding:11px 13px;margin:0 16px 9px}
.slot.emp{border:1.5px dashed var(--line2);background:transparent;color:var(--mid2)}
.wpill{font-family:var(--mono);font-size:9px;letter-spacing:.8px;color:var(--acc);background:var(--acc-d);border-radius:30px;padding:4px 9px;white-space:nowrap}
.slot.emp .wpill{color:var(--mid);background:var(--bg3)}
.slot .sname{flex:1;font-size:14.5px;font-weight:700;min-width:0}
.slot.emp .sname{font-size:13px;font-weight:400}
.sctl{width:28px;height:28px;border-radius:9px;background:var(--bg3);border:1px solid var(--line);color:var(--mid);display:flex;align-items:center;justify-content:center;flex:none;transition:all .15s}
.sctl:hover{color:var(--ink);border-color:var(--line2)}
.pr{display:flex;align-items:center;gap:11px;padding:10px 18px;border-bottom:1px solid var(--line)}
.pr .pn{flex:1;font-size:13.5px;font-weight:600;min-width:0}
.pr .pm{font-family:var(--mono);font-size:11px;color:var(--mid);white-space:nowrap}
.pr.x{opacity:.38}
.pr.x .pn{text-decoration:line-through}
.pr.in .pn{color:var(--acc)}
.addb{width:30px;height:30px;border-radius:10px;background:var(--acc-d);border:1px solid var(--line2);color:var(--acc);display:flex;align-items:center;justify-content:center;flex:none;transition:background .15s}
.addb:hover{background:var(--acc);color:#15111e}
.addb:disabled{opacity:.35;cursor:not-allowed}
/* ── resolved ── */
.vsg{display:grid;grid-template-columns:1fr auto 1fr;gap:8px 10px;align-items:center;font-family:var(--mono);font-size:11.5px}
.vsg .yn{text-align:right;color:var(--ink2)}
.vsg .tn{text-align:left;color:var(--ink2)}
.vsg .w{color:var(--acc);text-align:center;font-size:9px;letter-spacing:.6px;background:var(--acc-d);border-radius:30px;padding:3px 8px}
/* ── scout log ── */
.lgrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin:0 16px 8px}
.lgrow .ll{font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:-.2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgrow .mline{flex:none;font-size:11px}
.lgrow.lnk{cursor:pointer}
.lgrow.lnk:hover{border-color:var(--line2)}
.dhd{display:flex;align-items:baseline;justify-content:space-between;margin:16px 18px 8px}
.dhd .d{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mid)}
.dhd .n{font-family:var(--mono);font-size:12px;font-weight:500}
.chip2{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:7px 14px;border-radius:30px;background:var(--bg3);border:1px solid var(--line);color:var(--mid);white-space:nowrap}
.chip2.on{background:var(--acc);color:#15111e;border-color:var(--acc);font-weight:600}
/* ── peek ── */
.rngb{font-family:var(--mono);font-size:10.5px;padding:6px 13px;border-radius:9px;color:var(--mid);transition:all .15s}
.rngb.on{background:var(--acc-d);color:var(--acc)}
.d5{display:flex;gap:6px}
.d5 span{flex:1;text-align:center;font-family:var(--mono);font-size:10.5px;padding:6px 2px;border-radius:8px}
.d5 .u{color:var(--pos);background:var(--pos-d)}
.d5 .d{color:var(--neg);background:var(--neg-d)}
/* ── empty ── */
.eart{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 40% 30%,rgba(184,163,252,.24),var(--bg3));border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--acc);margin:0 auto 20px}
/* ── toast ── */
.toastw{position:absolute;left:0;right:0;top:46px;z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 18px}
.toast{display:flex;align-items:center;gap:10px;background:rgba(38,34,50,.96);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:14px;padding:11px 15px;font-size:13.5px;font-weight:500;color:var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.5);animation:toastIn .4s var(--ease);max-width:100%}
.toast .ti{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.toast .ti.ok{background:var(--pos-d);color:var(--pos)}
.toast .ti.acc{background:var(--acc-d);color:var(--acc)}
.toast .ti.gold{background:var(--gold-d);color:var(--gold)}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px)}}
}