/* ═══════════════════════════════════════════════════════════════
   traders.css — #/traders (ui-traders.js) + the wave-buddy avatars
   ═══════════════════════════════════════════════════════════════ */

/* buddies */
.buddy{display:block;flex-shrink:0;overflow:visible}
.buddy .bd-all{transform-origin:50% 90%;transform-box:fill-box}
.buddy .bd-crown{transform-origin:34px 15px;animation:bd-crown 3.6s ease-in-out infinite}
@keyframes bd-crown{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-1.5px)}}
:is(.tb-row,.trk,.wh,.pd-card):hover .bd-all{animation:mo-wiggle .5s ease-in-out}

/* header */
.tr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin-bottom:18px}
.tr-title h1{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:24px;font-weight:650;letter-spacing:-.025em}
.tr-title p{margin:5px 0 0;color:var(--mute);max-width:620px;line-height:1.55}
.tr-live{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:99px;font:600 11px/1 var(--sans);letter-spacing:.02em;
  color:var(--brand-text);background:var(--brand-soft);border:1px solid var(--brand-line)}
.tr-live i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--brand-glow);animation:tr-ping 2.2s infinite}
@keyframes tr-ping{0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),.55)}70%{box-shadow:0 0 0 7px rgba(var(--brand-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),0)}}
.tr-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-ctl .seg button,.tw-win button{height:28px;padding:0 11px;white-space:nowrap}
.tr-find{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;min-width:250px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line);
  color:var(--mute);transition:border-color .2s,box-shadow .2s}
.tr-find:focus-within{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft)}
.tr-find input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:12.5px;color:var(--text)}

/* body: main + side */
.tr-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.tr-main{min-width:0}

/* podium */
.tr-podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:14px;align-items:end;margin-bottom:16px}
.pd-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;min-width:0;padding:16px 16px 14px;border-radius:var(--r-lg);cursor:pointer;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .25s,box-shadow .25s;will-change:transform}
.pd-card:hover{border-color:var(--line-2);box-shadow:0 18px 40px -24px rgba(0,0,0,.9)}
.pd-card:focus-visible{outline:2px solid var(--brand-line);outline-offset:2px}
.pd-card.r1{padding:20px 18px 16px;background:var(--card);
  border-color:transparent;box-shadow:0 24px 60px -30px rgba(var(--brand-rgb),.35)}
.pd-card.r2,.pd-card.r3{margin-top:22px}
.pd-card.ph{height:280px;border:0}
.pd-card.ph.r1{height:310px}
.pd-num{position:absolute;right:10px;top:-26px;font:800 132px/1 var(--display);letter-spacing:-.06em;color:transparent;pointer-events:none;
  -webkit-text-stroke:1.5px rgba(255,255,255,.05)}
.pd-card.r1 .pd-num{-webkit-text-stroke-color:rgba(var(--brand-rgb),.16)}
.pd-top{display:flex;align-items:center;gap:12px;min-width:0}
.pd-ava{display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.pd-card .pd-ava .buddy{animation:mo-bob 4.8s ease-in-out infinite}
.pd-card.r2 .pd-ava .buddy{animation-delay:-1.6s}
.pd-card.r3 .pd-ava .buddy{animation-delay:-3.1s}
.pd-who{display:flex;flex-direction:column;min-width:0}
.pd-who b{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.pd-who span{font-size:11.5px;color:var(--mute)}
.pd-pnl{font:750 26px/1.1 var(--display);letter-spacing:-.03em}
.pd-card.r1 .pd-pnl{font-size:31px}
.pd-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.pd-sub .x-roi{font-weight:650}
.pd-sub>span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--faint);margin-right:8px;vertical-align:middle}
.pd-curve{height:54px;margin:2px -4px;border-radius:8px}
.pd-curve .tr-chart{display:block;width:100%;height:100%}
.pd-tags,.pd-pos{display:flex;flex-wrap:wrap;gap:5px;min-height:20px}
.pd-act{display:flex;gap:8px;margin-top:2px}
.pd-act .btn{flex:1}

/* tags and position chips */
.tr-tag{display:inline-flex;align-items:center;gap:3px;height:19px;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  border:1px solid var(--line-2);color:var(--text-2);background:var(--card-2)}
.tr-tag.whale{color:var(--cyan);border-color:rgba(79,195,247,.3);background:rgba(79,195,247,.07)}
.tr-tag.meme{color:var(--blush);border-color:rgba(255,122,162,.3);background:rgba(255,122,162,.07)}
.tr-tag.hot{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.tr-tag.sharp{color:var(--violet);border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.07)}
.tr-tag.hft{color:var(--mute)}
.tr-pc{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;
  background:var(--card-2);border:1px solid var(--line-2)}
.tr-pc.long{border-color:var(--up-line);background:linear-gradient(90deg,var(--up-soft),transparent 80%)}
.tr-pc.short{border-color:var(--down-line);background:linear-gradient(90deg,var(--down-soft),transparent 80%)}
.tr-pc small{font-size:10px;color:var(--mute);font-weight:500}
.tr-flat,.tr-more{font-size:11px;color:var(--faint);align-self:center}

/* leaderboard */
.tr-board{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.tb-head,.tb-row{display:grid;grid-template-columns:34px minmax(170px,1.5fr) 96px 72px 82px 86px 104px minmax(130px,1.1fr) 62px;align-items:center;gap:10px;padding:0 14px}
.tb-head{height:34px;font-size:11.5px;color:var(--mute);border-bottom:1px solid var(--line);background:var(--bg-2)}
.tb-head .r,.tb-row .r{text-align:right;justify-content:flex-end}
.tb-row{height:58px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;transition:background .18s}
.tb-row:last-child{border-bottom:0}
.tb-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--brand);transform:scaleY(0);transition:transform .3s var(--spring-snappy,ease)}
.tb-row:hover{background:var(--hover)}
.tb-row:hover::before,.tb-row:focus-visible::before{transform:scaleY(1)}
.tb-row:focus-visible{outline:0;background:var(--hover)}
.tb-rank{color:var(--mute);font-size:12px}
.tb-who{display:flex;align-items:center;gap:10px;min-width:0}
.tb-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.tb-id b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-id>span{display:flex;gap:4px;min-height:0}
.tb-pnl{font-weight:650}
.tb-row .x-roi{font-size:12.5px}
.tb-row .tb-curve{height:26px}
.tb-curve .tr-chart{display:block;width:100%;height:26px}
.tb-pos{display:flex;flex-wrap:wrap;gap:4px;max-height:44px;overflow:hidden}
.tb-act{display:flex;align-items:center;justify-content:flex-end;gap:2px}
.tb-go{color:var(--faint);display:inline-flex;transition:transform .25s var(--spring-snappy,ease),color .2s}
.tb-row:hover .tb-go{transform:translateX(3px);color:var(--text)}
.tr-star{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 7px;border-radius:var(--r-sm);color:var(--faint);transition:color .2s,background .2s}
.tr-star:hover{color:var(--text);background:var(--card-2)}
.tr-star.on{color:var(--warn)}
.tr-star.on svg{fill:currentColor}
.pd-act .tr-star{height:30px;padding:0 12px;border:1px solid var(--line-2);background:var(--card-2);color:var(--text-2);font-size:12.5px;font-weight:600}
.pd-act .tr-star.on{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.tr-foot{margin:12px 2px 0;font-size:11.5px;color:var(--faint);line-height:1.6;max-width:820px}

/* side panels */
.tr-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
.tr-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:12px}
.tr-box h3{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:13px;font-weight:650}
.tr-box h3 .n{color:var(--mute);font-weight:500}
.tr-tracked h3 svg{color:var(--warn)}
.tr-note{margin:-4px 0 8px;font-size:11.5px;color:var(--faint);line-height:1.5}
.tr-pulse{width:8px;height:8px;border-radius:50%;background:var(--down);box-shadow:0 0 0 0 rgba(var(--down-rgb),.6);animation:tr-ping-r 1.8s infinite}
@keyframes tr-ping-r{0%{box-shadow:0 0 0 0 rgba(var(--down-rgb),.55)}70%{box-shadow:0 0 0 7px rgba(var(--down-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--down-rgb),0)}}
.tr-empty,.tr-wait{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px 8px 12px;color:var(--mute);font-size:12px;line-height:1.5}
.tr-empty p,.tr-wait p{margin:0;max-width:240px}
.tr-empty svg.ic{vertical-align:-2px;color:var(--warn)}
.trk,.wh{display:flex;align-items:center;gap:9px;width:100%;padding:7px 6px;border-radius:9px;text-align:left;transition:background .15s}
.trk:hover,.wh:hover{background:var(--hover)}
.trk-id,.wh-t{display:flex;flex-direction:column;min-width:0;flex:1}
.trk-id b,.wh-t b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk-id small,.wh-t small{font-size:11px;color:var(--mute)}
.trk-u{font-weight:650;font-size:12.5px}
.trk-al{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.trk-al p{margin:0;font-size:11.5px;color:var(--text-2);line-height:1.45;display:flex;gap:7px;align-items:baseline}
.trk-al p span{margin-left:auto;white-space:nowrap}
.trk-al i{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--brand);transform:translateY(-1px)}
.trk-al i.close,.trk-al i.trim{background:var(--mute)}.trk-al i.flip{background:var(--warn)}
[data-feed]{display:flex;flex-direction:column;max-height:520px;overflow:hidden;mask-image:linear-gradient(#000 82%,transparent)}
.wh-v{font-weight:650;font-size:12.5px}
.wh-a{width:28px;text-align:right;font-size:11px}
.wh.big{background:linear-gradient(90deg,rgba(var(--brand-rgb),.08),transparent 70%)}
.wh.big.sell{background:linear-gradient(90deg,rgba(var(--down-rgb),.08),transparent 70%)}

/* ═════════════ a trader's page (#/traders/0x…): the wallet you're stalking ═════════════ */
.tw{max-width:1720px}
.tw-crumb{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;font-size:12px;color:var(--mute)}
.tw-back{display:inline-flex;align-items:center;gap:3px;color:var(--text-2);font-weight:600;transition:color .15s}
.tw-back .ic{transform:rotate(180deg)}
.tw-back:hover{color:var(--text)}
.tw-head{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:14px}
.tw-id{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 420px}
.tw-ava{flex-shrink:0}
.tw-idt{display:flex;flex-direction:column;gap:6px;min-width:0}
.tw-nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tw-nm h1{margin:0;font:650 22px/1.2 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tw-x{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--mute)}
.tw-x:hover{color:var(--text)}
.tw-tags{display:inline-flex;gap:5px;flex-wrap:wrap}
.tw-addr{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.tw-addr .mono{color:var(--text-2);margin-right:4px}
.tw-src{margin-left:8px;padding-left:10px;border-left:1px solid var(--line-2);font-size:11.5px;color:var(--faint)}
.tw-src.nick{font-style:italic}
.tw-trk{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:340px}
.tw-track{height:38px;padding:0 20px;gap:8px;border-radius:var(--pill);font-size:13.5px;font-weight:600;background:var(--brand);border:1px solid var(--brand);color:var(--brand-ink)}
.tw-track:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.tw-track.on{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.tw-track.on svg{fill:currentColor}
.tw-trk small{font-size:11.5px;line-height:1.45;color:var(--mute);text-align:right}
.tw-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tw-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mute)}
.tw-live i,.tw-ld{width:6px;height:6px;border-radius:50%;background:var(--up);flex-shrink:0}
/* the numbers: one strip of cells on hairlines */
.tw-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tw-k{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.tw-k>span{font-size:11.5px;color:var(--mute)}
.tw-k>b{font:600 20px/1.2 var(--mono);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-k small{font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-ls{display:block;height:4px;margin:2px 0;border-radius:2px;overflow:hidden;background:var(--down)}
.tw-ls.flat{background:var(--card-2)}
.tw-ls.flat i{display:none}
.tw-ls i{display:block;height:100%;background:var(--up);transition:width .6s var(--ease)}
/* panels */
.tw-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}
.tw-main,.tw-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.tw-box{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tw-box[hidden]{display:none}
.tw-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;padding:8px 14px;border-bottom:1px solid var(--line)}
.tw-bh h2{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:650;white-space:nowrap}
.tw-bh h2 .n{color:var(--mute);font-weight:500}
.tw-bh h2 svg{color:var(--warn)}
.tw-bh>span{min-width:0;font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-ph{height:120px;margin:12px;border-radius:6px}
.tw-none{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;min-height:72px;padding:14px;color:var(--mute);font-size:12.5px;text-align:center}
/* PnL: one line, hairline grid, dashed zero, a crosshair that snaps */
.tw-chart{padding:12px 14px 10px}
.tw-chart .tw-ph{margin:0}
.tw-plot{position:relative;height:240px}
.tw-area{position:absolute;top:0;bottom:0;left:0;right:52px;cursor:crosshair;touch-action:pan-y}
.tw-area svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tw-gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.tw-gl.z{stroke:var(--line-2);stroke-dasharray:4 4}
.tw-ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tw-ln.up{stroke:var(--up)}.tw-ln.down{stroke:var(--down)}
.tw-yl{position:absolute;right:0;width:48px;transform:translateY(-50%);text-align:right;font:500 11px/1 var(--mono);color:var(--faint);pointer-events:none}
.tw-xa{display:flex;justify-content:space-between;margin:6px 52px 0 0;font:500 11px var(--mono);color:var(--faint)}
.tw-cx{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--line-2);pointer-events:none}
.tw-dot{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;border:2px solid var(--card);pointer-events:none}
.tw-dot.up{background:var(--up)}.tw-dot.down{background:var(--down)}
.tw-tip{position:absolute;top:0;left:0;z-index:2;display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line-2);
  font-size:11px;color:var(--mute);white-space:nowrap;pointer-events:none}
.tw-tip b{font:600 13px var(--mono)}
.tw-area [hidden]{display:none}
/* tables: positions and fills */
.tw-scroll{max-width:100%;overflow:auto}
.tw-actv{max-height:560px;overscroll-behavior:contain}
.tw-tbl th{padding:8px 10px;font-size:11.5px}
.tw-tbl td{padding:8px 10px;font:500 12px var(--mono)}
.tw-tbl td:first-child{font-family:var(--sans)}
.tw-tbl tbody tr:last-child td{border-bottom:0}
.tw-tbl td small{display:block;margin-top:1px;font-size:10.5px;opacity:.8}
.tw-tbl tbody tr:hover td{background:var(--hover)}
.tw-ptbl th:last-child,.tw-ptbl td:last-child{position:sticky;right:0;background:var(--card)}
.tw-ptbl tbody tr:hover td:last-child{background:var(--hover)}
.tw-mk{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tw-mk>i{width:3px;height:18px;border-radius:2px}
.tw-mk>i.long{background:var(--up)}.tw-mk>i.short{background:var(--down)}
.tw-mk b{font-weight:600}
.tw-mk .tag{height:18px;padding:0 6px;font:600 10.5px var(--mono)}
.tw-copy{min-width:52px;justify-content:center}
.tw-ftbl tr.big td{font-weight:650}
.tw-ftbl tr.big td:first-child{box-shadow:inset 2px 0 0 var(--up)}
.tw-ftbl tr.big.sell td:first-child{box-shadow:inset 2px 0 0 var(--down)}
.tw-whale{margin-left:5px;font-size:13px}
.tw-more{display:block;width:100%;height:36px;border-top:1px solid var(--line);color:var(--brand-text);font-size:12px;font-weight:600}
.tw-more:hover{background:var(--hover)}
/* the side column */
.tw-rec{padding:6px 14px 10px}
.tw-rec .kv{padding:6px 0;border-bottom:1px solid var(--line)}
.tw-rec .kv:last-child{border-bottom:0}
.tw-rec .kv b{font-family:var(--mono);font-size:12px}
.tw-coins{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px}
.tw-cr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 14px;font-size:12px}
.tw-cr .tw-mk small{font-size:11px;color:var(--faint);font-family:var(--sans)}
.tw-cv{display:flex;align-items:baseline;gap:6px;font-family:var(--mono)}
.tw-cv small{font-size:11px;color:var(--mute)}
.tw-cp{min-width:56px;text-align:right;font:500 12px var(--mono)}
.tw-cb{grid-column:1/-1;height:4px;border-radius:2px;background:var(--card-2);overflow:hidden}
.tw-cb i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .6s var(--ease)}
.tw-cal{padding-bottom:4px}
/* a narrow column: smaller day figures so "+2.1K" fits a cell */
.tw-cal .pc-dow,.tw-cal .pc-grid{gap:3px;padding-left:10px;padding-right:10px}
.tw-cal .pc-d{min-height:38px;padding:3px}
.tw-cal .pc-d b{font-size:9px;letter-spacing:-.04em}
.tw-al{display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px}
.tw-al p{display:flex;align-items:baseline;gap:7px;margin:0;font-size:12px;line-height:1.45;color:var(--text-2)}
.tw-al p span:last-child{margin-left:auto;white-space:nowrap}
.tw-al i{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--brand);transform:translateY(-1px)}
.tw-al i.close,.tw-al i.trim{background:var(--mute)}.tw-al i.flip{background:var(--warn)}
.tw-note{margin:14px 2px 0;max-width:880px;font-size:11.5px;line-height:1.55;color:var(--faint)}
@container view (max-width:1320px){
  .tw-ptbl .c-mg{display:none}
}
@container view (max-width:1180px){
  .tw-grid{grid-template-columns:minmax(0,1fr) 300px}
}
@container view (max-width:1080px){
  .tw-ptbl .c-sz{display:none}
}
@container view (max-width:980px){
  .tw-grid{grid-template-columns:minmax(0,1fr)}
  .tw-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@container view (max-width:940px){
  .tw-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tw-exp{grid-column:span 2}
}
@container view (max-width:760px){
  .tw-head{align-items:stretch}
  .tw-id{flex-basis:100%}
  .tw-trk{align-items:stretch;max-width:none;width:100%}
  .tw-track{width:100%;justify-content:center}
  .tw-trk small{text-align:left}
  .tw-src{flex-basis:100%;margin:2px 0 0;padding:0;border:0}
  .tw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tw-exp{grid-column:1/-1}
  .tw-k>b{font-size:18px}
  .tw-side{grid-template-columns:minmax(0,1fr)}
  .tw-plot{height:200px}
  .tw-nm h1{font-size:19px}
}

/* ── narrower views (the side dock open, tablets, phones) ── */
@container view (max-width:1240px){
  .tr-body{grid-template-columns:minmax(0,1fr)}
  .tr-side{position:static;display:grid;grid-template-columns:1fr 1fr}
  .tb-head,.tb-row{grid-template-columns:30px minmax(150px,1.5fr) 92px 70px 86px minmax(110px,1fr) 56px}
  .tb-vol,.tb-curve{display:none}
}
@container view (max-width:820px){
  .tr-head{align-items:stretch}
  .tr-ctl{width:100%}
  .tr-find{flex:1 1 100%;min-width:0}
  .tr-podium{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:4px;margin:0 0 14px;align-items:stretch;scrollbar-width:none}
  .tr-podium::-webkit-scrollbar{display:none}
  .pd-card{flex:0 0 86%;scroll-snap-align:center}
  .pd-card.r1{order:-1}
  .pd-card.r2,.pd-card.r3{margin-top:0}
  .tr-side{grid-template-columns:1fr}
  .tb-head{display:none}
  .tb-row{grid-template-columns:24px minmax(0,1fr) auto 40px;height:auto;padding:10px 12px;row-gap:6px}
  .tb-row .x-roi,.tb-av,.tb-vol,.tb-curve{display:none}
  .tb-row .tb-pos{grid-column:2/-1;max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .buddy .bd-crown,.pd-card .pd-ava .buddy,.tr-live i,.tr-pulse{animation:none}
  :is(.tb-row,.trk,.wh,.pd-card):hover .bd-all{animation:none}
}

/* coin logos (Hyperliquid icons with a letter tile behind) */
.av.cl{width:14px;height:14px;border-radius:50%;font-size:7px;margin-right:1px}
.av.cl img{border-radius:50%;background:#16171b}
.av.cl.cl-m{width:20px;height:20px;font-size:9px}
.wh-ava{position:relative;display:inline-flex;flex-shrink:0}
.wh-ava .av.cl-b{position:absolute;right:-5px;bottom:-4px;width:15px;height:15px;font-size:7px;box-shadow:0 0 0 2px var(--card)}

/* ═════════════ tabs: Smart money · KOLs · Leaderboard ═════════════ */
.tr-tabs{flex-shrink:0;padding:3px}
.tr-tabs button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;font-size:13px;font-weight:600}
.tr-tabs button .ic{opacity:.75}
.tr-tabs button[aria-selected=true] .ic{opacity:1;color:var(--brand)}
.tr-pane{min-width:0}
.tr-pane[hidden]{display:none!important}
.tr-pane[data-pane="top"]>.tr-ctl{margin:-4px 0 14px}

/* smart money */
.sm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.sm-kpis>div{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);overflow:hidden}
.sm-kpis>div:first-child{background:var(--card)}
.sm-kpis>div>span{font-size:11.5px;color:var(--mute)}
.sm-kpis b{display:flex;align-items:center;gap:7px;min-height:26px;font:700 21px/1.2 var(--display);letter-spacing:-.02em}
.sm-kpis b .av{width:22px;height:22px;border-radius:7px;font-size:9px}
.sm-kpis small{font-size:11.5px;color:var(--mute)}
.sm-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
.sm-fh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sm-fh h3{margin:0}
.sm-fh .seg button{height:26px;padding:0 9px;font-size:12px}
.sm-feed{padding:12px 6px 6px}
.sm-held{display:none;align-items:center;gap:4px;margin-left:6px;height:18px;padding:0 7px;border-radius:99px;font-size:10.5px;font-weight:600;color:var(--warn);background:var(--warn-soft)}
.sm-feed:has(.sf-list.held) .sm-held{display:inline-flex}
.sm-feed:has(.sf-list.held) .tr-pulse{animation-play-state:paused;opacity:.5}
.sm-feed .sm-fh{padding:0 6px}
.sf-head,.sf-row{display:grid;grid-template-columns:44px minmax(150px,1.25fr) minmax(170px,1.3fr) minmax(90px,.7fr) 64px;gap:10px;align-items:center;padding:0 8px}
.sf-head{height:28px;font-size:11px;color:var(--faint);border-bottom:1px solid var(--line)}
.sf-list{max-height:calc(100vh - var(--nav-h) - var(--sub-h) - var(--foot-h) - 250px);min-height:300px;overflow:auto;overscroll-behavior:contain}
.sf-row{min-height:50px;border-bottom:1px solid var(--line);border-radius:0;cursor:default;transition:background .15s;position:relative}
.sf-row[data-open]{cursor:pointer}
.sf-row:hover{background:var(--hover)}
.sf-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--up);opacity:.55}
.sf-row.sell::before{background:var(--down)}
.sf-row.big{background:linear-gradient(90deg,rgba(var(--up-rgb),.07),transparent 60%)}
.sf-row.big.sell{background:linear-gradient(90deg,rgba(var(--down-rgb),.07),transparent 60%)}
.sf-t{font-size:11.5px}
.sf-who{display:flex;align-items:center;gap:9px;min-width:0}
.sf-id{display:flex;flex-direction:column;min-width:0}
.sf-id b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-id small{font-size:11px;color:var(--mute);white-space:nowrap}
.sf-tr{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;white-space:nowrap}
.sf-tr>b{font-weight:650}
.sf-tr .av{width:20px;height:20px;border-radius:6px;font-size:8px}
.sf-c{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sf-v{display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12.5px;white-space:nowrap}
.sf-v b{font-weight:650}
.sf-v small{font-size:10.5px;color:var(--mute)}
.sf-q{display:flex;justify-content:flex-end}
.sf-q .btn{min-width:52px;justify-content:center}
.sm-flow{position:sticky;top:0}
.sc-list{display:flex;flex-direction:column;gap:6px}
.sc{display:grid;grid-template-columns:16px 30px minmax(0,1fr) auto;grid-template-areas:"r l id n" "r l bar bar" ". av av act";gap:4px 10px;align-items:center;padding:10px 10px 9px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:linear-gradient(90deg,rgba(var(--up-rgb),.05),transparent 55%),var(--bg-2);transition:border-color .2s,transform .2s var(--ease)}
.sc.out{background:linear-gradient(90deg,rgba(var(--down-rgb),.05),transparent 55%),var(--bg-2)}
.sc:hover{border-color:var(--line-2)}
.sc-r{grid-area:r;align-self:start;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--faint);text-align:center}
.sc>.av{grid-area:l;width:30px;height:30px;border-radius:9px;font-size:11px;align-self:start}
.sc-id{grid-area:id;min-width:0;display:flex;flex-direction:column}
.sc-id b{font-size:13.5px;font-weight:650}
.sc-id small{font-size:11px;color:var(--mute)}
.sc-n{grid-area:n;display:flex;flex-direction:column;align-items:flex-end}
.sc-n b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.sc-n small{font-size:10.5px;color:var(--mute);white-space:nowrap}
.sc-bar{grid-area:bar;height:5px;border-radius:3px;background:rgba(var(--down-rgb),.55);overflow:hidden;margin:3px 0 2px}
.sc-bar i{display:block;height:100%;border-radius:inherit;background:var(--up);transform-origin:left}
.sc-av{grid-area:av;display:flex;align-items:center;padding-left:4px}
.sc-av>span{margin-left:-4px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#101216;box-shadow:0 0 0 2px var(--bg-2)}
.sc-act{grid-area:act;display:flex;gap:4px}
.sc-act .btn{height:24px;padding:0 9px;font-size:11.5px}
.sc-h{display:flex;align-items:center;gap:6px;margin:10px 2px 2px;font-size:11.5px;font-weight:600;color:var(--mute)}
.sc-none{margin:6px 2px;font-size:12px;color:var(--mute)}

/* KOLs */
.kol-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.kol-main{min-width:0}
.kol-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.kol-h .seg button{height:28px;padding:0 11px;white-space:nowrap}
.kol-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.kc{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--card);transition:border-color .2s,box-shadow .25s}
.kc:hover{border-color:var(--line-2);box-shadow:0 18px 40px -26px rgba(0,0,0,.9)}
.kc.featured{background:var(--card)}
.kc.mine{background:var(--card)}
.kc-top{display:flex;align-items:center;gap:11px;min-width:0}
.kc-top .buddy{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.kc-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.kc-id b{font-size:14.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-id a,.kc-id>span{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--mute);width:max-content;max-width:100%}
.kc-id a:hover{color:var(--text)}
.kc-src{align-self:flex-start;flex-shrink:0;height:20px;padding:0 7px;border-radius:6px;font-size:10.5px;font-weight:650;display:inline-flex;align-items:center;
  color:var(--text-2);background:var(--card-2);border:1px solid var(--line-2)}
.kc-src.featured{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.kc-src.mine{color:var(--brand-text);background:var(--brand-soft);border-color:var(--brand-line)}
.kc-w{display:flex;flex-wrap:wrap;gap:5px}
.kc-wa{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 4px 0 3px;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);font-size:11.5px}
.kc-ch{display:inline-grid;place-items:center;height:16px;padding:0 4px;border-radius:4px;font:700 9px/1 var(--mono);font-style:normal}
.kc-ch.hl{color:#9ff3d0;background:rgba(80,210,170,.14)}
.kc-ch.sol{color:#d2b6ff;background:rgba(153,69,255,.16)}
.kc-cp{display:inline-flex;padding:2px;color:var(--faint)}
.kc-cp:hover{color:var(--text)}
.kc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kc-stats>div{display:flex;flex-direction:column;gap:1px;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid var(--line);min-width:0}
.kc-stats>div>span{font-size:10.5px;color:var(--mute);white-space:nowrap}
.kc-stats b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-stats.kc-sol{display:block}
.kc-sol p{display:flex;align-items:center;gap:6px;margin:0;padding:8px 10px;border-radius:10px;background:rgba(153,69,255,.07);border:1px dashed rgba(153,69,255,.3);font-size:11.5px;color:var(--text-2)}
.kc-pos{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.kc-last{padding:7px 9px;border-radius:9px;background:var(--bg-2);font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-act{display:flex;align-items:center;gap:6px;margin-top:auto}
.kc-act .tr-star{height:26px}
.kc-rm{margin-left:auto}
.kol-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;min-width:0}
.kol-feed .wh{padding:7px 4px}

/* add a KOL */
.ka-f{display:flex;flex-direction:column;gap:12px}
.ka-f label{display:flex;flex-direction:column;gap:6px}
.ka-f label>span{font-size:12px;font-weight:600;color:var(--mute)}
.ka-f label>span small{font-weight:500;color:var(--faint)}
.ka-f textarea{resize:vertical;min-height:84px;font:12.5px/1.5 var(--mono);padding:9px 11px}
.ka-x{display:flex;align-items:center;gap:0;position:relative}
.ka-x i{position:absolute;left:11px;font-style:normal;color:var(--faint);font-size:13px}
.ka-x .inp{padding-left:24px;width:100%}
.ka-n{font-size:11.5px;color:var(--mute)}
.ka-fine{display:flex;gap:7px;align-items:flex-start;margin:12px 0 0;font-size:11.5px;color:var(--mute);line-height:1.5}
.ka-fine .ic{flex-shrink:0;margin-top:2px}

@container view (max-width:1240px){
  .sm-grid,.kol-grid{grid-template-columns:minmax(0,1fr)}
  .sm-flow{position:static}
  .sc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .sc-h,.sc-none{grid-column:1/-1}
  .kol-side{position:static}
  .sf-list{max-height:560px}
}
@container view (max-width:820px){
  .sm-kpis{grid-template-columns:1fr 1fr}
  .tr-tabs{width:100%}
  .tr-tabs button{flex:1;justify-content:center;padding:0 8px}
  .sf-head{display:none}
  .sf-row{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"t who v" "t tr q";row-gap:2px;padding:8px}
  .sf-t{grid-area:t;align-self:start;margin-top:4px}
  .sf-who{grid-area:who}
  .sf-tr{grid-area:tr}
  .sf-v{grid-area:v}
  .sf-q{grid-area:q}
}
@container view (max-width:480px){
  .tr-tabs button span{font-size:12px}
  .sm-kpis b{font-size:18px}
  .kc-stats{grid-template-columns:1fr 1fr}
  .kc-stats>div:last-child{display:none}
}