/* BTC2 Terminal — black glass, emerald light, quiet type.
   The matrix is still here in the green and the monospaced figures; the rain,
   scanlines, bracket corners and neon glow on everything are not. Panels are
   layered glass with hairline borders, labels are Inter, every number is
   tabular so columns hold still as they update. */
:root {
  --bg: #050807;
  --panel-solid: #0B110E;
  --raise: rgba(255, 255, 255, 0.03);
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.11);
  --g: #3BF08F;
  --g-soft: rgba(59, 240, 143, 0.12);
  --g-line: rgba(59, 240, 143, 0.32);
  --text: #E9F1EC;
  --text-2: #AFC2B7;
  --muted: #72877B;
  --faint: #4A5B51;
  --up: #34E28A;
  --up-bg: rgba(52, 226, 138, 0.12);
  --down: #FF5C70;
  --down-bg: rgba(255, 92, 112, 0.12);
  --amber: #F5A524;
  --gold: #F5B83D;
  --radius: 14px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background: var(--bg); }
/* the atmosphere: a soft emerald light from above, and a faint dot grid fading down the page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(59, 240, 143, 0.09), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1.3px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 90%);
          mask-image: linear-gradient(to bottom, #000 0, #000 30%, transparent 90%);
}
a { color: inherit; }
button { font: inherit; }
.bar, .grid, .embed-grid { position: relative; z-index: 2; }

.up { color: var(--up); }
.down { color: var(--down); }
.amber { color: var(--amber); }
.dim { color: var(--muted); }
.glow { color: var(--text); }

/* ---- header -------------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 12px clamp(14px, 3vw, 28px);
  background: rgba(6, 10, 8, 0.74);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* The site's own mark and wordmark, set exactly as the main page's top bar
   sets them — Inter bold, white with an orange 2 — so the terminal reads as
   the same site in a different room, not a different brand. */
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #E9EDF2;
  font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap;
}
.brand-mark { width: 28px; height: 28px; }
/* green on the terminal, its own colour; the main site keeps its orange */
.brand-2 { color: var(--g); }
.path {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--raise);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.path i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px var(--g-soft); }
.ticker { margin-left: auto; display: inline-flex; align-items: baseline; gap: 10px; }
.ticker b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ticker i { font-style: normal; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ticker i.mc { color: var(--muted); }
.live {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--raise);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); white-space: nowrap;
}
.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.live[data-state="live"] { color: var(--text-2); }
.live[data-state="live"] i { background: var(--g); }
.live[data-state="live"] i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--g);
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(0.45); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.live[data-state="reconnecting"], .live[data-state="polling"] { color: var(--amber); }
.live[data-state="reconnecting"] i, .live[data-state="polling"] i { background: var(--amber); }

/* ---- layout ------------------------------------------------------------- */
.grid {
  max-width: 2400px; margin: 0 auto; padding: 20px clamp(10px, 2.4vw, 28px) 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px;
  grid-template-areas: "stats stats" "chart side" "tape side";
  /* The side column spans the chart and tape rows. Taller than both — a tracked
     wallet's history makes it so — its extra height was shared between the two
     rows, opening a gap under the chart. Only the tape's row takes it now, below
     the tape, where it is just the end of the page. */
  grid-template-rows: auto auto 1fr;
  align-items: start;
}
.stats { grid-area: stats; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.chart { grid-area: chart; }
.side { grid-area: side; display: grid; gap: 16px; min-width: 0; }
.tape { grid-area: tape; }

/* panels: layered glass with a hairline, a lit top edge and a soft drop */
.hud {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20, 30, 25, 0.74), rgba(10, 16, 13, 0.82));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -30px rgba(0, 0, 0, 0.85);
}
.hud-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.hud-head h2 {
  margin: 0; display: inline-flex; align-items: baseline; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--text);
}
.hud-head h2 .dim { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); }
.hud-head > b { margin-left: auto; font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); font-size: 12.5px; }
.hud-foot { margin: 0; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; line-height: 1.6; }
.hud-foot b { color: var(--text-2); font-weight: 600; }
.hud-foot b.amber { color: var(--gold); }

/* ---- stats -------------------------------------------------------------- */
.stats .hud { padding: 14px 16px 13px; min-width: 0; }
.stats em {
  display: block; font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.stats b {
  display: block; margin: 8px 0 4px; font-family: var(--mono); font-size: 21px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats b.up { color: var(--up); }
.stats b.down { color: var(--down); }
.stats b.amber { color: var(--amber); }
.stats i {
  display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* market cap under the change: the figure many people look for first */
.stats i.mc { margin-top: 3px; color: var(--text-2); }
.stats i.up { color: var(--up); }
.stats i.down { color: var(--down); }
/* holders, and in its top corner how many are watching the terminal: a faint eye and a number */
.stats .stat-holders { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.stats .stat-holders > div { min-width: 0; }
.stats .sh-watch {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px; margin-top: 1px; cursor: default;
  font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.stats .sh-watch svg { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; }
.stats .sh-watch:hover { color: var(--muted); }
/* the way to the chat: phones only, where the chat sits far down the page */
.stats .sh-chat { display: none; }

/* ---- segmented controls: timeframe and currency ---------------------------- */
.tfs, .denom {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.28);
}
.tfs { margin-left: auto; }
.tfs button, .denom button {
  background: transparent; color: var(--muted); border: 0; border-radius: 7px; cursor: pointer;
  padding: 4px 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  transition: color .15s ease, background .15s ease;
}
.tfs button:hover, .denom button:hover:not(.on) { color: var(--text); }
.tfs button.on, .denom button.on { color: var(--g); background: var(--g-soft); box-shadow: inset 0 0 0 1px var(--g-line); }
.tfs button:focus-visible, .denom button:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }

/* ---- chart -------------------------------------------------------------- */
/* The legend never changes height, whatever the cursor is over: it grew a line
   when a candle's burn and the burned share were added, and pushed the chart
   down under the pointer. One line where the chart is wide; below 600px of
   chart it may wrap, into a fixed three lines. Sized by the chart's own width,
   so the chart beside the trades and on the main page get the narrow form too. */
.chart { container-type: inline-size; }
.legend {
  padding: 10px 16px 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: flex; flex-wrap: nowrap; gap: 4px 14px; height: 28px; overflow: hidden; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.legend span { white-space: nowrap; }
/* two lines where a candle's burn pushes the text past one, three only where it needs them —
   a fixed three everywhere narrow left an empty band above the chart beside the trades */
@container (max-width: 640px) {
  .legend { flex-wrap: wrap; align-content: flex-start; height: 50px; line-height: 18px; }
}
@container (max-width: 440px) {
  .legend { height: 74px; }
}
.legend b { color: var(--text); font-weight: 500; }
.legend b.up { color: var(--up); }
.legend b.down { color: var(--down); }
.legend b.amber { color: var(--amber); }
/* as tall as the window allows, between the height it always had on a laptop and
   a ceiling a chart stops gaining from. The trades beside it follow (see the
   tape-right sync in terminal.js), and the framed chart sets its own height. */
.chart-box { position: relative; height: clamp(420px, 56vh, 760px); margin: 4px 8px 0; }
#chart { position: absolute; inset: 0; z-index: 1; }
.wm {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.wm img { width: 150px; height: auto; opacity: 0.06; }
.wm span { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.26em; color: #FFFFFF; opacity: 0.1; }
.chart-key {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px 12px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.chart-key span { white-space: nowrap; }
.chart-key i { font-style: normal; margin-right: 4px; }
/* the key doubles as the switch for the dots, like the main site's chart legend */
.burns-toggle {
  display: inline-flex; align-items: center; padding: 5px 11px 5px 9px; cursor: pointer; white-space: nowrap;
  background: var(--raise); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-2); font-size: 12px; font-weight: 500;
  transition: border-color .15s ease, color .15s ease;
}
.burns-toggle:hover { color: var(--text); border-color: var(--line-2); }
.burns-toggle:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.burns-toggle[aria-pressed="false"] { opacity: 0.5; }
/* the "Your trades" switch only exists once a wallet is tracked */
.you-toggle[hidden] { display: none; }
/* hollow when off, so the state reads without relying on the fade alone */
.burns-toggle[aria-pressed="false"] .k-dot { background: none; box-shadow: inset 0 0 0 1.6px #F7931A; }
/* the chart's dot in miniature: orange, ringed in white */
.chart-key .k-dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: #F7931A; box-shadow: 0 0 0 1.5px #E9EDF2;
}
#chart-status { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }
.k-you { color: #5BE3FF; }
/* the Fibonacci levels in miniature: stacked lines in their colours */
.chart-key .k-fib {
  display: inline-block; width: 13px; height: 11px; margin-right: 8px;
  background: linear-gradient(180deg, #F23645 0 2px, transparent 2px 4.5px, #FF9800 4.5px 6.5px, transparent 6.5px 9px, #089981 9px 11px);
}
/* the burned line in miniature */
.chart-key .k-line {
  display: inline-block; width: 14px; height: 10px; margin-right: 8px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(247,147,26,0.45), rgba(247,147,26,0.08)); box-shadow: inset 0 1px 0 rgba(247,147,26,0.7);
}
/* the bar clock in miniature: a clock face */
.chart-key .k-clock {
  position: relative; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #34E28A;
}
.chart-key .k-clock::before, .chart-key .k-clock::after {
  content: ''; position: absolute; left: 4.75px; bottom: 5px; width: 1.5px; background: #34E28A; transform-origin: bottom center;
}
.chart-key .k-clock::before { height: 3.5px; }
.chart-key .k-clock::after { height: 2.5px; transform: rotate(90deg); }
/* the all-time high in miniature: its marker over a dashed line */
.chart-key .k-ath {
  position: relative; display: inline-block; width: 13px; height: 11px; margin-right: 8px;
  background: repeating-linear-gradient(90deg, rgba(233,241,236,0.75) 0 3px, transparent 3px 5px) left 9px / 13px 1.5px no-repeat;
}
.chart-key .k-ath::before {
  content: ''; position: absolute; left: 3.5px; top: 1px;
  border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #E9F1EC;
}

/* ---- liquidity ---------------------------------------------------------- */
.pool-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background .15s ease;
}
.pool-row:last-child { border-bottom: 0; }
.pool-row:hover { background: rgba(255, 255, 255, 0.025); }
.pool-name { font-size: 13px; font-weight: 600; color: var(--text); }
.pool-addr { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.pool-liq { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pool-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.pool-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(59, 240, 143, 0.45), var(--g)); }
.pool-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.tag {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 5px;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; vertical-align: 1px;
}
.tag.new { color: #5BE3FF; background: rgba(91, 227, 255, 0.1); }
.tag.bb { color: var(--gold); background: rgba(245, 184, 61, 0.12); }
.tag.arb { color: var(--muted); background: rgba(255, 255, 255, 0.05); }
/* new holder and sold-all marks: an emoji beside the side badge, in every layout —
   not a .tag, which the narrow layouts hide */
.hflag { display: inline-block; margin-left: 5px; font-size: 12px; line-height: 1; vertical-align: -1px; cursor: default; }
.tape td.c-side { white-space: nowrap; }
/* the share of all BTC2 each trader holds now */
.tape td.c-hold { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tape th.c-hold .hs { display: none; }
/* what this trade added or took away, after what the wallet held before it */
.tape td.c-hold .hd { font-size: 0.92em; }
.tape td.c-hold .hd.up { color: var(--up); }
.tape td.c-hold .hd.down { color: var(--down); }

/* ---- swap --------------------------------------------------------------- */
/* Jupiter's widget reads its colours from these, as bare RGB channels */
:root {
  --jupiter-plugin-primary: 59, 240, 143;
  --jupiter-plugin-background: 10, 16, 13;
  --jupiter-plugin-primary-text: 233, 241, 236;
  --jupiter-plugin-primaryText: 233, 241, 236;
  --jupiter-plugin-warning: 245, 165, 36;
  --jupiter-plugin-interactive: 24, 36, 30;
  --jupiter-plugin-module: 16, 25, 21;
}
.hud-note { margin-left: auto; font-size: 11.5px; color: var(--muted); }
#jupiter-plugin { height: 500px; overflow: hidden; }

/* Labels with a short form for the narrow column beside the chart */
.t-short { display: none; }
/* thin, dark scrollbars inside the panels, rather than the system's bright ones */
.scroll, .chat-log, #liq-rows, #w-connect, #w-view {
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

/* ---- the trades box: trades, holders, liquidity, wallet ------------------
   Four panels in one place, one showing at a time. They share the trades'
   grid slot wherever the trades sit — below the chart, beside it, or in the
   single column of a phone — and the tabs in each heading switch between them. */
.holders, .liq, .pnl { grid-area: tape; }
.box-off { display: none !important; }
.box-tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.28);
}
.box-tabs button {
  padding: 5px 12px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.box-tabs button:hover { color: var(--text); }
.box-tabs button.on { color: var(--g); background: var(--g-soft); box-shadow: inset 0 0 0 1px var(--g-line); }
.box-tabs button:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }
/* holders */
.h-table td.h-rank, .h-table th:first-child { width: 34px; color: var(--muted); }
.h-table tr.known td { color: var(--text-2); }
.h-table tr.known .wallet a { color: var(--gold); }
.h-table tr.mine td { background: var(--g-soft); }
.h-table .wallet a { color: var(--text); text-decoration: none; }
.h-table .wallet a:hover { color: var(--g); }
/* a phone's holders table keeps wallet, BTC2, value, PnL and how long each has held;
   the share and the rank give way (the rows are already in rank order) */
@media (max-width: 480px) {
  .holders .h-share { display: none; }
  .holders .h-table th:first-child, .holders .h-table td.h-rank { display: none; }
}
/* the narrowest phones: a little less air between the holders columns, so all five fit */
@media (max-width: 400px) {
  .holders .h-table th, .holders .h-table td { padding-left: 5px; padding-right: 5px; }
}
/* holders by what they hold: one panel over the table, its figures split by hairlines */
.h-tiers {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 10px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--raise); overflow: hidden;
}
.h-tiers[hidden] { display: none; }
.h-tier { min-width: 0; padding: 7px 2px 6px; text-align: center; border-left: 1px solid var(--line); cursor: default; }
.h-tier:first-child { border-left: 0; }
.h-tier em { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.h-tier b { display: block; margin-top: 2px; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* the share of all holders the tier is, quiet under its count */
.h-tier i { display: block; margin-top: 1px; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--g); opacity: 0.75; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  /* three by three on a phone: hairlines between the columns and between the rows */
  .h-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 10px; }
  .h-tier:nth-child(3n + 1) { border-left: 0; }
  .h-tier:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
.h-bar { width: 90px; }
.h-bar i { display: block; height: 4px; border-radius: 4px; background: var(--g); opacity: 0.7; min-width: 2px; }
.h-table tr.known .h-bar i { background: var(--gold); }

/* ---- swap / chat dock ----------------------------------------------------
   On a desktop the two share the top of the side column, one at a time, and
   the tabs replace their titles. Narrower, the swap is the TRADE sheet and the
   chat its own section after the trades, so the tabs are not shown there. */
.dock-tabs { display: none; }
@media (min-width: 1101px) {
  .dock-tabs {
    display: inline-flex; gap: 2px; padding: 3px;
    border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.28);
  }
  .dock-tabs button {
    position: relative; padding: 5px 13px; border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600;
    transition: color .15s ease, background .15s ease;
  }
  .dock-tabs button:hover { color: var(--text); }
  .dock-tabs button.on { color: var(--g); background: var(--g-soft); box-shadow: inset 0 0 0 1px var(--g-line); }
  .dock-tabs button:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }
  /* a message arrived while the swap had the slot */
  .dock-tabs button.has-new::after {
    content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--g); box-shadow: 0 0 0 2px rgba(10, 16, 13, 0.9);
  }
  .swap .hud-head h2, .chat .hud-head h2, .swap .hud-note { display: none; }
  /* both in the swap's place at the top of the column, whichever is showing */
  .side .swap, .side .chat { order: -1; }
  .side:not(.dock-chat) .chat, .side.dock-chat .swap { display: none; }
  /* the chat as tall as the swap it stands in for */
  .chat { display: flex; flex-direction: column; height: var(--dock-h, 546px); }
  .chat .chat-log { flex: 1; height: auto; min-height: 0; }
}

/* ---- chat --------------------------------------------------------------- */
.chat [hidden] { display: none !important; }
.chat-who { display: inline-flex; align-items: baseline; gap: 8px; }
.chat-who b { color: var(--text); font-weight: 600; }
.chat-log { height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0; }
.chat-log .hud-empty { padding: 110px 16px; }
.chat-msg { padding: 5px 16px; font-size: 12.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.chat-msg:hover { background: rgba(255, 255, 255, 0.02); }
.chat-nick { margin-right: 7px; font-weight: 600; color: var(--g); cursor: default; }
.chat-msg.mine .chat-nick { color: var(--gold); }
.chat-time { float: right; margin-left: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
/* the emoji a message has been met with, and the way to add one: a row of small
   pills after the text, the reader's own marked green */
.chat-res { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.chat-re, .chat-re-add {
  display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--text-2); font-family: inherit; font-size: 11px; line-height: 1; cursor: pointer;
}
.chat-re span { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.chat-re:hover, .chat-re-add:hover { border-color: var(--g-line); }
.chat-re.on { border-color: var(--g-line); background: var(--g-soft); }
.chat-re.on span { color: var(--g); }
/* quiet until it is wanted, but never hidden: a finger has no hover to reveal it */
.chat-re-add { padding: 0 5px; color: var(--faint); opacity: 0.4; transition: opacity 0.12s ease; }
.chat-msg:hover .chat-re-add, .chat-re-add:hover, .chat-re-add:focus-visible { opacity: 1; }
.chat-re:focus-visible, .chat-re-add:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.chat-picker {
  position: fixed; z-index: 60; display: flex; gap: 2px; padding: 4px;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-solid);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.chat-picker button {
  padding: 4px 6px; border: 0; border-radius: 7px; background: transparent;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.chat-picker button:hover { background: var(--raise); }
.chat-picker button:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }
.chat-form { padding: 10px 16px 12px; border-top: 1px solid var(--line); }
.chat-gate { display: grid; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.chat-rule { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.chat-note { margin: 0; padding: 0 16px 12px; font-size: 11.5px; line-height: 1.5; color: var(--down); }
.chat-note.ok { color: var(--muted); }

/* ---- wallet ------------------------------------------------------------- */
.linkish {
  margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--down); }
.w-connect { padding: 14px 16px; }
.w-wallets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.w-wallet {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; cursor: pointer; text-align: left;
  background: var(--raise); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  font-size: 12.5px; font-weight: 500; transition: border-color .15s ease, background .15s ease;
}
.w-wallet span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-wallet img { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.w-wallet:hover { border-color: var(--g-line); background: var(--g-soft); }
.w-wallet:disabled { opacity: 0.5; cursor: progress; }
.w-none { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.w-form { display: flex; gap: 8px; }
.w-form input {
  flex: 1; min-width: 0; padding: 9px 11px; outline: none;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line-2); border-radius: 10px;
  color: var(--text); font-family: var(--mono); font-size: 12px;
}
.w-form input::placeholder { color: var(--faint); font-family: var(--sans); }
.w-form input:focus { border-color: var(--g-line); box-shadow: 0 0 0 3px var(--g-soft); }
.w-form button {
  background: var(--g); color: #03140A; border: 0; border-radius: 10px; padding: 0 15px; cursor: pointer;
  font-size: 12.5px; font-weight: 700;
}
.w-privacy { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--faint); }
.w-addr { display: flex; gap: 10px; align-items: baseline; padding: 13px 16px 0; font-family: var(--mono); font-size: 12.5px; }
.w-addr a { color: var(--g); text-decoration: none; }
.w-addr a:hover { text-decoration: underline; }
#w-status { margin-left: auto; font-family: var(--sans); font-size: 11.5px; }
.w-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 12px 16px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.w-grid > div { background: var(--panel-solid); padding: 10px 12px; min-width: 0; }
.w-grid em { display: block; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.w-grid b {
  display: block; margin: 5px 0 2px; font-family: var(--mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.w-grid i { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-trades { font-size: 12px; }
.w-trades td { padding: 7px 16px; }
.side-b.xfer { color: #5BE3FF; background: rgba(91, 227, 255, 0.1); }
tr.mine td:first-child { box-shadow: inset 3px 0 0 #5BE3FF; }

/* ---- trades ------------------------------------------------------------- */
.toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--text-2);
}
.toggle input { accent-color: var(--g); width: 14px; height: 14px; margin: 0; }
/* the tape scrolls inside its own window, headings pinned, like a real terminal */
.scroll { overflow: auto; max-height: min(72vh, 720px); }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
th {
  position: sticky; top: 0; z-index: 1; background: var(--panel-solid);
  text-align: left; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 9px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.035); white-space: nowrap; color: var(--text); }
tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
th.r, td.r { text-align: right; }
tr.arb td { opacity: 0.5; }
tr.buyback td { background: rgba(245, 184, 61, 0.06); }
tr.t-new.buy td { animation: flash-up 1.8s ease-out; }
tr.t-new.sell td { animation: flash-down 1.8s ease-out; }
@keyframes flash-up { from { background: rgba(52, 226, 138, 0.2); } to { background: transparent; } }
@keyframes flash-down { from { background: rgba(255, 92, 112, 0.2); } to { background: transparent; } }
.side-b {
  display: inline-block; min-width: 42px; text-align: center; padding: 2px 7px; border-radius: 6px;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
}
.side-b.buy { color: var(--up); background: var(--up-bg); }
.side-b.sell { color: var(--down); background: var(--down-bg); }
.when { color: var(--muted); }
.pool { color: var(--text-2); font-family: var(--sans); font-size: 12px; font-weight: 500; }
.wallet a, .tx a { color: var(--text-2); text-decoration: none; }
.wallet a:hover, .tx a:hover { color: var(--g); }

/* ---- trades beside the chart (wide screens, chosen from the Trades header) - */
.tape-pos {
  display: none; align-items: center; gap: 7px; margin-left: auto; padding: 5px 10px; cursor: pointer;
  background: var(--raise); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tape-pos svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.tape-pos:hover { color: var(--text); border-color: var(--line-2); }
.tape-pos:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.tape-pos[aria-pressed="true"] { color: var(--g); border-color: var(--g-line); background: var(--g-soft); }
@media (min-width: 1440px) {
  .tape-pos { display: inline-flex; }
  .tape-pos + .toggle { margin-left: 4px; }
  .grid.tape-right {
    /* The trades keep the room the table needs — time, side, size, value, price,
       pool, the wallet and the share it holds, with nothing scrolling sideways —
       and no more: the chart was ending up the narrowest of the three, which is
       the wrong way round. The chat grows with the window between them. */
    grid-template-columns: minmax(0, 1fr) clamp(490px, 26vw, 560px) clamp(320px, 22vw, 420px);
    grid-template-areas: "stats stats stats" "chart tape side";
    grid-template-rows: auto auto;
  }
  /* the tape takes the chart's height (set in terminal.js) and scrolls inside it */
  .grid.tape-right .tape { display: flex; flex-direction: column; min-height: 0; }
  .grid.tape-right .tape .scroll { flex: 1; min-height: 0; max-height: none; }
  .grid.tape-right .tape h2 .dim, .grid.tape-right .tape .hud-foot { display: none; }
  /* a narrower column keeps time, side, size, value, price and pool */
  /* and the wallet, as every trade tape shows one: its first four characters, the
     full address on Solscan a click away */
  .grid.tape-right .tape .tx, .grid.tape-right .tape .w-b { display: none; }
  .grid.tape-right .tape th, .grid.tape-right .tape td { padding-left: 3px; padding-right: 3px; }
  /* a pool quoted in a long-named token stretched the whole column: cut short, the full name on hover */
  .grid.tape-right .tape .side-b { min-width: 34px; padding: 2px 4px; }
  .grid.tape-right .tape td.pool .q { display: inline-block; max-width: 5ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .grid.tape-right .tape .hflag { margin-left: 3px; }
  .grid.tape-right .tape .tag { display: none; }
  /* the other views beside the chart: the same column and height, scrolling inside */
  .grid.tape-right .box-pane { display: flex; flex-direction: column; min-height: 0; }
  .grid.tape-right .holders .scroll { flex: 1; min-height: 0; max-height: none; }
  /* beside the chart: the value stays, the bar and the wallet tail give way */
  .grid.tape-right .holders .h-bar, .grid.tape-right .holders .w-b { display: none; }
  .grid.tape-right .holders th, .grid.tape-right .holders td { padding-left: 6px; padding-right: 6px; }
  .grid.tape-right #liq-rows, .grid.tape-right #w-connect, .grid.tape-right #w-view { flex: 1; min-height: 0; overflow-y: auto; }
  /* One line of heading in the narrow column: short labels, the layout switch as
     an icon at the far end, and the tabs a little tighter. Wrapped onto a second
     row, the switch and the arbitrage toggle crowded the top of the table. */
  .grid.tape-right .t-long { display: none; }
  .grid.tape-right .t-short { display: inline; }
  .grid.tape-right .tape .hud-head, .grid.tape-right .box-pane .hud-head { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
  .grid.tape-right .box-tabs button, .grid.tape-right .box-pane .box-tabs button { padding: 5px 8px; font-size: 12px; }
  .grid.tape-right .tape-pos { margin-left: auto; padding: 5px 7px; }
  .grid.tape-right .tape-pos span { display: none; }
  .grid.tape-right .tape-pos + .toggle { margin-left: 0; font-size: 12px; white-space: nowrap; }
  .grid.tape-right .tape table { font-size: 12px; }
}
/* the tightest the three columns ever are: the page's margins and the gaps between
   the columns give way before the chart does */
@media (min-width: 1440px) and (max-width: 1599px) {
  .grid.tape-right { padding-left: 14px; padding-right: 14px; gap: 12px; }
}
/* a big screen: the trades and the chat take a little more, the chart the rest */
@media (min-width: 1800px) {
  .grid { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ---- the chart alone, framed on the main site (/terminal/chart/) ---------- */
body.embed { height: 100vh; overflow: hidden; }
body.embed::before { display: none; }
/* the chart, with a small trade window under it */
.embed-grid {
  height: 100vh; padding: 1px;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 270px; gap: 10px;
}
body.embed .chart, body.embed .tape { grid-area: auto; min-height: 0; display: flex; flex-direction: column; }
body.embed .chart-box { flex: 1; height: auto; min-height: 0; }
body.embed .tape .scroll { flex: 1; min-height: 0; max-height: none; }
body.embed .tape table { font-size: 12px; }
body.embed .tape th, body.embed .tape td { padding: 7px 8px; }
body.embed .tape .tag.arb { display: none; }
/* arbitrage is part of the picture on the main page: shown, and not faded */
body.embed tr.arb td { opacity: 1; }
@media (max-width: 480px) {
  body.embed .tape table { font-size: 11px; }
  body.embed .tape th, body.embed .tape td { padding: 6px 2px; }
  body.embed .tape th:first-child, body.embed .tape td:first-child { padding-left: 6px; }
  body.embed .tape th:nth-last-child(2), body.embed .tape td:nth-last-child(2) { padding-right: 6px; }
  body.embed .tape .side-b { min-width: 28px; padding: 2px 2px; }
}
body.embed #chart-status { margin-left: auto; }
.embed-open { margin-left: 14px; color: var(--g); text-decoration: none; white-space: nowrap; font-size: 12px; font-weight: 600; }
.embed-open:hover { text-decoration: underline; }
/* the terminal's chat, as the same small green pill its holders strip carries on a phone */
.embed-chat {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; margin-left: 14px; padding: 4px 10px 4px 8px;
  border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-soft);
  color: var(--g); font-family: var(--sans); font-size: 11.5px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
}
.embed-chat svg { width: 12px; height: 12px; fill: currentColor; }
.embed-chat:hover { border-color: var(--g); }
.embed-chat:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.embed-chat + .embed-open { margin-left: 12px; }

/* ---- trade button and swap sheet ----------------------------------------- */
.trade-btn, .sheet-close, .sheet-backdrop { display: none; }
.trade-btn {
  align-items: center; padding: 8px 16px; cursor: pointer; white-space: nowrap;
  border: 0; border-radius: 10px; color: #03140A; background: linear-gradient(180deg, #62F7A9, #22D877);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 22px -10px rgba(59, 240, 143, 0.7);
  transition: transform .15s ease, box-shadow .15s ease;
}
.trade-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px -10px rgba(59, 240, 143, 0.85); }
.trade-btn:focus-visible, .sheet-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sheet-close {
  align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 4px; cursor: pointer;
  background: var(--raise); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px;
}
.sheet-close:hover { color: var(--g); border-color: var(--g-line); }
/* the page stays put under an open sheet — iOS scrolls past overflow:hidden alone */
html.sheet-open, html.sheet-open body { overflow: hidden; overscroll-behavior: none; }
html.sheet-open body { position: fixed; left: 0; right: 0; width: 100%; }
/* the sheet and its backdrop live inside the grid's stacking layer, which sits
   under the sticky header; lifted above it while the sheet is open */
html.sheet-open .grid { z-index: 30; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  /* one column: what is happening first, then where the money sits, then your wallet */
  .grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stats" "chart" "tape" "chat"; grid-template-rows: none; }
  .side { display: contents; }
  .chat { grid-area: chat; }
  /* holders, liquidity and wallet share the trades' slot here too (see the trades box) */
  /* narrower screens keep what each wallet holds in dollars; only the bar gives way */
  .holders .h-bar { display: none; }
  .holders th, .holders td { padding-left: 8px; padding-right: 8px; }
  .box-tabs button { padding: 5px 10px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* seven cards in threes leaves holders alone on a row: there it is a slim strip across it */
  .stats .stat-holders { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; }
  /* in the strip each half reads along one line, watching at the far end */
  .stats .stat-holders > div { display: flex; align-items: baseline; gap: 12px; }
  .stats .stat-holders .sh-watch { margin-left: auto; align-self: center; gap: 4px; }
  .stats .stat-holders b { margin: 0; }

  .trade-btn { display: inline-flex; }
  .sheet-close { display: inline-flex; }
  .swap {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--panel-solid); border-width: 1px 0 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(105%); visibility: hidden;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.3s;
  }
  /* a grabber, so it reads as a sheet */
  .swap::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--line-2); }
  .swap.open { transform: none; visibility: visible; transition: transform 0.3s cubic-bezier(.2, .8, .2, 1); }
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .sheet-backdrop[hidden] { display: none; }
}
@media (max-width: 640px) {
  :root { --radius: 12px; }
  .grid { gap: 12px; padding-top: 14px; }
  /* six stats in two tight rows, so the chart starts within the first screen */
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stats .hud { padding: 10px 11px 9px; }
  .stats em { font-size: 9px; letter-spacing: 0.08em; }
  .stats b { font-size: 15px; margin: 5px 0 2px; }
  .stats i { font-size: 10px; }
  .chart .hud-head { flex-wrap: nowrap; padding: 10px 12px; }
  .chart .hud-head h2 .dim { display: none; }
  .chart-key { flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px 12px; }
  #chart-status { flex-basis: 100%; margin-left: 0; }
  .path, .ticker { display: none; }
  .bar { gap: 10px; }
  .denom { margin-left: auto; }
  .denom button { padding: 4px 7px; font-size: 11px; }
  .trade-btn { padding: 7px 12px; font-size: 12.5px; }
  .live { padding: 6px 9px; }
  /* the second half of each stat note does not fit a third of a phone */
  .stats .xtra { display: none; }
  /* a small green pill at the end of the holders strip, after the eye */
  .stats .stat-holders .sh-chat {
    display: inline-flex; align-items: center; gap: 5px; align-self: center; flex-shrink: 0;
    margin-left: 10px; padding: 4px 10px 4px 8px; cursor: pointer;
    border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-soft);
    color: var(--g); font-family: var(--sans); font-size: 11.5px; font-weight: 600; line-height: 1;
  }
  .stats .stat-holders .sh-chat svg { width: 12px; height: 12px; fill: currentColor; }
  .stats .stat-holders .sh-chat:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
  /* the sheet's title and close button on one line; Jupiter credits itself inside the widget */
  .swap .hud-head { flex-wrap: nowrap; }
  .swap .hud-note { display: none; }
  .swap .sheet-close { margin-left: auto; }
  #jupiter-plugin { height: 470px; }
  .chart-box { height: 340px; }
  .tfs button { padding: 4px 7px; }
  /* price and the trader both stay on a phone; the wallet shortens instead (terminal.js) */
  th, td { padding: 8px 4px; }
  th:first-child, td:first-child { padding-left: 12px; }
  th:last-child, td:last-child { padding-right: 12px; }
  table { font-size: 12px; }
  .side-b { min-width: 34px; padding: 2px 4px; }
  .tag.arb { display: none; }
  /* a buyback on a phone: the gold row and a gold BUY say it, without a tag widening the column */
  .tape .tag.bb { display: none; }
  tr.buyback .side-b.buy { color: var(--gold); background: rgba(245, 184, 61, 0.14); }
}
/* A narrow phone's tape keeps time, side, size, value, price, pool and wallet;
   the transaction link is the column that gives way */
@media (max-width: 480px) {
  .tape th.tx, .tape td.tx { display: none; }
  .tape table { font-size: 11px; }
  .tape th, .tape td { padding-left: 2px; padding-right: 2px; }
  .tape th:first-child, .tape td:first-child { padding-left: 6px; }
  .tape th:nth-last-child(2), .tape td:nth-last-child(2) { padding-right: 6px; }
  .tape .side-b { min-width: 28px; padding: 2px 2px; }
  /* the pool in the table's own size, with a little air after the price beside it */
  .tape td.pool { font-size: inherit; padding-left: 6px; }
  .tape th:nth-child(6) { padding-left: 6px; }
}
@media (max-width: 400px) {
  /* 10px: the share column has to fit beside the rest on the narrowest phones */
  .tape table, body.embed .tape table { font-size: 10px; }
  .tape td, .tape th { padding-left: 1px; padding-right: 1px; }
  /* a gap between the value and the price, which otherwise run together, paid for by the new-holder and sold-all marks sitting closer to their side */
  .tape th.c-price, .tape td.c-price { padding-left: 4px; }
  .tape .hflag { margin-left: 1px; }
  /* the share column headed "%", its figures without the sign (see holdTd) */
  .tape th.c-hold .hl { display: none; }
  .tape th.c-hold .hs { display: inline; }
  /* the terminal's panels closer to the screen edge, for the table's sake */
  .grid { padding-left: 6px; padding-right: 6px; }
}
/* the narrowest phones: the live light keeps its dot and drops the word (still read out) */
@media (max-width: 440px) {
  .live { padding: 8px; }
  /* three currencies in the bar beside Trade */
  .denom button { padding: 4px 6px; font-size: 10.5px; }
  #t-live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .live i::after, tr.t-new td { animation: none !important; }
  .trade-btn, .swap, .swap.open { transition: none; }
}