/* glitch — the BNB terminal in the fomo look: deep space navy, 12 px cards with
   hairline borders, blue-violet as the one accent, lowercase headlines, Geist
   as the geometric sans (Aeonik's stand-in, self-hosted). Dark only: there is
   no light face, so the tokens live on :root and nothing reads a theme switch. */
:root{
  --bg:#060510; --panel:#0d0c18; --panel-2:#0a0914; --card:#12111a; --card-hover:#171626; --card-hot:#161a2e; --raised:#1a1928;
  --line:#1d1c2c; --line-2:#2a2940; --hairline:#151421; --hover:#171626;
  --text:#f7f7f7; --sub:#9899a3; --sub-2:#d3d5e4; --dim:#5b5c6e;
  --green:#3fd28a; --green-2:#6ee7a8; --green-bg:rgba(63,210,138,.14); --green-tint:rgba(63,210,138,.08); --green-line:rgba(63,210,138,.4);
  --red:#f0506e; --red-2:#ff7390; --red-bg:rgba(240,80,110,.14);
  --yellow:#f3c257; --orange:#f79f3a; --yellow-bg:rgba(243,194,87,.14); --yellow-line:rgba(243,194,87,.4);
  --blue:#516af6; --blue2:#7b8ff8; --blue-bg:rgba(81,106,246,.16); --quote:#7b8ff8; --quote-bg:rgba(81,106,246,.12); --cyan:#4fd3ea; --purple:#a78bfa; --bnb:#f0b90b;
  --chip:#1b1a2a;
  --r:12px; --r-sm:8px;
  --shadow:0 16px 40px rgba(0,0,0,.55);
  --accent:#516af6; --accent-2:#7b8ff8; --on-accent:#ffffff; --glow:rgba(81,106,246,.35);
  color-scheme:dark;
}
*{scrollbar-color:var(--line-2) transparent}
body{background:var(--bg);color:var(--text);letter-spacing:-.2px}
/* a faint nebula behind everything, like fomo's space backdrop */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 20% -10%,rgba(81,106,246,.16),transparent 60%),radial-gradient(700px 400px at 100% 0%,rgba(123,143,248,.08),transparent 60%)}

/* ── frame ── */
.nav{background:rgba(6,5,16,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.logo span{font-weight:600;letter-spacing:-.03em;font-size:17px}
.logo .mark{border-radius:8px}
.menu a{border-radius:8px;color:var(--sub)}
.menu a:hover{color:var(--text);background:var(--hover)}
.menu a.on{color:var(--text);background:var(--chip)}
.tbar{background:var(--panel-2);border-bottom:1px solid var(--line)}
.chains{display:none}
.pill,.ibtn,.ib{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:999px}
.pill:hover,.ibtn:hover,.ib:hover{border-color:var(--line-2);background:var(--card-hover)}
.search{background:var(--card);border:1px solid var(--line);border-radius:999px}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--blue-bg)}
input,select,textarea{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;border-radius:var(--r-sm)}
input::placeholder{color:var(--dim)}
.btn.primary,.go,button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);border-radius:999px;box-shadow:0 10px 28px -10px var(--glow)}
.btn.primary:hover,.go:hover,button.primary:hover{background:var(--accent-2)}
.seg{border-radius:999px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.seg button.on{background:var(--accent);color:var(--on-accent)}
.amt{border-radius:999px}

/* ── lanes and rows ── */
.lane{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.lane-h{border-bottom:1px solid var(--line)}
.lane-h h2{font-weight:600;letter-spacing:-.02em;text-transform:lowercase}
.row,.card,.tile-row{border-radius:var(--r-sm)}
.qb,[data-qb]{background:var(--accent);border-radius:10px}
.qb:hover,[data-qb]:hover{background:var(--accent-2)}
.age{color:var(--accent-2)}
.lp{border-radius:999px}
.chip{border-radius:999px;background:var(--chip)}

/* ── panels, tables, dialogs ── */
.panel,.box,.fm,.modal .fm,.dd-menu,.ntf,.dlg{background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.fm-h{border-bottom:1px solid var(--line)}
th{color:var(--sub);font-weight:500}
td{border-color:var(--hairline)}
tr:hover td{background:var(--card-hover)}
.tabs div.buy.on{background:var(--green);color:#06110b}
.tabs div.sell.on{background:var(--red);color:#fff}
.foot{background:var(--panel-2);border-top:1px solid var(--line)}
.foot .giga{color:var(--sub)}
h1,h2,h3{letter-spacing:-.025em}
.sec h2,.hero h1{text-transform:lowercase}
.charthost .wm{color:rgba(247,247,247,.04)}
::selection{background:rgba(81,106,246,.35)}
/* the account button and the mobile lane tabs follow the accent, not green */
.ab.login,.ab.login.wait{background:var(--accent);color:#fff;border-color:var(--accent);border-radius:999px}
.ab.login:hover{background:var(--accent-2)}
.mtabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.lane-tabs button.on,.tabs-l button.on{color:var(--text)}
.nav .ab.login,.nav .ab.login.wait{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.menu a.on{color:var(--accent-2)}
/* primary actions and the portfolio action icons follow the accent too; buy/sell keep their trading colours */
.btn2.primary,.btn.primary,.go,.cta-btn{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;border-radius:999px}
.action .ico{background:var(--blue-bg);color:var(--accent-2)}
.empty2 .ic,.w-hero .ic{background:var(--blue-bg);color:var(--accent-2)}