/* Shared product structure. Theme palettes, fonts and density remain customizable. */
.terminal-app { --ui-height: 34px; padding-inline: var(--page-pad); }
:root:has(.terminal-app .modal:not([hidden])) { overflow: hidden; }
.ui-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.terminal-app :is(button, .nav-button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ui-height); line-height: 1.2; font-weight: 500;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out;
}
.terminal-app button:disabled { cursor: not-allowed; }
.terminal-app button:active:not(:disabled) { filter: brightness(.94); }
.terminal-app :is(input, select, textarea) { min-height: var(--ui-height); transition: border-color 160ms ease-out, background-color 160ms ease-out; }
.terminal-app input[type="checkbox"] { min-height: 0; width: 14px; height: 14px; accent-color: var(--accent); }
.terminal-app a { text-underline-offset: 3px; }
.terminal-app .app-header .l1 {
  display: flex; flex-wrap: nowrap; gap: 28px; align-items: center;
  min-height: 64px; margin: calc(-1 * var(--page-pad)) calc(-1 * var(--page-pad)) 0;
  padding: 12px var(--page-pad); overflow: visible; border-bottom: 1px solid var(--border);
}
.terminal-app .brand {
  display: inline-flex; align-items: center; flex: 0 0 auto; gap: 9px;
  color: var(--white); font-size: 20px; font-weight: 650; letter-spacing: -.035em; margin: 0;
}
.terminal-app .brand::before { display: none; }
.terminal-app .brand:hover { text-decoration: none; }
.top-nav { display: flex; gap: 4px; align-self: stretch; }
.top-nav a {
  display: inline-flex; align-items: center; gap: 7px; position: relative;
  color: var(--dim); padding: 0 13px; border-radius: var(--control-radius); font-weight: 500;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.top-nav a:hover { background: var(--row-hover); color: var(--white); text-decoration: none; }
.top-nav a[aria-current="page"] { background: var(--control-bg); color: var(--white); }
.header-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; min-width: 0; }
.header-actions #clock { margin-right: 10px; font-size: 12px; white-space: nowrap; }
.header-actions #acct { display: flex; gap: 6px; }
.terminal-app .icon-button { width: var(--ui-height); padding-inline: 0; flex: 0 0 auto; }
.icon-button > span { display: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px 16px; }
.page-heading h1 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; margin: 0; color: var(--white); }
.page-heading p { color: var(--dim); font-size: 12px; margin: 4px 0 0; }
.view-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.terminal-app .btns:not(.big) { gap: 2px; padding: 3px; border-radius: var(--control-radius); background: var(--control-bg); }
.terminal-app .btns:not(.big) button { border-color: transparent; background: transparent; min-height: 28px; padding: 5px 12px; color: var(--dim); border-radius: max(3px, calc(var(--control-radius) - 3px)); }
.terminal-app .btns:not(.big) button:hover { color: var(--white); background: var(--row-hover); }
.terminal-app .btns:not(.big) button.on { background: var(--control-active); color: var(--white); }
.terminal-app #chainBtn { gap: 7px; min-height: 36px; }
.terminal-app #chainLabel { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; }
.terminal-app #chainLabel .cl { width: 15px; height: 15px; margin: 0; }
.terminal-app #statsRow { padding: 12px 0; border-block: 1px solid var(--border); gap: 12px; min-height: 44px; }
.terminal-app #statsLine { display: flex; flex-wrap: wrap; gap: 8px 0; line-height: 1.5; color: var(--dim); font-size: 12px; min-width: 0; }
.stat-item { display: inline-block; padding-inline: 14px; border-left: 1px solid var(--border); }
.stat-item:first-child { border-left: 0; padding-left: 0; }
.terminal-app #statsLine b { font-weight: 550; }
.terminal-app .chev { min-height: 28px; width: 28px; padding: 0; flex-shrink: 0; }
.terminal-app .tapehead { padding-block: 16px 10px; margin: 0; gap: 12px; border: 0; }
.terminal-app .tapehead .th-left { gap: 16px; flex: 1 1 auto; }
.terminal-app .tapehead .th-right { gap: 8px; }
.search-field {
  display: flex; align-items: center; position: relative; gap: 8px;
  min-width: 160px; flex: 0 1 320px; border: 1px solid var(--control-border);
  border-radius: var(--control-radius); background: var(--surface); padding-left: 11px;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.search-field > span { display: flex; color: var(--dim); }
.terminal-app .search-field #filter, .terminal-app .search-field input {
  width: 100%; min-width: 0; flex: 1; padding: 8px 4px 8px 0;
  border: 0; background: transparent; box-shadow: none; outline: none;
}
.search-field:focus-within { border-color: var(--dim); outline: 2px solid var(--accent); outline-offset: 2px; }
.search-field kbd { font: inherit; font-size: 11px; color: var(--dim); border: 1px solid var(--control-border); width: 18px; text-align: center; border-radius: 4px; margin-right: 9px; }
.market-filter { display: flex; align-items: center; gap: 8px; }
.market-filter > .d { font-size: 12px; margin-right: 2px; }
.terminal-app .tapehead .market-filter :is(#mcMin, #mcMax) { width: 70px; min-width: 0; padding-inline: 10px; }
.range-divider { color: var(--dimmer); }
.tape-options { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 10px; }
.visibility-options { display: flex; align-items: center; gap: 4px; min-width: 0; }
.options-label { font-size: 12px; color: var(--dim); margin-right: 8px; }
.control-divider { height: 15px; border-left: 1px solid var(--border); margin-inline: 6px; }
.terminal-app .toggle-control { font-size: 12px; color: var(--dim); border-color: transparent; background: transparent; padding-inline: 10px; min-height: 30px; }
.terminal-app .toggle-control:hover { color: var(--white); background: var(--row-hover); border-color: transparent; }
.terminal-app .toggle-control.on { color: var(--white); background: var(--control-active); border-color: var(--control-border); }
.toggle-indicator { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dimmer); opacity: .65; }
.on .toggle-indicator { background: var(--green); opacity: 1; }
.terminal-app #unverBtn.on { color: var(--red); border-color: var(--red); }
.terminal-app #soundBtn { min-height: var(--ui-height); padding: 0; }
.terminal-app .tablewrap { border: 1px solid var(--border); border-radius: var(--panel-radius); }
.terminal-app th { font-size: 12px; font-weight: 500; padding-block: 13px; }
.terminal-app td { padding-block: var(--row-py); vertical-align: middle; }
.terminal-app :is(th, td) { padding-inline: var(--cell-gap); }
.terminal-app tbody tr { transition: background-color 140ms ease-out; }
.terminal-app .empty { text-align: center; padding: 72px 24px; white-space: normal; line-height: 1.7; }
.terminal-app .side-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; }
/* no dot on the side column: the word already says buy or sell, and the colour repeats it */
.terminal-app .rstar { display: inline-flex; align-items: center; margin-right: 5px; vertical-align: middle; }
.terminal-app .rstar svg { width: 13px; height: 13px; }
.terminal-app .rstar.on svg { fill: color-mix(in srgb, var(--yellow) 18%, transparent); }
.terminal-app .avw, .terminal-app .av { width: 24px; height: 24px; }
.terminal-app .avw { vertical-align: -7px; margin-right: 7px; }
.terminal-app .av.ini { font-size: 10px; }
.terminal-app .tokw .av { border-radius: 6px; }
.terminal-app .tokw { margin-right: 8px; }
.terminal-app tr :is(.tok, .who) { color: var(--white); font-weight: 550; }
.terminal-app td.usd { font-weight: 550; }
.terminal-app td.mc { color: var(--cyan); }
.terminal-app td.mono .full { display: none; }
.terminal-app td.mono .short { display: inline; }
.terminal-app #tape [data-col="profile"] a { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; }
.terminal-app .tag:not(.spoof) { color: var(--dim); font-size: 9px; font-weight: 500; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px; background: transparent; }
.terminal-app .tag.spoof { font-size: 10px; }
.terminal-app .mutew, .terminal-app .hidetok { margin-left: 3px; }
.terminal-app tr:focus-within :is(.mutew, .hidetok) { opacity: 1; }
.terminal-app #more { padding-block: 20px 32px; }
.terminal-app #moreBtn { min-width: 150px; color: var(--dim); }
.terminal-app footer { min-height: 34px; padding: 8px var(--page-pad); font-size: 11px; gap: 20px; }
.terminal-app :is(.dot, .rsch.on) { box-shadow: none; text-shadow: none; }
.terminal-app #sysStatus { display: inline-flex; align-items: center; gap: 4px; }
.terminal-app .dd-menu { padding: 6px; min-width: 210px; border-radius: 12px; }
.terminal-app .dd-menu label { gap: 10px; min-height: 38px; padding: 8px 10px; border-radius: 7px; text-transform: capitalize; }
.terminal-app .dd-menu label:hover { background: var(--row-hover); color: var(--white); }
.terminal-app .dd-foot { padding: 10px; margin-top: 6px; }
.terminal-app .modal { padding: 20px; }
.terminal-app .modal .box { padding: 28px; border-radius: 16px; width: min(480px, 100%); max-height: calc(100dvh - 40px); }
.terminal-app .modal .box.wide { width: min(1100px, 100%); }
.terminal-app .modal .box.sleep { width: min(440px, 100%); }
.terminal-app .modal :is(h2, h3) { font-size: 20px; font-weight: 550; letter-spacing: -.02em; padding-right: 30px; margin: 0 0 12px; }
.terminal-app .modal p { line-height: 1.65; margin: 10px 0 16px; }
.terminal-app .modal .close { top: 16px; right: 16px; width: 30px; min-height: 30px; padding: 0; border-radius: 7px; }
.terminal-app .modal .close:hover { background: var(--control-bg); color: var(--white); }
.terminal-app .modal .tabs { background: var(--control-bg); padding: 4px; gap: 4px; border-radius: 10px; margin-block: 20px; }
.terminal-app .modal .tabs button { flex: 1; border-color: transparent; background: transparent; color: var(--dim); text-transform: capitalize; }
.terminal-app .modal .tabs button.on { background: var(--control-active); color: var(--white); }
.terminal-app #walletBtn { width: 100%; margin-top: 8px; min-height: 40px; }
.terminal-app #tabEmail .form input { width: 100%; }
.terminal-app .f-actions { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); flex-direction: row-reverse; }
.terminal-app .f-row { gap: 10px; margin-top: 24px; }
.terminal-app .f-row label { width: 100%; color: var(--fg); }
.terminal-app .col-item { background: transparent; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; }
.terminal-app .col-item:hover { background: var(--control-bg); }
.terminal-app .cols-list { padding-right: 6px; }
.terminal-app .col-grip { display: inline-flex; }
.terminal-app .token-toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding-block: 0 16px; }
.terminal-app .token-toolbar .search-field { flex: 0 1 300px; }
.terminal-app #tokens :is(th, td):first-child { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.terminal-app #tokens td:last-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.terminal-app #tokens .cub { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.terminal-app #traders td:nth-child(2) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.terminal-app .filters { gap: 10px; padding-block: 12px; border-block: 1px solid var(--border); }
.terminal-app > h2 { margin: 24px 0 12px; font-weight: 550; font-size: 15px; text-transform: capitalize; }
.terminal-app > h2 .d { text-transform: none; font-size: 12px; font-weight: 400; }
.terminal-app > .form { gap: 10px; margin-block: 12px; }
.terminal-app #howto { max-width: 90ch; font-size: 12px; line-height: 1.7; margin-bottom: 28px; }
.terminal-app details.admin { padding-top: 20px; margin-top: 28px; }
.terminal-app details.admin summary { padding-block: 8px; }
.terminal-app header .banner { padding: 7px 10px; border-radius: 6px; font-size: 11px; margin-top: 10px; }

/* Reference-led charcoal: restrained states and softly raised controls. */
:root[data-theme="dexscreener"] .terminal-app .app-header .l1 { background: #16181a; }
:root[data-theme="dexscreener"] .terminal-app button:not(.theme-dialog *) { box-shadow: inset 0 1px 0 #ffffff04; }
:root[data-theme="dexscreener"] .terminal-app button:not(.theme-dialog *):hover { background-color: #2a2d30; border-color: var(--control-hover); }
:root[data-theme="dexscreener"] .terminal-app button.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
:root[data-theme="dexscreener"] .terminal-app button.accent:hover { opacity: .9; }
:root[data-theme="dexscreener"] .terminal-app .btns:not(.big) { background: #1a1c1e; border: 1px solid var(--border); }
:root[data-theme="dexscreener"] .terminal-app .btns:not(.big) button.on { border-color: #414449; background: #303337; box-shadow: 0 1px 3px #0003, inset 0 1px 0 #ffffff06; }
:root[data-theme="dexscreener"] .terminal-app .toggle-control { box-shadow: none; }
:root[data-theme="dexscreener"] .terminal-app .toggle-control.on { background: #25282a; border-color: #373b3e; }
:root[data-theme="dexscreener"] .terminal-app #unverBtn.on { border-color: var(--red); }
:root[data-theme="dexscreener"] .terminal-app .toggle-control:hover { background: #292c2f; }
:root[data-theme="dexscreener"] ::selection { background: var(--accent); color: var(--accent-ink); }
:root[data-theme="dexscreener"] .terminal-app tr.big.buy { background: #67cd9c06; }
:root[data-theme="dexscreener"] .terminal-app tr.big.sell { background: #ef859106; }
:root[data-theme="dexscreener"] .terminal-app tbody tr:nth-child(even):not(.big) { background: #ffffff02; }
:root[data-theme="dexscreener"] .terminal-app tbody tr:hover { background: var(--row-hover); }
:root[data-theme="dexscreener"] .terminal-app tr.dim { opacity: .65; }
:root[data-theme="dexscreener"] .terminal-app :is(.modal .box, .dd-menu) { background: #202224; border-color: #3b3e42; box-shadow: var(--shadow); }
:root[data-theme="dexscreener"] .terminal-app .modal .box input { background: #191b1d; }
:root[data-theme="dexscreener"] .terminal-app .theme-dialog { --picker-bg: #202224; --picker-control: #2a2d30; --picker-active: #34383c; --picker-muted: #a5a9af; }
.terminal-app .theme-dialog::backdrop { background: #090a0bbf; }

@media (max-width: 1450px) {
  .terminal-app { --cell-gap: 12px; }
  .terminal-app #tape :is(th, td):is([data-col="profile"], [data-col="ca"], [data-col="tx"]) { display: none; }
  .terminal-app .header-actions #clock { display: none; }
  .terminal-app .stat-item:has(.xtra) { display: none; }
  .terminal-app #tokens :is(th, td):is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(13)) { display: none; }
  .terminal-app #traders :is(th, td):is(:nth-child(4), :nth-child(12), :nth-child(14)) { display: none; }
}
/* The search input is the only thing that can shrink, so before squeezing it, give back the
   width spent on chrome: the / shortcut hint and the fixed market-cap boxes. */
@media (max-width: 1300px) {
  .terminal-app .tapehead .search-field kbd { display: none; }
  .terminal-app .tapehead :is(#mcMin, #mcMax) { width: 70px; }
  /* Watchlist keeps only its star here; the title attribute still names it */
  .terminal-app .tapehead #mineBtn { width: 34px; padding-inline: 0; gap: 0; flex: 0 0 auto; }
  .terminal-app .tapehead #mineBtn > span { display: none; }
}
@media (max-width: 1100px) {
  .terminal-app { --page-pad: 18px; }
  .terminal-app .app-header .l1 { gap: 20px; }
  .top-nav a { padding-inline: 10px; }
  .terminal-app { --cell-gap: 8px; }
  .terminal-app .tapehead .th-left { flex-wrap: nowrap; gap: 10px; min-width: 0; }
  /* A wrapping flex container assigns items to lines by their HYPOTHETICAL size, so .th-left
     claims the whole line and drops the icons to a second row before the search is ever asked
     to shrink. Pin it to one line and let the search absorb the loss instead. */
  /* a basis it shrinks FROM, not grows from: a grow factor here made it 470px at 1100 */
  .terminal-app .tapehead .search-field { flex: 0 1 300px; min-width: 165px; }
  .terminal-app .tapehead .th-right { margin-left: auto; flex: 0 0 auto; }
  /* label off, icon only: the title attribute still names each one */
  .terminal-app .tapehead .th-right button { width: var(--ui-height); padding: 0; gap: 0; font-size: 0; }
  .terminal-app .tapehead .th-right button .ui-icon { width: 17px; height: 17px; }
  .terminal-app .tapehead .th-right #filtersCount { position: absolute; top: -5px; right: -5px; font-size: 10px; }
  .terminal-app .tapehead .th-right #filtersBtn { position: relative; overflow: visible; }
  .terminal-app .market-filter { display: none; }
  /* 9 columns in ~805px: cap the two free-growing cells, clip them, and spend the
     saved width on the names rather than on decoration. */
  .terminal-app #tape :is(th, td)[data-col="token"] { max-width: 160px; }
  .terminal-app #tape :is(th, td)[data-col="trader"] { max-width: 152px; }
  .terminal-app #tape :is(td)[data-col="token"],
  .terminal-app #tape :is(td)[data-col="trader"] { overflow: hidden; white-space: nowrap; }
  /* the hide-token control is a hover affordance; at this width the FIRST BUY tag needs its space */
  .terminal-app #tape [data-col="token"] .hidetok { display: none; }
  .terminal-app #tape [data-col="trader"] .avw { width: 20px; height: 20px; margin-right: 4px; vertical-align: -5px; }
  .terminal-app #tape [data-col="trader"] .av { width: 20px; height: 20px; }
  .terminal-app #tape [data-col="trader"] .who { display: inline-block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .terminal-app #tape [data-col="token"] .tok { display: inline-block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .terminal-app #tape .tag { font-size: 9px; padding-inline: 4px; }
  .terminal-app .header-actions #sleepBtn { width: 34px; font-size: 0; gap: 0; padding: 0; }
  .terminal-app .header-actions #sleepBtn svg { width: 16px; height: 16px; }
}
/* Below 641 the bar deliberately breaks into two rows, so the single-line pin starts there. */
@media (min-width: 641px) {
  .terminal-app .tapehead { flex-wrap: nowrap; }
}
@media (max-width: 800px) {
  .terminal-app { --page-pad: 16px; }
  .terminal-app .app-header .l1 { flex-wrap: wrap; gap: 12px; padding-block: 12px 0; }
  .terminal-app .brand { font-size: 19px; }
  .top-nav { order: 3; width: 100%; gap: 8px; border-top: 1px solid var(--border); padding-block: 8px; }
  .top-nav a { min-height: 36px; padding-inline: 12px; }
  .page-heading { padding-block: 22px 18px; }
  .page-heading h1 { font-size: 22px; }
  .page-heading p { font-size: 12px; }
  .view-controls { gap: 8px; justify-content: flex-end; }
  .terminal-app #chainLabel .cl { display: none; }
  .terminal-app #chainLabel .cl:first-child { display: inline-block; }
  .terminal-app #winBtns button { padding-inline: 9px; }
  .terminal-app #statsLine { gap: 8px 0; }
  .stat-item { padding-inline: 10px; }
  .terminal-app #statsLine .stat-item:nth-child(n+5) { display: none; }
  .terminal-app .tapehead .th-left { flex-basis: auto; gap: 8px; }
  .terminal-app .tapehead .th-right { margin-left: auto; }
  .terminal-app .tapehead .control-divider { display: none; }
  .terminal-app .tapehead .btns:not(.big) button { padding-inline: 8px; }
  /* At 758 the table overflowed its wrapper by 48px and pushed the Dex link out of reach.
     The two free-growing name cells are the only slack left, so tighten them further here. */
  .terminal-app #tape :is(th, td)[data-col="token"] { max-width: 130px; }
  .terminal-app #tape :is(th, td)[data-col="trader"] { max-width: 124px; }
  .terminal-app #tape [data-col="token"] .tok,
  .terminal-app #tape [data-col="trader"] .who { max-width: 62px; }
  /* market cap pair already hidden at 1100 */
  .terminal-app :is(#tokens, #traders) { font-size: 12px; }
}
/* Last band before the bar splits in two: keep every column, including Dex, inside the wrapper. */
@media (max-width: 720px) {
  .terminal-app { --cell-gap: 6px; }
  .terminal-app #tape :is(th, td)[data-col="token"] { max-width: 112px; }
  .terminal-app #tape :is(th, td)[data-col="trader"] { max-width: 106px; }
  .terminal-app #tape [data-col="token"] .tok,
  .terminal-app #tape [data-col="trader"] .who { max-width: 54px; }
}
@media (max-width: 580px) {
  .terminal-app { --page-pad: 12px; --ui-height: 36px; --cell-gap: 10px; font-size: 12px; }
  .terminal-app .header-actions { gap: 5px; }
  .terminal-app .header-actions #sleepBtn { width: 30px; }
  .terminal-app .header-actions #themeBtn { font-size: 0; gap: 0; width: 36px; padding: 0; }
  .terminal-app .header-actions #themeBtn .ui-icon { width: 17px; height: 17px; }
  .terminal-app .brand { font-size: 18px; gap: 5px; }
  .terminal-app .brand img { width: 25px; height: 25px; }
  .terminal-app .header-actions button.accent { padding-inline: 12px; }
  .top-nav { justify-content: space-between; }
  .top-nav a { flex: 1; justify-content: center; font-size: 12px; }
  .page-heading { flex-wrap: wrap; gap: 18px; }
  .page-heading h1 { font-size: 22px; }
  .view-controls { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  .terminal-app #chainBtn { padding-inline: 10px; font-size: 12px; }
  .terminal-app #winBtns button { min-height: 29px; padding-inline: 8px; font-size: 11px; }
  .terminal-app #chainLabel .cl { display: none; }
  .terminal-app #statsRow { padding-block: 10px; }
  .terminal-app #statsLine { font-size: 11px; }
  .terminal-app #statsLine .stat-item { padding-inline: 8px; }
  .terminal-app #statsLine .stat-item:first-child { padding-left: 0; }
  .terminal-app #statsLine .stat-item:nth-child(n+3) { display: none; }
  .terminal-app .tapehead { padding-block: 16px 10px; gap: 10px; }
  .terminal-app .tapehead .th-left { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .terminal-app .tapehead #sideBtns { justify-self: start; }
  .terminal-app .tapehead .search-field { width: 100%; min-width: 0; grid-row: 2; }
  .terminal-app .tapehead .market-filter { grid-row: 3; min-width: 0; width: 100%; margin-right: 0; }
  .terminal-app .tapehead .market-filter > .d { font-size: 11px; }
  .terminal-app .tapehead .market-filter :is(#mcMin, #mcMax) { flex: 1; width: 0; }
  .terminal-app .tapehead .th-right { top: 17px; bottom: auto; gap: 5px; }
  .terminal-app .tapehead .th-right button { font-size: 0; width: 34px; min-height: 34px; padding: 0; gap: 0; }
  .terminal-app .tapehead .th-right button .ui-icon { width: 15px; height: 15px; }
  .terminal-app .tapehead #filtersCount { font-size: 9px; position: absolute; top: -4px; margin-left: 26px; }
  .tape-options { flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
  .visibility-options { width: 100%; justify-content: space-between; gap: 0; }
  .options-label, .control-divider { display: none; }
  .terminal-app .visibility-options .toggle-control { padding-inline: 7px; min-height: 32px; font-size: 11px; gap: 5px; }
  .terminal-app #mineBtn { margin-left: 0; }
  .terminal-app th { font-size: 11px; padding-block: 12px; }
  .terminal-app #tape [data-col="time"] { display: none; }
  .terminal-app #tape :is(th, td) { padding-inline: 10px; }
  .terminal-app #tape [data-col="mcap"] { font-size: 11px; }
  .terminal-app #tape :is([data-col="token"], [data-col="trader"]) { max-width: 130px; }
  .terminal-app #tape .tok { max-width: 70px; }
  .terminal-app #tape [data-col="trader"] .who { max-width: 82px; }
  .terminal-app #tape :is(.mutew, .hidetok, .pl, .ai) { display: none; }
  .terminal-app #tape [data-col="trader"] .avw { display: none; }
  .terminal-app #tape .tokw { width: 20px; height: 20px; margin-right: 5px; vertical-align: -5px; }
  .terminal-app #tape .tokw .av { width: 20px; height: 20px; }
  .terminal-app #tape .tag:not(.spoof) { width: fit-content; font-size: 8px; padding: 1px 4px; margin-top: 3px; }
  .terminal-app #tape .usd { white-space: nowrap; }
  .terminal-app #tape .usd::before { content: attr(data-side); display: block; font-size: 9px; font-weight: 400; margin-bottom: 2px; }
  .terminal-app .modal { padding: 12px; }
  .terminal-app .modal .box { padding: 24px 20px; max-height: calc(100dvh - 24px); }
  .terminal-app .modal :is(h2, h3) { font-size: 19px; }
  .terminal-app .modal .close { top: 12px; right: 12px; }
  .terminal-app .f-actions button { min-height: 40px; }
  .terminal-app .dd-menu label { min-height: 44px; }
  .terminal-app .token-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .terminal-app .token-toolbar input { width: 100%; min-width: 0; }
  .terminal-app .token-toolbar .search-field { min-width: 0; }
  .terminal-app header .filters { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; }
  .terminal-app header .filters input { width: 100% !important; min-width: 0; }
  .terminal-app > .form input { flex: 1 1 100%; min-width: 0; }
  .terminal-app footer { gap: 10px; }
  .terminal-app #tokens :is(th, td):last-child { display: none; }
  .terminal-app #tokens :is(th, td) { padding-inline: 8px; }
  .terminal-app #tokens td:first-child { max-width: 125px; }
  .terminal-app #traders :is(th, td):is(:nth-child(5), :nth-child(8)) { display: none; }
  .terminal-app #traders td:nth-child(2) { max-width: 126px; }
}
@media (max-width: 370px) {
  .terminal-app .brand { font-size: 16px; gap: 4px; }
  .terminal-app .brand img { width: 22px; height: 22px; }
  .terminal-app .header-actions { gap: 3px; }
  .terminal-app .header-actions :is(#themeBtn, #soundBtn) { width: 28px; }
  .terminal-app .header-actions button.accent { padding-inline: 8px; }
  .terminal-app .app-header .l1 { column-gap: 4px; }
  .terminal-app #tape :is(th, td) { padding-inline: 7px; }
  .terminal-app #tape .tokw { display: none; }
}
@media (hover: none) {
  .terminal-app :is(.mutew, .hidetok) { opacity: 1; }
  .terminal-app .top-nav a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .terminal-app *, .terminal-app *::before, .terminal-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- themes tip ---------- */
/* Shown once to people who have never picked a theme. Tokens only, and the preview swatch
   carries its own data-theme so it repaints itself as it cycles the real theme list. */
.theme-tip { position: fixed; z-index: 48; width: 296px; max-width: calc(100vw - 16px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--panel-radius);
  padding: 14px; box-shadow: var(--shadow); font-size: var(--font-small); }
.theme-tip-x { position: absolute; top: 8px; right: 8px; min-height: 24px; width: 24px; padding: 0;
  border: 0; background: transparent; color: var(--dim); }
.theme-tip-x:hover { color: var(--white); }
.theme-tip-head { color: var(--white); font-weight: 600; font-size: var(--font-size); margin-bottom: 10px; }
.theme-tip-shot { background: var(--bg); border: 1px solid var(--border); border-radius: var(--control-radius);
  padding: 8px; overflow: hidden; font-family: var(--font);
  transition: background-color 380ms ease, border-color 380ms ease; }
.theme-tip-shot .tt-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--fg); font-size: 10px; }
.theme-tip-shot .tt-bar b { color: var(--white); }
.theme-tip-shot .tt-pill { margin-left: auto; padding: 1px 6px; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink, #fff); font-weight: 600; }
.theme-tip-shot .tt-row { display: flex; align-items: center; gap: 7px; padding: 3px 0;
  border-top: 1px solid var(--row-border); font-size: 10px; }
.theme-tip-shot .tt-dim { color: var(--dim); }
.theme-tip-shot .tt-tok { color: var(--white); font-weight: 600; }
.theme-tip-shot .tt-buy { color: var(--green); font-weight: 600; }
.theme-tip-shot .tt-sell { color: var(--red); font-weight: 600; }
.theme-tip-shot .tt-n { margin-left: auto; font-variant-numeric: tabular-nums; }
.theme-tip-body { color: var(--dim); margin: 10px 0 12px; line-height: 1.5; }
.theme-tip-cta { width: 100%; justify-content: space-between; }
.theme-tip-name { color: var(--dim); font-weight: 400; text-transform: capitalize; }
.f-toggles { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }

/* ---------- token page ---------- */
/* Tokens only, so every theme carries it. Shares .adm-tile with the admin dashboard. */
.tk-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.tk-id h1 { margin: 0; }
.tk-id p { margin: 2px 0 0; color: var(--dim); font-size: 12px; }
.tk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 16px; }
.tk-panel { margin: 0 0 18px; }
.tk-panel-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.tk-panel-head h2 { margin: 0; font-size: 14px; color: var(--white); }
.tk-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: var(--font-small); }
.tk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.tk-dot.buy { background: var(--green); } .tk-dot.sell { background: var(--red); } .tk-dot.thesis { background: var(--accent); }
/* The chart is TradingView lightweight-charts in .tk-canvas; .tk-overlay holds the thesis faces,
   pinned from the chart's own coordinate system so they track pan and zoom. */
.tk-chart { position: relative; height: 380px; background: var(--table-bg); border: 1px solid var(--border); border-radius: var(--panel-radius); padding: 6px 4px 4px; overflow: hidden; }
.tk-canvas { position: absolute; inset: 6px 4px 4px; z-index: 1; }
/* the faces sit ABOVE the canvases; without an explicit layer the library paints over them */
.tk-overlay { position: absolute; inset: 6px 4px 4px; pointer-events: none; overflow: hidden; z-index: 3; }
.tkmk { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: auto; cursor: pointer; visibility: hidden; }
.tkmk-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--control-active);
  border: 2px solid var(--bg); box-shadow: 0 0 0 1.5px var(--control-hover), 0 2px 8px #0007; display: block; }
.tkmk-av.ini { display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--white); }
.tkmk-pl { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 4px;
  background: var(--bg); padding: 1px; object-fit: contain; box-shadow: 0 0 0 1px var(--border); }
.tkmk:hover { z-index: 4; }
.tkmk:hover .tkmk-av { box-shadow: 0 0 0 2px var(--white), 0 2px 10px #0009; }
.tkmk.off { opacity: .5; }
/* a 30px face on a 745px chart is a blob; scale it with the panel */
@media (max-width: 860px) {
  .tkmk { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .tkmk-av { width: 22px; height: 22px; border-width: 1.5px; }
  .tkmk-av.ini { font-size: 10px; }
  .tkmk-pl { width: 11px; height: 11px; right: -2px; bottom: -2px; border-radius: 3px; }
  .tk-ohlc { font-size: 10px; gap: 4px; left: 8px; top: 7px; }
}

/* OHLC readout, top-left, the way a terminal shows it */
.tk-ohlc { position: absolute; left: 12px; top: 10px; z-index: 2; pointer-events: none;
  font-size: var(--font-small); color: var(--white); letter-spacing: .01em; display: flex; gap: 5px; align-items: baseline; }
.tk-ohlc .d { color: var(--dimmer); margin-right: 1px; }

/* thesis card on hover */
.tk-tip { position: absolute; z-index: 6; width: min(330px, 84%); pointer-events: none;
  background: var(--surface); border: 1px solid var(--control-hover); border-radius: var(--panel-radius);
  padding: 9px 11px; box-shadow: 0 10px 28px #000a; }
.tk-tip[hidden] { display: none; }
.tk-tip-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.tk-tip-head .av { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; position: static; flex: none; }
.tk-tip-head .av.ini { display: grid; place-items: center; background: var(--control-active); font-size: 10px; color: var(--white); }
.tk-tip-head b { color: var(--white); }
.tk-tip-head .pl { margin: 0; }
.tk-tip-head .tk-mult { margin-left: auto; }
.tk-tip-body { margin: 0; color: var(--fg); font-size: var(--font-small); line-height: 1.5; white-space: pre-wrap;
  max-height: 8.4em; overflow: hidden; }
.tk-tip-foot { margin-top: 6px; font-size: 10px; }
/* fallback line chart, used when a token has no candle feed */
.tk-fallback { width: 100%; height: 100%; display: block; }
.tk-fallback .ln { fill: none; stroke: var(--dim); stroke-width: 1.2; opacity: .55; vector-effect: non-scaling-stroke; }
.tk-fallback .pt { stroke: none; }
.tk-fallback .pt.buy { fill: var(--green); } .tk-fallback .pt.sell { fill: var(--red); }
#tkFills td.who { white-space: nowrap; }
.tk-axis { display: flex; justify-content: space-between; color: var(--dim); font-size: var(--font-small); padding: 2px 0 4px; }
.tk-thesis { border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--table-bg); padding: 10px 12px; margin-bottom: 8px; }
.tk-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--font-small); }
.tk-who b { color: var(--white); font-size: var(--font-size); }
.tk-who .av { width: 26px; height: 26px; border-radius: 50%; }
.tk-when { margin-left: 2px; }
.tk-mult { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-text { margin: 7px 0 0; color: var(--fg); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#tkFills { border-collapse: collapse; width: 100%; white-space: nowrap; }
#tkFills th { text-align: left; color: var(--dim); font-weight: 500; font-size: var(--font-small); padding: 8px var(--cell-gap) 8px 0; border-bottom: 1px solid var(--border); }
#tkFills td { padding: var(--row-py) var(--cell-gap) var(--row-py) 0; border-bottom: 1px solid var(--row-border); }
#tkFills th.num, #tkFills td.num { text-align: right; font-variant-numeric: tabular-nums; }
#tkFills tbody tr:hover { background: var(--row-hover); }
#tkFills tr.buy .side, #tkFills tr.buy .usd { color: var(--green); }
#tkFills tr.sell .side, #tkFills tr.sell .usd { color: var(--red); }
@media (max-width: 720px) {
  .tk-img { width: 36px; height: 36px; }
  .tk-chart { height: 280px; }
}
.terminal-app #tape .cacopy { color: var(--dimmer); cursor: pointer; margin-left: 5px; font-size: 11px; }
.terminal-app #tape .cacopy:hover { color: var(--white); }
.terminal-app #tape a.tok:hover { text-decoration: underline; }
/* the copy control is a per-row affordance, not a permanent column of glyphs */
.terminal-app #tape .cacopy { opacity: 0; transition: opacity 120ms ease-out; vertical-align: -2px; }
.terminal-app #tape tr:hover .cacopy,
.terminal-app #tape .cacopy:focus-visible { opacity: 1; }
/* the tick stays visible for its moment even if the pointer leaves the row */
.terminal-app #tape .cacopy.copied { opacity: 1; color: var(--green); }

/* a trader's follow-up posts under their thesis — pump.fun's "show more updates" */
.tk-update { margin: 7px 0 0 0; padding-left: 10px; border-left: 2px solid var(--row-border); }
.tk-update .d { font-size: 10px; }
.tk-update p { margin: 1px 0 0; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Traders page: the finder shares the heading row with the window buttons and Watchlist, so it
   takes a fixed slice rather than the search-field default that would push them onto a second line. */
.page-heading .search-field { flex: 0 1 200px; min-width: 140px; }

/* ---------- traders: filter strip + sortable headers ---------- */
.t-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: var(--font-small); }
.t-filters > .d { margin-right: 2px; }
.t-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); white-space: nowrap; }
.t-filters input { width: 78px; min-height: 28px; padding: 2px 7px; }
.t-filters button { min-height: 28px; padding: 2px 10px; }
/* a categorical cut, so it reads as a segmented control rather than another empty box */
.t-filters .filter-group { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); white-space: nowrap; }
.t-filters #fPlatform button { display: inline-flex; align-items: center; padding: 2px 8px; }
.t-filters #fPlatform .pl { width: 12px; height: 12px; }
/* the whole header cell is the hit target, so the arrow never has to be aimed at */
#traders thead th[data-k] { cursor: pointer; user-select: none; position: relative; padding-right: 14px; }
#traders thead th[data-k]:hover { color: var(--white); }
#traders thead th.sorted { color: var(--white); }
#traders thead th[data-k]::after { content: ''; position: absolute; right: 4px; opacity: .55; font-size: 9px; }
#traders thead th.sorted[data-dir="desc"]::after { content: '▼'; }
#traders thead th.sorted[data-dir="asc"]::after { content: '▲'; }

/* ---------- token X account column + hover card ---------- */
.terminal-app #tape td.xcell { white-space: nowrap; }
.terminal-app #tape .xlink { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); text-decoration: none; }
.terminal-app #tape .xlink:hover { color: var(--white); }
.terminal-app #tape .xlink .xi { opacity: .8; }
.terminal-app #tape .xlink .xh { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }

/* The card is appended to <body> and positioned in script, so it is never clipped by the
   table's overflow the way an in-cell popover would be. */
.x-card { position: fixed; z-index: 60; width: 272px; overflow: hidden; max-height: 80vh;
  background: var(--surface); border: 1px solid var(--control-hover); border-radius: var(--panel-radius);
  box-shadow: 0 12px 30px #000a; font-size: var(--font-small); }
.x-card[hidden] { display: none; }
.x-banner { height: 76px; background: var(--control-active); }
.x-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-body { display: flex; align-items: center; gap: 8px; padding: 9px 11px 4px; }
.x-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); background: var(--control-active); flex: none; }
.x-meta { display: flex; flex-direction: column; min-width: 0; }
.x-meta b { color: var(--white); }
.x-stats { padding: 2px 11px 10px; line-height: 1.5; }
.x-stats b { color: var(--white); }
/* A long bio used to be cut off mid-sentence with no way to read the rest. Scroll it instead —
   the card keeps itself open while the pointer is inside, so the wheel reaches this element. */
.x-bio { margin: 5px 0 0; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 7.5em; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.x-bio::-webkit-scrollbar { width: 6px; }
.x-bio::-webkit-scrollbar-thumb { background: var(--control-hover); border-radius: 3px; }
.x-bio::-webkit-scrollbar-track { background: transparent; }
/* a hint that there is more below, which a bare clipped edge does not give */
.x-bio { scrollbar-width: thin; scrollbar-color: var(--control-hover) transparent; }

/* the X account's own picture in the tape column, replacing the generic glyph */
.terminal-app #tape .xlink .xav { width: 15px; height: 15px; border-radius: 50%;
  object-fit: cover; background: var(--control-active); flex: none; display: block; }

/* Absorbs a wide table's leftover width so the real columns keep their natural size no matter how
   many Customize has hidden. Collapses to nothing when every column is on. */
.terminal-app #tape .tpad { width: 100%; padding: 0; border: 0; }

/* Roster pager. The table renders one page at a time now; this sits outside the table because a
   stray element inside <table> gets hoisted out by the parser and the table vanishes. */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 0 2px; }
.pager[hidden] { display: none; }
.pager .pg { font: inherit; color: var(--fg); background: var(--control); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 11px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.pager .pg:hover:not(:disabled) { background: var(--control-hover); border-color: var(--line-strong, var(--line)); }
.pager .pg:disabled { opacity: .4; cursor: default; }
.pager .pg-at { color: var(--fg-dim, var(--fg)); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; }

/* Admin: set a trader's picture by hand. */
.pfp-row { flex-wrap: wrap; align-items: center; gap: 8px; }
.pfp-row input[type="file"] { color: var(--fg-dim, var(--fg)); font: inherit; max-width: 210px; }
.pfp-prev { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); background: var(--control); }