/* hood terminal — pair page (Faz 3 MVP).
Dense pro-terminal aesthetic adapted from the biai design system: dark surface
scale, alpha-white separators, tabular-numeral monospace for every number,
single-stroke SVG icons only (no emoji). System fonts — no bundled files. */
/* ── Quiver Labs design tokens ───────────────────────────────────────────────
One palette, two naming sets. The terminal's original names (--surface/--accent/
--up…) carry every JS-rendered surface (tape, pools, token-info, odometer, search,
plus the shared /analyze + Explorer pages). The mockup's names (--card/--lime/
--teal…) alias to the SAME values so the redesign layout CSS below pastes in
unchanged. Change a value once and both vocabularies follow. */
:root {
/* surfaces */
--bg: #0a0a0e; /* page + panes */
--surface: #13151f; /* raised: sticky headers, popovers, search */
--surface-2: #1e1e2b; /* fields / chips / hover */
--surface-3: #26283a; /* selected / lifted */
--surface-4: #2a2c39; /* avatars / badges */
--border: #2a2c39; /* solid chip/panel borders */
--border-soft: rgba(255, 255, 255, .07); /* hairlines (grid gaps, dividers) */
--text: #eef0f4;
--text-dim: #c2c6d2; /* values */
--text-mute: #8b8b9f; /* labels / secondary */
/* brand + interaction — lime, never a P&L/verdict color */
--accent: #d4e34c;
--accent-soft: rgba(212, 227, 76, .14);
/* trading */
--up: #26a69a; /* positive / up / buy */
--down: #f23645; /* negative / down / sell */
--warn: #f59e0c; /* warning / mid-risk */
--up-bg: rgba(38, 166, 154, .12);
--down-bg: rgba(242, 54, 69, .12);
--radius: 12px;
--radius-sm: 8px;
--font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "SF Mono", ui-monospace, SFMono-Regular, "IBM Plex Mono", Menlo, Consolas, monospace;
/* ── mockup-name aliases (the redesign layout CSS references these) ── */
--raised: var(--surface);
--card: var(--surface-2);
--hair: var(--border-soft);
--lime: var(--accent);
--qnavy: #141c28;
--teal: var(--up);
--red: var(--down);
--red-dark: #b22833;
--amber: var(--warn);
--blue: #2862ff;
--orange: #fa7315;
--purple: #8b5cf6;
--row-buy: #15302e;
--row-sell: #35262b;
--tp: var(--text);
--ts: var(--text-mute);
--tm: #5f5f6d;
--sans: var(--font);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* overscroll-behavior: none → a horizontal trackpad swipe (over the chart or any pane) never
triggers the browser's back/forward gesture. The terminal is a fixed full-screen app, so there
is no legitimate page overscroll to preserve. */
html, body { height: 100%; overscroll-behavior: none; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 13px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.up { color: var(--up); }
.down { color: var(--down); }
button { font-family: inherit; outline: none; }
/* the [hidden] attribute must beat explicit display rules (e.g. .main{display:grid}) */
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
/* ── app grid ──────────────────────────────────────────────────────────────── */
.app {
height: 100vh;
display: grid;
grid-template-rows: 44px 58px 1fr 26px;
grid-template-areas:
"header"
"tokenbar"
"main"
"status";
}
/* ── header ────────────────────────────────────────────────────────────────── */
.header {
grid-area: header;
display: flex; align-items: center; gap: 16px;
padding: 0 14px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.header .grow, .status .grow { flex: 1; }
.logo {
font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--text);
display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.logo i { color: var(--accent); font-style: normal; }
.logo-mark {
width: 22px; height: 22px; border-radius: 6px; flex: none;
background: linear-gradient(135deg, #7c8bff, #4b9bff);
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #0b0d12;
}
.logo-tag {
font: 700 9px/1 var(--mono); color: var(--accent);
background: var(--accent-soft); padding: 3px 6px; border-radius: 5px; letter-spacing: .06em;
}
.hdr-link {
color: var(--text-dim); font-size: 12.5px; font-weight: 500;
text-decoration: none; padding: 5px 10px; border-radius: 6px;
transition: color .14s ease, background-color .14s ease;
}
.hdr-link:hover { color: var(--text); background: var(--surface-2); }
.net-chip {
display: flex; align-items: center; gap: 7px; white-space: nowrap;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px; padding: 5px 11px;
font: 600 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--text-dim);
}
.net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); transition: background .2s; }
.net-dot.on { background: var(--up); box-shadow: 0 0 7px var(--up); }
/* ── tokenbar ──────────────────────────────────────────────────────────────── */
.tokenbar {
grid-area: tokenbar;
display: flex; align-items: center; gap: 14px;
padding: 0 14px;
background: var(--surface);
border-bottom: 1px solid var(--border);
overflow-x: auto; overflow-y: hidden;
}
/* Avatar: a relative anchor holding a clipped box (letter + logo img + hover camera). biai
box model 1:1 (kept at hood's 34px). The hover preview #tkLogoPop lives on . */
.tk-av { position: relative; flex: none; width: 46px; height: 46px;
--av-neon: 255, 46, 159; } /* magenta neon outline (Uniswap-unicorn pink) — tweak here */
.tk-venue { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; display: flex; z-index: 2; }
.tk-venue:empty { display: none; }
/* the venue (Uniswap) badge wears the SAME neon ring as the avatar */
.tk-venue img { width: 100%; height: 100%; background: var(--bg); border-radius: 50%; padding: 1px; box-sizing: border-box;
box-shadow: 0 0 0 1.5px rgba(var(--av-neon), .8), 0 0 7px 1px rgba(var(--av-neon), .55); }
.tk-av-box {
position: relative; width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--surface-4);
/* neutral grey frame — a crisp stroke just outside the tile (box-shadow isn't clipped by
overflow:hidden and adds no layout shift). The venue badge keeps its pink neon ring. */
box-shadow: 0 0 0 1.5px #3a3d4e;
}
.tk-av-letter { font-weight: 700; font-size: 21px; color: var(--text-dim); }
/* Bonding-curve graduation ring (launchpad tokens): a conic-gradient fills to --grad% (0-100)
in Quiver lime; the avatar goes circular inside a 3px ring, so the header shifts only ~6px.
Applied by applyGraduationRing() only when the token-info API returns graduation_progress. */
.tk-av.grad { box-sizing: border-box; width: 52px; height: 52px; padding: 3px; border-radius: 50%;
background: conic-gradient(from -90deg, var(--lime) calc(var(--grad, 0) * 1%), rgba(255,255,255,.09) 0); }
.tk-av.grad .tk-av-box { width: 100%; height: 100%; border-radius: 50%; box-shadow: none; } /* lime grad ring is the sole treatment — no double ring */
.tk-meta { display: flex; flex-direction: column; gap: 3px; flex: none; }
.tk-line1 { display: flex; align-items: center; gap: 8px; line-height: 1.2; }
.tk-name { font-weight: 700; font-size: 16px; }
.tk-q { color: var(--text-mute); font-weight: 600; font-size: 13px; }
.tk-proto {
font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
white-space: nowrap; color: var(--text-dim);
background: var(--accent-soft); border: 1px solid var(--border);
}
.tk-line2 { display: flex; align-items: center; gap: 7px; color: var(--text-mute); font-size: 12px; line-height: 1.25; }
.tk-line2 .dot { opacity: .5; }
.tk-fullname { color: var(--text-dim); }
.tk-copy { display: inline-flex; align-items: center; color: var(--text-mute); cursor: pointer; }
.tk-copy:hover { color: var(--text-dim); }
/* header action icons (favorite star + clock). star fills gold when favorited */
.tk-act { display: inline-flex; align-items: center; color: var(--text-mute); cursor: pointer; margin-left: 7px; outline: none; }
.tk-act svg { width: 15px; height: 15px; }
.tk-act:hover { color: var(--text-dim); }
.tk-fav.on { color: #f5c518; }
.tk-fav.on svg { fill: #f5c518; stroke: #f5c518; }
.tk-lp-logo { width: 13px; height: 13px; border-radius: 3px; object-fit: contain; vertical-align: -2px; }
/* DexScreener socials (website/twitter/telegram) + logo hover-zoom */
.tk-socials { display: inline-flex; align-items: center; gap: 8px; }
.tk-socials:not(:empty) { margin-left: 3px; padding-left: 8px; border-left: 1px solid var(--border); }
.tk-soc, .tk-line2 .gic { display: inline-flex; align-items: center; color: var(--text-mute); cursor: pointer; }
.tk-soc:hover, .tk-line2 .gic:hover { color: var(--text-dim); }
/* logo ![]()
fills the box, over the letter (an error removes it → letter shows through) */
.tk-av-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* camera/magnifier overlay on avatar hover — affordance for "click to search on Lens/Google" */
.tk-av-cam {
position: absolute; inset: 0; z-index: 2;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.55); color: #fff; opacity: 0; cursor: pointer;
transition: opacity .12s ease;
}
.tk-av-box:hover .tk-av-cam { opacity: 1; }
/* Large hover preview, body-anchored fixed (biai 1:1): the tokenbar's overflow clips
absolute children, so this escapes it; hoverable + clickable (→ Google Lens). */
#tkLogoPop {
position: fixed; left: 0; top: 0;
width: 320px; height: 320px; max-width: 60vw; max-height: 60vh;
border-radius: 14px; object-fit: contain;
background: var(--surface-4); border: 1px solid var(--border);
box-shadow: 0 16px 48px rgba(0,0,0,.55);
opacity: 0; transform: scale(.92); transform-origin: top left;
pointer-events: none; z-index: 99999; cursor: pointer;
transition: opacity .12s ease, transform .12s ease;
}
#tkLogoPop.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.tk-grow { flex: 1; }
/* launchpad chip — coloured per launchpad (name only; the avatar ring shows bonding/graduated). */
.tk-launch {
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 6px; cursor: default;
color: var(--text-dim); background: transparent; border: 1px solid var(--border);
}
.tk-launch svg { width: 12px; height: 12px; opacity: .9; }
.tk-launch.lp-noxa { color: var(--accent); background: rgba(212, 227, 76, .08); border-color: rgba(212, 227, 76, .38); }
.tk-launch.lp-virtuals { color: #4ac3e0; background: rgba(74, 195, 224, .08); border-color: rgba(74, 195, 224, .38); }
/* the factory-registered launchpads (brand palette shared with pulse.css) */
.tk-launch.lp-clanker { color: #ffb27c; background: rgba(255, 178, 124, .08); border-color: rgba(255, 178, 124, .38); }
.tk-launch.lp-klik { color: #4fd6b8; background: rgba(79, 214, 184, .08); border-color: rgba(79, 214, 184, .38); }
.tk-launch.lp-bankr { color: #00d179; background: rgba(0, 209, 121, .09); border-color: rgba(0, 209, 121, .40); }
.tk-launch.lp-doppler { color: #f0a6ce; background: rgba(240, 166, 206, .08); border-color: rgba(240, 166, 206, .38); }
.tk-launch.lp-flap { color: #e3d24c; background: rgba(227, 210, 76, .08); border-color: rgba(227, 210, 76, .38); }
.tk-launch.lp-stock { color: #8fd97a; background: rgba(143, 217, 122, .08); border-color: rgba(143, 217, 122, .38); }
.tk-launch.lp-memefactory { color: #ff8fa3; background: rgba(255, 143, 163, .08); border-color: rgba(255, 143, 163, .38); }
.tk-launch.lp-banger { color: #ffd166; background: rgba(255, 209, 102, .08); border-color: rgba(255, 209, 102, .38); }
.tk-launch.lp-letscash { color: #22d3a6; background: rgba(34, 211, 166, .08); border-color: rgba(34, 211, 166, .38); }
/* token-age chip (Deployed Nd ago · on hover) */
.tk-age {
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
font-size: 11px; padding: 1px 7px; border-radius: 6px; cursor: default;
color: var(--text-dim); border: 1px solid var(--border);
}
.tk-age svg { width: 12px; height: 12px; color: var(--tm); }
/* honeypot / tax safety verdict badge (live, re-checked every block) */
.tk-safe {
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 6px; cursor: pointer;
}
.tk-safe svg { width: 12px; height: 12px; }
.tk-safe.hp-safe { color: var(--up); background: var(--up-bg); border: 1px solid rgba(38, 166, 154, .35); }
.tk-safe.hp-warn { color: var(--warn); background: rgba(240, 162, 58, .10); border: 1px solid rgba(240, 162, 58, .35); }
.tk-safe.hp-danger { color: var(--down); background: var(--down-bg); border: 1px solid rgba(242, 54, 69, .35); }
.tk-safe.hp-checking, .tk-safe.hp-unknown { color: var(--tm); background: transparent; border: 1px solid var(--border); }
.tk-safe-link { text-decoration: none; }
.tk-safe-link:hover .tk-safe { filter: brightness(1.15); }
/* stats block */
.tk-stats { display: flex; align-items: center; gap: 16px; flex: none; padding-right: 2px; }
.stat { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.stat .k { color: var(--text-mute); font-size: 11px; }
.stat .v { font-weight: 600; font-size: 14px; color: var(--text); }
.tk-vsep { width: 1px; height: 24px; background: var(--border-soft); flex: none; }
.tk-mc { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; flex: none; }
.tk-mc-k { color: var(--text-mute); font-size: 11px; }
.tk-mc-v { font-weight: 700; font-size: 17px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* headline-price odometer: each changed digit reels like a flip-clock;
up → green, down → red, fading back to default. */
.tk-px { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.tk-px .tkpx-col { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.tk-px .tkpx-sym { overflow: visible; }
.tk-px .tkpx-roll { display: block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tk-px .tkpx-roll span { display: block; height: 1em; line-height: 1; text-align: center; }
.tk-px.tkpx-up { color: var(--up); }
.tk-px.tkpx-down { color: var(--down); }
/* ── main area ─────────────────────────────────────────────────────────────── */
.main {
grid-area: main;
display: grid;
grid-template-columns: 1fr 320px;
gap: 1px;
background: var(--border-soft);
min-height: 0;
}
.main.pick { grid-template-columns: 1fr; }
.panel { background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.rightcol { display: flex; flex-direction: column; gap: 1px; min-height: 0; background: var(--border-soft); }
.rightcol .pools { flex: 0 0 auto; max-height: 46%; }
.rightcol .tokinfo { flex: 1; }
.sec-head {
display: flex; align-items: center; gap: 9px; flex: none;
padding: 9px 14px; border-bottom: 1px solid var(--border-soft);
}
.sec-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); }
/* Trades ⇄ Holders tab switch (biai parity) */
.sec-head .tab-t { cursor: pointer; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); padding-bottom: 3px; margin-right: 14px; border-bottom: 2px solid transparent; user-select: none; }
.sec-head .tab-t:hover { color: var(--text-dim); }
.sec-head .tab-t.active { color: var(--text); border-bottom-color: var(--accent); }
.trades-tbl.hld td.hld-rank { color: var(--text-mute); width: 34px; }
.trades-tbl.hld td.hld-w { color: var(--text); }
.hld-row[data-wallet] { cursor: pointer; }
.hld-row[data-wallet]:hover td { background: var(--row-hover, rgba(255,255,255,.03)); }
.trades-tbl.hld .q-sym { color: var(--text-mute); font-size: 10.5px; margin-left: 2px; }
.sec-sub { font-size: 11px; color: var(--text-mute); font-family: var(--mono); }
.live-pulse {
width: 7px; height: 7px; border-radius: 50%; flex: none;
background: var(--up); box-shadow: 0 0 7px var(--up);
animation: pulse 1.5s ease infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.panel-empty { padding: 18px 14px; color: var(--text-mute); font-size: 12px; }
/* ── tables (tape + picker) ────────────────────────────────────────────────── */
.table { overflow: auto; flex: 1; min-height: 0; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
text-align: left; padding: 8px 14px; color: var(--text-mute); font-weight: 500;
font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
position: sticky; top: 0; background: var(--surface); z-index: 3; white-space: nowrap;
}
td { padding: 7px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
tr:hover td { background: rgba(255, 255, 255, .025); }
.trades-tbl th.num, .trades-tbl td.num { text-align: right; }
/* Sortable column headers: clickable, with a direction caret. Neutral faint ↕; active ▲/▼. */
.trades-tbl th .sortable, .trades-tbl th.sortable { cursor: pointer; user-select: none; }
.trades-tbl th .sortable:hover, .trades-tbl th.sortable:hover { color: var(--text); }
.sc { display: inline-block; width: 0; height: 0; margin-left: 3px; vertical-align: middle;
border-left: 3px solid transparent; border-right: 3px solid transparent; }
.sc.neutral { border-top: 3px solid var(--text-mute); opacity: .35; }
.sc.desc { border-top: 4px solid var(--accent); }
.sc.asc { border-bottom: 4px solid var(--accent); }
.trades-tbl td.age { color: var(--text-mute); }
.trades-tbl td.tip { color: var(--text-mute); font-family: var(--mono); font-size: 11.5px; }
.trades-tbl td.up { color: var(--up); font-weight: 600; }
.trades-tbl td.down { color: var(--down); font-weight: 600; }
/* Bar filter badge (click a chart candle → its trades) — rendered into #tapeSub. */
.tapebar-filter { color: var(--text); }
.tapebar-filter b { color: var(--up); font-weight: 700; }
/* clear is a prominent red pill (was plain text) so it reads as a clickable action */
.tapebar-filter a[data-barclear] { color: var(--down); margin-left: 9px; text-decoration: none; cursor: pointer;
display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-weight: 700; letter-spacing: .02em;
background: rgba(242,54,69,.14); border: 1px solid rgba(242,54,69,.45); transition: background .12s, border-color .12s; }
.tapebar-filter a[data-barclear]:hover { background: rgba(242,54,69,.26); border-color: rgba(242,54,69,.75); }
.trades-tbl td.mono { color: var(--text); font-weight: 500; }
.trades-tbl td.px-cell { color: var(--text); font-weight: 500; }
/* live-drop flash: brief green/red wash when an SSE row lands */
@keyframes tr-flash-buy { from { background: rgba(46, 189, 133, .18); } to { background: transparent; } }
@keyframes tr-flash-sell { from { background: rgba(246, 70, 93, .18); } to { background: transparent; } }
.row-buy.tr-live { animation: tr-flash-buy .6s ease-out forwards; }
.row-sell.tr-live { animation: tr-flash-sell .6s ease-out forwards; }
/* liquidity add/remove rows (biai parity): neutral teal(add)/amber(remove) — NOT buy/sell
green/red. A "Rem LP" is not itself a rug; the drained liquidity stat is the rug signal. */
.trades-tbl td.lp-add { color: #1fb6c9; font-weight: 600; }
.trades-tbl td.lp-rem { color: #f0a23a; font-weight: 600; }
.usd-cell .usd-val.lp-add { color: #1fb6c9; }
.usd-cell .usd-val.lp-rem { color: #f0a23a; }
@keyframes tr-flash-lp { from { background: rgba(240, 162, 58, .16); } to { background: transparent; } }
.row-lp.tr-live { animation: tr-flash-lp .6s ease-out forwards; }
/* Total USD heat bar: right-aligned strip under the value, scaled by trade size */
.usd-cell { position: relative; overflow: visible; }
.usd-cell .heat {
position: absolute; top: 0; right: 0; height: 100%; z-index: 0; max-width: 100%;
}
.usd-cell .heat.up { background: linear-gradient(270deg, rgba(46, 189, 133, .30), rgba(46, 189, 133, .10) 55%, rgba(46, 189, 133, 0)); }
.usd-cell .heat.down { background: linear-gradient(270deg, rgba(246, 70, 93, .30), rgba(246, 70, 93, .10) 55%, rgba(246, 70, 93, 0)); }
.usd-cell .usd-val { position: relative; z-index: 1; }
.usd-cell .usd-val.up { color: var(--up); }
.usd-cell .usd-val.down { color: var(--down); }
.usd-cell .q-sym { color: var(--text-mute); font-size: 10.5px; margin-left: 1px; }
/* toggle headers (Price ⇄ M.Cap · Total USD ⇄ pair): clickable, with a dim swap glyph */
.trades-tbl th.th-tog { cursor: pointer; user-select: none; }
.trades-tbl th.th-tog:hover { color: var(--text-dim); }
.trades-tbl th .flt { font-style: normal; font-size: 9px; opacity: .55; }
.trades-tbl th.th-tog:hover .flt { opacity: 1; color: var(--accent, var(--text-dim)); }
/* trader cell */
.tr-h { text-align: right; }
.trades-tbl td.tr-cell {
display: flex; align-items: center; gap: 7px; justify-content: flex-end;
position: relative; z-index: 1; cursor: pointer;
}
.tr-av {
width: 18px; height: 18px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #0b0d12;
}
/* trader name OR smart-rank badge (#1623, shown when a wallet is filtered / smart overlay is on) →
opens the wallet-detail modal. Lime underline ONLY on hover (plain otherwise). */
.tr-name { color: var(--text); font-weight: 500; }
/* MY wallet in the tape — same #c6f24e the chart's own-fill discs wear (.cb-own), because it is the
same fact in a different place. Heavier than a tracked name: on a tape scrolling at 10 blocks/s
the row I care about is mine. */
.tr-own { color: #c6f24e; font-weight: 800; letter-spacing: -.02em; }
.tr-name, .tr-rank { cursor: pointer; text-decoration: none; }
.tr-name:hover, .tr-rank:hover { text-decoration: underline; text-decoration-color: #d7ff3a; text-underline-offset: 3px; text-decoration-thickness: 2px; }
/* Robinhood Blockscout tx link — single-stroke external-link icon (no emoji), opens a new tab */
.tr-bs { display: inline-flex; align-items: center; color: var(--text-mute); flex: none; margin-left: 1px; }
.tr-bs:hover { color: var(--accent); }
/* Filter (funnel) icon left of the trader — click filters the pane + chart to that wallet */
.tr-filter { display: inline-flex; align-items: center; color: var(--text-mute); flex: none; cursor: pointer; }
.tr-filter:hover { color: var(--accent); }
/* Wallet-detail modal — centered overlay showing the wallet-analiz page (?embed=1) in an iframe */
.wm-overlay { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(0,0,0,.62); }
.wm-overlay.on { display: flex; align-items: center; justify-content: center; }
.wm-frame-wrap { position: relative; width: min(1200px, 96vw); height: 92vh; background: #0d0f17;
border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.wm-frame-wrap #walletFrame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.wm-x { position: absolute; top: 9px; right: 11px; z-index: 2; width: 28px; height: 28px; border-radius: 8px;
background: rgba(18,20,29,.92); border: 0.5px solid var(--border); color: var(--text-mute);
font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wm-x:hover { color: var(--text); background: rgba(30,34,48,.95); }
.wm-x.wm-tab { right: 47px; } /* "open in new tab" — sits just left of the close × */
/* ── pools list (right column) ─────────────────────────────────────────────── */
.pool-list { overflow: auto; flex: 1; min-height: 0; }
.pool-it {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "proto addr right" "proto mid right";
column-gap: 10px; row-gap: 1px; align-items: center;
padding: 8px 14px; cursor: pointer;
border-bottom: 1px solid var(--border-soft);
border-left: 2px solid transparent;
transition: background-color .14s ease;
}
.pool-it:hover { background: var(--surface-2); }
.pool-it.on { background: var(--surface-2); border-left-color: var(--accent); }
.pl-proto {
grid-area: proto;
font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
white-space: nowrap; color: var(--text-dim);
background: var(--accent-soft); border: 1px solid var(--border);
display: inline-flex; align-items: center; gap: 5px;
}
.pl-proto i { font-style: normal; color: var(--text-mute); font-family: var(--mono); }
.pl-addr { grid-area: addr; color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-addr i { font-style: normal; font-weight: 500; color: var(--text-mute); } /* the /QUOTE half of the pair */
.pl-mid { grid-area: mid; color: var(--text-mute); font-size: 11px; }
.pl-right { grid-area: right; text-align: right; color: var(--text); font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.pl-right i { font-style: normal; color: var(--text-mute); font-size: 10.5px; }
/* ── liquidity "!" flag (Faz 5): amber caution mark on an estimated/stale/drained TVL ── */
.liq-flag {
display: inline-block; margin-left: 3px;
color: var(--warn); font-weight: 700; cursor: help;
font-family: var(--mono); line-height: 1;
}
.liq-cell .liq-flag { margin-left: 2px; }
/* Low-liquidity (<$2k): the whole value goes red so a thin book reads at a glance, and its "!" is
red too (not the amber caution used for stale/estimated). Header only — see liqCellHtml(markLow). */
.liq-low { color: var(--down); }
.liq-flag.low { color: var(--down); }
/* ── token info (key/value grid) ───────────────────────────────────────────── */
/* .tinfo is the ONE scroller: with the metric grid + address rows as unshrinkable siblings,
a flex:1/overflow:auto here squeezed the kv rows to ~20px on 1366-1080p viewports (review
finding, measured in headless Chrome) — flow naturally and let .tinfo scroll instead. */
.ti-kv {
flex: none;
display: grid; grid-template-columns: auto 1fr;
gap: 0 14px; padding: 8px 14px 12px;
align-content: start; font-size: 12px;
}
.ti-k { color: var(--text-mute); padding: 4px 0; white-space: nowrap; }
.ti-v { text-align: right; color: var(--text-dim); padding: 4px 0; overflow: hidden; text-overflow: ellipsis; }
.ti-v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ti-v.wrap { word-break: break-all; white-space: normal; font-size: 11px; }
/* ── token info metric tiles (/token-info panel) ───────────────────────────── */
.ti-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px 13px 2px; flex: none; }
.ti-grid.g2 { grid-template-columns: repeat(2, 1fr); padding-top: 7px; }
.ti-tile { background: #0e1016; border: 1px solid #1e222b; border-radius: 9px; padding: 10px 11px; min-width: 0; }
.ti-tile .tr { display: flex; align-items: center; gap: 6px; color: var(--text-mute); min-width: 0; }
.ti-tile .tr svg { flex: none; }
.ti-tile .tr .tv { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ti-tile .tk { font-size: 11.5px; color: var(--text-mute); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-tile .tr.ok, .ti-tile .tr.ok .tv { color: #5fbfa2; }
.ti-tile .tr.bad, .ti-tile .tr.bad .tv { color: #e08a8a; }
.ti-tile .tr.na { color: var(--tm); } .ti-tile .tr.na .tv { color: var(--tm); font-weight: 500; }
/* address rows (TOKEN / DEV / POOL / QUOTE / TXN) with copy + explorer link */
.ti-addrs { padding: 4px 13px 12px; flex: none; }
.ti-arow { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 11px; }
.ti-arow .ak { color: var(--text-mute); width: 42px; flex: none; letter-spacing: .04em; }
.ti-arow .av { font-family: var(--mono); color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-acopy { cursor: pointer; color: var(--text-mute); flex: none; display: inline-flex; }
.ti-acopy:hover { color: var(--text); }
.ti-acopy.copied { color: var(--up); }
.ti-arow .tr-bs { flex: none; color: var(--text-mute); }
.ti-arow .tr-bs:hover { color: var(--text); }
/* ── pair picker ───────────────────────────────────────────────────────────── */
.pick-row { cursor: pointer; }
.pick-row td b { color: var(--text); font-weight: 600; }
.pick-q { color: var(--text-mute); font-size: 11px; }
.bar-idle .tk-stats, .bar-idle .tk-vsep, .bar-idle .tk-mc, .bar-idle .tk-line2 { visibility: hidden; }
/* ── status bar ────────────────────────────────────────────────────────────── */
.status {
grid-area: status; display: flex; align-items: center; gap: 16px;
padding: 0 14px; background: var(--surface);
border-top: 1px solid var(--border);
font-size: 11px; color: var(--text-mute);
}
.status .si { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.status .si b { color: var(--text-dim); font-weight: 600; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); transition: background .2s; }
.st-dot.on { background: var(--up); box-shadow: 0 0 6px var(--up); }
/* ── page error banner ─────────────────────────────────────────────────────── */
.page-err {
position: fixed; left: 50%; top: 64px; transform: translateX(-50%); z-index: 50;
background: var(--down-bg); color: var(--down);
border: 1px solid rgba(246, 70, 93, .4); border-radius: var(--radius-sm);
padding: 9px 16px; font-size: 12.5px; max-width: 80vw;
}
/* ── narrow screens: stack the right column below the tape ─────────────────── */
@media (max-width: 900px) {
.main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.rightcol .pools { max-height: 200px; }
}
/* ══ /analyze — single-transaction analyzer (Explorer Faz 4) ══════════════════
Shares the terminal design tokens; scrolls (unlike the fixed-grid pair page). */
.az-app { min-height: 100vh; display: flex; flex-direction: column; }
.az-app .header { flex: none; }
/* search bar */
.az-search {
padding: 16px 18px 14px; background: var(--surface);
border-bottom: 1px solid var(--border);
}
.az-form { display: flex; align-items: center; gap: 0; max-width: 860px; }
.az-search-ico {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex: none; color: var(--text-mute);
background: var(--surface-2); border: 1px solid var(--border); border-right: none;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.az-input {
flex: 1; height: 38px; padding: 0 12px; font-size: 13px;
color: var(--text); background: var(--surface-2);
border: 1px solid var(--border); border-left: none; border-right: none;
outline: none;
}
.az-input::placeholder { color: var(--text-mute); }
.az-input:focus { background: var(--surface-3); }
.az-btn {
height: 38px; padding: 0 18px; flex: none; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: #0b0d12;
background: var(--accent); border: 1px solid var(--accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
transition: filter .14s ease;
}
.az-btn:hover { filter: brightness(1.08); }
.az-hint { margin-top: 8px; font-size: 11.5px; color: var(--text-mute); max-width: 860px; }
/* body */
.az-main { flex: 1; padding: 18px; max-width: 1080px; width: 100%; margin: 0 auto; }
.az-loading { display: flex; align-items: center; gap: 9px; color: var(--text-dim); font-size: 13px; padding: 24px 4px; }
.az-inline-err { position: static; transform: none; left: auto; top: auto; max-width: none; margin-bottom: 14px; }
/* tx header card */
.az-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px;
}
.az-hdrline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.az-hlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-mute); font-weight: 600; }
.az-hash { font-size: 13px; color: var(--text); word-break: break-all; cursor: pointer; }
.az-summary { margin: 12px 0 14px; font-size: 14px; color: var(--text); font-weight: 500; }
.az-kv {
display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 8px 24px;
}
.az-k { font-size: 11px; color: var(--text-mute); }
.az-v { font-size: 12.5px; color: var(--text-dim); margin-top: 1px; }
.az-v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* chips / badges */
.az-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; letter-spacing: .03em; }
.az-badge.ok { color: var(--up); background: var(--up-bg); border: 1px solid rgba(46,189,133,.35); }
.az-badge.fail { color: var(--down); background: var(--down-bg); border: 1px solid rgba(246,70,93,.35); }
.az-src { display: inline-block; font: 700 9.5px/1 var(--mono); padding: 3px 8px; border-radius: 5px; letter-spacing: .07em; }
.az-src.idx { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border); }
.az-src.live { color: var(--warn); background: rgba(240,162,58,.10); border: 1px solid rgba(240,162,58,.35); }
.az-chip { font: 600 10.5px/1 var(--mono); padding: 3px 8px; border-radius: 5px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); }
.az-chip.sys { color: var(--warn); background: rgba(240,162,58,.10); border-color: rgba(240,162,58,.30); }
.az-addr { cursor: pointer; }
.az-addr:hover { color: var(--text); text-decoration: underline; }
.az-mute { color: var(--text-mute); }
.az-ok { color: var(--up); }
.az-inf { color: var(--warn); font-weight: 600; }
/* sections + tables */
.az-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.az-table { overflow-x: auto; }
.az-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.az-table th { text-align: left; padding: 8px 14px; color: var(--text-mute); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.az-table th.num { text-align: right; }
.az-table td { padding: 7px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-dim); white-space: nowrap; }
.az-table td.num { text-align: right; }
.az-table tr:last-child td { border-bottom: none; }
.az-table tr:hover td { background: rgba(255,255,255,.02); }
.az-side { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px; text-transform: capitalize; }
.az-side.buy { color: var(--up); background: var(--up-bg); }
.az-side.sell { color: var(--down); background: var(--down-bg); }
.az-proto { font: 600 10px/1 var(--mono); padding: 2px 6px; border-radius: 4px; color: var(--text-dim); background: var(--accent-soft); border: 1px solid var(--border); }
.az-px { color: var(--text); font-weight: 500; }
.az-arrow { color: var(--text-mute); padding: 0 2px; }
.az-eth { color: var(--text); }
.az-kind { font-size: 10.5px; padding: 2px 7px; border-radius: 4px; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-soft); text-transform: capitalize; }
.az-kind.mint { color: var(--up); background: var(--up-bg); }
.az-kind.burn { color: var(--down); background: var(--down-bg); }
/* launch badge */
.az-launch {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 11.5px; padding: 7px 12px; border-radius: var(--radius-sm); margin-bottom: 14px;
color: var(--warn); background: rgba(240,162,58,.08); border: 1px solid rgba(240,162,58,.30);
}
.az-launch b { letter-spacing: .04em; }
.az-launch.migrated { color: var(--up); background: var(--up-bg); border-color: rgba(46,189,133,.30); }
/* call tree — indented frames */
.az-calltree { padding: 6px 0 10px; font-family: var(--mono); font-size: 12px; overflow-x: auto; }
.az-frame {
display: flex; align-items: center; gap: 8px; padding-top: 3px; padding-bottom: 3px;
white-space: nowrap; border-left: 2px solid transparent;
}
.az-frame:hover { background: rgba(255,255,255,.02); }
.az-frame.reverted { border-left-color: var(--down); background: rgba(246,70,93,.05); }
.az-ctype { color: var(--text-mute); font-size: 10px; min-width: 92px; }
.az-caddr { color: var(--text-dim); }
.az-cfn { color: var(--accent); }
.az-cv { color: var(--up); }
.az-revert { color: var(--down); font-size: 11px; }
@media (max-width: 720px) {
.az-kv { grid-template-columns: 1fr 1fr; }
}
/* ══════════════════════════ Explorer (Faz 4 — Home + Blocks) ══════════════════════════ */
/* Reuses .az-app / .az-main / .az-card / .az-sec / .az-table / .sec-head / .az-side /
.az-proto / .az-src from the analyze page. Only the KPI-card strip, the two-column Home
layout, the search box, and the live-flash are explorer-specific. */
/* header nav: active link */
.hdr-link.on { color: var(--text); background: var(--surface-2); }
/* compact top search in the header (tx / block / pool / token → route) */
.ex-search { position: relative; display: flex; align-items: center; min-width: 200px; max-width: 320px; flex: 1; }
.ex-search-ico { position: absolute; left: 10px; color: var(--text-mute); display: flex; pointer-events: none; }
.ex-search input {
width: 100%; background: var(--surface-2); border: 1px solid var(--border);
border-radius: 8px; padding: 6px 10px 6px 30px; color: var(--text);
font: 500 12px var(--mono); outline: none;
}
.ex-search input:focus { background: var(--surface-3); border-color: var(--accent); }
.ex-search input::placeholder { color: var(--text-mute); }
/* KPI card strip (Home top cards + Blocks KPI strip) */
.ex-kpis {
display: grid; gap: 12px; margin-bottom: 16px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ex-kpi {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 13px 15px; min-width: 0;
}
.ex-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mute); font-weight: 600; white-space: nowrap; }
.ex-kpi-v { margin-top: 6px; font: 600 20px/1.1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-kpi-s { margin-top: 4px; font-size: 10.5px; color: var(--text-mute); }
.ex-kpi-v.accent { color: var(--accent); }
.ex-kpi-v.up { color: var(--up); }
/* Home two-column: latest blocks | live trades */
.ex-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
@media (max-width: 900px) { .ex-cols { grid-template-columns: 1fr; } }
/* section header with a live pulse + count */
.ex-sechead {
display: flex; align-items: center; gap: 9px; padding: 11px 14px;
border-bottom: 1px solid var(--border-soft);
}
.ex-sechead .sec-title { font-size: 11.5px; }
.ex-sechead .grow { flex: 1; }
.ex-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 var(--mono); color: var(--text-mute); letter-spacing: .05em; text-transform: uppercase; }
/* clickable table rows (block # / trade → detail/pair) */
.ex-table td.link, .ex-blk { color: var(--accent); cursor: pointer; }
.ex-table td.link:hover, .ex-blk:hover { text-decoration: underline; }
.ex-table td .muted, .ex-mute { color: var(--text-mute); }
/* live-insert flash (new block row / new trade row prepends) */
@keyframes exFlash { from { background: var(--accent-soft); } to { background: transparent; } }
.ex-flash td { animation: exFlash 1.1s ease-out; }
@keyframes exFlashBuy { from { background: var(--up-bg); } to { background: transparent; } }
@keyframes exFlashSell { from { background: var(--down-bg); } to { background: transparent; } }
.ex-flash-buy td { animation: exFlashBuy 1.1s ease-out; }
.ex-flash-sell td { animation: exFlashSell 1.1s ease-out; }
/* pair label (base sym → quote sym) in the trades feed */
.ex-pair { color: var(--text); font-weight: 500; }
.ex-pair .q { color: var(--text-mute); font-weight: 400; }
/* empty / degraded state inside a section */
.ex-empty { padding: 22px 14px; color: var(--text-mute); font-size: 12px; text-align: center; }
/* block detail page */
.ex-detail-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px 24px; }
/* launchpad profile: creator logo in the tokenbar avatar + social links in Token Info */
/* (avatar image + hover preview now defined once above, biai box model) */
.ti-link { color: var(--accent, #6d7cff); text-decoration: none; margin-right: 8px; }
.ti-link:hover { text-decoration: underline; }
/* ── search (biai pattern: / opens, esc closes, card rows) ─────────────────── */
.hdr-search {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
color: var(--text-mute); padding: 6px 10px; font: 500 12px/1 var(--font);
}
.hdr-search:hover { color: var(--text-dim); border-color: var(--accent-soft); }
.hdr-search kbd { font: 500 10px/1 var(--mono); border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; color: var(--text-mute); }
.sm-backdrop {
position: fixed; inset: 0; z-index: 1100; background: rgba(8, 9, 13, .62);
backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center;
padding: 88px 24px 24px; animation: sm-fade .14s ease-out;
}
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
.sm-pop {
width: min(860px, 100%); max-height: calc(100vh - 120px);
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 24px 80px -20px #000, 0 6px 18px rgba(0, 0, 0, .5);
display: flex; flex-direction: column; overflow: hidden;
animation: sm-in .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sm-in { from { opacity: 0; transform: scale(.97) translateY(-6px); } to { opacity: 1; transform: none; } }
.sm-hd { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.sm-q {
display: flex; align-items: center; gap: 10px; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-mute);
}
.sm-ic { width: 14px; height: 14px; flex: none; }
.sm-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font: 500 13px/1 var(--font); }
.sm-input::placeholder { color: var(--text-mute); }
.sm-q kbd { font: 500 10px/1 var(--mono); color: var(--text-mute); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; }
.sm-tabs { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); }
.sm-chip {
display: inline-flex; align-items: center; background: var(--surface-2);
border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
font: 600 11.5px/1 var(--font); color: var(--text-dim); white-space: nowrap;
}
.sm-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sm-tbl-wrap { overflow: auto; min-height: 0; }
.sm-list { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.sm-empty { padding: 22px; text-align: center; color: var(--text-mute); font: 500 12px/1 var(--mono); }
.sm-card {
display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 11px;
cursor: pointer; background: var(--surface-2); border: 1.5px solid transparent;
transition: background .12s ease, border-color .12s ease;
}
.sm-card:hover { background: var(--surface-3); }
.sm-av2 { position: relative; flex: none; width: 40px; height: 40px; }
.sm-av-box {
width: 40px; height: 40px; border-radius: 11px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
border: 1px solid var(--border-soft);
}
.sm-av-box img { width: 100%; height: 100%; object-fit: cover; }
.sm-av-letter { font: 700 16px/1 var(--font); color: var(--text-dim); }
.sm-av-proto {
position: absolute; right: -4px; top: -4px; font: 700 8px/1 var(--mono); color: var(--accent);
background: var(--surface-3); border: 1.5px solid var(--surface); border-radius: 5px; padding: 2px 3px;
}
.sm-id { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sm-id1 { display: flex; align-items: center; gap: 2px; font: 700 13.5px/1 var(--font); color: var(--text); }
.sm-id-q { color: var(--text-mute); font-weight: 600; }
.sm-new { margin-left: 6px; padding: 1px 5px; border: 1px solid #1fb6c9; border-radius: 3px; color: #1fb6c9; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.sm-addr { color: var(--text-mute); font-size: 11px; }
.sm-mut { color: var(--text-mute); font-weight: 400; }
.sm-mx { margin-left: auto; display: flex; align-items: center; gap: 20px; flex: none; }
.sm-m { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; white-space: nowrap; }
.sm-m i { font: 600 9.5px/1 var(--font); font-style: normal; color: var(--text-mute); letter-spacing: .07em; }
.sm-m b { font: 700 12.5px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.sm-m b.up { color: var(--up); }
.sm-m b.down { color: var(--down); }
.sm-m b.sm-mut { color: var(--text-mute); font-weight: 400; }
.sm-m:nth-child(1) { min-width: 92px; }
.sm-m:nth-child(2) { min-width: 60px; }
.sm-m:nth-child(3) { min-width: 80px; }
.sm-m:nth-child(4) { min-width: 80px; }
.sm-m:nth-child(5) { min-width: 80px; }
/* ── chart + stats bar (Faz 1b) ───────────────────────────────────────────── */
.leftcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 1px; background: var(--border-soft); }
.chart.panel { flex: 3 1 0; min-height: 220px; }
.leftcol .trades.panel { flex: 2 1 0; min-height: 150px; }
.chart-head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 7px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface);
}
.tf-btns, .mode-btns { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 7px; padding: 2px; }
.tf-btns .tf, .mode-btns .md {
border: 0; background: transparent; color: var(--text-mute); cursor: pointer;
font: 600 11px/1 var(--mono); padding: 5px 9px; border-radius: 5px;
}
.tf-btns .tf:hover, .mode-btns .md:hover { color: var(--text-dim); }
.tf-btns .tf.on, .mode-btns .md.on { background: var(--accent-soft); color: var(--accent); }
.chart-ohlc { color: var(--text-mute); font-size: 11px; white-space: nowrap; overflow: hidden; }
.chart-ohlc b { color: var(--text-dim); font-weight: 600; }
.chart-ohlc .up { color: var(--up); } .chart-ohlc .down { color: var(--down); }
.chart-plot { position: relative; flex: 1; min-height: 0; background: var(--surface); }
#lwchart { position: absolute; inset: 0; }
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-mute); font: 500 12px/1 var(--mono); }
/* wallet-filter chart bubbles — avatars in a lane ABOVE the candles, time-anchored on X
(slide with their candle on pan/zoom), each with a dashed connector down to its candle. */
#chartBubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.cb-conn { position: absolute; width: 0; transform: translateX(-0.75px); border-left: 1.5px dashed; opacity: .6; display: none; z-index: 1; }
.cb-conn.on { display: block; }
.cb-conn.cb-b { border-color: var(--up); }
.cb-conn.cb-s { border-color: var(--down); }
/* Bubble disc: interior is SEMI-TRANSPARENT so the candles read THROUGH it (the coloured ring +
the rank/name/emoji + the PnL pill stay solid, so the marker and its info are never lost). Hover
fills the disc back to solid (--cb-fill) for full-contrast reading. Pure visual — positions,
packing, hover and click logic are unchanged. --cb-fill holds each type's solid colour so one
hover rule restores them all. */
.cb { --cb-fill: var(--surface); position: absolute; transform: translate(-50%, -50%); display: none; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid; background: rgba(19,21,31,.34); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5); z-index: 2; pointer-events: auto; cursor: pointer; }
.cb:hover { z-index: 4; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 12px rgba(255,255,255,.25); }
.cb.on { display: flex; }
/* While the user is panning the chart (between TV mouse_down → mouse_up) the bubbles ignore the
pointer, so a left/right drag never snags when the cursor crosses one — the mousemove passes
straight through to the chart iframe beneath. Click + hover return the instant the drag ends. */
#chartBubbles.bub-drag .cb { pointer-events: none; }
.cb-b { border-color: var(--up); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 9px rgba(46,189,133,.5); }
.cb-s { border-color: var(--down); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 9px rgba(246,70,93,.5); }
/* dev overlay: the RING keeps the side color (green buy / red sell via cb-b/cb-s); the bold "D"
disc marks it as the creator so a dev trade can't read as an ordinary maker. */
.cb.cb-dev.cb-noimg { --cb-fill: #10131a; background: rgba(16,19,26,.34); color: #fff; font-weight: 800; }
.cb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cb.cb-noimg { --cb-fill: #1a1f2b; background: rgba(26,31,43,.34); font: 700 9px var(--sans); color: var(--text); }
/* smart overlay: the wallet's top-3,000 RANK inside the disc (ring = buy/sell) + its live on-token
ROI% as a label BELOW (.cb-pnl, green profit / red loss). overflow visible so the below-disc label
isn't clipped (smart bubbles carry no avatar img, so clipping isn't needed). */
.cb.cb-smart { --cb-fill: #10131a; background: rgba(16,19,26,.34); font: 700 8px/1 var(--mono); color: #d6dbe6; overflow: visible; letter-spacing: -.03em; }
.cb.cb-tracked { --cb-fill: #10131a; background: rgba(16,19,26,.34); font-size: 13px; line-height: 1; overflow: visible; } /* Wallet Tracker: the user's emoji fills the disc (buy + sell); overflow visible so the smart-mode ROI% label shows */
/* MY OWN wallet (W1/W2/W3…): the wallet NAME fills the disc, in the brand lime so it reads as "mine" at a
glance against the smart/dev greys. Sized like .cb-smart (8px mono fits ~3 chars in a 22px disc); a
longer bot-assigned name is clipped by the disc rather than blowing the lane apart. overflow visible so
the ROI% label below shows. */
.cb.cb-own { --cb-fill: #10131a; background: rgba(16,19,26,.34); font: 800 8px/1 var(--mono); color: #c6f24e; overflow: visible; letter-spacing: -.03em; }
/* hover fills the disc back to solid (per-type --cb-fill) so a bubble you point at reads at full
contrast; placed after every per-type background rule so it wins at equal specificity. */
.cb:hover { background: var(--cb-fill); }
.cb.cb-own.cb-b { box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(198,242,78,.45); }
.cb.cb-own.cb-s { box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 10px rgba(246,70,93,.55); }
.cb-pnl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; padding: 1px 3px; border-radius: 4px; background: rgba(6,8,12,.82); font: 700 8px/1.25 var(--mono); white-space: nowrap; pointer-events: none; }
.cb-pnl.up { color: var(--up); }
.cb-pnl.dn { color: var(--down); }
/* header Smart popup: Off / All / Only in Profit */
.smart-menu { position: fixed; z-index: 40; background: #0d1017; border: 1px solid var(--border); border-radius: 9px; padding: 5px; min-width: 152px; box-shadow: 0 10px 28px rgba(0,0,0,.6); font: 500 12px/1 var(--sans); }
.smart-menu .sm-hd { color: var(--text-mute); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px 6px; }
.smart-menu .sm-opt { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 6px; color: var(--text-dim); cursor: pointer; }
.smart-menu .sm-opt:hover { background: rgba(255,255,255,.05); color: var(--text); }
.smart-menu .sm-opt .sm-tick { width: 12px; color: var(--accent, #d4e34c); opacity: 0; font-size: 11px; }
.smart-menu .sm-opt.on { color: var(--text); }
.smart-menu .sm-opt.on .sm-tick { opacity: 1; }
/* Tracked menu: same layout, but a calm neutral tick — the Tracked control is deliberately not coloured (no lime). */
.tracked-menu .sm-opt .sm-tick { color: var(--text); }
/* Tracked LW-strip button: calm grey by mode, never the lime "on" accent Smart uses. ID specificity beats
the generic `.mode-btns .md.on` lime rule; the [data-mode] rules follow `.on` so Only/Off win the source-order tie. */
#trackedToggle.md { color: var(--text-mute); }
#trackedToggle.md.on { background: transparent; color: var(--text-mute); } /* All — muted grey */
#trackedToggle.md[data-mode="only"] { background: transparent; color: var(--text-dim); } /* Only Tracked — a touch brighter */
#trackedToggle.md[data-mode="off"] { background: transparent; color: var(--tm); } /* Off — dimmest */
.cbt { position: absolute; transform: translateX(-50%); z-index: 6; pointer-events: none; background: #0b0d12; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; min-width: 118px; font: 11.5px/1.5 var(--mono); color: var(--text-dim); white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.cbt-h { font-weight: 700; margin-bottom: 3px; letter-spacing: .04em; }
.cbt-h.b { color: var(--up); }
.cbt-h.s { color: var(--down); }
.cbt-r { color: var(--text-dim); }
.cbt-t { color: var(--text-mute); margin-top: 2px; }
/* maker filter chip in the trades header ("Maker: 0x… ✕") */
.mk-filter { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 4px 2px 6px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); font: 500 11px/1 var(--sans); color: var(--text-dim); }
.mk-filter .mk-av { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 9px/1 var(--sans); color: #0b0d12; }
.mk-filter .mk-lbl { color: var(--text-mute); }
.mk-filter .mk-addr { color: var(--text); }
.mk-filter .mk-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-mute); cursor: pointer; line-height: 0; }
.mk-filter .mk-x:hover { background: rgba(246,70,93,.16); color: var(--down); }
/* wallet money-flow badge: identity pill (.mk-filter) grows into a two-row block (.wb) */
.mk-filter.wb { flex-direction: column; align-items: stretch; gap: 6px; border-radius: 10px; padding: 8px 10px; }
.mk-filter.wb .wb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 11px/1.35 var(--sans); }
.mk-filter.wb .wb-row2 { padding-top: 6px; border-top: 1px solid var(--border); }
.wb-addr { color: var(--text); }
.wb-state { font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
.wb-state.hold { color: var(--up); border-color: rgba(38,166,154,.4); }
.wb-state.exit { color: var(--text-mute); }
.wb-cnt.buy { color: var(--up); }
.wb-cnt.sell { color: var(--down); }
.wb-cnt b, .wb-stat b, .wb-mf b { color: var(--text); font-weight: 700; }
.wb-k { color: var(--text-mute); }
.wb-arrow { color: var(--tm); }
.wb-pnl b { color: var(--text); font-weight: 700; }
.wb-pnl.up b, .wb-pnl.up .wb-pnl-pct { color: var(--up); }
.wb-pnl.down b, .wb-pnl.down .wb-pnl-pct { color: var(--down); }
.wb-clear { margin-left: auto; }
.wb-copy { display: inline-flex; align-items: center; margin-left: -5px; padding: 2px; color: var(--text-mute); background: none; border: 0; border-radius: 4px; cursor: pointer; }
.wb-copy:hover { color: var(--text); background: var(--accent-soft); }
.wb-copy.copied { color: var(--up); }
.wb-analyse { font: 600 10px/1 var(--mono); color: var(--accent); text-decoration: none; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; letter-spacing: .03em; }
.wb-analyse:hover { background: var(--accent-soft); border-color: var(--accent); }
.wb-mute { color: var(--tm); }
.wb-state.recv { color: var(--warn); border-color: rgba(245,158,12,.4); }
.wb-xfer, .hld-xfer { color: var(--warn); cursor: help; font-weight: 700; }
.wb-was { color: var(--tm); text-decoration: line-through; font-size: 10px; }
.wb-trace { color: var(--warn); cursor: pointer; font-weight: 700; }
/* provenance source popover */
.wbt { position: fixed; z-index: 60; box-sizing: border-box; min-width: 240px; max-width: 340px; background: #141826; border: 1px solid var(--border); border-radius: 10px; padding: 10px; font: 500 11px/1.4 var(--sans); box-shadow: 0 8px 24px rgba(0,0,0,.5); display: none; }
.wbt.on { display: flex; flex-direction: column; } /* header pinned, list scrolls (max-height set in JS) */
.wbt-h { color: var(--text); margin-bottom: 6px; flex: 0 0 auto; }
.wbt-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* min-height:0 = flexbox scroll fix */
.wbt-h b { color: var(--up); }
.wbt-h .wbt-was { color: var(--tm); text-decoration: line-through; margin-left: 4px; }
.wbt-h .wbt-conf { color: var(--text-mute); float: right; }
.wbt-src { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 8px; align-items: center; padding: 3px 0; }
.wbt-role { color: var(--text-mute); text-align: center; }
.wbt-a { color: var(--accent); text-decoration: none; }
.wbt-amt { color: var(--text-mute); }
.wbt-cost { color: var(--up); }
.wbt-empty { color: var(--text-mute); padding: 4px 0; }
/* T0.2b-2b recursive provenance tree: indented role-chip cards */
.wbt-fn { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 11px; border-left: 2px solid var(--border-soft); }
.wbt-chip { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 8px; background: var(--chip-bg, #2a2a2a); color: var(--text-mute); letter-spacing: .03em; white-space: nowrap; }
.wbt-r-pool .wbt-chip { background: #12233f; color: #7db0ff; }
.wbt-r-curve .wbt-chip, .wbt-r-buyer .wbt-chip { background: #04342c; color: #5dcaa5; }
.wbt-r-deployer .wbt-chip { background: #3d1414; color: #e59a9a; }
.wbt-r-bridge .wbt-chip { background: #3d2c08; color: #e0a83b; }
.wbt-r-mint .wbt-chip { background: #222; color: #999; }
.wbt-fn .wbt-a[data-pick] { cursor: pointer; text-decoration: underline dotted; }
.wbt-fn .wbt-amt { margin-left: auto; }
/* T1.5 per-holder structural label chip (deployer/curve/bridge) — same palette as the tree chips */
.hld-lbl { font-size: 9px; font-weight: 600; padding: 0 4px; border-radius: 7px; letter-spacing: .03em; vertical-align: middle; }
.hld-l-deployer { background: #3d1414; color: #e59a9a; }
.hld-l-curve { background: #04342c; color: #5dcaa5; }
.hld-l-bridge { background: #3d2c08; color: #e0a83b; }
/* "+N" fold badge on a bubble cluster's last disc (layoutLollipop density cap): how many trades
are folded into this cluster beyond the drawn coins. pointer-events off — the DISC owns hover. */
.cb-more { position: absolute; top: -6px; right: -8px; font: 500 8px var(--mono); background: #262b32; color: #dbe2ea; border: 1px solid #4a5568; border-radius: 7px; padding: 1px 3px; pointer-events: none; z-index: 2; }
/* CONTRACT: neutral grey on purpose — it states a fact (this address has its own CREATE trace),
never a reassurance. Green/teal would read as "locked, safe", which the label does NOT prove. */
.hld-l-contract { background: #24262b; color: #9aa3af; }
/* Robinscan out-link in the Holders wallet cell: dim until the row is hovered, so it never
competes with the address itself; the row stays clickable everywhere except the icon. */
.hld-rs { opacity: 0; transition: opacity .12s; }
.hld-row:hover .hld-rs { opacity: 1; }
.hld-rs:hover { color: var(--accent); }
/* T1.8 per-holder sniper badge — violet, distinct from DEV/CURVE/KÖPRÜ */
.hld-l-sniper { background: #2a1a4d; color: #b79cf0; }
/* T1.8 sniper drill-down: the subtitle "N snipers" / "✕ tümü" is a clickable filter chip */
.hld-fchip { cursor: pointer; border-bottom: 1px dotted currentColor; }
.hld-fchip:hover { color: #b79cf0; }
.hld-fchip.active { color: #b79cf0; font-weight: 600; }
/* ══════════════════════════════════════════════════════════════════════════════
Quiver Labs — terminal redesign layout (Faz 0)
3-column trading-terminal shell adapted from design/terminal-pair.mockup.html.
Container/chrome classes only — the JS-rendered content (tape, pools, odometer,
token-info, search) keeps its original classes above, recolored via :root.
Icons: static … placeholders hydrated by an inline
script; `.i svg{display:block}` is SCOPED so it never touches the tape's inline
TK_I icons. ══════════════════════════════════════════════════════════════════ */
.i { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: -2px; }
.i svg { display: block; }
.dim { color: var(--ts); } .mute { color: var(--tm); }
.pos { color: var(--teal); } .neg { color: var(--red); }
sub { font-size: .72em; }
/* app shell — overrides the original 4-row grid above. MUST also redefine grid-template-areas:
the `"header" "tokenbar" "main" "status"` template is inherited from the first .app rule, and the
footer (.status) is explicitly grid-area:status. The area map MUST have exactly as many rows as
grid-template-rows or "status" resolves to the wrong (1fr) row and the footer eats the middle.
Rows: nav / favorites strip (top, replaced the trending ticker) / stage / status. */
.app { height: 100vh; display: grid;
grid-template-rows: 54px auto 1fr 42px;
grid-template-areas: "header" "favs" "main" "status"; }
/* favorites strip: the top strip — FRAMELESS chips (avatar · SYMBOL · MC · ×), same visual DNA as
the old trending ticker (.chip): no pill, no border, no background. Live-refreshed; scrolls sideways. */
.fav-strip { display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: 38px; background: var(--bg); border-bottom: 1px solid var(--hair); overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.fav-strip::-webkit-scrollbar { height: 0; }
.fav-lbl { flex: none; color: var(--lime); font-size: 13px; line-height: 1; }
.fav-empty { flex: none; color: var(--tm); font-size: 12px; }
.fav-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-size: 12.5px; cursor: pointer; }
.fav-chip:hover .fav-sym { color: var(--lime); }
.fav-av { flex: none; width: 16px; height: 16px; border-radius: 50%; overflow: hidden; background: #000; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.14); box-sizing: border-box; font: 700 8px/1 var(--sans); color: var(--text-dim); }
.fav-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fav-sym { font-weight: 600; color: var(--text); }
.fav-mc { font: 500 11px/1 var(--mono); color: var(--ts); }
/* × is hidden until you hover (or keyboard-focus) the chip — reserves its slot via opacity so
the strip never shifts. */
/* × takes NO space until hover (width 0 + a −6px pull cancels the flex gap → chips sit tight together),
then slides in on hover/focus. */
.fav-x { flex: none; width: 0; height: 15px; margin-left: -6px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; color: var(--tm); font: 400 13px/1 var(--sans); cursor: pointer; opacity: 0; transition: width .12s ease, margin-left .12s ease, opacity .12s ease; }
.fav-chip:hover .fav-x, .fav-chip:focus-within .fav-x { width: 15px; margin-left: -1px; opacity: 1; }
.fav-x:hover { color: var(--down); background: rgba(242,54,69,.14); }
.stage { position: relative; min-height: 0; display: flex; overflow: hidden; }
.stage > .body, .stage > .pickwrap { flex: 1; min-height: 0; }
/* C1 — nav */
.nav { display: flex; align-items: center; gap: 18px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--hair); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand .mk { width: 34px; height: 34px; border-radius: 9px; background: var(--lime); overflow: hidden; display: flex; flex: none; }
.brand .mk img { width: 90%; height: 90%; object-fit: contain; margin: auto; }
.brand i.acc { font-style: normal; color: var(--lime); }
.nmenu { display: flex; gap: 2px; }
.nmenu a { color: var(--ts); font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 7px; text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.nmenu a.on, .nmenu a:hover { color: var(--text); background: var(--card); }
.nav .grow { flex: 1; }
.nav .search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; width: 246px; background: var(--raised); border: 1px solid var(--border); border-radius: 9px; color: var(--ts); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.nav .search:hover { border-color: var(--accent-soft); color: var(--text-dim); }
.nav .search kbd { margin-left: auto; background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font: 600 10px/1.4 var(--mono); color: var(--ts); }
.nav .net-chip { flex: none; }
.nav .wchip { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; background: var(--raised); border: 1px solid var(--border); border-radius: 9px; color: var(--ts); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* ── web login: logged-in header chip + click-to-open live wallet dropdown ── */
.nav .wchip.on { position: relative; border-color: var(--teal); cursor: pointer; }
.wc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.wc-name { color: var(--text); font-weight: 700; }
.wc-count { color: var(--ts); font-weight: 600; }
.wc-caret { color: var(--ts); font-size: 10px; margin-left: 1px; }
/* Same unbounded wallet list as .o-wdrop, rendered in the header chip — same fix. Top padding
moves onto .wcap so the sticky caption can sit flush at scroll 0 with nothing peeking above it. */
.wc-drop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; background: var(--raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.5); padding: 0 6px; display: none; z-index: 60; cursor: default;
max-height: clamp(240px, 62vh, 480px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: #2b3242 transparent; }
.wc-drop::-webkit-scrollbar { width: 9px; }
.wc-drop::-webkit-scrollbar-track { background: transparent; }
.wc-drop::-webkit-scrollbar-thumb { background: #2b3242; border-radius: 5px; border: 2px solid var(--raised); }
.wc-drop::-webkit-scrollbar-thumb:hover { background: #3d4658; }
/* Caption and footer stay put while the rows scroll under them — "Add wallet in Telegram" is the
escape hatch for a user who has too many wallets to scroll, so it must never scroll away.
The container carries NO vertical padding on purpose: a sticky footer pins to the content-box
edge, so a padding-bottom leaves a strip underneath it that rows scroll through — a half-row of
W12 was visibly peeking below the pinned footer. The two sticky bars own that spacing instead. */
.wc-drop .wcap { position: sticky; top: 0; z-index: 2; background: var(--raised); padding-top: 14px; }
.wc-drop .wfoot { position: sticky; bottom: 0; z-index: 2; background: var(--raised); padding-bottom: 6px; }
.wc-drop.open { display: block; }
.wc-out { display: block; text-align: center; padding: 9px; margin-top: 4px; border-top: 1px solid var(--border); color: var(--ts); font-weight: 600; cursor: pointer; }
.wc-out:hover { color: var(--red); }
.wt-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; cursor: pointer; border-radius: 6px; }
.wt-row:hover { background: rgba(255,255,255,.03); }
.wc-drop .wt-row:last-of-type { border-bottom: none; }
.wt-cap { padding: 3px 10px 6px; color: var(--ts); font-size: 10.5px; letter-spacing: .02em; }
.wt-name { color: var(--text); font-weight: 600; white-space: nowrap; }
.wt-addr { color: var(--ts); white-space: nowrap; font-size: 11px; }
.wt-bal { margin-left: auto; padding-left: 12px; color: var(--text); font-weight: 700; white-space: nowrap; }
.wt-copy { display: inline-flex; align-items: center; flex: none; padding: 3px; margin-left: -3px; color: var(--text-mute); background: none; border: 0; border-radius: 4px; cursor: pointer; }
.wt-copy:hover { color: var(--text); background: var(--accent-soft); }
.wt-copy.copied { color: var(--up); }
.wt-cb { appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border-radius: 5px; border: 1.5px solid #3a3d4e; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .12s, border-color .12s; }
.wt-cb:checked { background: var(--teal); border-color: var(--teal); }
.wt-cb:checked::after { content: ""; width: 4px; height: 8px; border: solid #06231e; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.wt-cb:disabled { opacity: .5; cursor: default; }
.wt-err { animation: wtErr 1.4s ease; }
@keyframes wtErr { 0%, 100% { background: transparent; } 22% { background: rgba(240,80,80,.16); } }
.wt-empty { padding: 16px 12px; color: var(--ts); font-size: 12.5px; line-height: 1.5; text-align: center; }
.wc-item { display: block; text-align: center; padding: 9px; margin-top: 4px; border-top: 1px solid var(--border); color: var(--text); font-weight: 600; cursor: pointer; }
.wc-item:hover { color: var(--teal); }
/* ── account bar redesign: balance chip (wallets) + avatar (account) ── */
.acctbar { display: flex; align-items: center; gap: 10px; }
.connect-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; color: var(--text-dim); font-weight: 600; font-size: 13px; cursor: pointer; }
.connect-btn:hover { border-color: var(--surface-3); color: var(--text); }
.balchip { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px 7px 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.balchip:hover, .balchip.on { border-color: var(--surface-3); background: var(--surface-3); }
.balchip .bc-eth { flex: none; }
.balchip .amt { font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.balchip .cur { font-size: 11.5px; color: var(--text-mute); font-weight: 600; }
.balchip .cv { color: var(--text-mute); transition: transform .18s; }
.balchip.on .cv { transform: rotate(180deg); }
.acc-av { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-dim); cursor: pointer; transition: border-color .15s, background .15s; }
.acc-av:hover, .acc-av.on { border-color: var(--surface-3); background: var(--surface-3); color: var(--text); }
/* wallets dropdown internals (reuses .wc-drop chrome) */
.wcap { display: flex; align-items: center; padding: 8px 10px 7px; font-size: 11px; color: var(--text-mute); }
.wcap .tot { margin-left: auto; font-family: var(--mono); color: var(--text-dim); font-weight: 600; }
.wfoot { margin-top: 5px; border-top: 1px solid var(--border-soft); padding-top: 4px; }
/* account dropdown */
.acc-drop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.5); padding: 6px; display: none; z-index: 60; cursor: default; }
.acc-drop.open { display: block; }
.acc-head { padding: 11px 11px 10px; }
.acc-k { font-size: 11px; color: var(--text-mute); margin-bottom: 3px; }
.acc-v { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.acc-v .d { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.acc-divide { height: 1px; background: var(--border-soft); margin: 3px 5px; }
.acc-item { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 8px; color: var(--text-dim); font-size: 13.5px; cursor: pointer; text-decoration: none; }
.acc-item:hover { background: var(--surface-2); color: var(--text); }
.acc-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acc-item.out { color: var(--text-mute); }
.acc-item.out:hover { color: var(--red); background: var(--down-bg); }
/* page-level toast (top-center) — buy-list add/remove confirmation */
.page-toast { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -12px); z-index: 200; display: flex; align-items: center; gap: 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); padding: 10px 15px; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.page-toast.show { opacity: 1; transform: translate(-50%, 0); }
.page-toast .pt-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #06231e; flex: none; }
.page-toast.rm .pt-ic { background: var(--surface-4); color: var(--text-dim); }
.page-toast.err .pt-ic { background: var(--red); color: #fff; }
.page-toast .pt-ic svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.page-toast .pt-sub { color: var(--text-mute); font-weight: 500; font-family: var(--mono); font-size: 12px; }
/* ── own-fill STRIP: one slim line per trade THIS user fired, top-centre ──────────────────────────
Sits at the page-toast's own slot (top: 18px) because that is where "Sent — BOW" used to appear
and this replaces it outright. Above #wtnDeck (z 4000) on purpose: the deck is where the wallets
you FOLLOW report in, and your own trade must never be mistaken for one of theirs — different
shape, different weight, different altitude. */
#ftStack { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 4100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.ft-strip { pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: min(92vw, 560px); background: var(--surface-3); border: 1px solid var(--border); border-left: 3px solid var(--text-mute); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); padding: 8px 12px; font-size: 13px; color: var(--text-dim); white-space: nowrap; animation: ftIn .18s ease both; }
@keyframes ftIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.ft-strip.ok { border-left-color: var(--teal); }
.ft-strip.bad { border-left-color: var(--red); }
/* Status mark. `wait` is a bare ring with one bright arc, spun — no glyph, because there is no
verdict yet and any symbol in that slot would be claiming one. */
.ft-strip .ft-ic { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; flex: none; }
.ft-strip.wait .ft-ic { border: 2px solid var(--surface-4); border-top-color: var(--teal); animation: ftSpin .7s linear infinite; }
.ft-strip.ok .ft-ic { background: var(--teal); color: #06231e; }
.ft-strip.bad .ft-ic { background: var(--red); color: #fff; }
.ft-strip .ft-ic svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ftSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.ft-strip { animation: none; }
.ft-strip.wait .ft-ic { animation-duration: 2.4s; }
}
/* The line reads: what you did (bold) · what you put in (dim) → what you got (bright). */
.ft-strip .ft-hd { color: var(--text); font-weight: 700; flex: none; }
.ft-strip .ft-in { color: var(--text-mute); font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.ft-strip .ft-arr { color: var(--text-mute); flex: none; }
.ft-strip .ft-out { color: var(--teal); font-weight: 600; font-family: var(--mono); font-size: 12px; flex: none; }
.ft-strip.bad .ft-out { color: var(--red); }
/* "pending" is a state, not an amount — it must not wear the teal that means "this is your fill". */
.ft-strip .ft-eth { vertical-align: -1px; }
.ft-strip .ft-sp { flex: 1 1 auto; min-width: 4px; }
.ft-strip .ft-tx, .ft-strip .ft-x { flex: none; color: var(--text-mute); text-decoration: none; cursor: pointer; line-height: 1; padding: 2px 3px; border-radius: 5px; }
.ft-strip .ft-tx { font-size: 13px; }
.ft-strip .ft-x { font-size: 11px; }
.ft-strip .ft-tx:hover, .ft-strip .ft-x:hover { color: var(--text); background: var(--surface-4); }
/* ── Settings modal — professional redesign (Trading tab) ── */
.st-overlay { position: fixed; inset: 0; background: rgba(3,6,11,.74); backdrop-filter: blur(3px); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 34px 16px; overflow: auto; }
.st-overlay[hidden] { display: none; }
.st-card { position: relative; width: 100%; max-width: 900px; background: #0d131c; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.st-top { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; }
.st-title { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.st-title svg { width: 19px; height: 19px; color: var(--teal); }
.st-x { cursor: pointer; color: var(--ts); padding: 6px; border-radius: 8px; display: flex; }
.st-x svg { width: 17px; height: 17px; }
.st-x:hover { background: var(--raised); color: var(--text); }
/* tab bar — icon + underline (no boxed chips) */
.st-tabs { display: flex; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tab { display: flex; align-items: center; gap: 8px; padding: 14px 2px; font-size: 13.5px; font-weight: 500; color: var(--ts); cursor: pointer; white-space: nowrap; position: relative; }
.st-tab svg { width: 16px; height: 16px; opacity: .75; }
.st-tab:not(.on):hover { color: var(--text); }
.st-tab.on { color: var(--text); }
.st-tab.on svg { opacity: 1; color: var(--teal); }
.st-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal); border-radius: 2px; }
.st-body { padding: 20px 22px 26px; max-height: 74vh; overflow: auto; }
/* grouped section cards */
.st-group { background: #0b111a; border: 1px solid #141c28; border-radius: 14px; padding: 4px 16px 12px; margin-bottom: 16px; }
.st-gh { display: flex; align-items: center; gap: 8px; padding: 13px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ts); }
.st-gh svg { width: 14px; height: 14px; color: var(--dim, #5b6478); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #141c28; }
.st-row:first-of-type, .st-gh + .st-row { border-top: 0; }
.st-lbl { min-width: 0; }
.st-l { font-size: 14.5px; font-weight: 500; }
.st-d { font-size: 12.5px; color: var(--ts); margin-top: 2px; }
.st-l2 { font-size: 12px; color: var(--ts); margin-bottom: 7px; }
.st-in { display: flex; align-items: center; gap: 7px; background: #080d15; border: 1px solid #26313f; border-radius: 10px; padding: 0 13px; height: 40px; min-width: 120px; }
.st-in input { background: none; border: none; outline: none; color: var(--text); font: 500 14px/1 var(--mono, monospace); font-variant-numeric: tabular-nums; width: 100%; text-align: right; }
.st-in input::-webkit-outer-spin-button, .st-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-in span { color: var(--dim, #5b6478); font-size: 12px; }
.st-in.gwei { margin-top: 9px; justify-content: space-between; border-style: dashed; }
.st-in.gwei .st-l2 { margin: 0; }
.st-in.gwei.on { border-style: solid; border-color: var(--teal); }
.st-in.gwei.on .st-l2 { color: var(--teal); }
/* priority pills */
.st-prio-wrap { padding: 14px 0; border-top: 1px solid #141c28; }
.st-ph { margin-bottom: 11px; }
.st-prio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.st-prio a { text-align: center; padding: 11px; border-radius: 11px; border: 1px solid #26313f; background: #080d15; color: var(--ts); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.st-prio a:hover { border-color: #33404f; }
.st-prio a.on { border-color: rgba(84,230,184,.42); color: var(--teal); background: rgba(84,230,184,.08); }
/* network / trade-with pills */
.st-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; padding: 6px 0 2px; }
.st-pill { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 1px solid #26313f; border-radius: 11px; background: #080d15; color: var(--sub, #aeb6cc); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.st-pill svg { width: 17px; height: 17px; }
.st-pill:hover { border-color: #33404f; }
.st-pill.on { border-color: rgba(84,230,184,.42); color: var(--teal); background: rgba(84,230,184,.08); }
.st-pill.st-soon2 { color: var(--dim, #5b6478); cursor: default; opacity: .55; }
.st-pill.st-soon2:hover { border-color: #26313f; }
/* toggle */
.st-tog { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; }
.st-tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.st-tog span { position: absolute; inset: 0; background: #26313f; border-radius: 20px; transition: .15s; }
.st-tog span::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.st-tog input:checked + span { background: var(--teal); }
.st-tog input:checked + span::before { transform: translateX(18px); }
.st-presets { display: flex; flex-wrap: wrap; gap: 11px; padding: 8px 0 4px; }
/* dynamic modal preset cell (1–5): each holds a value input + corner delete ×; a dashed + tile adds */
.st-pcell { position: relative; flex: 1 1 calc(25% - 9px); min-width: 92px; }
.st-pcell .st-in { min-width: 0; }
.st-in.bad { border-color: #d05a54; }
.st-in.bad input { color: #f0a6a1; }
.st-pdel { position: absolute; top: 19px; right: -5px; width: 16px; height: 16px; padding: 0; display: grid; place-items: center; background: #c0554f; color: #fff; border: 0; border-radius: 50%; font: 700 12px/1 var(--sans); cursor: pointer; z-index: 2; }
.st-pdel:hover { background: #d6635c; }
.st-padd { width: 100%; height: 40px; background: #080d15; border: 1px dashed #26313f; border-radius: 10px; color: var(--ts); font-size: 20px; line-height: 1; cursor: pointer; }
.st-padd:hover { color: var(--text); border-color: #3a4658; }
/* floating save toast — pinned to the modal card, always visible regardless of scroll */
.st-saved { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 10px); background: #0e1a17; border: 1px solid rgba(84,230,184,.42); color: var(--teal); font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: 11px; box-shadow: 0 12px 34px rgba(0,0,0,.55); white-space: nowrap; max-width: 88%; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 6; }
.st-saved.show { opacity: 1; transform: translate(-50%, 0); }
.st-saved .o { color: var(--ts); }
.st-saved .n { color: var(--text); }
@media (max-width: 620px) { .st-prio, .st-presets, .st-pills { grid-template-columns: repeat(2, 1fr); } }
.nav .pfp { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #3a3f52, #1a1c26); border: 1px solid var(--border); flex: none; }
/* C2 — ticker (placeholder: no global feed backend yet) */
.ticker { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--hair); overflow: hidden; }
.tk-ctrl { display: flex; gap: 9px; color: var(--tm); padding-right: 10px; border-right: 1px solid var(--hair); }
.chips { display: flex; gap: 14px; align-items: center; overflow: hidden; }
.chip { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; cursor: pointer; }
.chip:hover b { color: var(--lime); }
.chip .ci { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* token logo in a direction-colored ring; bg = ring color so a dropped ![]()
shows a plain dot */
.chip .cav { width: 16px; height: 16px; border-radius: 50%; flex: none; overflow: hidden; display: flex; border: 1.5px solid; box-sizing: border-box; }
.chip .cav img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chip b { font-weight: 600; color: var(--text); }
.chip span { font: 500 11px/1 var(--mono); color: var(--ts); }
/* body grid — wallet tracker | center | right */
.body { display: grid; grid-template-columns: var(--col-l, 296px) 6px 1fr 322px; min-height: 0; background: var(--bg); } /* right column fixed (not resizable) */
/* Wallet Tracker collapse: the panel-header ✕ or the footer "Tracker" chip hides the left column so
the center (chart + trades) fills leftward. Zeroing the col-l + split-l TRACKS (not --col-l itself)
means reopening restores the exact dragged width for free. The transition is killed mid-drag —
--col-l changes live then, and animating every step would lag the splitter. */
.body { transition: grid-template-columns .16s ease; }
body.split-dragging .body { transition: none; }
.body.wt-collapsed { grid-template-columns: 0 0 1fr 322px; }
.body.wt-collapsed > .col, .body.wt-collapsed > .split-l { pointer-events: none; }
.body.wt-collapsed > .split-l::after { display: none; }
@media (prefers-reduced-motion: reduce) { .body { transition: none; } }
.col { background: var(--bg); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.center { display: grid; grid-template-rows: 1fr 6px var(--chart-bot, 336px); background: var(--bg); min-height: 0; }
/* ── resizable splitters — drag chart↕trades + left/right columns; sizes persist per-user (localStorage) ── */
.split-l, .split-r { position: relative; cursor: col-resize; background: var(--bg); z-index: 3; touch-action: none; }
.split-l::after, .split-r::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: var(--hair); transition: background .12s, width .12s; }
.split-l:hover::after, .split-r:hover::after, .split-l.dragging::after, .split-r.dragging::after { background: var(--accent); width: 2px; }
.splitter { position: relative; cursor: row-resize; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 3; touch-action: none; }
.splitter::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 1px; background: var(--hair); transition: background .12s, height .12s; }
.splitter .grip { width: 38px; height: 4px; border-radius: 3px; background: #3a3d4e; opacity: .6; z-index: 1; transition: background .12s, opacity .12s; }
.splitter:hover .grip, .splitter.dragging .grip { opacity: 1; background: var(--accent); }
.splitter:hover::after, .splitter.dragging::after { background: var(--accent); height: 2px; }
body.split-dragging { user-select: none; cursor: col-resize; }
body.split-dragging.sd-v { cursor: row-resize; }
.right { display: grid; grid-template-rows: auto 1fr; gap: 1px; background: var(--hair); min-height: 0; border-left: 1px solid var(--hair); } /* static divider vs the center (right col is not resizable) */
.pane { background: var(--bg); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ph { display: flex; align-items: center; gap: 9px; padding: 11px 13px; flex: none; }
.ph .h { font-size: 15px; font-weight: 600; }
.ph .hnd { color: var(--tm); cursor: grab; }
.ph .x { margin-left: auto; color: var(--tm); }
.tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--hair); flex: none; }
.tabs a { padding: 9px 11px; font-size: 13px; color: var(--ts); position: relative; white-space: nowrap; }
.tabs a.on { color: var(--text); }
.tabs a.on:after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--lime); border-radius: 2px; }
.ph-badge { display: inline-flex; align-items: center; gap: 5px; font: 600 9px/1 var(--mono); color: var(--amber); background: rgba(245,158,12,.1); border: 1px solid rgba(245,158,12,.3); padding: 3px 6px; border-radius: 5px; letter-spacing: .04em; white-space: nowrap; }
.pane-ph { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--tm); font-size: 12px; padding: 24px 16px; line-height: 1.5; }
/* C3 — wallet tracker (placeholder chrome) */
.wt-tools { display: flex; align-items: center; gap: 12px; padding: 9px 13px; color: var(--ts); flex: none; }
.wt-tools .bdg { margin-left: auto; position: relative; color: var(--ts); }
.wt-tools .i { cursor: pointer; }
.wt-tools .i.on { color: var(--teal); }
.wt-tools .wt-globe { margin-left: auto; position: relative; color: var(--teal); display: inline-flex; }
.wt-badge { position: absolute; top: -6px; right: -7px; background: #7b5cff; color: #fff; font: 700 9px/1 var(--sans); min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
/* C3 — Wallet Tracker live-trades feed. ALL selectors scoped under #wtPane / #wtLive: the header wallet
chip dropdown (.wc-drop) ALSO defines a global .wt-row, so scoping (higher specificity) keeps the two
from colliding without touching the other component's classes. */
#wtLive { width: 7px; height: 7px; border-radius: 50%; background: #3a3d4e; margin-left: 6px; flex: none; }
#wtLive.on { background: var(--up); box-shadow: 0 0 5px var(--up); }
#wtPane { flex: 1; overflow-y: auto; min-height: 0; }
#wtPane .wt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--tm); font-size: 12px; padding: 24px 16px; line-height: 1.6; }
#wtPane .wt-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--hair); border-left: 2px solid transparent; border-radius: 0; cursor: pointer; } /* center so the avatar + emoji + value sit balanced next to a 1- or 2-line name */
#wtPane .wt-row.buy { border-left-color: rgba(46,189,133,.4); }
#wtPane .wt-row.sell { border-left-color: rgba(246,70,93,.4); }
#wtPane .wt-row:hover { background: var(--raised); }
/* Live prepend: the new row slides in from the top; buy/sell tints its flash (reuses the row's .buy/.sell). */
#wtPane .wt-row.new { animation: wtSlideIn .34s cubic-bezier(.22,1,.36,1); }
#wtPane .wt-row.new.buy { animation: wtSlideIn .34s cubic-bezier(.22,1,.36,1), wtFlashBuy 1s ease-out; }
#wtPane .wt-row.new.sell { animation: wtSlideIn .34s cubic-bezier(.22,1,.36,1), wtFlashSell 1s ease-out; }
@keyframes wtSlideIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes wtFlashBuy { from { background: rgba(38,166,154,.14); } to { background: transparent; } }
@keyframes wtFlashSell { from { background: rgba(242,54,69,.13); } to { background: transparent; } }
/* First-paint skeleton (shimmer): same silhouette as a real row → no layout jump on reveal. */
#wtPane .wt-skrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; border-bottom: 1px solid var(--hair); }
#wtPane .wt-sk { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 220% 100%; border-radius: 5px; animation: wtSk 1.25s ease-in-out infinite; }
#wtPane .wt-sk-av { width: 38px; height: 38px; border-radius: 9px; flex: none; }
#wtPane .wt-sk-col { flex: 1; }
#wtPane .wt-sk-l { height: 9px; }
#wtPane .wt-sk-l + .wt-sk-l { margin-top: 7px; height: 8px; }
#wtPane .wt-sk-rt { width: 44px; flex: none; }
@keyframes wtSk { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) {
#wtPane .wt-sk { animation: none; }
#wtPane .wt-row.new, #wtPane .wt-row.new.buy, #wtPane .wt-row.new.sell { animation: none; }
}
#wtPane .wt-av { width: 38px; height: 38px; border-radius: 9px; position: relative; flex: none; display: flex; align-items: center; justify-content: center; }
#wtPane .wt-av img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
#wtPane .wt-ini { font: 700 13px var(--sans); color: rgba(255,255,255,.92); }
#wtPane .wt-mid { flex: 1; min-width: 0; }
#wtPane .wt-l1 { display: flex; align-items: flex-start; gap: 6px; }
#wtPane .wt-emo { font-size: 15px; line-height: 1; flex: none; align-self: center; } /* its own element between avatar and name, vertically centered */
#wtPane .wt-nm { font: 600 12px var(--sans); color: var(--text); flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.28; } /* long names wrap to a MAX of 2 lines (short names stay 1 line → feed not bloated); the action pins top-right so BOTH the full name and the full action (First Buy / Sell All…) show */
#wtPane .wt-nm:hover { color: var(--lime); }
#wtPane .wt-act { font-size: 11.5px; font-weight: 500; flex: none; margin-left: auto; line-height: 1.28; white-space: nowrap; } /* full action pinned top-right (no truncation); the wrapping name flows below it */
#wtPane .wt-act.g { color: var(--up); }
#wtPane .wt-act.g2 { color: var(--up); opacity: .6; font-weight: 450; } /* "Bought More" — a buy, but subordinate to the standout "First Buy" */
#wtPane .wt-act.r { color: var(--down); }
#wtPane .wt-l2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; font: 12px var(--mono); }
#wtPane .wt-eth { flex: none; }
#wtPane .wt-eth.g { color: var(--up); }
#wtPane .wt-eth.r { color: var(--down); }
#wtPane .wt-sym { color: var(--ts); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
#wtPane .wt-tage { background: #20232b; color: var(--tm); font-size: 10px; padding: 1px 6px; border-radius: 9px; flex: none; }
#wtPane .wt-rt { text-align: right; flex: none; }
#wtPane .wt-usd { font: 12.5px var(--mono); color: var(--text); }
#wtPane .wt-age { font: 11.5px var(--mono); color: var(--tm); margin-top: 3px; }
/* Wallet Tracker notification DECK — a tracked wallet's live trade pops here (PER-USER). Newest in FRONT,
older peek BEHIND (stacked deck, not a vertical list); a count + Clear all; each auto-dismisses in 10s
or on ×. */
/* Wallet Tracker notification deck (#wtnDeck / .wtn-*) MOVED to quiver-nav.css — it is a global toast
terminal.js renders on any page (explorer/pulse included), and terminal.css isn't loaded there.
quiver-nav.css is, on every page with the nav, so the deck now lives there as the single source. */
#wtPane .wt-wrow { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--hair); cursor: pointer; }
#wtPane .wt-wrow:hover { background: var(--raised); }
#wtPane .wt-wrow .wt-nm { max-width: none; }
#wtPane .wt-wrow .wt-nm:hover { color: var(--lime); }
#wtPane .wt-waddr { margin-left: auto; font: 11px var(--mono); color: var(--tm); flex: none; }
/* Hover-to-untrack, same mechanic as .fav-x: zero width until the row is hovered/focused, so an idle row
looks untouched and a mis-aimed click cannot untrack. The negative margin cancels .wt-wrow's 8px gap
while collapsed. Revealing it slides .wt-waddr (margin-left:auto) 24px left over .12s — that is the
.fav-x trade-off, taken deliberately: reserving the gutter permanently would indent every address
instead. :focus-within keeps it reachable by keyboard. */
#wtPane .wt-untrack { flex: none; width: 0; height: 16px; margin-left: -8px; padding: 0; border: 0;
background: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
color: var(--tm); font: 400 14px/1 var(--sans); cursor: pointer; opacity: 0;
transition: width .12s ease, margin-left .12s ease, opacity .12s ease; }
#wtPane .wt-wrow:hover .wt-untrack, #wtPane .wt-wrow:focus-within .wt-untrack { width: 16px; margin-left: 0; opacity: 1; }
#wtPane .wt-untrack:hover { color: var(--down); background: rgba(242,54,69,.14); }
/* Monitor tab — the paper-trade system live: open positions + entry/exit feed. Rows are real
anchors (deep-link ?mark=signal) so middle-click/new-tab work; the pane click handler ignores
them (no data-wallet). The tab earns a lime dot while events arrive unseen. */
#wtPane .mon-sec { padding: 8px 12px 4px; font: 600 10px/1 var(--sans); letter-spacing: .08em;
color: var(--tm); text-transform: uppercase; }
#wtPane .wt-mrow { display: flex; align-items: center; gap: 7px; padding: 8px 12px;
border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--tx); min-width: 0; }
#wtPane .wt-mrow:hover { background: var(--raised); }
#wtPane .mon-tag { flex: none; font: 700 9.5px/1 var(--mono); letter-spacing: .05em;
padding: 3px 6px; border-radius: 6px; }
#wtPane .mon-tag.g { color: var(--up); background: rgba(26,192,140,.13); }
#wtPane .mon-tag.r { color: var(--down); background: rgba(242,54,69,.13); }
#wtPane .mon-tag.o { color: var(--gold, #e7b53b); background: rgba(231,181,59,.13); }
#wtPane .mon-sym { flex: none; font: 600 12px/1 var(--sans); max-width: 72px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
#wtPane .mon-det { flex: 1; min-width: 0; font: 11px/1.2 var(--sans); color: var(--ts);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wtPane .mon-det b.g { color: var(--up); } #wtPane .mon-det b.r { color: var(--down); }
#wtPane .mon-age { flex: none; font: 10.5px var(--mono); color: var(--tm); }
#wtTabs a.dot { position: relative; }
#wtTabs a.dot::after { content: ''; position: absolute; top: 4px; right: -2px; width: 6px; height: 6px;
border-radius: 50%; background: var(--lime); }
/* Notification-sound popup (Wallet Tracker · Live Trades → 🔊). Teal accent (the tracker's own), a
fixed card anchored under the toolbar 🔊: sound chips + volume + Test + enable toggle. Per-user. */
.ns-pop { position: fixed; z-index: 4200; background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); padding: 14px;
--nsac: #34c8a4; --nsac-dim: rgba(52,200,164,.14); --nsac-line: rgba(52,200,164,.5); }
.ns-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.ns-hd .ns-spk { color: var(--nsac); display: flex; } .ns-hd .ns-spk svg { width: 17px; height: 17px; }
.ns-hd b { font: 600 14px var(--font); color: var(--text); }
.ns-hd .ns-grow { flex: 1; }
.ns-test { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font); color: var(--nsac);
background: var(--nsac-dim); border: 1px solid var(--nsac-line); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.ns-test svg { width: 11px; height: 11px; } .ns-test:hover { filter: brightness(1.15); } .ns-test:active { transform: translateY(1px); }
.ns-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.ns-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 10px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-mute); cursor: pointer;
font: 500 12.5px var(--font); transition: background .12s, border-color .12s, color .12s, transform .06s; }
.ns-chip svg { width: 15px; height: 15px; flex: none; }
.ns-chip:hover { background: var(--surface-3); color: var(--text); }
.ns-chip:active { transform: translateY(1px); }
.ns-chip.sel { color: var(--nsac); background: var(--nsac-dim); border-color: var(--nsac-line); }
.ns-vol { display: flex; flex-direction: column; gap: 9px; padding-top: 13px; border-top: 1px solid var(--border-soft); }
.ns-vhd { display: flex; justify-content: space-between; align-items: baseline; }
.ns-vhd .k { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.ns-vhd .v { font: 13px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.ns-pop input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px;
background: linear-gradient(90deg, var(--nsac) var(--pct,100%), var(--surface-3) var(--pct,100%)); cursor: pointer; }
.ns-pop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
background: var(--nsac); border: 3px solid #0d2b24; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.ns-pop input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--nsac); border: 3px solid #0d2b24; }
.ns-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-soft); }
.ns-toggle .lab { font: 13px var(--font); color: var(--text); }
.ns-toggle .lab small { display: block; color: var(--text-mute); opacity: .85; font-size: 11px; margin-top: 2px; }
.ns-sw { width: 42px; height: 24px; border-radius: 99px; background: var(--nsac); position: relative; cursor: pointer; border: none; flex: none; transition: background .15s; }
.ns-sw::after { content: ""; position: absolute; top: 3px; left: 21px; width: 18px; height: 18px; border-radius: 50%; background: #08130f; transition: left .15s; }
.ns-sw.off { background: var(--surface-3); } .ns-sw.off::after { left: 3px; background: var(--text-mute); }
/* C4 — chart pane header: LEFT identity cluster + RIGHT stat strip (biai-style), sub-row below */
.chead { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 9px 14px; flex: none; border-bottom: 1px solid var(--hair); background: var(--bg); }
.chead .tid { display: flex; align-items: center; gap: 10px; }
.tk-idcol { display: flex; flex-direction: column; min-width: 0; }
.tid-l1 { display: flex; align-items: center; gap: 8px; line-height: 1.2; flex-wrap: wrap; }
.tid-l1 .sym { font-size: 16px; font-weight: 700; color: var(--text); display: inline-block; vertical-align: bottom; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tid-l1 .pair { color: var(--ts); font-size: 13px; }
.miconrow { display: flex; align-items: center; gap: 8px; color: var(--tm); margin-top: 5px; font-size: 11px; flex-wrap: wrap; }
/* right stat strip: cells split by hairline separators (Price · Liquidity · Supply · Market Cap · TF-delta) */
.chead .tk-stats { margin-left: auto; gap: 0; }
.chead .tk-stats .stat { padding: 0 13px; border-left: 1px solid var(--border-soft); }
.chead .tk-stats .stat:first-child { border-left: 0; padding-left: 0; }
.chead .tk-stats .stat.mc .v { color: var(--accent); font-weight: 700; }
.chead .tk-stats .stat .v.up { color: var(--up); }
.chead .tk-stats .stat .v.down { color: var(--down); }
/* secondary metrics row (Vol · Trades · Traders) under the identity + strip */
.ctool { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-bottom: 1px solid var(--hair); flex: none; color: var(--ts); font-size: 12.5px; }
.plotwrap { position: relative; flex: 1; min-height: 0; display: flex; }
.drawrail { width: 38px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 0; color: var(--tm); flex: none; }
.plot { flex: 1; position: relative; }
/* C6/C7 — botpane: trades (live) | social feed (placeholder) */
.botpane { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hair); min-height: 0; }
.feed { overflow: auto; flex: 1; }
.fh { display: flex; align-items: center; gap: 8px; padding: 11px 13px; font-size: 13px; color: var(--text); }
.fchips { display: flex; gap: 7px; padding: 2px 13px 10px; flex-wrap: wrap; align-items: center; }
.fchip { font-size: 11.5px; padding: 4px 10px; border-radius: 20px; color: var(--ts); background: var(--card); }
.fchip.on { background: var(--lime); color: var(--qnavy); font-weight: 600; }
/* C8 — order ticket (biai/GMGN-style reference port; trading unwired — CTA is display-only).
Soft semantic palette scoped to #orderPanel: teal #5fbfa2 up · salmon #e08a8a down · buy
olive #98a94d · sell dusty-rose #a5726b — kept off the global tokens so the rest stays lime. */
#orderPanel { display: flex; flex-direction: column; flex: none; overflow: hidden; }
#orderPanel .o-up { color: #5fbfa2; } #orderPanel .o-dn { color: #e08a8a; } #orderPanel .na { color: var(--tm); }
/* market-stats block: strip (glow cells) ⇄ per-window detail */
.o-ms { cursor: pointer; border-bottom: 1px solid var(--hair); height: 60px; overflow: hidden; }
.o-msst { display: flex; height: 60px; }
.o-msst .msc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden; cursor: pointer; }
.o-msst .msc + .msc { border-left: 1px solid var(--hair); }
.o-msst .msc.gu::before, .o-msst .msc.gd::before { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 78%; height: 26px; border-radius: 50%; filter: blur(9px); opacity: .5; }
.o-msst .msc.gu::before { background: #2f8f76; } .o-msst .msc.gd::before { background: #9a5252; }
.o-msst .msc:hover { background: rgba(255,255,255,.03); }
.o-msst .msc.sel { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px #33405a; }
.o-msst .msc .k { color: var(--ts); font-size: 11px; position: relative; }
.o-msst .msc .v { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; position: relative; }
.o-msd { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px 13px; height: 60px; box-sizing: border-box; }
.o-msd .c { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .o-msd .c.r { align-items: flex-end; }
.o-msd .dk { color: var(--ts); font-size: 9.5px; white-space: nowrap; }
.o-msd .dv { font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.o-msbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: 3px; }
.o-msbar .u { background: #4fb89b; } .o-msbar .d { background: #e8a5a0; }
/* form body */
.o-bd { padding: 13px; display: flex; flex-direction: column; gap: 11px; position: relative; }
.o-seg { display: flex; align-items: center; gap: 9px; }
.o-segp { flex: 1; display: flex; border: 1px solid var(--border); border-radius: 999px; padding: 4px; background: var(--bg); }
.o-segp .s { flex: 1; text-align: center; padding: 9px 0; border-radius: 999px; font: 500 13.5px/1 var(--sans); color: var(--ts); cursor: pointer; transition: flex-grow .2s ease, background .16s, color .16s; }
.o-segp .s.buy.on { flex-grow: 1.8; background: #98a94d; color: #14180a; font-weight: 600; }
.o-segp .s.sell.on { flex-grow: 1.8; background: #f2a8a8; color: #3a1416; font-weight: 600; }
.o-more { flex: none; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--ts); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.o-pmh { display: flex; align-items: center; }
.o-tabs { display: flex; gap: 16px; font-size: 14px; }
.o-tabs .t { color: var(--text-mute); cursor: pointer; }
.o-tabs .t.on { color: var(--text); font-weight: 500; position: relative; }
.o-tabs .t.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--text); border-radius: 1px; }
.o-wal { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.o-wal b { color: var(--text); font-weight: 500; } .o-wal .di { color: var(--tm); }
.o-amtbox { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); }
/* Four items compete for a 320px panel: label + amount + (%) + unit chip. The amount was the ONLY
one that could shrink (#oAmt's width:100% + min-width:0 vs the others' min-content floors), so it
paid the entire deficit — measured 55px for a number needing up to 72px, i.e. "202.1" rendered as
"202." (user, 2026-07-17). Rebalanced by MEASUREMENT, not taste: gap+padding+label/pct/unit fonts
tightened to buy 19px, and the amount now has a 74px floor it can never fall below. Priority order
when it still doesn't fit: the amount never clips > the unit stays whole to 8 chars (ETH, PONS,
FLATBUSH…) > a longer symbol ellipsizes (the header and the CTA both carry it in full). */
.o-amt { display: flex; align-items: center; gap: 7px; padding: 13px 11px; }
.o-amt .k { color: var(--ts); font-size: 11.5px; flex: none; } .o-amt .v { font: 500 17px/1 var(--mono); color: var(--text); }
.o-amt .pct { font-size: 11.5px; color: #c98a8f; white-space: nowrap; flex: none; } .o-amt .pct:empty { display: none; } /* sell: (% of holdings) beside the resolved qty */
.o-amt .tok { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); flex: 0 1 auto; min-width: 0; } .o-amt .tok .di { color: var(--tm); flex: none; }
.o-amt .tok svg { flex: none; } /* the Ξ glyph + chevron are fixed marks — only the symbol may give */
#oUnitLbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-pre { display: flex; border-top: 1px solid var(--border); }
/* min-height, not padding, owns the row height: the presets are the FIRE trigger (a mis-click here
costs a trade), and 11px padding round a 13px line made a 35px cell — under the 44px touch target,
which is exactly what "tıklamak zor oluyor" felt like (user, 2026-07-17). min-height also keeps the
inline-editor state (.p.pe, shorter padding + an input) the SAME height, so entering edit mode can't
jump the row. */
.o-pre .p { flex: 1; min-height: 44px; text-align: center; padding: 11px 0; font: 500 13px/1 var(--mono); color: var(--text-dim); cursor: pointer; border-left: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.o-pre .p:first-child { border-left: 0; } .o-pre .p.ed { flex: 0 0 54px; color: var(--ts); }
/* Buy preset = the fire trigger → when trading is blocked for this token it must LOOK unusable. */
.o-pre .p.dis { color: #4a5160; cursor: not-allowed; text-decoration: line-through; }
.o-sizes { display: flex; gap: 9px; }
.o-sizes .sz { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 11px 0; border-radius: 999px; font-size: 12.5px; color: var(--text-dim); background: var(--surface-2); cursor: pointer; }
.o-sizes .sz.on { background: #7d5555; color: #f2c2c2; font-weight: 500; }
#orderPanel[data-side="buy"] .o-sizes { display: none; }
.o-row { display: flex; align-items: center; }
.o-row .lab { color: var(--ts); font-size: 13px; }
.o-row .grp { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.o-row .o { font-size: 13px; color: var(--ts); cursor: pointer; }
.o-row .o.on { background: #4fb89b; color: #062018; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.o-row .val { background: var(--surface-2); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.o-mev { margin-left: auto; display: flex; align-items: center; gap: 5px; background: #4fb89b; color: #062018; font-weight: 600; font-size: 13px; padding: 6px 13px; border-radius: 999px; }
.o-cta { height: 50px; border-radius: 999px; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 2px; }
.o-cta.buy { background: var(--oacc); color: var(--oacc-ink); } .o-cta.sell { background: #a5726b; color: #2a1512; } /* buy = the panel teal (was lime) */
/* ── trade panel: interaction states (panel activation) ──
Side color is driven by the .o-bd container (.o-bd.sell), never by a control's own
static side class — so the JS-toggled state classes (.on/.ready/.empty) win. */
/* accent vars on #orderPanel (the ancestor renderOrder marks with [data-side]); defaults = buy=teal,
sell override = red. Defined at the SAME level so the [data-side="sell"] rule wins the cascade. */
#orderPanel { --oacc: #4bb69f; --oacc-ink: #04231d; --oacc2: #3b8f7d; --oacc2-ink: #eafff8; }
#orderPanel[data-side="sell"] { --oacc: #c46b64; --oacc-ink: #ffffff; --oacc2: #6d3f3b; --oacc2-ink: #f2d7d4; }
/* segment: keep the existing flex-grow animation (.s.buy.on/.s.sell.on), but drive the
colour from the container var (equal specificity, placed after → wins for bg/color). */
.o-bd .o-segp .s.on { background: var(--oacc); color: var(--oacc-ink); }
/* CTA: .ready/.empty (JS-toggled) must beat the static .o-cta.sell side colour. */
.o-cta.ready { background: var(--oacc); color: var(--oacc-ink); }
.o-cta.empty { background: #2b3d38; color: #7fb3a6; }
#orderPanel[data-side="sell"] .o-cta.empty { background: #3a2529; color: #c98a8f; }
#orderPanel[data-side="buy"] .o-cta.empty { background: var(--oacc); color: var(--oacc-ink); } /* keep Buy bright/inviting even at 0 amount */
/* ── Limit orders (F3): MKT CAP target box + −100..+100 slider + % box + plain-English summary.
Shown ONLY when #orderPanel carries .lim (the Limit tab, JS-toggled); Market mode is untouched. ── */
#orderPanel .o-limit, #orderPanel .o-sum { display: none; }
#orderPanel.lim .o-limit { display: flex; flex-direction: column; gap: 11px; }
#orderPanel.lim .o-sum { display: block; }
#orderPanel.lim .o-mevrow, #orderPanel.lim .o-sizes, #orderPanel.lim .o-pnl { display: none; }
.o-mc { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 13px 12px; background: var(--bg); }
.o-mc .k { color: var(--ts); font-size: 11.5px; letter-spacing: .4px; flex: none; }
.o-mc input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: 500 18px/1 var(--mono); color: var(--text); }
.o-mc .cur { color: var(--text-mute); font-size: 15px; flex: none; }
.o-slrow { display: flex; align-items: center; gap: 12px; }
.o-sl { flex: 1; }
.o-sltrack { position: relative; height: 22px; margin: 2px 6px 0; }
.o-sltrack .ln { position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: var(--surface-3); }
.o-sltrack .tk { position: absolute; top: 6px; width: 2px; height: 10px; background: #3a3c4c; transform: translateX(-1px); }
.o-sltrack input[type="range"] { position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; -webkit-appearance: none; appearance: none; background: none; cursor: pointer; }
.o-sltrack input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 999px; background: var(--oacc); box-shadow: 0 0 0 4px rgba(75,182,159,.22); cursor: pointer; }
.o-sltrack input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 999px; background: var(--oacc); box-shadow: 0 0 0 4px rgba(75,182,159,.22); cursor: pointer; }
#orderPanel[data-side="sell"] .o-sltrack input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(196,107,100,.22); }
.o-sllab { display: flex; justify-content: space-between; margin: 8px 4px 0; font-size: 11.5px; color: var(--text-mute); }
.o-pctbox { border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); padding: 8px 12px; display: flex; align-items: center; gap: 6px; font: 500 14px/1 var(--mono); color: var(--text); min-width: 74px; }
.o-pctbox input { width: 42px; background: none; border: 0; outline: none; text-align: right; font: inherit; color: var(--text); }
.o-pctbox .u { color: var(--text-mute); }
.o-sum { border-top: 1px solid var(--border-soft); padding-top: 11px; font-size: 13.5px; line-height: 1.5; }
/* Unique class names: a bare `.main` collides with the global `.main { display:grid }` (line ~284),
which shattered the summary into grid cells (word-per-line). `.lo-t`/`.lo-s` avoid the clash. */
.o-sum .lo-t { display: block; color: var(--text-dim); }
.o-sum .lo-t b { color: var(--text); font-weight: 600; }
.o-sum .lo-t b.tgt { color: var(--oacc); font-weight: 700; }
.o-sum .lo-s { display: block; color: var(--text-mute); font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.o-sum .lo-s .up { color: var(--up); font-weight: 600; } .o-sum .lo-s .dn { color: var(--down); font-weight: 600; }
/* Orders(N) tab body */
#ordersPanel .ord-hd, #ordersPanel .ord-rw { display: grid; grid-template-columns: 1fr 120px 140px 84px; align-items: center; padding: 11px 14px; gap: 8px; }
#ordersPanel .ord-hd { color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border-soft); }
#ordersPanel .ord-hd .ca { justify-self: end; color: #e08a8a; background: rgba(224,138,138,.12); padding: 5px 12px; border-radius: 999px; text-transform: none; letter-spacing: 0; font-size: 12px; cursor: pointer; }
#ordersPanel .ord-rw { border-bottom: 1px solid var(--border-soft); }
#ordersPanel .ord-tok { display: flex; align-items: center; gap: 10px; }
#ordersPanel .ord-tok .nm { font-weight: 600; font-size: 14px; }
#ordersPanel .ord-tok .osub { font-size: 12px; color: var(--text-mute); }
#ordersPanel .oty { display: inline-flex; padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; }
#ordersPanel .oty.buy { background: rgba(38,166,154,.15); color: #5fbfa2; }
#ordersPanel .oty.sell { background: rgba(242,54,69,.14); color: #e08a8a; }
#ordersPanel .otg { font: 500 14px/1.3 var(--mono); }
#ordersPanel .oacts { justify-self: end; display: flex; gap: 12px; color: var(--text-mute); cursor: pointer; }
#ordersPanel .ord-empty { padding: 22px 14px; color: var(--text-mute); font-size: 13px; }
/* Trading blocked for this token (no V3 pool / execution disabled). Placed AFTER .ready/.empty and the
side colours so it wins at equal specificity; JS drops .ready/.empty whenever .dis is on. */
.o-cta.dis { background: #1a1f2b; color: #6b7386; border: 1px solid var(--border); cursor: not-allowed;
font-size: 13px; font-weight: 500; padding: 0 14px; text-align: center; }
/* slippage / priority active preset chip */
.o-row .grp .o.on { background: var(--oacc2); color: var(--oacc2-ink); }
/* MEV: ALWAYS green when on (side-independent — red would read as "off"). */
.o-mev.on { background: #2f8560; color: #eafff2; }
.o-mev.off { background: #151b28; color: #6b7386; border: 1px solid var(--border); font-weight: 500; }
/* No private mempool on this chain → the toggle is permanently inert (JS forces .off.dis). */
.o-mev.dis { cursor: not-allowed; opacity: .55; }
/* custom slippage/gwei value active → accent border on the pill */
#oSlipVal.on, #oPrioVal.on { border-color: var(--oacc); box-shadow: 0 0 0 1px var(--oacc) inset; color: #ffffff; }
/* input resets: the new s must read as plain text, not boxed inputs */
#oAmt, #oSlipInput, #oGweiInput { background: transparent; border: 0; outline: none; color: inherit; }
/* flex-basis 0 (not width:100%): a 100% basis manufactured a permanent deficit that the OTHER items
absorbed down to their min-content — the unit chip lost its symbol. Basis 0 + grow means the box
simply takes the free space, and min-width is the amount's guaranteed floor. */
#oAmt { text-align: right; width: auto; flex: 1 1 0; min-width: 74px; }
#oSlipInput, #oGweiInput { text-align: right; width: 34px; color: #ffffff; font: inherit; }
/* preset chips (dynamically rendered) + inline edit */
/* presets reuse the pre-existing .o-pre .p chip styling; active + inline-edit states: */
.o-pre .p.on { background: rgba(255,255,255,.07); color: #ffffff; }
.o-pre .p input { width: 86%; background: #0a0d14; border: 1px solid var(--oacc2); border-radius: 6px; color: #ffffff; font: inherit; text-align: center; outline: none; padding: 3px 0; }
/* inline preset editor: editable cell holds the input + a corner delete ×; + adds, ✓ saves (dim when locked) */
.o-pre .p.pe { position: relative; padding: 8px 2px; }
.o-pre .o-pin.bad { border-color: #d05a54; color: #f0a6a1; }
.o-pre .o-pdel { position: absolute; top: 1px; right: 3px; width: 15px; height: 15px; padding: 0;
display: grid; place-items: center; background: #c0554f; color: #fff; border: 0; border-radius: 50%;
font: 700 11px/1 var(--sans); cursor: pointer; }
.o-pre .o-pdel:hover { background: #d6635c; }
.o-pre .p.padd { flex: 0 0 40px; color: var(--ts); font-size: 17px; }
.o-pre .p.padd:hover { color: var(--text); }
.o-pre .p.ed.disabled { opacity: .4; pointer-events: none; }
/* wallet trigger + dropdown */
.o-wal { cursor: pointer; }
/* The wallet list is UNBOUNDED — a bot user can hold 26+ wallets — while the ancestor .pane is
`overflow: hidden`. Without a cap the list simply grew past the pane and every wallet below the
fold became unreachable: no inner scrollbar, and the pane clipped the overflow (measured: 26
wallets = 970px inside a 900px pane, W26 unreachable while the chip READ "W26"). Cap it and
scroll inside. `overscroll-behavior: contain` stops the scroll chaining to the page once the
list hits its end.
The cap is a CLAMP, not `min(56vh, 440px)`: the terminal is embeddable (?embed=1) and an
embedding context can report a zero-height viewport — measured innerHeight 0 in the preview
pane — which collapses a vh-only cap to 0 and makes the menu VANISH. The 240px floor means the
worst case is a shorter list that still scrolls, never a missing one. */
.o-wdrop { position: absolute; right: 13px; z-index: 20; background: #0e1119; border: 1px solid #232838; border-radius: 12px; padding: 5px; min-width: 186px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
max-height: clamp(240px, 56vh, 440px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: #2b3242 transparent; }
.o-wdrop::-webkit-scrollbar { width: 9px; }
.o-wdrop::-webkit-scrollbar-track { background: transparent; }
.o-wdrop::-webkit-scrollbar-thumb { background: #2b3242; border-radius: 5px; border: 2px solid #0e1119; }
.o-wdrop::-webkit-scrollbar-thumb:hover { background: #3d4658; }
.o-wdrop[hidden] { display: none; }
.o-wi { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; }
.o-wi:hover { background: #161b28; }
.o-wi .wl { color: #9aa1b2; font-weight: 600; }
.o-wi .wv { margin-left: auto; color: #e9ebf1; }
.o-wi.sel { box-shadow: 0 0 0 1px var(--oacc) inset; }
.o-pnl { display: flex; margin: 0 -13px; padding: 13px 17px 2px; border-top: 1px solid var(--border); } /* full-width divider above (bleeds the o-bd padding) */
.o-pnl .c { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 3px; min-width: 0; }
.o-pnl .c:last-child { flex: 1.45; } /* Unrealized PnL is the longest label → give it room to stay on ONE line */
.o-pnl .c + .c::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: var(--border); }
/* Fixed-height label so a 2-line "Unrealized PnL" reserves the same height as the 1-line labels →
every value row sits on the same baseline ($ signs aligned). */
.o-pnl .k { font-size: 9.5px; color: var(--ts); line-height: 1.2; text-align: center; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 3px; } /* nowrap → one line → all values align */
.o-pnl .k svg { flex: none; color: var(--teal); width: 10px; height: 10px; }
.o-pnl .v { font: 500 14px/1 var(--mono); margin-top: 5px; color: var(--text); }
/* PnL percent — its OWN line, centred under the dollars. Inline it wrapped anyway (this cell is the
narrowest thing on the panel once a real number is in it) and a wrap lands left-aligned, hanging off
the value it belongs to. Making the break deliberate is the only way to control where it lands.
Inherits the up/dn colour: it is the SAME fact in the readable unit. One step down in size so the
money still leads. */
.o-pnl .v .pp { display: block; text-align: center; font-size: 11px; opacity: .78; margin-top: 3px; }
/* C9 — token info (Faz 0 keeps the key/value grid #tokenInfo; tiles land in Faz 4) */
.tih { display: flex; align-items: center; gap: 8px; padding: 11px 13px; flex: none; }
.tih .h { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--text); }
.tih .rf { margin-left: auto; color: var(--tm); cursor: pointer; }
.tinfo { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tigrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; padding: 2px 13px 13px; }
.ticell { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 8px; text-align: center; }
.ticell .ic { color: var(--ts); margin-bottom: 6px; }
.ticell .v { font: 600 15px/1 var(--mono); color: var(--text); }
.ticell .l { font-size: 10.5px; color: var(--ts); margin-top: 5px; }
.ticell.amber { border-color: rgba(245,158,12,.4); } .ticell.amber .v, .ticell.amber .ic { color: var(--amber); }
.ticell.red { border-color: rgba(242,54,69,.4); } .ticell.red .v, .ticell.red .ic { color: var(--red); }
/* C10 — status bar (overrides the original; keeps .si / .st-dot content styles) */
.status { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #000; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ts); }
.status .brandlbl { color: var(--tm); }
/* TradingView attribution — a LINK, and it has to read like one. Their free-charts licence wants a
visible credit, so this deliberately sits one step brighter than .brandlbl and underlines on
hover; do not dim it to blend into the strip. */
.status .tv-attr { color: var(--ts); text-decoration: none; transition: color .12s; }
.status .tv-attr:hover, .status .tv-attr:focus-visible { color: var(--text); text-decoration: underline; }
.status .st-eth { color: var(--text-dim); font-weight: 600; }
.status .st-socials { display: inline-flex; align-items: center; gap: 13px; }
.status .st-socials a { color: var(--ts); display: inline-flex; align-items: center; transition: color .12s; }
.status .st-socials a:hover { color: var(--text); }
/* Footer "Tracker" chip (next to BLOCK): re-opens/closes the Wallet Tracker panel. aria-pressed=true
⇒ panel OPEN (accent); false ⇒ collapsed (dim). Auto-hidden on mobile by `.status > *:not(.tv-attr)`. */
.status .st-trk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 2px 8px; border: 1px solid var(--hair); border-radius: 6px; background: transparent; color: var(--ts); font: inherit; line-height: 1; transition: color .12s, border-color .12s; }
.status .st-trk:hover, .status .st-trk:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }
.status .st-trk[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--hair)); }
/* picker view (full-width active-pairs list when no ?pool= is given) */
.pickwrap { display: flex; flex-direction: column; overflow: auto; background: var(--bg); }
.pickwrap > .panel { flex: 1; margin: 0; border: 0; }
/* ── Top Traders tab ─────────────────────────────────────────────────────── */
.trades-tbl.trd td { vertical-align: top; }
.trd-sub { color: var(--text-mute); font-size: 10px; }
.trd-mc { color: var(--text-mute); font-size: 10px; }
.trd-supbar { display: inline-block; width: 44px; height: 4px; background: var(--bg-3, #1a1d27); border-radius: 2px; vertical-align: middle; margin-left: 4px; overflow: hidden; }
.trd-supbar i { display: block; height: 100%; background: var(--teal, #26a69a); }
.trd-row { cursor: pointer; }
/* Fixed layout: both trd tables fit without horizontal scroll.
Column geometry is PER PANEL and must stay that way — Top Traders has 10 columns, SMART has 8,
and they are in different orders. Sharing one nth-child ladder is what broke the SMART tab: its
"Bought" inherited Top Traders' 6% Age slot (header itself clipped to "BOUGH…") and its PnL cell
inherited the 11% Realized slot while carrying BOTH the dollar and the percent, so every row read
"+$487.88 (+13…". Measured at 1440px: PnL had 120px and needed 124–152px on every row.
Widths in each ladder sum to 100% ON PURPOSE. Under-filling is not harmless: CSS fixed layout
hands the leftover to the first column, which is how the SMART rank column ended up 219px wide —
191px of dead space sitting next to the starved PnL column. */
.trades-tbl.trd { table-layout: fixed; width: 100%; }
.trades-tbl.trd th, .trades-tbl.trd td { padding: 5px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trades-tbl.trd td div { overflow: hidden; text-overflow: ellipsis; }
/* Digit columns line up across rows — the whole point of a numbers table. */
.trades-tbl.trd td.num { font-variant-numeric: tabular-nums; }
/* The ROI that rides along in a PnL cell: same up/down hue (it is the same fact), lower visual
weight so the dollar amount stays the primary read and the pair costs less width. */
.hld-roi { font-size: 11px; font-weight: 500; opacity: .72; }
/* Below the width where every column can show its full value, SCROLL rather than crush: the parent
.table is already `overflow: auto`, but `table-layout: fixed; width: 100%` overrides that by
compressing columns until the ellipsis eats digits. A truncated PnL is a wrong number on screen;
a scrollbar is only friction. Thresholds measured, not guessed — binary-searched in the harness
as the narrowest table width with zero clipped cells (SMART 1010px, Top Traders 1097px), then
rounded up. Reaching them needs ~1340px / ~1420px of app width; narrower desktops scroll, and
under 900px the layout already stacks via its own media query. */
#smartPanel .trades-tbl.trd { min-width: 1020px; }
#tradersPanel .trades-tbl.trd { min-width: 1110px; }
/* Top Traders — 10 columns: # · Wallet · ETH/Active · Age · Bought · Sold · Realized · PNL · MaxX · Remaining */
#tradersPanel .trades-tbl.trd th:nth-child(1) { width: 3%; }
#tradersPanel .trades-tbl.trd th:nth-child(2) { width: 14%; }
#tradersPanel .trades-tbl.trd th:nth-child(3) { width: 10%; }
#tradersPanel .trades-tbl.trd th:nth-child(4) { width: 5%; }
#tradersPanel .trades-tbl.trd th:nth-child(5), #tradersPanel .trades-tbl.trd th:nth-child(6) { width: 12%; }
#tradersPanel .trades-tbl.trd th:nth-child(7) { width: 10%; }
#tradersPanel .trades-tbl.trd th:nth-child(8) { width: 17%; } /* PNL: $ + (ROI%) */
#tradersPanel .trades-tbl.trd th:nth-child(9) { width: 6%; }
#tradersPanel .trades-tbl.trd th:nth-child(10) { width: 11%; }
/* SMART — 9 columns: # · Wallet · TXs · Bought · Sold · Remaining · PNL (token) · ROI % · Lifetime PNL.
PNL $ and ROI % are SEPARATE columns with separate sort keys (2026-07-19): "$ büyüğü" ve
"% büyüğü" farklı sorular — biri tek hücrede yaşarken %'ye göre sıralanamıyordu. Eski 25%'lik
çift-sayılı hücre 14% ($) + 11% (%) olarak bölündü; toplam yine tam 100%. */
#smartPanel .trades-tbl.trd th:nth-child(1) { width: 5%; }
#smartPanel .trades-tbl.trd th:nth-child(2) { width: 14%; }
#smartPanel .trades-tbl.trd th:nth-child(3) { width: 6%; }
#smartPanel .trades-tbl.trd th:nth-child(4), #smartPanel .trades-tbl.trd th:nth-child(5) { width: 11%; }
#smartPanel .trades-tbl.trd th:nth-child(6) { width: 12%; }
#smartPanel .trades-tbl.trd th:nth-child(7) { width: 14%; } /* PNL (token), artık yalnız $ */
#smartPanel .trades-tbl.trd th:nth-child(8) { width: 11%; } /* ROI % */
#smartPanel .trades-tbl.trd th:nth-child(9) { width: 16%; }
/* H3 coordination banner */
.coord-banner { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 4px 0 6px;
background: rgba(245,158,12,.08); border: 1px solid rgba(245,158,12,.35); border-radius: 6px;
color: var(--warn, #f59e0c); font-size: 11px; cursor: pointer; }
.coord-banner b { font-weight: 600; }
.coord-banner .cb-sub { color: var(--text-mute); }
.coord-banner .cb-cta { margin-left: auto; letter-spacing: .04em; font-size: 10px; }
/* Signal C free-distribution banner: red tint (insider/team seed — a distinct, higher-severity tell). */
.dist-banner { background: rgba(239,68,68,.09); border-color: rgba(239,68,68,.38); color: var(--danger, #ef4444); }
.hld-fund { color: var(--text-mute); font-size: 10px; }
.hld-fund .sib { color: var(--warn, #f59e0c); }
/* tokenbar pair menu (biai port): dark context menu, label left / grey mono value right */
.ctx-menu{
position:absolute;z-index:9999;min-width:120px;
background:var(--surface,#10131a);border:1px solid rgba(255,255,255,.08);
border-radius:7px;padding:4px;font-size:12px;color:var(--text,#e6e8ef);
box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.ctx-menu .ci{padding:6px 10px;border-radius:5px;cursor:pointer;color:var(--text-dim,#9aa1b4)}
.ctx-menu .ci:hover{background:var(--surface-2,#1a1f2b);color:var(--text,#e6e8ef)}
.tk-menu{min-width:250px}
.tk-menu .ci{display:flex;justify-content:space-between;gap:18px;color:var(--text)}
.tk-menu .ci .mv{color:var(--text-mute);font-size:11px}
/* ── Coordination (trader-scoped): tokenbar badge + token-info tiles + funding-tree popover ──
/api/term/coordination/:token. Warns when the BUYERS/SELLERS are one operator's sybils — the
holder-scoped banner misses wallets that zeroed out (funnelled to the dev / dumped). */
.tk-coord {
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
font: 600 11px var(--font); padding: 2px 8px; border-radius: 6px; letter-spacing: .02em;
}
/* two-line label ("N% CONNECTED" / "SUPPLY") — keeps the badge narrow so it doesn't push the header row */
.tk-coord .tc-txt { display: inline-flex; flex-direction: column; line-height: 1.08; }
.tk-coord.coord-red { color: #ff8f98; background: var(--down-bg); border: 1px solid rgba(242, 54, 69, .45); }
.tk-coord.coord-amber { color: var(--warn); background: rgba(245, 158, 12, .12); border: 1px solid rgba(245, 158, 12, .40); }
.tk-coord:hover { filter: brightness(1.12); }
/* Big-hold warning badge: wallets each holding ≥3.5% of supply. Lives in the socials sub-row
(miconrow) so it's always visible and never pushes/wraps the first badge row. Two-line label
("N WALLETS BIG HOLD" / "TOTAL X%"). Amber, red past 20% combined. */
.tk-bighold { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 11px var(--font); padding: 2px 8px; border-radius: 6px; letter-spacing: .02em; color: var(--warn); background: rgba(245,158,12,.12); border: 1px solid rgba(245,158,12,.40); }
.tk-bighold .bh-txt { display: inline-flex; flex-direction: column; line-height: 1.08; }
.tk-bighold.hi { color: #ff8f98; background: var(--down-bg); border: 1px solid rgba(242,54,69,.45); }
/* Narrow screens: the centre column is `100vw - 296 - 6 - 322`, so a 15"/1440px screen leaves it
816px — but the full-wording header needs 1065px and wraps onto a 2nd row. Drop the verbose badge
words, leaving "⚠ 0.2%" (63px, was 178) / "⚠ 58.4%" (71px, was 228); the full text stays in each
badge's title tooltip. At >=1700px the centre is >=1076px, so nothing changes there.
This is NOT sufficient on its own: it brings the requirement to 948px, still over the 816px a 15"
screen has (the identity row and the 418px stats block are structural — trimming the proto chip,
"Passed" and /VIRTUAL too only reaches 878px). It IS the precondition for the fix: at 948px the
side columns can reach it (250/236 -> 948px centre); at 1065px no realistic width could. */
/* Compact-by-default: the verbose words ("CONNECTED"/"SUPPLY"/"WALLETS BIG HOLD"/"TOTAL") stay in
the DOM (title tooltip + harness assertions read them) but are ALWAYS hidden, so each pill reads
" N%". The leading icon (net-nodes vs wallet) is what tells the two pills apart now. */
.tk-coord .cb-word, .tk-bighold .cb-word { display: none; }
.tk-coord .tk-ic, .tk-bighold .tk-ic { flex: none; }
/* amber value on a token-info tile (the risk grid only ships ok/bad/na) */
.ti-tile .tr.warn, .ti-tile .tr.warn .tv { color: var(--warn); }
/* the 3 coordination tiles: their own row, click anywhere → funding map */
.ti-grid.g-coord { margin-top: 8px; cursor: pointer; }
.ti-grid.g-coord .ti-tile { border-color: rgba(212, 227, 76, .22); }
.ti-grid.g-coord:hover .ti-tile { border-color: rgba(212, 227, 76, .38); }
.coord-pop {
position: fixed; z-index: 70; left: 50%; top: 84px; transform: translateX(-50%);
width: min(640px, 94vw); max-height: 74vh; overflow: auto; display: none;
background: #0b0d12; border: 1px solid var(--border); border-radius: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
}
.coord-pop.on { display: block; }
.ctree-h { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface); position: sticky; top: 0; }
.ctree-h .t { font: 700 13px var(--font); }
.ctree-h .pct { font: 700 12px var(--mono); color: #ff8f98; }
.ctree-h .ctree-x { margin-left: auto; color: var(--text-mute); cursor: pointer; font-size: 15px; }
.ctree-h .ctree-x:hover { color: var(--text); }
.ctree-body { padding: 8px 14px 10px; font: 12px/1.85 var(--mono); }
.ctr-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ctr-row.indent1 { padding-left: 20px; }
.ctr-row.exrow { opacity: .55; margin-top: 4px; }
.ctr-chip { font: 700 9.5px var(--mono); letter-spacing: .05em; border-radius: 4px; padding: 2px 5px; flex: none; }
.ctr-chip.ctr-root { background: var(--down-bg); color: #ff8f98; border: 1px solid rgba(242, 54, 69, .4); }
.ctr-chip.ctr-coord { background: rgba(245, 158, 12, .13); color: var(--warn); border: 1px solid rgba(245, 158, 12, .35); }
.ctr-chip.ctr-dev { background: var(--down-bg); color: #ff8f98; border: 1px solid rgba(242, 54, 69, .4); }
.ctr-chip.ctr-ex { background: var(--surface-2); color: var(--text-mute); border: 1px solid var(--border); }
.ctr-a { color: #7fb2e5; cursor: pointer; }
.ctr-a:hover { text-decoration: underline; }
.ctr-wl { padding-left: 60px; color: var(--text-mute); font-size: 11px; line-height: 1.85; }
.ctr-wl .ctr-a { color: #6d9bc8; }
.ctr-devnode { margin-top: 8px; padding: 8px 10px; background: var(--down-bg); border: 1px solid rgba(242, 54, 69, .25); border-radius: 8px; line-height: 1.7; }
.ctree-body .dim { color: var(--text-mute); }
.ctree-body .num-up { color: var(--up); }
.ctree-body .num-down { color: #ff8f98; }
.ctree-f { padding: 9px 14px; border-top: 1px solid var(--border-soft); color: var(--text-mute); font: 10.5px var(--mono); }
/* Coordination one-line verdict — the plain-English takeaway at the top of the funding map. */
.ctree-sum { padding: 10px 14px; font: 500 12.5px/1.5 var(--font); border-bottom: 1px solid var(--border-soft); }
.ctree-sum.sev-hi { color: #ff8f98; background: var(--down-bg); }
.ctree-sum.sev-mid { color: var(--warn); background: rgba(245, 158, 12, .10); }
.ctree-stats { padding: 8px 14px; font: 11.5px/1.5 var(--mono); color: var(--text-mute); border-bottom: 1px solid var(--border-soft); }
.ctree-stats b { color: var(--text-dim); font-weight: 600; }
/* High swap-fee warning on the tokenbar proto chip — a 77-99% noxa V4 pool is a real ~77%+ loss/trade. */
.tk-proto .tk-fee-warn { color: var(--warn); font-weight: 600; }
.tk-proto .tk-fee-danger { color: #ff8f98; font-weight: 700; }
/* ?mark sinyal pini — paper/backtest deep-link'inin işaret ettiği an (K. cüzdanın girişi) */
.cb-sig{position:absolute;left:0;top:0;width:22px;height:22px;line-height:22px;text-align:center;font-size:14px;z-index:6;pointer-events:none;filter:drop-shadow(0 0 4px rgba(212,227,76,.8))}
.cb-sigline{position:absolute;left:0;top:0;width:2px;background:repeating-linear-gradient(to bottom,rgba(212,227,76,.55) 0 6px,transparent 6px 12px);z-index:5;pointer-events:none}
/* sinyal kümesi üye pinleri ①..⑫ — 6.+ üye (kümeyi tamamlayanlar) dolu lime */
.cb-sigmem{position:absolute;left:0;top:0;width:18px;height:18px;line-height:18px;border-radius:50%;text-align:center;font:700 10px ui-monospace,Menlo,monospace;color:#d4e34c;background:rgba(19,21,31,.92);border:1px solid rgba(212,227,76,.7);z-index:6;pointer-events:auto;cursor:default}
.cb-sigmem-k{background:#d4e34c;color:#0a0a0e;border-color:#d4e34c}
/* paper çıkış pinleri — her varyantın çıkış noktası (fiyat seviyesinde, kâr yeşil / zarar kırmızı) */
.cb-xit{position:absolute;left:0;top:0;min-width:16px;height:16px;line-height:16px;padding:0 3px;border-radius:4px;text-align:center;font:700 9px ui-monospace,Menlo,monospace;color:#0a0a0e;background:#5f5f6d;z-index:7;pointer-events:auto;cursor:default;white-space:nowrap}
.cb-xit.cb-xw{background:#2ebd85}
.cb-xit.cb-xl{background:#f23645;color:#fff}
/* Autoplay-blocked state on the tracker 🔊: the browser refused play() (no gesture since load).
Red tint + pulse until the one-shot unlock click restores it — silence must never look random. */
#wtPane ~ * .ns-blocked, .ns-blocked { color: var(--down) !important; animation: nsblink 1.2s ease-in-out infinite; }
@keyframes nsblink { 50% { opacity: .45; } }
/* ════════════════════════════════════════════════════════════════════════════════════════════
MOBILE — terminal PAIR page (#pairView) reflow.
The desktop 4-col grid (--col-l 296 + 6 + 1fr + right 322 = 624px of fixed side tracks) is
unusable below ~800px, and NO other @media touches the pair layout, so this block is greenfield.
Every rule is scoped to #pairView or a mobile-only `.m-*` / `.mob-only` helper → desktop is
byte-identical (all helpers are display:none above the breakpoint). It REUSES the live machinery
verbatim: the chart↕trades splitter (--chart-bot on .center, initSplitters), the order panel
(#orderPanel), and the Wallet-Tracker feed (#wtPane) — no logic is duplicated.
════════════════════════════════════════════════════════════════════════════════════════════ */
/* mobile-only chrome — hidden on desktop (shown only inside the media query below) */
.m-vtoggle, .m-actbar, .m-sheet-bd, .m-sheet-grip, .tab-t.mob-only { display: none; }
@media (max-width: 820px) {
/* Lock the terminal to the device — like the desktop's fixed 100vh grid. The PAGE must not scroll
(that was dragging the whole chart/header up and down); only the inner panes (chart, tables, feed,
the trade sheet) scroll, each on its own overflow:auto. 100dvh (dynamic viewport) keeps the app
exactly the visible height as the mobile address bar shows/hides — 100vh would run under it. */
html, body { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.app { height: 100dvh; }
/* the stage stacks vertically: pair body fills, sticky Buy/Sell bar sits under it */
.stage { flex-direction: column; }
.stage > .m-actbar { flex: none; }
/* body: drop the 4-col grid → vertical stack. Only .center stays in flow; .col is relocated
into the botpane by initMobileUI, .right becomes a bottom sheet (position:fixed). */
#pairView { display: flex; flex-direction: column; min-height: 0; }
#pairView > .split-l { display: none; }
#pairView > .center { flex: 1; min-height: 0; }
/* view toggle (Chart+Table / Chart / Table) sits above the chart → .center gets a 4th (auto) row */
/* Same vertical grid as desktop (chart 1fr · splitter · botpane var(--chart-bot)) so the splitter
drag behaves BYTE-IDENTICALLY — plus the mobile-only vtoggle row on top. The "chart ≥ ~20%" floor
is enforced in initSplitters (a mobile max-clamp on --chart-bot), NOT with a grid minmax, because
minmax fights the drag (botpane ≠ --chart-bot) and made it feel stuck. */
#pairView .center { grid-template-rows: auto 1fr 16px var(--chart-bot, 300px); } /* fatter splitter = easy finger target below the TV toolbar */
#pairView .center > .splitter .grip { width: 60px; height: 5px; }
#pairView .m-vtoggle { display: flex; gap: 5px; padding: 4px 12px; border-bottom: 1px solid var(--hair); }
#pairView .m-vtoggle button { flex: 1; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ts); background: transparent; border: 1px solid transparent; cursor: pointer; }
#pairView .m-vtoggle button svg { width: 13px; height: 13px; }
#pairView .m-vtoggle button.on { color: var(--text); background: var(--surface-2); border-color: var(--accent); }
#pairView .center.v-chart { grid-template-rows: auto 1fr; }
#pairView .center.v-chart > .splitter,
#pairView .center.v-chart > .botpane { display: none; }
#pairView .center.v-table { grid-template-rows: auto 1fr; }
#pairView .center.v-table > .pane,
#pairView .center.v-table > .splitter { display: none; }
/* chart-head: stack identity over a horizontally-scrollable stat strip; hide the draw rail.
The identity cluster carries a LOT (symbol, venue, ✓safety, launchpad, age, socials, big-holder),
so pack it dense on mobile — smaller avatar, tighter rows, smaller chips — WITHOUT dropping any of it. */
#tokenbar { gap: 3px 9px; padding: 6px 12px; }
#tokenbar .tk-av { width: 38px; height: 38px; }
#tokenbar .tk-av.grad { width: 42px; height: 42px; }
#tokenbar .tk-av-box { width: 38px; height: 38px; }
#tokenbar .tk-av-letter { font-size: 16px; }
#tokenbar .tid { gap: 8px; }
#tokenbar .tid-l1 { gap: 6px; }
#tokenbar .tid-l1 .sym, #tokenbar .tk-name { font-size: 15px; }
#tokenbar .miconrow { margin-top: 2px; gap: 6px; font-size: 10px; }
#tokenbar .tk-proto, #tokenbar .tk-safe, #tokenbar .tk-launch, #tokenbar .tk-age { font-size: 9.5px; padding: 1px 6px; }
#tokenbar .tk-safe svg, #tokenbar .tk-launch svg, #tokenbar .tk-age svg { width: 10px; height: 10px; }
#tokenbar .tk-act { margin-left: 4px; }
#tokenbar .tk-act svg { width: 14px; height: 14px; }
#tokenbar .tk-socials { gap: 7px; }
#tokenbar .tk-stats { margin-left: 0; flex-basis: 100%; width: 100%; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch; }
#tokenbar .tk-stats::-webkit-scrollbar { height: 0; }
#tokenbar .tk-stats .stat { flex: none; }
#pairView .drawrail { display: none; }
/* tape tab strip: keep it ONE short line. The long labels ("TOP TRADERS", "WALLET TRACKER") were
wrapping to two rows and doubling the strip height — force a single non-wrapping row that scrolls
sideways, and tighten the vertical padding to the minimum. */
#pairView .pane.trades > .sec-head { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 0; padding: 7px 12px 6px; -webkit-overflow-scrolling: touch; }
#pairView .pane.trades > .sec-head::-webkit-scrollbar { height: 0; }
#pairView .pane.trades > .sec-head .tab-t { flex: none; white-space: nowrap; margin-right: 16px; padding-bottom: 3px; line-height: 1.1; }
#pairView .pane.trades > .sec-head .sec-sub { flex: none; white-space: nowrap; }
/* active wallet-filter pill: initMobileUI relocates #mkFilter out of the scrolling tab strip into a
full-width banner right under the tabs, so after you tap a wallet on the chart/tape you always SEE
the active filter and can tap its × to clear it. :not([hidden]) keeps it collapsed when no filter. */
#pairView .pane.trades > #mkFilter:not([hidden]) { display: flex; flex: none; width: 100%; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
/* Bar filter (click a candle → that block's trades): its badge + ✕ clear live in #tapeSub, also
relocated here. Hide the plain "N trades" count on a phone; show it as a full-width banner ONLY
when it carries the bar filter — so the ✕ clear is reachable and the filter can't get stuck. */
#pairView .pane.trades > #tapeSub { display: none; }
#pairView .pane.trades > #tapeSub:has(.tapebar-filter) { display: flex; align-items: center; flex: none; width: 100%; padding: 7px 12px; border-bottom: 1px solid var(--hair); font-size: 12px; }
#pairView .pane.trades > #tapeSub .tapebar-filter { display: flex; align-items: center; gap: 6px; width: 100%; }
#pairView .pane.trades > #tapeSub [data-barclear] { margin-left: auto; flex: none; color: var(--down); font-weight: 600; text-decoration: none; padding: 3px 10px; border: 1px solid rgba(242, 54, 69, .35); border-radius: 999px; white-space: nowrap; }
/* Wallet Tracker as a tape tab: initMobileUI relocates .col into .pane.trades; it shows ONLY when
the mobile "Wallet Tracker" tab is active, and the 5 real panels are hidden then (belt + braces:
showPairTab('wt') already hides them, this guarantees it even before bindPairTabs is wired). */
#pairView .tab-t.mob-only { display: inline-block; }
#pairView .pane.trades > .col { display: none; flex: 1; min-height: 0; }
#pairView.show-wt .pane.trades > .col { display: flex; }
#pairView.show-wt .pane.trades > .col > .ph { display: none; }
#pairView.show-wt .pane.trades > .table,
#pairView.show-wt .pane.trades > .pool-list { display: none; }
/* right column → slide-up bottom sheet (order panel + token info), reusing #orderPanel verbatim */
#pairView > .right {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
display: block; height: 88dvh; max-height: calc(100dvh - 46px);
border-left: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
overflow-y: auto; -webkit-overflow-scrolling: touch;
transform: translateY(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
z-index: 210; box-shadow: 0 -22px 60px rgba(0,0,0,.6);
}
body.sheet-open #pairView > .right { transform: none; }
#pairView > .right .m-sheet-grip { display: block; position: sticky; top: 0; z-index: 3; padding: 12px 0 10px; text-align: center; background: var(--bg); cursor: grab; touch-action: none; }
#pairView > .right .m-sheet-grip::before { content: ""; display: inline-block; width: 42px; height: 4px; border-radius: 3px; background: var(--tm); }
.m-sheet-bd { position: fixed; inset: 0; background: rgba(3,3,6,.55); z-index: 205; opacity: 0; transition: opacity .3s; }
body.sheet-open .m-sheet-bd { display: block; opacity: 1; }
/* sticky Buy/Sell action bar + round chevron (opens the sheet), mirrors the mock's Buy · Sell · ↑ */
.m-actbar { display: flex; align-items: center; gap: 9px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--hair); }
.m-actbar .mab { flex: 1; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; border: 0; cursor: pointer; }
.m-actbar .mab.buy { background: var(--up); color: #06120f; }
.m-actbar .mab.sell { background: var(--down); color: #fff; }
.m-actbar .mab-up { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); cursor: pointer; }
.m-actbar .mab-up svg { width: 20px; height: 20px; }
/* footer: the mock has none, but TradingView's chart licence REQUIRES a visible "Charts by
TradingView" text link wherever the chart shows — so on mobile we keep ONLY that (thin, centered)
and drop the block/connection/socials clutter. Status row collapses to fit it. */
.app { grid-template-rows: 54px auto 1fr auto; }
.status { justify-content: center; gap: 0; padding: 4px 10px calc(4px + env(safe-area-inset-bottom)); font-size: 10px; }
.status > *:not(.tv-attr) { display: none; }
.status .tv-attr { color: var(--tm); }
}