/* FAM FLOOR. A trading floor printed on warm black: paper ink, hard 2px
   frames, offset slabs, Anton display type, ledger rows with dotted leaders,
   stamps instead of badges. One loud orange. Green and red speak only for
   gains, losses and danger. Nothing blurs, nothing floats. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/anton-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jbmono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/jbmono-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jbmono-700.woff2') format('woff2')}

:root{
  --bg:#0b0a08; --slab:#131109; --slab2:#191509; --well:#0e0c08;
  --ink:#f3ecdf; --dim:#b3a892; --faint:#6f6754;
  --frame:rgba(243,236,223,.9); --hairline:rgba(243,236,223,.16); --hair2:rgba(243,236,223,.32);
  --orange:#f96f16; --orange-ink:#1a0d02;
  --blue:#0052FF;
  --up:#2fd575; --down:#ff4f40;
  --shadow:#040302;
  --disp:'Anton','Arial Narrow',Impact,sans-serif;
  --dsp:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.5 var(--dsp);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---- moving background: drifting warm aurora + slow grid, all GPU ---- */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.bg span{position:absolute; display:block}
.bg-a{
  width:60vw; height:60vw; left:-14vw; top:-18vw; border-radius:50%;
  background:radial-gradient(circle, rgba(249,111,22,.18), transparent 62%);
  filter:blur(30px); animation:drseA 26s ease-in-out infinite alternate;
}
.bg-b{
  width:66vw; height:66vw; right:-20vw; bottom:-26vw; border-radius:50%;
  background:radial-gradient(circle, rgba(0,82,255,.16), transparent 62%);
  filter:blur(34px); animation:drseB 32s ease-in-out infinite alternate;
}
.bg-grid{
  inset:0; width:100%; height:100%; opacity:.5;
  background-image:linear-gradient(rgba(243,236,223,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,236,223,.035) 1px, transparent 1px);
  background-size:44px 44px;
  animation:gridpan 40s linear infinite;
  mask-image:radial-gradient(circle at 50% 30%, #000 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 40%, transparent 90%);
}
@keyframes drseA{from{transform:translate(0,0) scale(1)} to{transform:translate(8vw,6vw) scale(1.14)}}
@keyframes drseB{from{transform:translate(0,0) scale(1)} to{transform:translate(-7vw,-5vw) scale(1.1)}}
@keyframes gridpan{from{background-position:0 0} to{background-position:44px 44px}}
.mast,.tapewrap,.tabs,.stage,.cmdbar{position:relative; z-index:1}
body[data-state="boot"] main,body[data-state="boot"] .tabs{visibility:hidden}
body[data-state="boot"] [data-when]{display:none !important}
body[data-state="out"] [data-when="in"]{display:none !important}
body[data-state="in"] [data-when="out"]{display:none !important}
/* 🚨 The hidden attribute must win over any class that sets display, or a
   label with display:block and a flex preview card both ignore [hidden]. */
[hidden]{display:none !important}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.small{font-size:11px} .big{font-size:17px;font-weight:700}
.dim{color:var(--dim)}
.footnote{color:var(--faint); font-size:11px; margin:8px 0 0}
a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange); outline-offset:1px}
.pos{color:var(--up)} .neg{color:var(--down)}
::selection{background:var(--orange); color:var(--orange-ink)}

/* ---- masthead ---- */
.mast{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:14px 18px 10px; padding-top:calc(14px + env(safe-area-inset-top, 0px));
}
.wordmark{
  font-family:var(--disp); font-size:clamp(34px,6vw,52px); line-height:.9;
  letter-spacing:.02em; color:var(--ink);
}
.mast-left{display:flex; align-items:baseline; gap:12px}
.floor-tag{
  font-family:var(--disp); font-size:13px; letter-spacing:.18em; color:var(--orange);
  border:2px solid var(--orange); padding:3px 8px 2px; display:inline-flex; align-items:center; gap:7px;
}
.livedot{width:8px; height:8px; border-radius:50%; background:var(--faint); display:inline-block; transition:background .3s}
.livedot.on{background:var(--up); animation:pulse 2.2s ease infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.4}}
.mast-right{display:flex; align-items:center; gap:10px; padding-bottom:6px}
.chip{border:2px solid var(--hair2); padding:5px 10px; font-size:11px; color:var(--dim)}
.userchip{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--dim)}

/* ---- the tape ---- */
.tapewrap{
  border-top:2px solid var(--frame); border-bottom:2px solid var(--frame);
  overflow:hidden; background:var(--well); white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
}
.tape{display:inline-flex; animation:tapescroll 45s linear infinite; will-change:transform}
.tape:hover{animation-play-state:paused}
.tapetrack{
  display:inline-block; padding:7px 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.02em; color:var(--dim);
}
.tapetrack b{color:var(--ink); font-weight:600}
.tapetrack .sep{color:var(--orange); margin:0 14px}
@keyframes tapescroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---- tabs ---- */
.tabs{
  display:flex; gap:8px; padding:12px 18px 0; overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font-family:var(--disp); font-size:14px; letter-spacing:.1em;
  background:var(--slab); color:var(--dim); border:2px solid var(--hair2);
  padding:8px 16px 6px; cursor:pointer; white-space:nowrap;
  transition:color .12s, background .12s, transform .12s, box-shadow .12s;
}
.tab:hover{color:var(--ink); border-color:var(--frame)}
.tab.on{
  background:var(--orange); color:var(--orange-ink); border-color:var(--orange);
  box-shadow:4px 4px 0 var(--shadow); transform:translate(-1px,-1px);
}
.tab:not(.on):hover{transform:translateY(-2px)}
.tab .ti{display:none}
.tab b{font-weight:inherit}
.tab-more{display:none}
.moresheet{display:none}
.wordmark{transition:text-shadow .3s ease}
.wordmark:hover{text-shadow:3px 3px 0 var(--orange)}
.gaschip::before{content:"⛽ "}
.gaschip{color:var(--dim); border-color:var(--hair2)}
.balchip{color:var(--ink)}

/* ---- desktop footer ---- */
.foot{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 18px 66px; border-top:1px solid var(--hairline); margin-top:24px;
  color:var(--faint); font-size:11.5px;
}
.foot-brand{font-family:var(--disp); letter-spacing:.14em; color:var(--dim); font-size:12px}
.foot-links{display:flex; gap:14px}
.foot-links a{color:var(--dim); text-decoration:none}
.foot-links a:hover{color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange)}
.foot-note{margin-left:auto; color:var(--faint); font-size:10.5px}

.stage{padding:14px 18px 96px; max-width:1160px; margin:0 auto}

.guest{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:2px solid var(--frame); background:var(--slab); padding:10px 14px; margin-bottom:14px;
  font-size:12.5px; box-shadow:4px 4px 0 var(--shadow);
}
.stamp{
  font-family:var(--disp); font-size:11px; letter-spacing:.14em; padding:3px 8px 2px;
  border:2px solid currentColor; transform:rotate(-2deg); display:inline-block;
}
.stamp-blue{color:#7aa4ff}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:2px solid var(--frame); background:var(--slab); color:var(--ink);
  padding:9px 16px; cursor:pointer; text-decoration:none;
  font:700 12px var(--dsp); letter-spacing:.06em;
  box-shadow:3px 3px 0 var(--shadow);
  transition:transform .1s, box-shadow .1s;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--shadow)}
.btn:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--shadow)}
.btn-primary{background:var(--orange); color:var(--orange-ink); border-color:var(--orange)}
.btn-tg{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-ghost{color:var(--dim); border-color:var(--hair2); box-shadow:none}
.btn-ghost:hover{color:var(--ink); border-color:var(--frame)}
.btn-sm{padding:6px 11px; font-size:11px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.linkbtn{background:none;border:none;color:var(--faint);font:12px var(--dsp);cursor:pointer;margin-top:12px; text-decoration:underline}
.linkbtn:hover{color:var(--dim)}
.cta{display:flex; gap:10px; flex-wrap:wrap}

/* ---- views ---- */
.view{display:none}
.view.on{display:block}
.viewhead{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin:4px 0 14px; flex-wrap:wrap}
.viewhead h2{font-family:var(--disp); font-size:26px; letter-spacing:.06em; margin:0; line-height:1}
.viewhead p{margin:0; color:var(--faint); font-size:12px; flex-basis:100%; order:3}
.needlogin{border:2px dashed var(--hair2); padding:26px; text-align:center; color:var(--dim)}

/* ---- the wire ---- */
.wirebar{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.filters{display:flex; gap:6px}
.filters button{
  font-family:var(--disp); font-size:12px; letter-spacing:.1em;
  background:none; color:var(--dim); border:2px solid var(--hair2); padding:5px 12px 4px; cursor:pointer;
}
.filters button.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.wiretools{display:flex; gap:6px; align-items:center}
.qsize{display:inline-flex; gap:4px}
.qsize button{
  font:700 11px var(--mono); background:none; color:var(--dim);
  border:2px solid var(--hair2); padding:4px 9px; cursor:pointer;
}
.qsize button.on{background:var(--orange); color:var(--orange-ink); border-color:var(--orange)}
.pausebtn{font:700 10px var(--mono); letter-spacing:.1em; background:none; border:2px solid var(--hair2); color:var(--up); padding:5px 10px; cursor:pointer}
.pausebtn.paused{color:var(--faint)}
.soundbtn{background:none; border:2px solid var(--hair2); padding:3px 8px; cursor:pointer; font-size:11px}
.soundbtn.on{border-color:var(--orange)}

/* desktop wire: ledger + a market rail using the width */
.wire-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start}
.wire-main{min-width:0}
.wire-rail{display:flex; flex-direction:column; gap:14px; position:sticky; top:74px}
.railcard h3{font-family:var(--disp); font-size:12px; letter-spacing:.1em; color:var(--dim); margin:0 0 10px}
.railmkt{display:flex; flex-direction:column; gap:8px}
.railmkt .rmk{display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--hairline); font-size:12.5px}
.railmkt .rmk:last-child{border-bottom:0}
.railmkt .rmk i{font-style:normal; color:var(--dim); letter-spacing:.06em}
.railmkt .rmk b{font-weight:700}
.railmover{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--hairline); cursor:pointer}
.railmover:last-child{border-bottom:0}
.railmover:hover{background:var(--slab2)}
.railmover .av{width:22px; height:22px; font-size:9px}
.railmover .rn{flex:1; min-width:0; font-weight:600; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.railmover .rc{font-family:var(--mono); font-size:11.5px; font-weight:700}
.railcta{text-align:center}
.railcta .stamp{margin-bottom:6px}
@media (max-width:1080px){
  .wire-layout{grid-template-columns:1fr}
  .wire-rail{display:none}
}
.ledger{border:2px solid var(--frame); background:var(--slab); box-shadow:5px 5px 0 var(--shadow); max-height:calc(100vh - 320px); overflow-y:auto; scrollbar-width:thin}
.tok{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:1px solid var(--hairline); cursor:pointer;
}
.tok:last-child{border-bottom:0}
.tok:hover{background:var(--slab2)}
.av{
  width:27px; height:27px; border-radius:50%; flex:none;
  border:2px solid var(--hair2); background:var(--well);
  display:inline-flex; align-items:center; justify-content:center;
  font:700 11px var(--dsp); color:var(--dim); overflow:hidden;
}
.av img{width:100%; height:100%; object-fit:cover; display:block}
.tok .who{min-width:0; flex:0 1 auto}
.tok .n{font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:6px; align-items:baseline}
.tok .n .star{color:var(--orange); font-size:10px}
.tok .n .st{
  font-family:var(--disp); font-size:8.5px; letter-spacing:.12em; padding:1px 5px 0;
  border:1.5px solid currentColor; transform:rotate(-2deg); flex:none;
}
.st-new{color:var(--orange)} .st-fam{color:#7aa4ff} .st-hot{color:var(--down)}
.tok .sub{color:var(--faint); font-size:10px; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.leader{flex:1 1 30px; border-bottom:2px dotted var(--hairline); margin:0 2px; align-self:center; min-width:14px}
.tok .cols{display:flex; gap:16px; font-family:var(--mono); font-size:10.5px; color:var(--faint); flex:none}
.tok .cols b{color:var(--dim); font-weight:600; display:block; font-size:11px}
.tok .px{text-align:right; font-family:var(--mono); font-size:12.5px; font-weight:700; flex:none; min-width:86px}
.tok .px sub{font-size:8px; vertical-align:-2px; color:var(--dim)}
.tok .px small{display:block; font-size:10px; font-weight:600}
.tok .zap{
  flex:none; background:none; border:2px solid var(--orange); color:var(--orange);
  font:700 10.5px var(--mono); padding:6px 9px; cursor:pointer; white-space:nowrap;
}
.tok .zap:hover{background:var(--orange); color:var(--orange-ink)}
.tok.flashnew{animation:flashnew 1.6s ease}
@keyframes flashnew{0%{background:rgba(249,111,22,.18)} 100%{background:transparent}}
.px.tickup{animation:tickup 1s ease}
.px.tickdown{animation:tickdown 1s ease}
@keyframes tickup{0%{color:var(--up)} 100%{}}
@keyframes tickdown{0%{color:var(--down)} 100%{}}

.skel{padding:8px 14px}
.skel .srow{
  height:40px; margin:7px 0;
  background:linear-gradient(90deg, var(--slab2) 25%, var(--well) 45%, var(--slab2) 65%);
  background-size:220% 100%;
  animation:shimmer 1.3s linear infinite;
}
@keyframes shimmer{from{background-position:130% 0} to{background-position:-90% 0}}

/* ---- slabs ---- */
.slabgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.span2{grid-column:span 2} .span3{grid-column:span 3}
.slab{
  border:2px solid var(--frame); background:var(--slab); padding:15px 17px;
  box-shadow:5px 5px 0 var(--shadow);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease;
  transform-style:preserve-3d;
}
/* 3D lift: slabs and the hero rise and cast a longer shadow on hover, and the
   token cards tilt toward the pointer via a JS-set --rx/--ry (see app.js). */
.slabgrid .slab:hover{transform:translate(-1px,-1px); box-shadow:4px 5px 0 var(--shadow)}
.tilt{
  transition:transform .18s ease;
}
.pf-hero{transition:box-shadow .2s ease}
.stamp,.floor-tag,.st{transform-style:preserve-3d}
.slab h3{font-family:var(--disp); font-size:13px; letter-spacing:.1em; margin:0 0 6px; color:var(--dim)}
.p-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px}
.p-head h3{margin:0}
.rows{display:flex; flex-direction:column}
.rows .r{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 0; border-bottom:1px solid var(--hairline); font-size:12.5px;
}
.rows .r:last-child{border-bottom:0}
.rows .r .l{color:var(--dim)} .rows .r .l b{color:var(--ink); font-weight:700}
.rows .r .v{font-family:var(--mono); text-align:right}
.capbar{height:6px; background:var(--well); border:1px solid var(--hairline); overflow:hidden; margin:10px 0 6px}
.capbar div{height:100%; background:var(--orange); width:0; transition:width .6s ease}
.pnlsplit{display:flex; gap:16px; margin:0 0 6px}
.fam-mascot{width:100%; max-width:190px; height:auto; display:block; margin:0 auto; border:2px solid var(--hair2)}

/* ---- portfolio hero + holdings ---- */
.pf-hero{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; padding:14px 17px}
.pf-worth i{font-style:normal; display:block; font-family:var(--disp); font-size:10px; letter-spacing:.16em; color:var(--dim); margin-bottom:2px}
/* Only the net-worth number is the hero size; the PnL line stays small so the
   whole block is two tidy lines, not a stack of giant figures. */
#pfWorth{font-size:clamp(26px,3.4vw,36px); font-weight:700; line-height:1; letter-spacing:-.02em; display:block}
#pfPnl{display:block; font-size:12.5px; margin-top:6px}
#pfPnl b{font-weight:700}
#pfPnl .dim{color:var(--faint)}
.pf-meta{display:flex; flex-direction:column; gap:8px; min-width:min(340px,100%)}
.pf-id{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pf-id > span:first-child{font-family:var(--disp); font-size:13px; letter-spacing:.1em; border:2px solid var(--hair2); padding:3px 9px 2px}
.pf-fee{color:var(--dim)}
.capline{display:flex; align-items:center; gap:10px}
.capline .capbar{flex:1; margin:0}
.hold-act{display:flex; gap:5px; flex:none}
.hold-act button{
  background:none; border:2px solid var(--hair2); color:var(--dim);
  font:700 9.5px var(--mono); padding:5px 8px; cursor:pointer; letter-spacing:.04em;
}
.hold-act button:hover{border-color:var(--down); color:var(--down)}
.hold-act button.buyb:hover{border-color:var(--orange); color:var(--orange)}
.tok .st-cash{color:var(--dim)}
.pf-chartslab{margin-top:14px; padding:12px 14px}
#pfChart{width:100%; height:auto; display:block; background:var(--well); border:1px solid var(--hairline)}
.alloc{margin:0 0 12px}
.allocbar{display:flex; height:14px; border:2px solid var(--hair2); overflow:hidden}
.allocbar span{height:100%; min-width:2px}
.alloclegend{display:flex; gap:14px; flex-wrap:wrap; margin-top:7px; color:var(--dim)}
.alloclegend i{font-style:normal; display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:-1px}
.gaschip{color:var(--dim); border-color:var(--hair2)}
.trackinput{flex:1; min-width:0; background:var(--well); border:2px solid var(--hair2); color:var(--ink); font:12px var(--mono); padding:9px 12px}
.trackinput:focus{border-color:var(--orange); outline:none}
.tk-alertrow{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-4px 0 12px}
.tk-alertrow button{font:700 10.5px var(--mono); background:none; border:2px solid var(--hair2); color:var(--dim); padding:5px 10px; cursor:pointer}
.tk-alertrow button:hover{border-color:var(--orange); color:var(--orange)}
.pf-fund{margin-top:14px; text-align:center}
.pf-fund p{color:var(--dim); margin:12px 0}
.fundaddr{
  border:2px dashed var(--hair2); background:var(--well); padding:12px 14px;
  word-break:break-all; font-size:13px; margin:0 0 12px; user-select:all;
}

/* ---- seg + forms ---- */
.seg{display:inline-flex; gap:6px; margin-bottom:13px; flex-wrap:wrap}
.seg button{
  font-family:var(--disp); font-size:11.5px; letter-spacing:.08em;
  background:none; color:var(--dim); border:2px solid var(--hair2); padding:6px 12px 5px; cursor:pointer;
}
.seg button.on{background:var(--orange); color:var(--orange-ink); border-color:var(--orange)}
.seg-sm{margin:0}
.payseg{margin-top:5px}
/* desktop trade: ticket + live token detail panel */
.trade-layout{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start}
.trade-ticket{min-width:0}
.trade-detail{position:sticky; top:74px}
.td-empty{color:var(--faint); font-size:12.5px; line-height:1.6; padding:8px 2px}
#tdChart{width:100%; height:auto; display:block; background:var(--well); border:2px solid var(--hairline); margin:8px 0}
.trade-detail .tk-head{margin-bottom:8px}
.trade-detail .tk-id .av{width:34px; height:34px; font-size:13px}
.trade-detail h3{font-size:14px; margin:0}
@media (max-width:1080px){
  .trade-layout{grid-template-columns:minmax(0,1fr); min-width:0}
  .trade-detail{position:static; order:-1}
  .trade-detail .td-empty{display:none}
}
.tradeform label{display:block; color:var(--faint); font-size:10px; letter-spacing:.1em; margin-bottom:11px; font-weight:700}
.tradeform input,.tradeform select{
  display:block; width:100%; margin-top:5px;
  background:var(--well); border:2px solid var(--hair2);
  color:var(--ink); font:13px var(--dsp); padding:9px 12px;
}
.tradeform input:focus,.tradeform select:focus{border-color:var(--orange)}
.tradeform input.mono{font-family:var(--mono)}
.tf-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; align-items:end}

/* ---- command bar ---- */
.cmdbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border-top:2px solid var(--frame);
  padding:10px 18px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
}
.prompt{color:var(--orange); font-weight:700; font-size:15px}
#cmd{
  flex:1; background:none; border:none; color:var(--ink);
  font:13px var(--mono); padding:4px 0;
}
#cmd:focus{outline:none}
#cmd::placeholder{color:var(--faint)}
.cmdhint{color:var(--faint); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44%}

/* ---- modals ---- */
.modal{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(4,3,2,.8);
}
.modal.open{display:flex}
.mbox{
  width:100%; max-width:430px; background:var(--slab); border:2px solid var(--frame);
  padding:24px 22px; text-align:center; box-shadow:7px 7px 0 var(--shadow);
}
.mbox h3{font-family:var(--disp); letter-spacing:.08em; margin:0 0 8px; font-size:16px}
.mbox-wide{max-width:740px; text-align:left}
.logincode{
  font-size:30px; font-weight:700; letter-spacing:.35em; text-indent:.35em;
  color:var(--orange); margin:14px 0 16px;
}
.waiting{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--faint); font-size:11.5px; margin-top:12px}
.spin{width:12px;height:12px;border:2px solid var(--hair2);border-top-color:var(--orange);border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.warnbox{
  text-align:left; border:2px solid var(--orange); color:var(--orange);
  padding:10px 13px; font-size:12px; margin:12px 0; white-space:pre-wrap;
}
.quotebox{text-align:left; margin:12px 0 14px; font-size:11.5px; color:var(--dim)}
.quotebox .q{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--hairline); font-family:var(--mono)}
.quotebox .q:last-child{border-bottom:0}
.quotebox .q .best{color:var(--orange); font-weight:700}
#reviewModal .rows{text-align:left; margin:14px 0 4px}

/* ---- token modal ---- */
.tk-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:10px}
.tk-id{display:flex; align-items:center; gap:11px; min-width:0}
.tk-id .av{width:38px; height:38px; font-size:14px}
.tk-head h3{margin:0 0 1px; font-size:15px}
.tk-price{text-align:right; flex:none}
.tk-price .big{display:block}
.tk-price .big sub{font-size:9px; vertical-align:-2px; color:var(--dim)}
.scanchip{display:inline-block; padding:3px 11px; margin-bottom:10px; border:2px solid var(--hair2); color:var(--dim)}
.scanchip.good{border-color:var(--up); color:var(--up)}
.scanchip.bad{border-color:var(--down); color:var(--down); font-weight:700}
#tkChart{width:100%; height:auto; display:block; background:var(--well); border:2px solid var(--hairline)}
.tk-tf{margin:8px 0 2px}
.tk-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:6px; margin:8px 0 10px}
.tk-stats div{background:var(--well); border:1px solid var(--hairline); padding:7px 9px}
.tk-stats i{font-style:normal; color:var(--faint); display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase}
.tk-tapehead{display:flex; justify-content:space-between; align-items:baseline; margin:2px 0 4px; font-family:var(--disp); font-size:10.5px; letter-spacing:.12em; color:var(--dim)}
.tk-tape{max-height:130px; overflow-y:auto; border:1px solid var(--hairline); background:var(--well); margin-bottom:12px; scrollbar-width:thin}
.tk-tape .tr{display:flex; justify-content:space-between; gap:10px; padding:5px 11px; border-bottom:1px solid var(--hairline); font-size:11px}
.tk-tape .tr:last-child{border-bottom:0}
.tk-tape .tr.buy span:first-child{color:var(--up)}
.tk-tape .tr.sell span:first-child{color:var(--down)}
.tk-actions{display:flex; gap:8px; flex-wrap:wrap}
.tk-actions .btn{flex:1; min-width:104px}

/* ---- toast ---- */
.toast{
  position:fixed; left:50%; bottom:64px; transform:translateX(-50%) translateY(20px);
  background:var(--slab); border:2px solid var(--frame);
  color:var(--ink); font-size:12.5px; padding:10px 16px; z-index:200;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  max-width:min(480px, calc(100vw - 40px)); text-align:center;
  box-shadow:5px 5px 0 var(--shadow);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--down); color:#ffc0b8}
.toast.okc{border-color:var(--up)}

/* ---- mobile: a native app shell ---- */
@media (max-width:900px){
  html{-webkit-tap-highlight-color:transparent}
  body{overscroll-behavior-y:none}

  /* compact single-row app header, never wraps */
  .mast{
    height:52px; padding:0 14px; align-items:center;
    padding-top:calc(0px + env(safe-area-inset-top, 0px));
    border-bottom:1px solid var(--frame);
  }
  .mast-left{gap:9px; align-items:center}
  .wordmark{font-size:26px; line-height:1}
  .floor-tag{font-size:10px; padding:2px 6px 1px}
  .mast-right{gap:7px}
  .balchip{display:inline-block; font-size:11px; padding:5px 9px}
  .btn-tg.btn-sm{padding:7px 11px; font-size:11px}
  .userchip .mono{display:none}

  .stage{padding:12px 12px 150px}
  .slabgrid{grid-template-columns:1fr}
  .span2,.span3{grid-column:auto}
  .wirebar{gap:8px}
  .tok .cols{display:none}
  .leader{display:none}
  .tok .who{flex:1}
  .ledger{max-height:none}
  .tok{padding:11px 12px}
  .tok .zap{padding:9px 11px}
  .btn{padding:11px 16px}
  .cmdhint{display:none}
  .foot{display:none}

  /* top tabs become the fixed bottom app tab-bar: icon over label */
  .tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:46;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background:rgba(11,10,8,.97); border-top:2px solid var(--frame);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    gap:0; justify-content:space-around;
  }
  .tab{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:0; box-shadow:none !important; transform:none !important;
    padding:5px 4px; min-width:0; flex:1;
  }
  .tab b{font-size:8.5px; letter-spacing:.04em; color:var(--dim); font-family:var(--dsp); font-weight:700}
  .tab .ti{display:block; font-size:18px; line-height:1; color:var(--dim); font-style:normal}
  .tab.on{background:none}
  .tab.on b,.tab.on .ti{color:var(--orange)}
  /* only 4 primary views live in the bar; the rest fold into MORE */
  .tab-2nd{display:none}
  .tab-more{display:flex}
  .tab-more.active b,.tab-more.active .ti{color:var(--orange)}

  /* the MORE sheet slides up above the bar */
  .moresheet{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    position:fixed; left:0; right:0; z-index:47;
    bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    padding:12px; margin:0 10px; border:2px solid var(--frame);
    background:rgba(11,10,8,.98); box-shadow:0 -6px 30px var(--shadow);
    transform:translateY(140%); transition:transform .22s cubic-bezier(.2,.8,.25,1);
    pointer-events:none;
  }
  .moresheet.open{transform:none; pointer-events:auto}
  .moresheet button{
    display:flex; align-items:center; gap:9px; justify-content:center;
    font:700 12px var(--disp); letter-spacing:.08em; color:var(--dim);
    background:var(--slab); border:2px solid var(--hair2); padding:13px 10px; cursor:pointer;
  }
  .moresheet button i{font-style:normal; font-size:16px}
  .moresheet button.on{color:var(--orange); border-color:var(--orange)}

  /* command bar sits just above the tab bar */
  .cmdbar{bottom:calc(58px + env(safe-area-inset-bottom, 0px)); border-bottom:1px solid var(--hairline)}

  .modal{align-items:flex-end; padding:0}
  .mbox,.mbox-wide{
    max-width:none; width:100%; border-left:0; border-right:0; border-bottom:0;
    padding:20px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    max-height:86vh; overflow-y:auto; box-shadow:none;
    animation:sheetup .26s cubic-bezier(.2,.8,.25,1);
  }
  .tk-actions .btn{min-width:0}
  .toast{bottom:calc(130px + env(safe-area-inset-bottom, 0px))}
}
@keyframes sheetup{from{transform:translateY(40%); opacity:.4} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .tape{animation:none !important}
  .bg{display:none}
  .tilt{transform:none !important}
}

/* ---- tighter phones: keep everything on screen ---- */
@media (max-width:560px){
  .wordmark{font-size:24px}
  .mast-right .chip{display:none}
  .viewhead h2{font-size:22px}
  .tf-row{grid-template-columns:1fr}
  #pfWorth{font-size:30px}
  .tk-actions{flex-direction:column}
  .tk-actions .btn{width:100%}
  .tk-stats{grid-template-columns:1fr 1fr}
  .gaschip{display:none}
  .tab .ti{font-size:17px}
  .tab b{font-size:8px}
}
/* Never let the body scroll sideways on any device. */
@media (max-width:400px){ .tok .zap{padding:8px 9px} .btn{padding:10px 13px} }


/* In-Telegram trading toggle (fam dashboard) */
.deleg{grid-column:1/-1;margin-top:10px;padding:14px;border:1px solid var(--line,#2a2a2a);border-radius:12px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:8px}
.deleg-h{font-size:11px;letter-spacing:.14em;opacity:.65}
.deleg-s{font-size:13px;font-weight:700}
.deleg-n{font-size:11px;opacity:.55;line-height:1.5}


/* Global chain switcher (top of the floor) */
.chainbar{display:flex;align-items:center;gap:8px;padding:10px 16px 0;position:relative;z-index:1;flex-wrap:wrap}
.chainbar .cbl{font-size:10px;letter-spacing:.18em;color:var(--dim)}
.csw{border:2px solid var(--hair2);background:none;color:var(--dim);font-family:var(--dsp);font-weight:700;font-size:12px;letter-spacing:.05em;padding:5px 13px;cursor:pointer;transition:transform .1s ease,border-color .15s ease,color .15s ease}
.csw:hover{color:var(--ink);border-color:var(--frame);transform:translateY(-1px)}
.csw.on{background:var(--orange);border-color:var(--orange);color:#0b0a08}
.cbhint{font-size:10px;color:var(--dim);opacity:.6;margin-left:auto}
@media (max-width:640px){
  .chainbar{padding:8px 12px 0;gap:6px}
  .csw{font-size:11px;padding:5px 10px}
  .cbhint{display:none}
}


/* Shareable PnL card preview overlay */
.cardov{position:fixed;inset:0;z-index:100;background:rgba(6,5,4,.86);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.cardbox{display:flex;flex-direction:column;gap:14px;max-width:min(92vw,520px);align-items:center}
.cardbox img{width:100%;height:auto;border:2px solid var(--frame);border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.6)}
.cardacts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cardacts .btn{text-decoration:none}


/* menu polish 08-25: icons on desktop tabs + primary/secondary hierarchy */
@media (min-width:641px){
  .tab{display:inline-flex; align-items:center; gap:8px}
  .tab .ti{display:inline-block; font-style:normal; font-size:15px; line-height:1; opacity:.9}
  .tab-2nd{opacity:.72}
  .tab-2nd:hover{opacity:1}
  .tab.on .ti{opacity:1}
  .chainbar{padding-top:12px}
}


/* copytrade row controls */
.csize{width:66px;border:2px solid var(--hair2);background:none;color:var(--ink);font-family:var(--mono);font-size:12px;padding:5px 7px}
.hold-act [data-copymode]{min-width:96px}


/* header+footer redesign 08-25 */
.foot-mark{display:flex; flex-direction:column; gap:2px}
.foot-tag{font-size:10px; color:var(--faint); letter-spacing:.04em}
@media (min-width:641px){
  .mast{padding:18px 24px 12px; align-items:center}
  .mast-right{padding-bottom:0; gap:12px}
  .chip{border-radius:3px; padding:6px 11px}
  .foot{justify-content:space-between; align-items:flex-end; gap:24px; padding:26px 24px 44px; margin-top:36px; border-top:1px solid var(--hairline)}
  .foot-brand{font-size:13px}
  .foot-links{gap:18px; font-size:12px}
  .foot-note{margin-left:0; max-width:340px; text-align:right; line-height:1.6}
  .stage{padding-bottom:56px}
}


/* copytrade control legend */
.copyhint{font-size:11px;color:var(--dim);opacity:.75;padding:2px 2px 12px;line-height:1.6}
.copyhint b{color:var(--ink);font-weight:700}


/* ios no-autozoom (inputs must be >= 16px on focus or Safari zooms) + no text auto-size */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
input, select, textarea{font-size:16px !important}
/* keep the small numeric boxes compact but zoom-safe */
.csize{font-size:16px !important;width:62px}
@media (max-width:640px){
  .csize{width:58px}
  .stage{overflow-x:hidden}
  body{overflow-x:hidden}
}
/* never let any page scroll sideways */
.stage, .view, .slab, .ledger, .tok, .chainbar, .tabs{max-width:100%}
.tok{flex-wrap:wrap}
.hold-act{flex-wrap:wrap; gap:6px}


/* wallet actions row + referral card */
.pf-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.pf-actions .btn{flex:1;min-width:104px}
.refcard .p-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.refcard #refLink{margin:10px 0;word-break:break-all}
.refcard .cta{margin-top:6px}


/* private key export overlay */
.keyov{position:fixed;inset:0;z-index:120;background:rgba(6,5,4,.9);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.keybox{max-width:min(94vw,460px);border:2px solid var(--frame);background:var(--slab);padding:20px;display:flex;flex-direction:column;gap:12px}
.keybox h3{margin:0}
.keywarn{color:var(--bad,#ff5a5a);font-size:12px;margin:0}
.keyval{word-break:break-all;background:rgba(255,255,255,.04);border:1px solid var(--line,#2a2a2a);border-radius:8px;padding:12px;font-size:13px;user-select:all}
.keyacts{display:flex;gap:10px}


/* styled modals */
.famov{position:fixed;inset:0;z-index:130;background:rgba(6,5,4,.9);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px}
.fambox{width:min(94vw,440px);border:2px solid var(--frame);background:var(--slab);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 var(--shadow)}
.fambox h3{margin:0}
.modseg{display:flex;gap:6px;flex-wrap:wrap}
.modseg button{flex:1;min-width:70px;border:2px solid var(--hair2);background:none;color:var(--dim);font-family:var(--dsp);font-weight:700;font-size:12px;padding:8px 6px;cursor:pointer;min-height:40px}
.modseg button.on{background:var(--orange);border-color:var(--orange);color:#0b0a08}
.winput{border:2px solid var(--hair2);background:none;color:var(--ink);font-family:var(--mono);padding:11px 12px;width:100%}
.keyacts{display:flex;gap:10px;margin-top:2px}
.keyacts .btn{flex:1}

/* FAM Arena */
.arena-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:8px 0 20px;border-bottom:3px solid var(--frame)}
.arena-head h2{font:800 clamp(40px,7vw,78px)/.86 var(--dsp);letter-spacing:-.045em;margin:0 0 12px}.arena-head p{max-width:720px;margin:0;color:var(--dim);line-height:1.55}.arena-actions{display:flex;gap:8px;flex-wrap:wrap;min-width:max-content}
.arena-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0;background:var(--hair2);border:2px solid var(--hair2)}.arena-principles span{background:var(--slab);padding:13px;font:11px/1.45 var(--mono);color:var(--dim)}.arena-principles b{display:block;color:var(--orange);letter-spacing:.08em;margin-bottom:3px}
.arena-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.arena-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:2px solid var(--hair2);background:var(--slab);cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s;min-width:0}.arena-card:hover{transform:translateY(-3px);border-color:var(--orange);box-shadow:5px 5px 0 var(--shadow)}.arena-card.joined{border-color:var(--blue)}.arena-card.arena-world-spotlight{background:radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--orange) 20%, transparent), var(--slab) 58%)}.arena-card.arena-world-tournament{border-left:4px solid var(--orange)}.arena-card.arena-world-editorial{box-shadow:inset 6px 0 0 var(--blue)}.arena-card.arena-world-immersive{background:linear-gradient(165deg, color-mix(in srgb, var(--blue) 16%, transparent), var(--slab) 42%)}@media (prefers-reduced-motion: reduce){.arena-card,.arena-card:hover{transition:none;transform:none}}
.arena-media{position:relative;display:block;overflow:hidden;background:var(--well);min-height:40px}
.arena-media-fill{position:absolute;inset:0;background:linear-gradient(145deg,var(--arena-a,var(--orange)),var(--arena-b,var(--blue)));opacity:.35}
.arena-media img{position:relative;display:block;width:100%;height:100%;object-fit:cover}
.arena-card-cover{margin:0 -18px;min-height:110px;background:var(--well)}
.arena-card-cover .arena-media{min-height:110px;height:110px}
.arena-card-cover-spot{min-height:132px}
.arena-card-cover-spot .arena-media{height:132px}
.arena-lead{margin:0;color:var(--ink);line-height:1.55;font:500 15px/1.55 var(--sans,inherit)}
.arena-card-rail{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:2px solid var(--hair2);background:var(--well)}
.arena-card-rail b{font:800 28px var(--dsp);color:var(--orange)}
.arena-card-rail small{font:10px var(--mono);color:var(--dim);letter-spacing:.12em}
.arena-card{animation:arenaIn .34s ease both}
@keyframes arenaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.arena-page{display:flex;flex-direction:column;gap:16px}
.arena-pagehead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.arena-mod{padding:15px;border:2px solid var(--hair2);min-width:0}
.arena-mod small{display:block;color:var(--dim);font:9px var(--mono);letter-spacing:.11em}
.arena-mod h3{margin:5px 0;font:800 18px var(--dsp)}
.arena-mod p{margin:5px 0 0;color:var(--dim);line-height:1.45}
.arena-stage{position:relative;isolation:isolate;min-height:228px;perspective:920px;overflow:hidden;border:2px solid var(--frame);background:var(--slab);--rx:0deg;--ry:0deg}
.arena-stage-art{position:absolute;inset:0;transform:translateZ(-40px) rotateX(var(--rx)) rotateY(var(--ry));transform-origin:center;transition:transform .18s ease}
.arena-stage-art .arena-media{height:100%;min-height:228px}
.arena-stage-light{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--arena-a) 34%, transparent), transparent 42%),radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--arena-b) 28%, transparent), transparent 50%);opacity:.9;animation:arenaLight 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes arenaLight{from{opacity:.55;transform:translate3d(0,0,0)}to{opacity:.95;transform:translate3d(2%,-2%,0)}}
.arena-stage-mark{position:absolute;left:18px;top:18px;width:72px;height:72px;transform:translateZ(32px);border:2px solid #fff;overflow:hidden;background:var(--slab)}
.arena-stage[data-focal="left"] .arena-stage-mark{left:18px}
.arena-stage[data-focal="right"] .arena-stage-mark{left:auto;right:18px}
.arena-stage[data-focal="center"] .arena-stage-mark{left:50%;transform:translate3d(-50%,0,32px)}
.arena-stage-plate,.arena-stage-reward,.arena-stage-count{position:absolute;padding:10px 12px;background:color-mix(in srgb, var(--slab) 88%, transparent);border:1px solid var(--hair2);transform:translateZ(24px);max-width:54%}
.arena-stage-plate{left:18px;bottom:18px}
.arena-stage-reward{right:18px;bottom:18px;text-align:right;max-width:42%}
.arena-stage-count{right:18px;top:18px;text-align:right}
.arena-stage-plate small,.arena-stage-reward small,.arena-stage-count small{display:block;font:9px var(--mono);color:var(--dim);letter-spacing:.12em}
.arena-stage-plate strong,.arena-stage-reward strong,.arena-stage-count strong{display:block;margin-top:3px;font:800 16px var(--dsp);color:#fff}
.arena-stage[data-pattern="grid"] .arena-stage-light{background-image:linear-gradient(transparent 23px, color-mix(in srgb, #fff 10%, transparent) 24px),linear-gradient(90deg, transparent 23px, color-mix(in srgb, #fff 10%, transparent) 24px),radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--arena-a) 34%, transparent), transparent 42%);background-size:24px 24px,24px 24px,auto}
.arena-stage[data-pattern="ripple"] .arena-stage-light{background:repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--arena-a) 22%, transparent) 0 12px, transparent 12px 26px)}
.arena-stage[data-pattern="radial"] .arena-stage-light{background:radial-gradient(circle at var(--arena-a, 50%) 40%, color-mix(in srgb, var(--arena-a) 40%, transparent), transparent 58%)}
.arena-stage[data-pattern="orbit"] .arena-stage-light{background:conic-gradient(from 120deg, color-mix(in srgb, var(--arena-a) 30%, transparent), transparent 40%, color-mix(in srgb, var(--arena-b) 24%, transparent), transparent 80%)}
.arena-stage[data-corners="sharp"],.arena-page[data-world] .arena-stage[data-corners="sharp"],.arena-card.arena-world-spotlight{border-radius:0}
.arena-stage[data-corners="soft"]{border-radius:22px}
.arena-stage[data-corners="mixed"]{border-radius:4px 18px}
.arena-stage[data-surface="light"]{background:#f4f1ea;color:#111}
.arena-stage[data-surface="dark"]{background:#0b0b0f}
.arena-page.arena-world-spotlight .arena-stage{min-height:260px}
.arena-page.arena-world-tournament .arena-board{display:flex;flex-direction:column;gap:6px}
.arena-page.arena-world-tournament .podium{border-color:var(--orange);box-shadow:3px 3px 0 var(--shadow)}
.arena-page.arena-world-tournament .podium-1{order:-3}
.arena-page.arena-world-tournament .podium-2{order:-2}
.arena-page.arena-world-tournament .podium-3{order:-1}
.arena-page.arena-world-editorial{max-width:760px}
.arena-page.arena-world-editorial .arena-stage{min-height:150px}
.arena-page.arena-world-editorial .arena-mod p{font-size:15px;line-height:1.6;color:var(--ink)}
.arena-page.arena-world-immersive .arena-stage{min-height:300px}
.arena-page.arena-world-immersive .arena-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.arena-gallery .arena-media{min-height:140px;height:140px}
@media (max-width:640px){
  .arena-grid,.arena-rulebook,.arena-columns,.arena-page.arena-world-immersive .arena-gallery{grid-template-columns:1fr}
  .arena-stage-reward,.arena-stage-count{max-width:46%}
}
@media (prefers-reduced-motion: reduce){
  .arena-card,.arena-card:hover{animation:none;transition:none;transform:none}
  .arena-stage-art,.arena-stage-mark,.arena-stage-plate,.arena-stage-reward,.arena-stage-count,.arena-stage-light{transform:none !important;animation:none !important;transition:none}
}
.arena-cardhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center}.arena-logo{width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:4px;background:linear-gradient(145deg,var(--orange),var(--blue));color:#fff;font:800 22px var(--dsp)}.arena-logo img,.arena-avatar img{width:100%;height:100%;object-fit:cover}.arena-card h3{margin:0;font:800 22px var(--dsp)}.arena-clock{font-size:10px;color:var(--dim);align-self:start}.arena-card>p{margin:0;color:var(--dim);line-height:1.45;min-height:40px}.arena-cardterms{display:grid;grid-template-columns:.7fr 1.3fr;border:2px solid var(--hair2)}.arena-cardterms>span{padding:11px;min-width:0}.arena-cardterms>span+span{border-left:1px solid var(--hair2)}.arena-cardterms small,.arena-rulebook small{display:block;color:var(--dim);font:9px var(--mono);letter-spacing:.11em}.arena-cardterms b{display:block;margin-top:4px;color:var(--ink);font:700 13px/1.35 var(--mono)}.arena-reward b{color:var(--orange)}.arena-cardfoot{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:auto;color:var(--dim);font:10px var(--mono)}.wide{width:100%}
.arena-skeleton,.arena-empty{grid-column:1/-1;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--hair2);color:var(--dim);font-family:var(--mono)}.arena-empty b{color:var(--ink)}
.arena-detail{margin-top:18px;padding:22px;border:2px solid var(--frame);background:var(--slab);scroll-margin-top:20px}.arena-detailhead{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:16px}.arena-back{grid-column:1/-1;border:0;background:none;color:var(--orange);font:700 11px var(--mono);text-align:left;cursor:pointer}.arena-logo-lg{width:72px;height:72px}.arena-title h2{font:800 36px var(--dsp);margin:4px 0}.arena-title p{margin:0;color:var(--dim);line-height:1.5}.arena-detailacts{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.arena-rulebook{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:2px solid var(--hair2)}.arena-rulebook>section{padding:15px;min-width:0}.arena-rulebook>section:nth-child(even){border-left:1px solid var(--hair2)}.arena-rulebook>section:nth-child(n+3){border-top:1px solid var(--hair2)}.arena-rulebook h3{margin:5px 0;font:800 18px var(--dsp)}.arena-rulebook p{margin:5px 0 0;color:var(--dim);line-height:1.45}.arena-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.arena-tags span{padding:4px 7px;border:1px solid var(--hair2);color:var(--blue);font:10px var(--mono)}.arena-score-recipe>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:8px}.arena-score-recipe>div span{padding:7px;background:var(--well);min-width:0}.arena-score-recipe>div b{display:block;color:var(--dim);font:8px var(--mono);overflow:hidden;text-overflow:ellipsis}.arena-score-recipe>div strong{font:14px var(--mono)}.arena-funding{color:var(--dim)!important;font:700 11px var(--mono)}.arena-funding.verified{color:#12a150!important}.arena-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.arena-winners{margin-top:20px;border:2px solid var(--orange);padding:14px}.arena-sectionhead{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--hair2);padding-bottom:8px}.arena-sectionhead h3{margin:0}.arena-rank{display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid var(--hair2)}.arena-rank.me{background:rgba(249,115,22,.09)}.arena-place{font:800 17px var(--dsp);color:var(--orange)}.arena-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--well);font:11px var(--mono)}.arena-rank>span:nth-child(3){display:flex;flex-direction:column;min-width:0}.arena-rank small{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arena-rank strong{font-family:var(--mono)}.arena-post{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:10px 4px;border-bottom:1px solid var(--hair2);color:inherit;text-decoration:none}.arena-post>span{display:flex;flex-direction:column}.arena-post small{color:var(--dim)}.arena-post p{grid-column:1/-1;margin:2px 0;color:var(--dim);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.arena-post strong{color:var(--orange);font-family:var(--mono)}.arena-zero{color:var(--dim);font:12px var(--mono);padding:20px 4px}
.arena-form label{display:flex;flex-direction:column;gap:5px;font:700 10px var(--mono);color:var(--dim)}.arena-formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fambox:has(.arena-builder){width:min(94vw,860px);max-height:92dvh;overflow:auto}.arena-buildertop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.arena-buildertop p{margin:5px 0 0}.arena-buildertop>span{color:var(--orange);font-size:11px}.arena-step{display:flex;flex-direction:column;gap:11px}.arena-step h4{margin:2px 0 4px;padding-bottom:8px;border-bottom:2px solid var(--hair2);font:800 18px var(--dsp)}.arena-step[hidden]{display:none!important}.arena-weightgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.arena-score-receipt{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px;border:2px solid var(--orange);background:var(--well)}.arena-score-receipt small{letter-spacing:.12em;color:var(--dim)}.arena-score-receipt b{grid-row:1/3;grid-column:2;font-size:30px;color:var(--orange)}.arena-score-receipt span{font-size:10px;color:var(--dim)}.arena-disclosure{padding:11px;border-left:4px solid var(--orange);background:var(--well);color:var(--dim);font:11px/1.45 var(--mono)}.arena-buildernav{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}.arena-review{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair2);border:2px solid var(--hair2)}.arena-review>*{padding:11px;background:var(--well)}.arena-review b{grid-column:1/-1}.arena-apps{max-height:58vh;overflow-y:auto}.arena-apps article{padding:12px 0;border-bottom:1px solid var(--hair2);display:flex;flex-direction:column;gap:5px}.arena-apps article p{margin:2px 0;color:var(--dim);line-height:1.4}.arena-apps article>div:last-child{display:flex;gap:7px;margin-top:5px}.arena-adminrules{display:grid;grid-template-columns:1fr 1fr;gap:5px}.arena-adminrules span{padding:7px;background:var(--well);font:10px var(--mono);color:var(--dim)}
@media(max-width:760px){.arena-head{align-items:flex-start;flex-direction:column}.arena-actions{width:100%;min-width:0}.arena-actions .btn{flex:1}.arena-principles,.arena-grid,.arena-columns,.arena-rulebook{grid-template-columns:1fr}.arena-rulebook>section:nth-child(even){border-left:0}.arena-rulebook>section:nth-child(n+2){border-top:1px solid var(--hair2)}.arena-detail{padding:14px}.arena-detailhead{grid-template-columns:auto minmax(0,1fr)}.arena-title h2{font-size:29px}.arena-formgrid{grid-template-columns:1fr}.arena-weightgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.arena-cardhead{grid-template-columns:auto minmax(0,1fr)}.arena-clock{grid-column:2}.arena-cardterms{grid-template-columns:1fr}.arena-cardterms>span+span{border-left:0;border-top:1px solid var(--hair2)}.arena-score-recipe>div{grid-template-columns:repeat(3,minmax(0,1fr))}.arena-rank{grid-template-columns:24px 32px minmax(0,1fr)}.arena-rank>strong{grid-column:3}.arena-buildernav{display:grid;grid-template-columns:1fr 1fr}.arena-adminrules{grid-template-columns:1fr}}

/* withdraw token picker */
.wtoklist{max-height:170px;overflow-y:auto;border:2px solid var(--hair2);display:flex;flex-direction:column}
.wtokrow{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;cursor:pointer;border-bottom:1px solid var(--hair2);font-size:13px}
.wtokrow:last-child{border-bottom:none}
.wtokrow:hover{background:rgba(249,115,22,.10)}
.wtokrow.on{background:var(--orange);color:#0b0a08}
.wtokrow .mono{opacity:.85}
.wsel{font-family:var(--mono);font-size:12px;color:var(--dim);padding:0 2px;min-height:14px}
.wchips{display:flex;gap:6px}
.wchips button{flex:1;border:2px solid var(--hair2);background:none;color:var(--ink);font-family:var(--dsp);font-weight:700;font-size:12px;padding:7px;cursor:pointer;min-height:36px}
.wchips button:hover{border-color:var(--orange)}


/* quests card */
.qcard .qsub{font-family:var(--dsp);font-weight:700;font-size:12px;letter-spacing:.05em;color:var(--dim);margin:14px 0 6px}
.qstreak{margin-top:2px}
.qmission{margin:6px 0}
.qmrow{display:flex;justify-content:space-between;font-size:13px}
.qbar{height:6px;background:var(--hair2);margin-top:4px}
.qbar i{display:block;height:100%;background:var(--orange)}
.qtask{border:2px solid var(--hair2);padding:10px 11px;margin:8px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.qtl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qpill{font-family:var(--mono);font-size:11px;background:rgba(249,115,22,.15);color:var(--orange);padding:2px 7px}


/* notifications */
.notifbell{position:relative;background:none;border:2px solid var(--hair2);color:var(--ink);cursor:pointer;font-size:15px;line-height:1;padding:5px 8px;min-height:34px}
.notifbell:hover{border-color:var(--orange)}
.notifdot{position:absolute;top:-6px;right:-6px;background:var(--orange);color:#0b0a08;font-family:var(--mono);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.ntflist{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column}
.ntfrow{display:flex;gap:10px;align-items:flex-start;padding:10px 2px;border-bottom:1px solid var(--hair2)}
.ntfrow:last-child{border-bottom:none}
.ntfico{font-size:16px;line-height:1.3}
.ntfbody{display:flex;flex-direction:column;flex:1;gap:2px}
.ntftime{white-space:nowrap}


/* desktop header menu 08-25 */
@media (min-width:961px){
  .mast{max-width:1160px; margin:0 auto; width:100%}
  .tabs{
    position:sticky; top:0; z-index:40;
    background:var(--well);
    border-top:2px solid var(--frame); border-bottom:2px solid var(--frame);
    padding:11px 24px; margin-top:2px;
    justify-content:center; gap:10px;
  }
  .tab{font-size:13px; padding:9px 18px 7px}
  .tab.on{box-shadow:3px 3px 0 var(--shadow)}
}

@media (min-width:901px){ .tabs .tab-more{display:none} }


/* portfolio sub-tabs */
.pf-subtabs{display:flex;gap:6px;margin:16px 0 4px}
.pf-subtabs button{flex:1;border:2px solid var(--hair2);background:none;color:var(--dim);font-family:var(--dsp);font-weight:700;font-size:12px;letter-spacing:.04em;padding:9px 6px;cursor:pointer;min-height:38px}
.pf-subtabs button.on{background:var(--orange);border-color:var(--orange);color:var(--orange-ink)}
.pfpane{display:none}
.pfpane.on{display:block}


/* desktop sidebar 08-25 */
@media (min-width:961px){
  .tabs{
    position:fixed; left:0; top:0; bottom:0; width:240px;
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:5px; padding:22px 14px; overflow-y:auto; margin:0;
    background:var(--well); border-right:2px solid var(--frame); border-top:none; border-bottom:none;
    z-index:46;
  }
  .tabs::before{
    content:"FAM"; display:block; font-family:var(--disp); font-size:32px; line-height:.9;
    color:var(--ink); letter-spacing:.02em; padding:2px 10px 20px;
  }
  .tab{
    display:flex; align-items:center; gap:11px; justify-content:flex-start;
    text-align:left; width:100%; font-size:14px; letter-spacing:.05em;
    padding:11px 12px; background:none; border:2px solid transparent; box-shadow:none;
    color:var(--dim);
  }
  .tab .ti{ display:inline-block; font-size:16px; opacity:.85; }
  .tab:hover{ color:var(--ink); border-color:var(--hair2); transform:none; }
  .tab.on{ background:var(--orange); color:var(--orange-ink); border-color:var(--orange); box-shadow:3px 3px 0 var(--shadow); transform:none; }
  .tab.on .ti{ opacity:1; }
  .tab-2nd{ opacity:1; }
  .mast{ margin:0 0 0 240px; max-width:none; width:auto; padding:16px 28px 12px; }
  .mast .wordmark{ display:none; }
  .tapewrap{ margin-left:240px; }
  .chainbar{ margin-left:240px; }
  .stage{ margin:0 0 0 240px; max-width:none; padding:20px 28px 96px; }
  .foot{ margin-left:240px; }
}


/* cream accent + neat desktop 08-25 */
:root{ --cream:#efe7d6; }
.side-label{ display:none; }
.side-acct{ display:none; }
@media (min-width:961px){
  .tabs{ background:#12100c; border-right-color:rgba(239,231,214,.14); padding:24px 14px; }
  .tabs::before{ color:var(--cream); font-size:34px; padding:2px 12px 4px; }
  .side-label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:rgba(239,231,214,.5); padding:14px 12px 8px; }
  .tab{ border-radius:10px; border-color:transparent; }
  .tab:hover{ background:rgba(239,231,214,.07); border-color:transparent; color:var(--cream); transform:none; }
  .tab.on{ border-radius:10px; box-shadow:none; }
  .side-acct{ margin-top:auto; display:flex; flex-direction:column; gap:4px; padding:12px 13px; border:1px solid rgba(239,231,214,.16); border-radius:12px; background:rgba(239,231,214,.03); }
  .side-acct-k{ font-size:9px; letter-spacing:.2em; color:rgba(239,231,214,.45); }
  .side-acct-v{ font-size:12px; color:var(--cream); }
  .stage .slab{ border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.26); border-color:rgba(239,231,214,.12); }
  .stage h2, .stage h3, .pf-worth b{ color:var(--cream); }
  .mast{ border-bottom:1px solid rgba(239,231,214,.12); }
  .pf-subtabs button{ border-radius:10px; }
  .modseg button, .wchips button{ border-radius:8px; }
  .btn{ border-radius:9px; }
}


/* desktop light theme 08-25 */
@media (min-width:961px){
  :root{
    --bg:#f4f1ea; --slab:#ffffff; --slab2:#faf8f2; --well:#ffffff;
    --ink:#1c1913; --dim:#57513f; --faint:#7a715c;
    --frame:#e6e0d3; --hairline:rgba(28,25,19,.09); --hair2:rgba(28,25,19,.15);
    --shadow:rgba(40,30,12,.10); --up:#12a55a; --down:#e0392b;
  }
  body{ background:var(--bg); color:var(--ink); }
  .bg{ display:none; }
  /* sidebar: light, Creator-Wire style */
  .tabs{ background:#ffffff; border-right-color:#ece6d9; }
  .tabs::before{ color:#1c1913; }
  .side-label{ color:#7a715c; }
  .tab{ color:#6f685a; }
  .tab:hover{ background:#f4f1ea; color:#1c1913; }
  .tab.on{ background:var(--orange); color:#fff; border-color:var(--orange); }
  .tab.on .ti{ opacity:1; }
  .side-acct{ border-color:#ece6d9; background:#faf8f2; }
  .side-acct-k{ color:#7a715c; }
  .side-acct-v{ color:#1c1913; }
  /* top bar + tape */
  .mast{ border-bottom:1px solid #ece6d9; }
  .tapewrap{ background:#fff; border-color:#ece6d9; }
  /* cards: white, soft, rounded */
  .stage .slab, .stage .tok, .stage .r, .card, .discover-card, .movercard{ border-radius:14px; }
  .stage .slab{ box-shadow:0 8px 24px rgba(40,30,12,.08); border-color:#ece6d9; }
  .stage h2, .stage h3{ color:#1c1913; }
  .chip{ border-color:#e6e0d3; color:#6f685a; }
}


/* full page redesign 08-25 */
.pf-greet{ display:none; }
@media (min-width:961px){
  /* page headers, Creator-Wire style titles */
  .viewhead{ margin:6px 0 24px; align-items:flex-start; }
  .viewhead h2{ font-family:var(--dsp); font-weight:800; font-size:40px; letter-spacing:-.02em; color:var(--ink); line-height:1.05; }
  .viewhead p{ font-size:15px; color:var(--dim); line-height:1.5; margin-top:8px; }
  .viewhead .btn{ align-self:center; }
  /* side cards with accent bars */
  .railcard{ position:relative; overflow:hidden; padding-left:22px; }
  .railcard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--orange); }
  .railcard:nth-of-type(2n)::before{ background:var(--blue); }
  .railcard h3{ font-family:var(--dsp); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--dim); margin-bottom:12px; }
  /* card headings */
  .p-head h3{ font-family:var(--dsp); font-weight:800; font-size:15px; letter-spacing:0; color:var(--ink); }
  /* greeting + dark net-worth hero */
  .pf-greet{ display:block; font-family:var(--dsp); font-weight:800; font-size:34px; letter-spacing:-.02em; color:var(--ink); margin:8px 0 18px; }
  .pf-hero{ background:linear-gradient(135deg,#171b26,#0d0f16); color:rgba(239,231,214,.74); border:none; box-shadow:0 16px 40px rgba(20,18,30,.22); border-radius:18px; padding:26px 28px; }
  .pf-hero #pfWorth, .pf-hero #pfHandle{ color:#fff; }
  .pf-hero .btn-ghost{ border-color:rgba(239,231,214,.28); color:#efe7d6; }
  .pf-hero .btn-ghost:hover{ border-color:var(--orange); color:#fff; }
  .pf-hero .capbar{ background:rgba(239,231,214,.16); }
  /* card hover lift */
  .stage .slab{ transition:transform .14s ease, box-shadow .14s ease; }
  .railcard:hover, .qtask:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(40,30,12,.10); }
  /* neat holdings rows */
  .ledger .r, .hold-row{ border-radius:12px; }
}


/* quest stat cards + filter */
.qstats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0 8px; }
.qstat{ position:relative; border:2px solid var(--hair2); border-radius:12px; padding:13px 13px 13px 18px; overflow:hidden; }
.qstat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--orange); }
.qstat-b::before{ background:var(--blue); }
.qstat-k{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--dim); margin-bottom:6px; }
.qstat-v{ font-family:var(--dsp); font-weight:800; font-size:24px; color:var(--ink); line-height:1; }
.qfilter{ display:flex; gap:6px; margin:12px 0 4px; }
.qfilter button{ border:2px solid var(--hair2); background:none; color:var(--dim); font-family:var(--dsp); font-weight:700; font-size:11px; letter-spacing:.06em; padding:6px 14px; border-radius:20px; cursor:pointer; }
.qfilter button.on{ background:var(--orange); border-color:var(--orange); color:var(--orange-ink); }
.qdone-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; background:rgba(47,213,117,.16); color:var(--up); padding:2px 7px; border-radius:6px; }
.qtask-done{ opacity:.7; }
@media (min-width:641px){ .qstats{ grid-template-columns:repeat(4,1fr); } }


/* motion 08-25 */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }
@media (min-width:961px){
  .stage .view.on{ animation:fadeUp .2s ease both; }
  .qstat, .railcard, .qtask, .pfpane .slab{ transition:transform .18s ease, box-shadow .18s ease; }
  .qstat:hover, .railcard:hover, .qtask:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(40,30,12,.10); }
  .pf-hero{ transition:transform .2s ease, box-shadow .2s ease; }
  .pf-hero:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(20,18,30,.16); }
}
@media (prefers-reduced-motion:reduce){ .stage .view.on{ animation:none !important; } .qstat,.railcard,.qtask,.pf-hero{ transition:none !important; } }


/* sell holdings picker + wire filler */
.wire-filler{ margin-top:16px; }
.wire-filler h3{ margin:0 0 12px; }
.wf-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.wf-item{ display:flex; flex-direction:column; gap:3px; }
.wf-item b{ font-family:var(--dsp); font-weight:700; font-size:14px; color:var(--ink); }
.wf-item span{ font-size:13px; color:var(--dim); line-height:1.45; }
@media (min-width:641px){ .wf-grid{ grid-template-columns:repeat(3,1fr); } }


/* light + neat ALL widths 08-25 */
:root{
  --bg:#f4f1ea; --slab:#ffffff; --slab2:#faf8f2; --well:#ffffff;
  --ink:#1c1913; --dim:#57513f; --faint:#7a715c;
  --frame:#e6e0d3; --hairline:rgba(28,25,19,.09); --hair2:rgba(28,25,19,.15);
  --shadow:rgba(40,30,12,.10); --up:#12a55a; --down:#e0392b;
}
body{ background:var(--bg); color:var(--ink); }
.bg{ display:none; }
.tapewrap{ background:#fff; border-color:#ece6d9; }
.mast{ border-bottom:1px solid #ece6d9; }
.stage .slab{ border-radius:14px; box-shadow:0 8px 22px rgba(40,30,12,.08); border-color:#ece6d9; }
.stage h2, .stage h3{ color:var(--ink); }
.viewhead h2{ font-family:var(--dsp); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:28px; line-height:1.06; }
.viewhead p{ font-size:14px; color:var(--dim); line-height:1.5; margin-top:6px; }
.railcard{ position:relative; overflow:hidden; padding-left:22px; }
.railcard::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--orange); }
.railcard:nth-of-type(2n)::before{ background:var(--blue); }
.p-head h3{ font-family:var(--dsp); font-weight:800; font-size:15px; letter-spacing:0; color:var(--ink); }
.pf-greet{ display:block; font-family:var(--dsp); font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ink); margin:6px 0 12px; }
.pf-hero{ background:linear-gradient(135deg,#171b26,#0d0f16); color:rgba(239,231,214,.74); border:none; box-shadow:0 12px 30px rgba(20,18,30,.20); border-radius:16px; }
.pf-hero #pfWorth, .pf-hero #pfHandle{ color:#fff; }
.pf-hero .btn-ghost{ border-color:rgba(239,231,214,.28); color:#efe7d6; }
.pf-hero .capbar{ background:rgba(239,231,214,.16); }
.chip{ border-color:#e6e0d3; color:#6f685a; }
/* mobile bottom bar + more sheet on light */
.tabs{ background:#fff; }
.moresheet, .sheet, .moresheet-inner{ background:#fff; color:var(--ink); }
@media (min-width:961px){
  .viewhead h2{ font-size:40px; }
  .pf-greet{ font-size:34px; margin:8px 0 18px; }
}


/* dark theme toggle 08-25 */
.themebtn{ background:none; border:2px solid var(--hair2); color:var(--ink); cursor:pointer; font-size:18px; line-height:1; padding:0; width:40px; height:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; flex:0 0 auto; }
.themebtn:hover{ border-color:var(--orange); }
:root[data-theme="dark"]{
  --bg:#050505; --slab:#0e0e0e; --slab2:#161616; --well:#090909;
  --ink:#f3ecdf; --dim:#b3a892; --faint:#6f6754;
  --frame:rgba(243,236,223,.9); --hairline:rgba(243,236,223,.16); --hair2:rgba(243,236,223,.32);
  --shadow:#040302; --up:#2fd575; --down:#ff4f40;
}
:root[data-theme="dark"] .bg{ display:block; }
:root[data-theme="dark"] .tabs{ background:var(--well); border-right-color:var(--hair2); }
:root[data-theme="dark"] .tabs::before{ color:var(--ink); }
:root[data-theme="dark"] .tapewrap{ background:var(--well); border-color:var(--hair2); }
:root[data-theme="dark"] .mast{ border-bottom-color:var(--hair2); }
:root[data-theme="dark"] .stage .slab{ border-color:var(--hair2); box-shadow:5px 5px 0 var(--shadow); }
:root[data-theme="dark"] .chip{ border-color:var(--hair2); color:var(--dim); }
:root[data-theme="dark"] .side-acct{ border-color:var(--hair2); background:rgba(243,236,223,.03); }
:root[data-theme="dark"] .side-label, :root[data-theme="dark"] .side-acct-k{ color:var(--dim); }
:root[data-theme="dark"] .side-acct-v{ color:var(--ink); }
:root[data-theme="dark"] .tab:hover{ background:rgba(243,236,223,.07); color:var(--ink); }
:root[data-theme="dark"] .qstat{ border-color:var(--hair2); }


/* CEX trade layout 08-25 */
.tdtf{ display:flex; gap:5px; margin:6px 0 2px; }
.tdtf button{ border:2px solid var(--hair2); background:none; color:var(--dim); font-family:var(--dsp); font-weight:700; font-size:11px; padding:4px 12px; border-radius:8px; cursor:pointer; }
.tdtf button.on{ background:var(--orange); border-color:var(--orange); color:var(--orange-ink); }
#tdChart{ min-height:220px; }
@media (min-width:961px){
  .trade-layout{ grid-template-columns:minmax(0,1fr) 352px; }
  .trade-detail{ order:1; position:static; }
  .trade-ticket{ order:2; position:sticky; top:20px; }
  #tdChart{ min-height:300px; }
  .trade-detail .tk-price .big{ font-size:22px; }
}


/* verified token picker + balance on trade */
.vtokens{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.vt-label{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:var(--dim); margin-right:2px; }
.vt-chip{ border:2px solid var(--hair2); background:none; color:var(--ink); font-family:var(--dsp); font-weight:700; font-size:12px; padding:5px 12px; border-radius:9px; cursor:pointer; }
.vt-chip:hover{ border-color:var(--orange); }
.vt-chip.on{ background:var(--orange); border-color:var(--orange); color:var(--orange-ink); }
.tbal{ color:var(--dim); margin:2px 0 8px; }


/* quest claim/submit */
.qbtns{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.qbtns > .btn{ flex:1 1 auto; justify-content:center; min-width:88px; }
.qsubrow{ margin-bottom:8px; }
.qsubrow{ margin:2px 0 8px; }
.qsubrow .winput{ font-size:13px; }
.qtask .qdone-tag{ background:rgba(47,213,117,.16); color:var(--up); }


/* quest creation, X link, countdowns */
.xcard .xrow{display:flex;gap:8px;align-items:center;margin-top:8px}
.xcard .xhandle{font-weight:700;text-decoration:none}
.xcard #xIn{flex:1;margin:0}
.qcreate .footnote{margin:6px 0 10px}
.qcfg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.qcfg label{display:flex;flex-direction:column;gap:4px;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.qcfg input{margin:0}
.qtog{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 10px}
.qbudget{font-weight:700;margin:8px 0;font-size:15px}
.qcd{font-size:11px;opacity:.6;margin-left:8px;white-space:nowrap}
.qcd-soon{opacity:1;font-weight:700}
.qended-tag{font-size:10px;border:1px solid currentColor;border-radius:6px;padding:1px 6px;margin-left:8px;opacity:.55;text-transform:uppercase;letter-spacing:.04em}
.qtask-ended{opacity:.62}


/* X profile card */
.xprofile{align-items:center}
.xpfp{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.xpfp-ph{display:flex;align-items:center;justify-content:center;background:rgba(127,127,127,.18);font-weight:700}
.xmeta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.xmeta .xhandle{font-weight:700;text-decoration:none}
.xsub{opacity:.6}
.xbadge{font-size:10px;border:1px solid currentColor;border-radius:6px;padding:1px 6px;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
#_qdesc{resize:vertical;min-height:38px}

.youtag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; background:var(--orange); color:var(--orange-ink,#1a1205); padding:1px 6px; border-radius:6px; margin-left:6px; vertical-align:middle; }

.bpts{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--orange); background:rgba(249,111,22,.12); padding:1px 6px; border-radius:6px; margin-right:6px; }


/* room member tools */
.faqlist{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.faqitem{ border:1px solid var(--hair2,rgba(127,127,127,.2)); border-radius:10px; padding:9px 12px; }
.faqitem summary{ cursor:pointer; font-weight:600; font-size:13px; }
.faqitem .faqa{ margin-top:8px; font-size:12.5px; opacity:.85; line-height:1.5; }
.watchlist{ display:flex; flex-direction:column; gap:4px; margin-top:10px; }
#watchIn, #supMsg{ margin:8px 0; }
#watchIn{ flex:1; }
#supMsg{ resize:vertical; min-height:56px; width:100%; }


/* bridge modal */
.brgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.brgrid label{ display:flex; flex-direction:column; gap:4px; font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.04em; }
.brgrid select{ margin:0; }

.faqa code, .tapcopy{ word-break:break-all; cursor:pointer; }
.faqa a{ text-decoration:underline; }


/* ===== token picker (stage 1) ===== */
.pickmodal .pickbox{ width:min(640px,96vw); max-height:88vh; padding:0; overflow:hidden; display:flex; flex-direction:column; background:var(--slab); border:1px solid var(--hair2); border-radius:16px; box-shadow:6px 6px 0 var(--shadow); }
.pick-top{ padding:14px 14px 8px; border-bottom:1px solid var(--hairline); background:var(--slab); }
.pick-search{ display:flex; align-items:center; gap:8px; background:var(--well); border:1px solid var(--hair2); border-radius:12px; padding:10px 12px; }
.pick-search:focus-within{ border-color:var(--orange); }
.pick-si{ color:var(--faint); font-size:16px; }
#pickInput{ flex:1; background:none; border:none; color:var(--ink); font-size:15px; outline:none; min-width:0; }
.pick-x{ background:none; border:none; color:var(--faint); font-size:15px; cursor:pointer; padding:0 2px; }
.pick-chains{ display:flex; gap:6px; margin-top:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pick-chains::-webkit-scrollbar{ display:none; }
.pick-chains button{ flex:0 0 auto; background:var(--well); border:1px solid var(--hair2); color:var(--dim); padding:6px 12px; border-radius:20px; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.pick-chains button.on{ background:var(--orange); color:var(--orange-ink); border-color:var(--orange); font-weight:600; }
.pick-tabs{ display:flex; gap:4px; padding:9px 14px 4px; border-bottom:1px solid var(--hairline); }
.pick-tabs button{ background:none; border:none; color:var(--dim); padding:6px 10px; font-size:13px; cursor:pointer; border-bottom:2px solid transparent; }
.pick-tabs button.on{ color:var(--ink); border-bottom-color:var(--orange); font-weight:600; }
.pick-list{ overflow-y:auto; flex:1; padding:5px 8px 10px; min-height:180px; }
.pickrow{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center; gap:10px; padding:9px 8px; border-radius:10px; cursor:pointer; }
.pickrow:hover{ background:var(--slab2); }
.pickrow .av{ width:34px; height:34px; flex:0 0 auto; }
.pk-id{ display:flex; flex-direction:column; min-width:0; }
.pk-n{ color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-sub{ color:var(--faint); font-size:11.5px; display:flex; gap:6px; align-items:center; }
.pk-chain{ text-transform:capitalize; color:var(--dim); background:var(--well); padding:1px 6px; border-radius:6px; }
.pk-stats{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; color:var(--dim); font-size:11px; white-space:nowrap; }
.pk-px{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.pk-price{ color:var(--ink); font-size:13.5px; }
.pk-copy{ background:none; border:1px solid var(--hair2); color:var(--dim); border-radius:8px; padding:4px 7px; cursor:pointer; font-size:12px; flex:0 0 auto; }
.pk-copy:hover{ color:var(--ink); border-color:var(--orange); }
.pk-empty{ padding:30px 16px; text-align:center; color:var(--dim); font-size:13px; line-height:1.5; }
.pickrow .star{ color:var(--orange); margin-right:3px; }
.pk-skel{ height:52px; margin:4px 0; border-radius:10px; background:linear-gradient(90deg,var(--slab2),var(--well),var(--slab2)); background-size:200% 100%; animation:pksh 1.1s infinite; }
@keyframes pksh{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@media (max-width:640px){
  .pickmodal .pickbox{ width:100vw; height:100dvh; max-height:100dvh; border-radius:0; box-shadow:none; }
  .pickrow{ grid-template-columns:auto minmax(0,1fr) auto; gap:9px; padding:11px 8px; }
  .pk-stats{ display:none; }
  .pk-n{ font-size:15px; }
}


/* ===== trade terminal restyle (stage 2) ===== */
.tickerbar{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 0 12px; }
.tickerbar::-webkit-scrollbar{ display:none; }
.tkr{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; background:var(--slab); border:1px solid var(--hair2); border-radius:10px; padding:6px 11px; cursor:pointer; color:var(--ink); white-space:nowrap; }
.tkr:hover{ border-color:var(--orange); }
.tkr .av{ width:20px; height:20px; font-size:9px; flex:0 0 auto; }
.tkr-s{ font-weight:700; font-size:12.5px; }
.tkr-p{ color:var(--dim); font-size:12px; }
.tkr b.pos{ color:var(--up); font-size:11.5px; } .tkr b.neg{ color:var(--down); font-size:11.5px; }

/* chart-main / ticket-rail, mirroring the reference terminal */
.view[data-viewpane="trade"] .trade-layout{ grid-template-columns: minmax(0,1fr) 366px; }
.view[data-viewpane="trade"] .trade-detail{ order:1; position:sticky; top:12px; }
.view[data-viewpane="trade"] .trade-ticket{ order:2; min-width:0; }
@media (max-width:860px){
  .view[data-viewpane="trade"] .trade-layout{ grid-template-columns:minmax(0,1fr); min-width:0; }
  .view[data-viewpane="trade"] .trade-detail{ order:1; position:static; }
  .view[data-viewpane="trade"] .trade-ticket{ order:2; }
}

/* semantic buy/sell on the mode segment (orange stays for the other types) */
#tradeSeg{ gap:5px; }
#tradeSeg button{ font-weight:700; }
#tradeSeg button[data-mode="buy"].on{ background:var(--up); color:#04160c; border-color:var(--up); }
#tradeSeg button[data-mode="sell"].on{ background:var(--down); color:#1a0503; border-color:var(--down); }

/* header + chart + stats as clean terminal cards */
.trade-detail .tk-head{ background:var(--slab2); border:1px solid var(--hair2); border-radius:12px; padding:11px 13px; cursor:pointer; align-items:center; }
.trade-detail .tk-head:hover{ border-color:var(--orange); }
.trade-detail .tk-head::after{ content:"⌵"; color:var(--faint); font-size:13px; margin-left:2px; }
.trade-detail .tk-price .big{ font-size:22px; }
#tdChart{ border-radius:12px; border-color:var(--hair2); }
.trade-detail .tk-stats div{ border-radius:8px; }
.view[data-viewpane="trade"] .viewhead{ margin-bottom:8px; }
.view[data-viewpane="trade"] .viewhead p{ display:none; }


/* ===== ticket extras (stage B/C/D) ===== */
.tf-ca-hidden{ display:none !important; }
.tokselect{ display:flex; align-items:center; gap:10px; width:100%; background:var(--well); border:1px solid var(--hair2); border-radius:12px; padding:11px 13px; cursor:pointer; color:var(--ink); text-align:left; }
.tokselect:hover{ border-color:var(--orange); }
.tokselect .ts-inner{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.tokselect .av{ width:30px; height:30px; font-size:12px; flex:0 0 auto; }
.ts-empty{ color:var(--dim); font-weight:600; }
.ts-name{ font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ts-meta{ color:var(--faint); font-size:11.5px; }
.ts-px{ margin-left:auto; color:var(--dim); font-size:12.5px; white-space:nowrap; }
.ts-caret{ color:var(--faint); font-size:14px; flex:0 0 auto; }

.maxrow{ margin:2px 0 10px; }
.maxrow input[type=range]{ width:100%; accent-color:var(--orange); height:22px; cursor:pointer; }
.maxticks{ display:flex; gap:6px; margin-top:2px; }
.maxticks button{ flex:1; background:var(--well); border:1px solid var(--hair2); color:var(--dim); border-radius:8px; padding:5px 0; font-size:11.5px; cursor:pointer; font-family:var(--mono); }
.maxticks button:hover{ border-color:var(--orange); color:var(--ink); }

.advwrap{ margin:2px 0 10px; border-top:1px solid var(--hairline); padding-top:10px; }
.advtoggle{ background:none; border:none; color:var(--dim); font-size:12px; letter-spacing:.06em; cursor:pointer; padding:2px 0; text-transform:uppercase; font-weight:700; }
.advtoggle .advcaret{ display:inline-block; transition:transform .15s; }
.advtoggle.open .advcaret{ transform:rotate(180deg); }
.advbody{ margin-top:10px; display:flex; flex-direction:column; gap:12px; }
.degenrow{ display:flex; align-items:center; justify-content:space-between; margin:0 !important; color:var(--ink) !important; font-size:13px !important; letter-spacing:0 !important; text-transform:none !important; }
.tgl{ position:relative; width:42px; height:23px; }
.tgl input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.tgldot{ position:absolute; inset:0; background:var(--well); border:1px solid var(--hair2); border-radius:20px; transition:.15s; }
.tgldot::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:var(--dim); transition:.15s; }
.tgl input:checked ~ .tgldot{ background:var(--orange); border-color:var(--orange); }
.tgl input:checked ~ .tgldot::after{ transform:translateX(19px); background:var(--orange-ink); }
.sliprow{ display:flex; align-items:center; justify-content:space-between; margin:0 !important; }
.slipin{ display:inline-flex; align-items:center; gap:3px; background:var(--well); border:1px solid var(--hair2); border-radius:8px; padding:4px 9px; }
.slipin input{ width:52px; background:none; border:none; color:var(--ink); text-align:right; font-family:var(--mono); outline:none; margin:0 !important; padding:0 !important; }
.advwrap.degen-on .slipin{ border-color:var(--orange); }

.estout{ background:var(--slab2); border:1px solid var(--hair2); border-radius:10px; padding:9px 12px; margin-top:9px; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; }
.estout .eo-k{ color:var(--faint); }
.estout .eo-v{ color:var(--ink); font-family:var(--mono); font-weight:700; }

.donebox{ text-align:center; max-width:380px; }
.donecheck{ width:56px; height:56px; margin:4px auto 12px; border-radius:50%; background:var(--up); color:#04160c; font-size:30px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.donebox h3{ margin:0 0 6px; font-size:19px; }
.donesub{ color:var(--dim); font-size:13px; margin:0 0 14px; line-height:1.5; }
.donedetail{ text-align:left; display:flex; flex-direction:column; gap:1px; margin-bottom:16px; }
.dd-row{ display:flex; justify-content:space-between; gap:12px; padding:8px 11px; background:var(--well); font-size:12.5px; }
.dd-row:first-child{ border-radius:10px 10px 0 0; } .dd-row:last-child{ border-radius:0 0 10px 10px; }
.dd-row span{ color:var(--faint); } .dd-row b{ color:var(--ink); font-family:var(--mono); text-align:right; }
.doneacts{ display:flex; flex-direction:column; gap:8px; }


/* ===== quest ending-soon + featured ===== */
.qsoon{ display:inline-block; background:var(--down); color:#fff; font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; padding:2px 7px; border-radius:20px; margin-left:6px; font-weight:800; vertical-align:middle; }
.qfeat-tag{ display:inline-block; background:var(--orange); color:var(--orange-ink); font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; padding:2px 7px; border-radius:20px; margin-left:6px; font-weight:800; vertical-align:middle; }
.qtask-featured{ border:1px solid var(--orange) !important; box-shadow:0 0 16px -5px var(--orange); position:relative; }
.qtask-featured .qtl b{ font-size:15.5px; }


/* ===== quest analytics ===== */
.qan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.qan-tile{ background:var(--well); border:1px solid var(--hairline); border-radius:10px; padding:9px 10px; }
.qan-k{ color:var(--faint); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; font-family:var(--mono); display:block; margin-bottom:2px; }
.qan-v{ color:var(--ink); font-size:15px; font-weight:800; font-family:var(--mono); }
#_anchart{ width:100%; height:auto; display:block; background:var(--well); border:1px solid var(--hairline); border-radius:10px; margin:4px 0 6px; }
@media(max-width:480px){ .qan-grid{ grid-template-columns:1fr 1fr; } }


/* ===== operator quest dashboard ===== */
.qdash-sec{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--faint); text-transform:uppercase; margin:13px 0 5px; }
.qdash-list{ display:flex; flex-direction:column; gap:2px; }
.qdash-row{ display:flex; align-items:center; gap:8px; padding:6px 9px; background:var(--well); font-size:12.5px; border-radius:6px; }
.qdash-row .qd-rank{ flex:0 0 16px; color:var(--faint); font-family:var(--mono); font-size:11px; }
.qdash-row .qd-name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qdash-row b{ color:var(--ink); font-family:var(--mono); }
.qdash-row .dim{ color:var(--faint); font-size:11px; }
#_dashchart{ width:100%; height:auto; display:block; background:var(--well); border:1px solid var(--hairline); border-radius:10px; margin:4px 0 6px; }

.qdash-tiles{ grid-template-columns:repeat(6,1fr); }
.qdash-chartcard{ padding:14px; margin:12px 0; }
#_dashchart{ width:100%; height:auto; display:block; }
.qdash-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:4px; align-items:start; }
@media(max-width:820px){ .qdash-tiles{ grid-template-columns:repeat(3,1fr); } .qdash-cols{ grid-template-columns:1fr; } }
@media(max-width:480px){ .qdash-tiles{ grid-template-columns:1fr 1fr; } }


/* ===== quest participant status ===== */
.qpstatus{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; padding:2px 8px; border-radius:20px; text-transform:uppercase; font-weight:700; }
.qps-paid{ background:var(--up); color:#04160c; }
.qps-submitted{ background:var(--orange); color:var(--orange-ink); }
.qps-claimed{ background:var(--well); color:var(--dim); border:1px solid var(--hair2); }


/* ===== recent quest wins strip ===== */
.qwins{ display:flex; gap:10px; align-items:center; overflow:hidden; padding:8px 0 4px; }
.qwins-lbl{ color:var(--faint); font-size:9.5px; letter-spacing:.08em; flex:0 0 auto; }
.qwins-vp{ flex:1; overflow:hidden; min-width:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.qwins-track{ display:inline-flex; gap:8px; animation:qwinscroll 26s linear infinite; will-change:transform; }
.qwins-vp:hover .qwins-track{ animation-play-state:paused; }
@keyframes qwinscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .qwins-track{ animation:none; } }
.qwin{ flex:0 0 auto; color:var(--dim); white-space:nowrap; background:var(--well); border:1px solid var(--hairline); border-radius:20px; padding:4px 11px; font-size:12px; }
.qwin b{ color:var(--up); }

.ntf-tap{ cursor:pointer; } .ntf-tap:hover{ background:var(--slab2); }

.qd-link{ color:var(--ink); text-decoration:none; } .qd-link:hover{ color:var(--orange); }

.qd-drill{ cursor:pointer; } .qd-drill:hover{ background:var(--slab2); }


/* ===== slippage preset chips ===== */
.slipchips{ display:flex; gap:6px; margin-top:8px; }
.slipchips button{ flex:1; background:var(--well); border:1px solid var(--hair2); color:var(--dim); border-radius:8px; padding:5px 0; font-size:12px; font-family:var(--mono); cursor:pointer; }
.slipchips button:hover{ border-color:var(--orange); color:var(--ink); }

.qd-you{ border:1px solid var(--orange) !important; margin-bottom:6px; }
.qd-you .qd-rank{ color:var(--orange) !important; font-weight:800; }


/* ===== quest highlight (deep-link) ===== */
.qtask-hl{ animation:qhl 2.8s ease; }
@keyframes qhl{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 15%,70%{ box-shadow:0 0 0 2px var(--orange), 0 0 18px -4px var(--orange); } }


/* ===== quest search ===== */
.qsearch{ width:100%; background:var(--well); border:1px solid var(--hair2); color:var(--ink); border-radius:10px; padding:9px 12px; font-size:13px; margin:2px 0 8px; outline:none; }
.qsearch:focus{ border-color:var(--orange); }
.qsearch::placeholder{ color:var(--faint); }


/* ===== dashboard pool balance ===== */
.pool-bal{ background:var(--well); border:1px solid var(--hair2); border-radius:10px; padding:9px 13px; font-size:13px; color:var(--dim); margin:2px 0 10px; }
.pool-bal b{ color:var(--ink); font-family:var(--mono); }
.pool-bal.pool-low{ border-color:var(--down); color:var(--down); }
.pool-bal.pool-low b{ color:var(--down); }

.pool-copy{ background:none; border:1px solid var(--hair2); color:var(--dim); border-radius:8px; padding:2px 9px; font-size:11px; font-family:var(--mono); cursor:pointer; margin-left:6px; }
.pool-copy:hover{ border-color:var(--orange); color:var(--ink); }


/* ===== wallet hero redesign (higher specificity wins the cascade) ===== */
.pf-hero.slab{
  background:linear-gradient(135deg, #fff8f0, #ffffff);
  border:1px solid var(--line2);
  box-shadow:0 16px 42px -22px rgba(180,90,20,.30);
  border-radius:20px; color:var(--ink);
  position:relative; overflow:hidden; padding:22px 24px;
}
.pf-hero.slab::before{ content:""; position:absolute; top:-48%; right:-8%; width:380px; height:380px; background:radial-gradient(circle, rgba(249,111,22,.16), transparent 66%); pointer-events:none; }
.pf-hero.slab > *{ position:relative; z-index:1; }
.pf-hero.slab .pf-worth i{ color:var(--faint); }
.pf-hero.slab #pfWorth{ color:var(--ink); font-size:clamp(30px,4.4vw,44px); }
.pf-hero.slab #pfHandle, .pf-hero.slab .pf-id > span:first-child{ color:var(--ink); border-color:var(--line2); }
.pf-hero.slab .pf-fee, .pf-hero.slab #pfAddr, .pf-hero.slab #capText{ color:var(--dim); }
.pf-hero.slab .btn-ghost{ background:#fff; border:1px solid rgba(28,25,19,.16); color:var(--ink); box-shadow:0 1px 2px rgba(40,30,12,.05); }
.pf-hero.slab .btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
.pf-hero.slab .capbar{ background:var(--well); border:1px solid var(--line); }
.pf-hero.slab .capbar div{ background:var(--orange); }

:root[data-theme="dark"] .pf-hero.slab{
  background:linear-gradient(135deg, #1a130b, #0b0906);
  border:1px solid var(--hair2);
  box-shadow:0 16px 46px -22px rgba(0,0,0,.72);
  color:var(--ink);
}
:root[data-theme="dark"] .pf-hero.slab::before{ background:radial-gradient(circle, rgba(249,111,22,.20), transparent 66%); }
:root[data-theme="dark"] .pf-hero.slab #pfWorth, :root[data-theme="dark"] .pf-hero.slab #pfHandle{ color:var(--ink); }
:root[data-theme="dark"] .pf-hero.slab .btn-ghost{ background:rgba(243,236,223,.06); border:1px solid var(--hair2); color:var(--ink); }
:root[data-theme="dark"] .pf-hero.slab .btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }
:root[data-theme="dark"] .pf-hero.slab .capbar{ background:rgba(243,236,223,.12); border:1px solid var(--hair2); }

/* actions + chart slab polish */
.pf-actions .btn{ border-radius:12px; padding:11px; font-weight:700; }
.pf-chartslab{ border-radius:16px; }


/* ===== wallet PnL: black labels, red minus, green plus (no riot) ===== */
.pf-hero.slab #pfPnl{ color:var(--ink); }
.pf-hero.slab #pfPnl .dim{ color:var(--ink); }
.pf-hero.slab #pfPnl .pos{ color:#12a150; }
.pf-hero.slab #pfPnl .neg{ color:#e0322a; }
:root[data-theme="dark"] .pf-hero.slab #pfPnl .dim{ color:var(--ink); }
:root[data-theme="dark"] .pf-hero.slab #pfPnl .pos{ color:var(--up); }
:root[data-theme="dark"] .pf-hero.slab #pfPnl .neg{ color:var(--down); }
.pf-hero.slab .pf-meta{ gap:11px; }
.pf-hero.slab .pf-fee{ color:var(--dim); margin:0; line-height:1.4; }
.pf-hero.slab .capline{ margin-top:2px; }

/* mobile footer: vertically center icon+label, readable labels */
@media (max-width:960px){
  #tabs{ align-items:center; }
  #tabs .tab{ justify-content:center; }
  #tabs .tab b{ font-size:9.5px; letter-spacing:.03em; }
  #tabs .tab .ti{ font-size:19px; }
}

/* mobile footer, clean rebuild: theme surface, centered, no blur, safe-area handled */
@media (max-width:960px){
  #tabs{
    min-height:56px; align-items:center; justify-content:space-around; gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) 6px;
    background:var(--bg) !important; border-top:1px solid var(--line2) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  #tabs .tab{ justify-content:center; gap:3px; padding:2px 4px; flex:1; }
  #tabs .tab b{ font-size:9.5px !important; letter-spacing:.03em; color:var(--dim); }
  #tabs .tab.on b, #tabs .tab.on .ti{ color:var(--orange); }
  #tabs .tab .ti{ font-size:20px !important; color:var(--dim); }
  #tabs .side-acct, #tabs .side-label{ display:none !important; }
}


/* mobile footer, comprehensive fix v2 */
@media (max-width:960px){
  #tabs{
    height:auto; min-height:58px; align-items:center; justify-content:space-around; gap:0;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px;
    background:var(--bg) !important; border-top:1px solid var(--line2) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; z-index:60 !important;
  }
  #tabs .tab{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:0; flex:1 1 0; min-width:0; height:auto; }
  #tabs .tab b{ font-size:9.5px !important; letter-spacing:.02em; color:var(--dim); white-space:nowrap; display:block; }
  #tabs .tab .ti{ font-size:20px !important; color:var(--dim); display:block; }
  #tabs .tab.on b, #tabs .tab.on .ti{ color:var(--orange) !important; }
  #tabs .side-acct, #tabs .side-label{ display:none !important; }
  .stage{ padding-bottom:78px !important; }
}

/* mobile footer, comprehensive fix v2 */
@media (max-width:960px){
  #tabs{ min-height:58px; align-items:center; justify-content:space-around; gap:0; padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px; background:var(--bg) !important; border-top:1px solid var(--line2) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; z-index:60 !important; }
  #tabs .tab{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:0; flex:1 1 0; min-width:0; }
  #tabs .tab b{ font-size:9.5px !important; letter-spacing:.02em; color:var(--dim); white-space:nowrap; display:block; }
  #tabs .tab .ti{ font-size:20px !important; color:var(--dim); display:block; }
  #tabs .tab.on b, #tabs .tab.on .ti{ color:var(--orange) !important; }
  #tabs .side-acct, #tabs .side-label{ display:none !important; }
  .stage{ padding-bottom:78px !important; }
}
@media (max-width:960px){ #tabs .tab-more, #tabs .tab-2nd{ display:none !important; } }
@media (max-width:960px){ #tabs{ border-top:none !important; } }


/* ===== task-details modal ===== */
.qdbox{ width:min(560px,96vw); max-height:88vh; overflow:auto; padding:0; background:var(--slab); border:1px solid var(--hair2); border-radius:18px; box-shadow:6px 6px 0 var(--shadow); position:relative; }
.qd-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line2); background:var(--well); color:var(--ink); font-size:14px; cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; }
.qd-x:hover{ border-color:var(--orange); color:var(--orange); }
.qd-detail{ padding:28px 22px 22px; }
.qd-top{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.qd-reward{ align-self:flex-start; font-family:var(--disp); font-size:14px; letter-spacing:.04em; color:var(--orange-ink); background:var(--orange); padding:5px 12px 4px; border-radius:8px; }
.qd-title{ font-family:var(--dsp); font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--ink); line-height:1.18; margin:0; padding-right:30px; }
.qd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.qd-chip{ font-family:var(--mono); font-size:11px; color:var(--dim); background:var(--well); border:1px solid var(--line); padding:5px 11px; border-radius:20px; }
.qd-chip.feat{ color:var(--orange-ink); background:var(--orange); border-color:var(--orange); }
.qd-desc{ font-size:14.5px; line-height:1.62; color:var(--ink); white-space:pre-wrap; margin-bottom:22px; word-break:break-word; }
.qd-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.qd-actions .btn{ flex:1 1 auto; min-width:120px; justify-content:center; }
.qd-more{ background:none; border:none; color:var(--orange); font:inherit; font-weight:700; cursor:pointer; padding:0; }
.qd-more:hover{ text-decoration:underline; }
@media (max-width:960px){
  #qDetailModal .qdbox{ width:100vw; max-width:100vw; max-height:90dvh; border-radius:18px 18px 0 0; box-shadow:none; }
}


/* clickable quest title -> details modal */
.qtl b.qd-open{ cursor:pointer; }
.qtl b.qd-open:hover{ color:var(--orange); }


/* multi-row trade estimate */
.estout{ flex-direction:column; align-items:stretch; gap:7px; }
.estout .eo-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.estout .eo-v.pos{ color:var(--up); } .estout .eo-v.neg{ color:var(--down); }


/* sticky header + 3D-motion footer (mobile) */
@media (max-width:960px){
  .stickyhead{ position:sticky; top:0; z-index:41; background:var(--bg); }
  #tabs{
    box-shadow:0 -8px 30px -10px rgba(40,30,12,.22), 0 -1px 0 rgba(255,255,255,.5) inset !important;
    border-radius:22px 22px 0 0;
  }
  #tabs .tab{ transition:transform .14s ease; }
  #tabs .tab:active{ transform:scale(.86); }
  #tabs .tab .ti{ transition:transform .24s cubic-bezier(.34,1.56,.64,1); }
  #tabs .tab.on .ti{ transform:translateY(-3px) scale(1.1); }
  #tabs .tab.on{ position:relative; }
  #tabs .tab.on::after{ content:""; position:absolute; top:6px; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle, rgba(249,111,22,.16), transparent 70%); z-index:-1; }
}
:root[data-theme="dark"] #tabs{ box-shadow:0 -8px 30px -10px rgba(0,0,0,.6) !important; }




/* ===== portfolio loading state ===== */
.pf-loading{ display:flex; align-items:center; justify-content:center; gap:11px; padding:34px 16px; color:var(--dim); font-size:13.5px; }
.spin.big{ width:22px; height:22px; border-width:3px; }
.pf-shimmer{ position:relative; opacity:.6; animation:pfpulse 1s ease-in-out infinite; }
@keyframes pfpulse{ 0%,100%{ opacity:.35 } 50%{ opacity:.75 } }

.arena-move{display:inline-block;margin-left:8px;font:10px var(--mono);letter-spacing:.06em;color:var(--dim);border:1px solid var(--hair2);padding:2px 6px}
.arena-move.up::before{content:"^ ";}
.arena-move.down::before{content:"v ";}
.arena-page.arena-world-tournament .podium{animation:arenaPodium .5s ease both}
@keyframes arenaPodium{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.arena-studio{max-width:720px}
.arena-studio-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.arena-studio-tabs button{font:10px var(--mono)}
.as-pane{padding:10px 0}
.arena-discover{display:grid;gap:8px;margin-bottom:14px}
.arena-discover section{border:2px solid var(--hair2);padding:10px 12px}
.arena-discover small{font:9px var(--mono);letter-spacing:.12em;color:var(--dim)}
.arena-discover p{margin:4px 0 0;color:var(--ink)}
@media (prefers-reduced-motion: reduce){
  .arena-page.arena-world-tournament .podium{animation:none}
}


/* ===================== PREMIUM LAYER 2026-08-31 =====================
   Soft depth, glass surfaces, gradient buttons, 3D motion. GPU-only
   (transform/opacity), reduced-motion aware. Lifts every view. */
:root{
  --ease:cubic-bezier(.2,.7,.3,1);
  --elev-1:0 1px 2px rgba(0,0,0,.30), 0 10px 22px -14px rgba(0,0,0,.60);
  --elev-2:0 2px 8px rgba(0,0,0,.35), 0 26px 54px -26px rgba(0,0,0,.72);
  --glow-o:0 10px 26px -10px rgba(249,111,22,.60);
}
:root:not([data-theme="dark"]){
  --elev-1:0 1px 2px rgba(40,30,12,.06), 0 12px 26px -16px rgba(40,30,12,.18);
  --elev-2:0 2px 8px rgba(40,30,12,.08), 0 26px 54px -26px rgba(40,30,12,.22);
}

/* ambient depth behind everything */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(52% 34% at 50% -4%, color-mix(in srgb, var(--orange) 8%, transparent), transparent 72%);
}
.stage{ position:relative; z-index:1; }

/* soft, deep surfaces replace the hard offset shadow */
.slab, :root[data-theme="dark"] .stage .slab{
  border:1px solid var(--hairline);
  border-radius:16px;
  background:linear-gradient(180deg, var(--slab2), var(--slab));
  box-shadow:var(--elev-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.slabgrid .slab:hover, :root[data-theme="dark"] .stage .slabgrid .slab:hover{
  transform:translateY(-3px); box-shadow:var(--elev-2); border-color:var(--hair2);
}

/* glass, elevated prompts (retire the wireframe dashed boxes) */
.needlogin, .arena-empty, .arena-skeleton{
  border:1px solid var(--hairline) !important;
  border-radius:18px;
  background:
    radial-gradient(140% 110% at 50% -12%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 58%),
    linear-gradient(180deg, var(--slab2), var(--slab)) !important;
  box-shadow:var(--elev-2);
}

/* premium buttons: gradient, glow, smooth depth */
.btn{
  border:1px solid var(--hair2); border-radius:12px;
  box-shadow:var(--elev-1);
  transition:transform .14s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{
  background:linear-gradient(180deg, #ff9243, var(--orange));
  border-color:transparent; color:var(--orange-ink);
  box-shadow:var(--glow-o), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{ filter:brightness(1.05); box-shadow:0 16px 34px -10px rgba(249,111,22,.78), inset 0 1px 0 rgba(255,255,255,.3); }

/* arena cards: soft depth instead of hard shadow */
.arena-card{ border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--elev-1); }
.arena-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-2) !important; }

/* 3D tilt on feature cards (pointer devices only) */
@media (hover:hover) and (pointer:fine){
  .arena-card, .tdl-card, .qstat, .railcard, .pf-hero{ will-change:transform; }
  [data-tilting]{
    transform:perspective(920px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translateY(-4px) !important;
    box-shadow:var(--elev-2) !important;
    transition:box-shadow .18s var(--ease);
  }
}

/* richer view-enter: stagger the top blocks up (replaces the flat fade) */
.stage .view.on{ animation:none; }
.stage .view.on > *{ animation:premRise .44s var(--ease) both; }
.stage .view.on > *:nth-child(2){ animation-delay:.05s; }
.stage .view.on > *:nth-child(3){ animation-delay:.10s; }
.stage .view.on > *:nth-child(4){ animation-delay:.15s; }
.stage .view.on > *:nth-child(n+5){ animation-delay:.19s; }
@keyframes premRise{ from{opacity:0; transform:perspective(1100px) translateY(20px) rotateX(7deg)} to{opacity:1; transform:none} }

/* big display headings get a touch more presence */
.viewhead h2{ text-shadow:0 1px 0 rgba(0,0,0,.25); }

@media (prefers-reduced-motion:reduce){
  body::before{ display:none; }
  .stage .view.on > *{ animation:none; }
  [data-tilting]{ transform:none !important; }
  .btn:hover, .slabgrid .slab:hover, .arena-card:hover{ transform:none; }
}
/* =================== end PREMIUM LAYER 2026-08-31 =================== */


/* ===================== PREMIUM LAYER 2 2026-08-31 =====================
   Signed-in dense components brought to the premium standard:
   quest cards, holdings ledger, arena detail panels, modals, tabs. */
/* quest task cards */
.qtask{
  border:1px solid var(--hairline) !important; border-radius:14px;
  background:linear-gradient(180deg, var(--slab2), var(--slab));
  box-shadow:var(--elev-1);
}
/* stat tiles + picker tiles: soften the heavy border */
.qstat{ border:1px solid var(--hairline) !important; box-shadow:var(--elev-1); }
/* holdings ledger: soft depth, not a hard offset block */
.ledger{ border:1px solid var(--hairline) !important; border-radius:16px; box-shadow:var(--elev-1) !important; }
/* arena competition detail + rulebook + winners */
.arena-detail{
  border:1px solid var(--hairline) !important; border-radius:18px;
  background:linear-gradient(180deg, var(--slab2), var(--slab));
  box-shadow:var(--elev-2);
}
.arena-rulebook{ border:1px solid var(--hairline) !important; border-radius:14px; overflow:hidden; }
.arena-winners{ border-radius:14px; box-shadow:var(--elev-1); }
/* leaderboard rows: gentle hover highlight */
.arena-rank{ border-radius:10px; transition:background .15s var(--ease); }
.arena-rank:hover{ background:rgba(249,111,22,.06); }
/* modals: soft, deep shadow instead of the hard offset */
.fambox, .pickmodal .pickbox, .qdbox{
  border:1px solid var(--hairline) !important;
  box-shadow:0 26px 74px -22px rgba(0,0,0,.78), 0 4px 16px -6px rgba(0,0,0,.5) !important;
}
.fambox{ border-radius:18px; }
/* active nav tab: warm glow, not a hard block shadow */
.tab.on{ box-shadow:var(--glow-o) !important; }
/* =================== end PREMIUM LAYER 2 2026-08-31 =================== */


/* ===================== ARENA MINE DASHBOARD ===================== */
.arena-seg{ display:flex; gap:4px; padding:4px; margin:2px 0 16px; background:var(--well); border:1px solid var(--hairline); border-radius:13px; }
.arena-seg[hidden]{ display:none; }
.arena-seg button{ flex:1; padding:10px 10px; border:0; border-radius:10px; background:transparent; color:var(--dim); font:700 12px var(--dsp); letter-spacing:.05em; cursor:pointer; transition:background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease); }
.arena-seg button.on{ background:linear-gradient(180deg,#ff9243,var(--orange)); color:var(--orange-ink); box-shadow:var(--glow-o); }
.arena-mine[hidden]{ display:none; }
.arena-minesec{ margin-bottom:22px; }
.arena-minesec .arena-sectionhead{ display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--hairline); padding-bottom:9px; margin-bottom:12px; }
.arena-minesec .arena-sectionhead h3{ margin:0; font:800 15px var(--dsp); letter-spacing:.05em; }
.arena-minesec .arena-sectionhead .mono{ margin-left:2px; }
.arena-minesec .arena-sectionhead .btn{ margin-left:auto; }
.arena-minecard{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px 15px; margin:9px 0; border:1px solid var(--hairline); border-radius:15px; background:linear-gradient(180deg,var(--slab2),var(--slab)); box-shadow:var(--elev-1); cursor:pointer; transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.arena-minecard:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); border-color:var(--hair2); }
.arena-minecard.created:not([data-open]){ cursor:default; }
.arena-minecard.created:not([data-open]):hover{ transform:none; box-shadow:var(--elev-1); border-color:var(--hairline); }
.am-rank{ flex:0 0 auto; min-width:54px; text-align:center; font:800 21px var(--dsp); color:var(--orange); line-height:1; }
.am-rank.gold{ color:#e8b64a; }
.am-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.am-body b{ font:700 14.5px var(--dsp); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-body small{ color:var(--dim); font-size:12px; }
.am-stage{ flex:0 0 auto; color:var(--faint); text-transform:uppercase; font-size:9px; letter-spacing:.1em; }
.am-badge{ flex:0 0 auto; padding:4px 9px; border-radius:20px; font:700 9px var(--mono); letter-spacing:.08em; border:1px solid var(--hair2); color:var(--dim); }
.am-badge.st-active{ color:var(--up); border-color:color-mix(in srgb,var(--up) 55%,transparent); }
.am-badge.st-pending{ color:#e0a12a; border-color:color-mix(in srgb,#e0a12a 55%,transparent); }
.am-badge.st-approved{ color:var(--blue); border-color:color-mix(in srgb,var(--blue) 55%,transparent); }
.am-manage{ flex:0 0 auto; }
.arena-empty.sm{ min-height:120px; padding:22px 18px; }
@media (max-width:640px){
  .am-stage{ display:none; }
  .arena-minecard{ gap:11px; padding:12px 13px; }
  .am-rank{ min-width:46px; font-size:19px; }
}
/* =================== end ARENA MINE DASHBOARD =================== */


/* ===================== BALANCE HIDE/SHOW ===================== */
.baleye{ background:none; border:0; cursor:pointer; font-size:12px; padding:0 0 0 7px; opacity:.65; vertical-align:middle; line-height:1; transition:opacity .15s; }
.baleye:hover{ opacity:1; }
#chipBal{ cursor:pointer; }
body.bal-hidden #pfRows .px, body.bal-hidden .qstat-v{ filter:blur(7px); transition:filter .15s; }
body.bal-hidden #pfChart{ filter:blur(8px); }
/* =================== end BALANCE HIDE/SHOW =================== */


/* ===================== ACTIVITY PAGE ===================== */
.activity-list{ display:flex; flex-direction:column; gap:9px; }
.activity-row{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px 15px; border:1px solid var(--hairline); border-radius:15px; background:linear-gradient(180deg,var(--slab2),var(--slab)); box-shadow:var(--elev-1); cursor:pointer; transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.activity-row:hover{ transform:translateY(-2px); box-shadow:var(--elev-2); border-color:var(--hair2); }
.ac-ico{ flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; font-size:19px; border-radius:11px; background:var(--well); }
.ac-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ac-body b{ font:700 14px var(--dsp); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-body small{ color:var(--dim); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-meta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.ac-kind{ font:700 8px var(--mono); letter-spacing:.09em; text-transform:uppercase; padding:3px 7px; border-radius:20px; border:1px solid var(--hair2); color:var(--dim); }
.ac-kind.ack-trade{ color:var(--blue); border-color:color-mix(in srgb,var(--blue) 50%,transparent); }
.ac-kind.ack-quest{ color:var(--orange); border-color:color-mix(in srgb,var(--orange) 50%,transparent); }
.ac-kind.ack-reward{ color:var(--up); border-color:color-mix(in srgb,var(--up) 50%,transparent); }
.ac-kind.ack-arena{ color:#e0a12a; border-color:color-mix(in srgb,#e0a12a 50%,transparent); }
.ac-time{ font-size:10px; }
.activity-detail{ display:flex; flex-direction:column; gap:14px; }
.ad-head{ display:flex; align-items:center; gap:14px; }
.ad-ico{ flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; font-size:26px; border-radius:14px; background:var(--well); border:1px solid var(--hairline); }
.ad-htxt{ min-width:0; }
.ad-htxt h3{ margin:5px 0 0; font:800 19px var(--dsp); }
.ad-kind{ font:700 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:20px; border:1px solid var(--hair2); color:var(--dim); }
.ad-body{ margin:0; color:var(--ink); line-height:1.5; font-size:14px; }
.ad-when{ margin-top:-2px; }
@media (max-width:640px){ .activity-row{ padding:12px 13px; gap:11px; } .ac-ico{ width:34px; height:34px; font-size:17px; } }
/* =================== end ACTIVITY PAGE =================== */


/* ===================== ARENA PUBLIC RESULTS ===================== */
.arena-results{ margin-top:6px; }
.ar-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.ar-head h2{ font:800 26px var(--dsp); margin:3px 0; }
.ar-head p{ margin:0; color:var(--dim); }
.ar-podium{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; align-items:end; margin:8px 0 18px; }
.ar-pod{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 8px 14px; border:1px solid var(--hairline); border-radius:16px; background:linear-gradient(180deg,var(--slab2),var(--slab)); box-shadow:var(--elev-1); text-align:center; min-width:0; }
.ar-pod-1{ transform:translateY(-10px); border-color:color-mix(in srgb,#e8b64a 55%,transparent); box-shadow:0 14px 34px -14px rgba(224,161,42,.5); }
.ar-medal{ font-size:26px; line-height:1; }
.ar-av{ width:44px; height:44px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--well); font:12px var(--mono); }
.ar-av img{ width:100%; height:100%; object-fit:cover; }
.ar-pod b{ font:700 12px var(--dsp); color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-pod small{ color:var(--orange); font:700 11px var(--mono); }
.ar-list{ margin-top:6px; }
.ar-acts{ display:flex; gap:9px; margin-top:18px; }
.ar-acts .btn{ flex:1; }
@media (max-width:640px){ .ar-head h2{ font-size:22px; } .ar-medal{ font-size:22px; } .ar-av{ width:38px; height:38px; } }
/* =================== end ARENA PUBLIC RESULTS =================== */

/* studio actions */
.as-actions{ display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 2px; }
.arena-studio .qstats{ margin:6px 0 10px; }

.am-boost{display:inline-block;margin-left:6px;font:700 9px var(--mono);color:var(--orange);border:1px solid color-mix(in srgb,var(--orange) 50%,transparent);border-radius:20px;padding:2px 6px;vertical-align:middle}

/* ARENA ANIMATED COUNTDOWN */
.arena-cd{display:flex;gap:6px;margin-top:5px}
.cd-seg{display:flex;flex-direction:column;align-items:center;min-width:36px;padding:6px 7px;border-radius:10px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(2px)}
.cd-seg b{font:800 19px var(--dsp);color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cd-seg i{font:700 7px var(--mono);letter-spacing:.11em;color:rgba(255,255,255,.72);margin-top:4px;font-style:normal}
.cd-seg:last-child b{color:#ffb066}
.cd-seg:last-child{animation:cdpulse 1s ease-in-out infinite}
@keyframes cdpulse{0%,100%{opacity:1}55%{opacity:.55}}
.cd-ended{font:800 17px var(--dsp);color:#fff}

/* studio as page */
.arena-studio-page{ max-width:none; margin-top:4px; }

/* fam mobile hardening */
.trade-detail{ min-width:0; }
.trade-ticket{ min-width:0; }
.trade-detail canvas,.trade-detail svg,.trade-detail img,.trade-ticket canvas,.trade-ticket svg{ max-width:100%; }

/* T8 restrained motion */
@media (prefers-reduced-motion: no-preference){
  .ar-podium{ perspective:820px; }
  .ar-pod{ animation:t8PodRise .58s var(--ease,cubic-bezier(.22,.61,.36,1)) both; transform-origin:50% 100%; }
  .ar-pod-2{ animation-delay:.06s; }
  .ar-pod-3{ animation-delay:.13s; }
  .ar-pod-1{ animation-name:t8PodRise1; animation-delay:.24s; }
  @keyframes t8PodRise{ from{ opacity:0; transform:translateY(28px) rotateX(13deg) scale(.93); } to{ opacity:1; transform:none; } }
  @keyframes t8PodRise1{ from{ opacity:0; transform:translateY(28px) rotateX(13deg) scale(.93); } to{ opacity:1; transform:translateY(-10px); } }
  .ar-pod .ar-medal{ animation:t8Medal .6s var(--ease,cubic-bezier(.22,.61,.36,1)) both; animation-delay:.34s; display:inline-block; }
  .ar-pod-1 .ar-medal{ animation-delay:.5s; }
  @keyframes t8Medal{ 0%{ opacity:0; transform:scale(.4) rotate(-18deg); } 65%{ transform:scale(1.18) rotate(4deg); } 100%{ opacity:1; transform:none; } }

  .arena-winners .arena-rank,.ar-list .arena-rank{ animation:t8RankIn .42s var(--ease,cubic-bezier(.22,.61,.36,1)) both; }
.arena-winners .arena-rank:nth-child(1),.ar-list .arena-rank:nth-child(1){ animation-delay:0.03s; }
.arena-winners .arena-rank:nth-child(2),.ar-list .arena-rank:nth-child(2){ animation-delay:0.06s; }
.arena-winners .arena-rank:nth-child(3),.ar-list .arena-rank:nth-child(3){ animation-delay:0.09s; }
.arena-winners .arena-rank:nth-child(4),.ar-list .arena-rank:nth-child(4){ animation-delay:0.12s; }
.arena-winners .arena-rank:nth-child(5),.ar-list .arena-rank:nth-child(5){ animation-delay:0.15s; }
.arena-winners .arena-rank:nth-child(6),.ar-list .arena-rank:nth-child(6){ animation-delay:0.18s; }
.arena-winners .arena-rank:nth-child(7),.ar-list .arena-rank:nth-child(7){ animation-delay:0.21s; }
.arena-winners .arena-rank:nth-child(8),.ar-list .arena-rank:nth-child(8){ animation-delay:0.24s; }
.arena-winners .arena-rank:nth-child(9),.ar-list .arena-rank:nth-child(9){ animation-delay:0.27s; }
.arena-winners .arena-rank:nth-child(10),.ar-list .arena-rank:nth-child(10){ animation-delay:0.30s; }
.arena-winners .arena-rank:nth-child(11),.ar-list .arena-rank:nth-child(11){ animation-delay:0.33s; }
.arena-winners .arena-rank:nth-child(12),.ar-list .arena-rank:nth-child(12){ animation-delay:0.36s; }
  @keyframes t8RankIn{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }

  .arena-move.up,.arena-move.down{ animation:t8MovePop .5s var(--ease,cubic-bezier(.22,.61,.36,1)) both; display:inline-block; }
  @keyframes t8MovePop{ 0%{ opacity:0; transform:scale(.55) translateY(3px); } 60%{ transform:scale(1.16); } 100%{ opacity:1; transform:none; } }
}

/* arena section cards polish */
.arena-mod{ border:1px solid var(--hairline); border-radius:14px; background:var(--slab); box-shadow:var(--elev-1); padding:17px 18px; }
.arena-avatar img{ width:100%; height:100%; object-fit:cover; }
.arena-board{ margin-top:4px; }
.qfollow-av{ width:26px; height:26px; border-radius:50%; object-fit:cover; vertical-align:middle; margin-right:7px; border:1px solid var(--hairline); }
.arena-rank-reward{ color:var(--orange); font:700 11px var(--mono); }
.arena-tiers{ display:flex; flex-direction:column; gap:6px; margin:10px 0 4px; }
.arena-tier{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border:1px solid var(--hairline); border-radius:10px; background:var(--well); }
.arena-tier span{ color:var(--dim); font:11px var(--mono); }
.arena-tier b{ color:var(--orange); font:700 12px var(--mono); }
.ad-modal{ display:flex; flex-direction:column; gap:10px; }
.ad-badge{ align-self:flex-start; font:700 10px var(--mono); letter-spacing:.18em; color:var(--orange-ink); background:var(--orange); padding:5px 10px; border-radius:999px; }
.ad-cover{ width:100%; border-radius:14px; border:1px solid var(--hairline); display:block; }
.ad-title{ margin:4px 0 0; }
.ad-reward{ margin:0; font:800 20px var(--dsp); color:var(--orange); }

/* Trade ticket, 2026-09-03: one column of decisions, the amount is the loud element, the rest stays quiet. */
.view[data-viewpane="trade"] .trade-layout.t2{ grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:20px; align-items:start; }
.view[data-viewpane="trade"] .t2 .trade-ticket{ order:1; position:static; }
.view[data-viewpane="trade"] .t2 .trade-detail{ order:2; position:sticky; top:12px; }
.t2-modes{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.t2-side{ display:flex; gap:8px; }
.t2-side button{ font-family:var(--dsp); font-weight:800; font-size:15px; letter-spacing:0; padding:9px 24px; border-radius:10px; border:2px solid var(--hair2); background:none; color:var(--dim); cursor:pointer; }
.t2-side button:hover{ color:var(--ink); border-color:var(--frame); }
.t2-side button.on{ background:var(--orange); border-color:var(--orange); color:var(--orange-ink); }
.t2-adv{ display:flex; gap:2px; flex-wrap:wrap; }
.t2-adv button{ background:none; border:none; border-bottom:2px solid transparent; color:var(--dim); font-size:12.5px; padding:6px 8px; cursor:pointer; border-radius:0; font-family:inherit; }
.t2-adv button:hover{ color:var(--ink); }
.t2-adv button.on{ color:var(--ink); border-bottom-color:var(--orange); }
.t2-form.tradeform label{ display:block; color:var(--dim); font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:500; margin:0 0 6px; }
.t2-form .tf-ca-hidden{ display:none; }
.t2-form .tokselect{ width:100%; margin-bottom:8px; }
.t2-form .vtokens{ margin:0 0 18px; }
.t2-form .vt-label{ display:none; }
.t2-form .vt-chip{ font-family:inherit; font-weight:500; font-size:12px; padding:3px 10px; border-width:1px; color:var(--dim); }
.t2-form .vt-chip.on{ color:var(--orange-ink); }
.t2-amtrow{ display:flex; align-items:stretch; gap:8px; }
.t2-amtrow input#tUsd{ flex:1; min-width:0; font-family:var(--mono); font-size:30px; font-weight:700; padding:8px 14px; height:auto; line-height:1.2; }
.t2-amtrow .payseg{ margin:0; display:flex; flex-direction:column; gap:4px; flex-wrap:nowrap; }
.t2-amtrow .payseg button{ flex:1; padding:0 12px; font-size:11px; }
.t2-chips{ display:flex; gap:6px; margin:8px 0 14px; }
.t2-chips button, .t2-form .maxticks button{ flex:1; background:none; border:1px solid var(--hair2); color:var(--dim); border-radius:8px; padding:6px 0; font-size:12.5px; font-family:var(--mono); cursor:pointer; }
.t2-chips button:hover, .t2-form .maxticks button:hover{ border-color:var(--orange); color:var(--ink); }
.t2-form .maxrow{ margin:8px 0 14px; }
.t2-form #tMax{ display:none; }
.t2-form .tbal{ margin:0 0 10px; }
.t2-form .estout{ margin:0 0 12px; }
.t2-form .t2-go.btn{ width:100%; font-size:15px; padding:14px 18px; }
.t2-details{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline); }
.t2-form.tradeform .t2-chain{ display:flex; align-items:center; gap:6px; margin:0; }
.t2-form.tradeform .t2-chain select{ width:auto; padding:4px 26px 4px 8px; font-size:12.5px; height:auto; }
.t2-details .advwrap{ margin:0; border:none; padding:0; }
.t2-details .advwrap:has(.advbody:not([hidden])){ flex-basis:100%; }
.t2-details .advtoggle{ text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; }
.t2-details .advtoggle b{ color:var(--ink); font-weight:700; }
.t2-details .advbody{ margin-top:12px; }
.t2-link{ background:none; border:none; color:var(--dim); font-size:12.5px; cursor:pointer; padding:0; font-family:inherit; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px; }
.t2-link:hover{ color:var(--ink); }
.t2-details .t2-link{ margin-left:auto; }
.t2-form .footnote{ margin:12px 0 0; }
.t2-dtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.t2-dtop .scanchip{ margin-bottom:0; }
.t2-detail .td-empty{ display:block; }
.t2-form .tokselect:focus-visible, .t2-side button:focus-visible, .t2-adv button:focus-visible, .t2-chips button:focus-visible, .t2-link:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
@media (max-width:1080px){
  .view[data-viewpane="trade"] .trade-layout.t2{ grid-template-columns:minmax(0,1fr); }
  .view[data-viewpane="trade"] .t2 .trade-ticket{ order:1; }
  .view[data-viewpane="trade"] .t2 .trade-detail{ order:2; position:static; }
  .t2-detail .td-empty{ display:none; }
}
@media (max-width:560px){
  .t2-side{ width:100%; }
  .t2-side button{ flex:1; padding:11px 0; }
  .t2-amtrow input#tUsd{ font-size:26px; }
  .t2-details{ gap:12px; }
}

/* t2 pass 2: brand orange on both sides (green stays for P&L), a level currency toggle, one quiet details line. */
#tradeSeg.t2-modes button[data-mode="buy"].on, #tradeSeg.t2-modes button[data-mode="sell"].on{ background:var(--orange); color:var(--orange-ink); border-color:var(--orange); }
.t2-amtrow .payseg{ flex-direction:row; align-items:stretch; gap:0; border:1px solid var(--hair2); border-radius:10px; overflow:hidden; }
.t2-amtrow .payseg button{ flex:0 0 auto; padding:0 14px; font-size:11.5px; border:none; border-radius:0; background:none; color:var(--dim); }
.t2-amtrow .payseg button + button{ border-left:1px solid var(--hair2); }
.t2-amtrow .payseg button.on{ background:var(--orange); color:var(--orange-ink); }
.t2-details{ gap:12px; }
.t2-form.tradeform .t2-chain select{ padding:5px 24px 5px 8px; font-size:12px; }
.t2-details .t2-link{ margin-left:0; }
@media (max-width:420px){ .t2-details{ gap:10px; } .t2-form.tradeform .t2-chain select{ font-size:11.5px; } }

/* t2 pass 3: sell side. Holdings as chips under the token field, Sell in its own red. */
#tradeSeg.t2-modes button[data-mode="sell"].on{ background:var(--down); color:#1a0503; border-color:var(--down); }
.t2-form .vt-note{ color:var(--dim); font-size:12px; }
.t2-form .vt-usd{ color:var(--faint); font-family:var(--mono); font-size:11px; margin-left:5px; }
.t2-form .vt-chip.on .vt-usd{ color:inherit; opacity:.85; }
.t2-form .vt-more{ border-style:dashed; color:var(--faint); }

/* arena: score a post link */
.arena-submit{ display:flex; gap:8px; margin-top:10px; width:100%; }
.arena-submit .winput{ flex:1; min-width:0; }


/* Portfolio accuracy: impostor tag, and the collapsed dust group. */
.st-fake{background:#7f1d1d;color:#fecaca;border-color:#b91c1c}
.pf-hidden{display:none}
.pf-dust-toggle{display:block;width:100%;margin:8px 0 0;padding:11px 14px;
  background:transparent;border:1px dashed var(--line,#3a352c);border-radius:10px;
  color:var(--dim,#6f685a);font:inherit;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;cursor:pointer}
.pf-dust-toggle:hover{color:#f97316;border-color:#f97316}


/* Scheduled sells, listed under the trade form so one can always be stopped. */
.dca-live{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line,#3a352c);border-radius:10px}
.dca-live-h{font-size:11px;letter-spacing:.08em;color:var(--dim,#6f685a);margin-bottom:8px}
.dca-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.dca-row .who{display:flex;flex-direction:column;flex:1;min-width:0}
.dca-row .n{font-size:13px}
.dca-row .sub{font-size:11px;color:var(--dim,#6f685a)}
.dca-x{margin-left:auto;padding:6px 12px;font-size:11px}