/* Nyx — terminal de spot na testnet da Arc.
 *
 * Direção (2026-09-08, pedido explícito do dono): fork visual do Prism
 * (prismfinance.net/trade). Isto é o OPOSTO da direção anterior — até aqui o
 * Nyx seguia linguagem de "painel de instrumento" (zero raio, hairline fina,
 * sem card). Agora todo botão, chip, input e painel usa canto arredondado, e
 * o terminal vira um conjunto de cartões (rail / centro / ticket) sobre um
 * fundo levemente mais escuro que o cartão, em vez de três colunas coladas
 * por fio. A regra de cor de mercado continua igual: verde é alta, vermelho
 * é baixa, o resto é preto, branco e cinza — cor que não significa nada num
 * terminal de preço continua sendo ruído, só que agora dentro de cantos
 * arredondados.
 */

/* ── tokens ────────────────────────────────────────────────────────────────
   O bloco `:root` puro carrega a paleta clara inteira. Os blocos de tema
   depois só REDEFINEM os mesmos nomes, nunca declaram cor nova: assim a página
   nunca cai num estado em que metade dos tokens não existe.                */
:root {
  color-scheme: light dark;

  --paper: #ffffff;
  --sunk: #f4f5f6;
  --canvas: #eceef1;
  --ink: #0b0b0c;
  --mute: #6f747c;
  --faint: #a2a7ae;
  --rule: #e3e5e8;
  --rule-firm: #c6cad0;

  --up: #06724d;
  --down: #bd2f47;
  --up-wash: #06724d14;
  --down-wash: #bd2f4714;

  --u1: 4px;
  --bar: 56px;
  --rail: 300px;
  --ticket: 328px;
  --depth: 244px;

  /* Escala de raio: é a mudança de direção inteira resumida em quatro
     números. Chip e pílula usam --r-pill (canto totalmente redondo), botão e
     input usam --r-md, cartão grande (rail/centro/ticket) usa --r-lg. */
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(10, 10, 12, 0.06);
  --shadow-2: 0 8px 24px rgba(10, 10, 12, 0.08);

  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0f11;
    --sunk: #17181b;
    --canvas: #0a0a0b;
    --ink: #f2f3f4;
    --mute: #8b9098;
    --faint: #5b6068;
    --rule: #26282c;
    --rule-firm: #383b40;

    --up: #35c48d;
    --down: #f0596f;
    --up-wash: #35c48d1a;
    --down-wash: #f0596f1a;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --paper: #0e0f11;
  --sunk: #17181b;
  --canvas: #0a0a0b;
  --ink: #f2f3f4;
  --mute: #8b9098;
  --faint: #5b6068;
  --rule: #26282c;
  --rule-firm: #383b40;

  --up: #35c48d;
  --down: #f0596f;
  --up-wash: #35c48d1a;
  --down-wash: #f0596f1a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* ── base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* O `display` do agente de usuário para `[hidden]` é a regra mais fraca que
   existe, e QUALQUER `display` nosso a vence — foi assim que um botão com
   `hidden` apareceu na tela: `.cta` declara `display: inline-flex`. Um botão
   que devia estar escondido e aparece é pior que um erro de layout quando o
   botão em questão manda uma transação. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

button, input, select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-radius: var(--r-sm);
}

::selection { background: var(--ink); color: var(--paper); }

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: var(--faint);
  white-space: nowrap;
}

.up { color: var(--up); }
.dn { color: var(--down); }

/* ── ícone de monograma ─────────────────────────────────────────────────────
   Cada ativo do Nyx é uma ação de teste sem lastro, então nenhum logo real de
   empresa de capital aberto aparece na interface. O ícone é gerado: um
   círculo com 1-2 letras do ticker, cor derivada de um hash determinístico do
   próprio símbolo (ver src/ui.js → corDoTicker). Mesmo ticker, mesma cor,
   sempre — sem gradiente, sem brilho, flat de propósito. */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: none;
}

/* ── moldura do terminal ────────────────────────────────────────────────── */
#shell {
  display: grid;
  grid-template-rows: var(--bar) 1fr;
  height: 100vh;
  height: 100dvh;
  background: var(--canvas);
}

/* barra superior: agora serve TODAS as páginas do Nyx, não só o terminal —
   é a mesma barra em toda página, com a marca à esquerda, a fila de abas, o
   selo de rede, o tema e a carteira à direita, igual ao Prism. */
#bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  height: var(--bar);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

#brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  flex: none;
}

/* A marca é a logo do Nyx: monograma branco sobre preto quase puro.
   O PNG já vem com o fundo escuro, então o raio é aplicado na própria imagem —
   assim o fundo preto vira o selo, e não um retângulo solto sobre a barra
   clara (a página abre no tema claro por padrão). */
#brand .mark {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: block;
  object-fit: cover;
  flex: none;
  background: var(--ink);
}

#brand .word {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15.5px;
}

#tabs { display: flex; gap: 2px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }

#tabs a {
  padding: 8px 13px;
  color: var(--mute);
  font-size: 13px;
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}

#tabs a:hover { color: var(--ink); background: var(--sunk); }

#tabs a[aria-current="true"] {
  color: var(--paper);
  background: var(--ink);
  font-weight: 600;
}

#bar .spacer { flex: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
  flex: none;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}

.dot.live { background: var(--up); }

#connect {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}

#connect[data-on="true"] {
  background: var(--sunk);
  color: var(--ink);
  border: 1px solid var(--rule-firm);
  font-family: var(--mono);
  font-weight: 400;
}

/* ── corpo: quatro cartões sobre o fundo, não colunas coladas por fio ─────
   O terminal ganhou uma coluna: rail (mercados) | centro (gráfico) |
   profundidade | ticket. A escada de profundidade é estreita de propósito,
   como um livro de ofertas, e some antes do ticket quando a tela aperta —
   ela é leitura, o ticket é ação. */
/* Três colunas é o PADRÃO, e a quarta é opt-in por classe. Ao contrário
   (quatro por padrão, uma classe para tirar) qualquer página que só tenha
   rail/centro/ticket — predict.html hoje, e a próxima que aparecer — ganha uma
   coluna fantasma e um buraco no meio sem que ninguém tenha mexido nela. */
#body {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--ticket);
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

#body.com-depth { grid-template-columns: var(--rail) minmax(0, 1fr) var(--depth) var(--ticket); }

#rail, #center, #ticket, #depth {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── trilho de mercados ─────────────────────────────────────────────────── */
.rail-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 46px;
  border-bottom: 1px solid var(--rule);
  color: var(--faint);
  flex: none;
}

#search {
  border: 0;
  background: none;
  padding: 0;
  height: 100%;
  font-size: 13px;
  width: 100%;
  min-width: 0;
  color: var(--ink);
}

#search:focus { outline: none; }
#search::placeholder { color: var(--faint); }
#search::-webkit-search-cancel-button { appearance: none; }

#railtabs {
  display: flex;
  gap: 3px;
  padding: 10px 12px 6px;
  flex: none;
}

#railtabs button {
  flex: 1;
  padding: 6px 4px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  background: var(--sunk);
  white-space: nowrap;
}

#railtabs button:hover { color: var(--ink); }

#railtabs button[aria-selected="true"] {
  color: var(--paper);
  background: var(--ink);
  font-weight: 700;
}

/* O recado do trilho não é decoração: é onde a tela explica por que a coluna
   de 24 h está toda em travessão. Ele carrega número medido, não desculpa. */
#railnote {
  margin: 2px 12px 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  border: 1px dashed var(--rule-firm);
  color: var(--mute);
  white-space: normal;
  line-height: 1.5;
  font-size: 10.5px;
  flex: none;
}

#railhead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 4px 16px 8px;
  flex: none;
}

#list { overflow-y: auto; flex: 1; padding: 0 8px 8px; }

#railfoot { padding: 14px; border-top: 1px solid var(--rule); flex: none; }
/* `.label` não quebra linha (é feito para rótulo de uma palavra), e a frase da
   torneira saía cortada: "one claim per address eve". Aqui é frase, e quebra. */
#railfoot .label { white-space: normal; line-height: 1.5; }
#railfoot .cta { width: 100%; justify-content: center; padding: 8px; font-size: 12px; }
#railfoot #faucet-msg { margin-top: 8px; white-space: normal; line-height: 1.5; }

/* A linha da lista virou item de lista arredondado, não linha de tabela.
   Agora ela tem estrela à esquerda, e a área clicável do ativo é um botão
   separado — favoritar não pode selecionar o ativo sem querer. */
.row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  width: 100%;
  border-radius: var(--r-md);
  margin-bottom: 2px;
}

.row:hover { background: var(--sunk); }

.row[aria-selected="true"] {
  background: var(--sunk);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.row .star {
  display: grid;
  place-items: center;
  width: 24px;
  height: 30px;
  margin-left: 5px;
  color: var(--faint);
  border-radius: var(--r-sm);
  flex: none;
}

.row .star:hover { color: var(--ink); }
.row .star.on { color: #d9a021; }

.row .pick {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px 8px 5px;
  text-align: left;
  border-radius: var(--r-md);
}

.row .pick > span:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.row .sym-wrap { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.row .sym { font-weight: 700; font-size: 13px; letter-spacing: -0.01em; flex: none; }

.row .co {
  color: var(--faint);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.row .px { font-size: 13px; }
.row .sub { font-size: 10.5px; color: var(--faint); }

/* Preço em cima, variação de 24 h embaixo. Em linha os dois se encostavam e o
   travessão do 24 h parecia parte do preço. */
.row .r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  flex: none;
}

/* ── centro ─────────────────────────────────────────────────────────────── */
#head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--rule);
  flex: none;
}

#head {
  padding: 16px 20px 14px;
}

#head .top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#head .top .spacer { flex: 1; }

/* barra de timeframe: as mesmas seis resoluções que o motor de velas aceita */
#tf { display: flex; gap: 2px; flex: none; }

#tf button,
#zoomctl button {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
}

#tf button:hover,
#zoomctl button:not(:disabled):hover { color: var(--ink); background: var(--sunk); }

#tf button[aria-selected="true"] {
  color: var(--paper);
  background: var(--ink);
  font-weight: 700;
}

/* Resolução que a vida do pool não sustenta: continua CLICÁVEL de propósito.
   Clicar nela é a pergunta "por que não tem um ano de histórico?", e a resposta
   está escrita no lugar do gráfico. Botão desabilitado não responde nada. */
#tf button[data-longo="true"] {
  color: var(--faint);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

#tf button[data-longo="true"][aria-selected="true"] {
  color: var(--paper);
  text-decoration-color: var(--paper);
}

/* zoom: mesmo tamanho e mesmo raio dos timeframes, separado por um fio para
   não parecer uma sétima resolução */
#zoomctl {
  display: flex;
  gap: 2px;
  flex: none;
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid var(--rule);
}

#zoomctl button {
  min-width: 26px;
  border: 1px solid var(--rule);
  line-height: 1;
}

#zoomctl button:disabled { opacity: 0.4; cursor: default; }

/* Os dois sinais precisam de mais corpo que o texto "fit" para serem
   clicáveis com confiança. O seletor repete o pai de propósito: `#z-in`
   sozinho tem especificidade menor que `#zoomctl button` e a regra não
   pegava. */
#zoomctl #z-in, #zoomctl #z-out { font-size: 14px; padding: 3px 9px; }

.pxrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

#hchg {
  font-size: 13px;
  color: var(--faint);
  letter-spacing: -0.01em;
}

#hsym {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

#hco { color: var(--mute); font-size: 13px; }

#hpx {
  font-size: clamp(2.6rem, 5.6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 12px 0 0;
  font-weight: 400;
}

#hpx.flash { animation: tick 420ms ease-out; }

@keyframes tick {
  from { background: var(--sunk); }
  to { background: transparent; }
}

#hmeta {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Fatos agora vivem em chips arredondados, não separados por fio vertical. */
#hmeta > div {
  padding: 7px 12px;
  background: var(--sunk);
  border-radius: var(--r-md);
}

#hmeta .v { font-size: 13px; margin-top: 2px; }

#chartwrap { flex: 1 1 auto; min-height: 220px; position: relative; border-top: 1px solid var(--rule); }
#chart { display: block; width: 100%; height: 100%; }

/* Quando não há negócio suficiente o canvas fica lá, vazio, e o cartaz explica
   com números reais por quê. Nunca uma linha desenhada sobre um ponto só. */
#chartnote {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 32px;
  text-align: center;
  pointer-events: none;
  background: var(--paper);
}

/* `display: grid` acima é uma regra de ID (1,0,0) e ganha do `[hidden]` do
   navegador (0,1,0). O JS esconde o cartaz pondo `hidden`, e o atributo não
   fazia nada: o cartaz OPACO ficava por cima do gráfico desenhado. O defeito
   ficou invisível enquanto os pools não tinham negócio nenhum, porque aí o
   cartaz devia mesmo aparecer — apareceu na primeira vez que havia vela para
   tapar. Peça certa isolada, errada na composição. */
#chartnote[hidden] { display: none; }

/* Faixa "no trades since…": fica EM CIMA do gráfico desenhado, sem tapar as
   velas (canto superior esquerdo, sem capturar o mouse). Existe porque um
   trecho longo sem troca é verdade e parece defeito. */
#chartidle {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 72px;
  z-index: 3;
  width: fit-content;
  max-width: calc(100% - 82px);
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
  color: var(--mute);
  white-space: normal;
  line-height: 1.45;
  pointer-events: none;
}

#chartnote > span { max-width: 58ch; }

#chartnote strong {
  display: block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

#chartnote .por-que {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--mute);
}

/* Enrola em vez de cortar. Com a linha de histórico ao lado do status, os dois
   juntos passam da largura do centro em tela de 1600 — e o que sobrava cortado
   era justamente a informação nova. Nenhum dos dois é decorativo: um diz quanto
   foi lido, o outro diz desde quando existe o que ler. */
#chartfoot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 16px;
  padding: 9px 20px;
  border-top: 1px solid var(--rule);
  flex: none;
  overflow: hidden;
}

#chartfoot .spacer { flex: 1 1 auto; min-width: 0; }

/* O status (quantos negócios, quantos blocos varridos) é o número medido e não
   pode ser cortado; a linha de procedência pode. */
/* Pode quebrar linha: com a contagem de janelas falhas o status passava da
   largura do centro e o fim ("series may have gaps") saía cortado. */
#chart-status { flex: 0 1 auto; min-width: 0; white-space: normal; }

/* Desde quando existe histórico. Vem depois do status e antes da procedência
   porque responde a pergunta que o dono fez em voz alta ("cadê o histórico de
   um mês?"): a data de nascimento do pool e a idade dele, medidas do primeiro
   evento que ele emitiu na chain. */
/* Sem fio separador de propósito: com o rodapé enrolando em duas linhas, o
   `border-left` virava um risco solto no começo da segunda. O espaço entre as
   duas frases já separa. */
#chart-history {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

#chart-history:empty { display: none; }

/* Linha inteira, e o texto quebra em vez de reticências. Ela era cortada no
   fim — e o fim dela é "not market demand", exatamente a parte que não pode
   sumir. Aviso pela metade é pior que aviso nenhum, porque parece completo. */
#chart-src {
  color: var(--faint);
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
}

/* A linha de procedência carrega o aviso de que o volume é de um bot NOSSO, e
   escondê-la mais cedo seria esconder justamente isso. Com o rodapé enrolando,
   ela desce de linha em vez de sumir, então o corte volta a ser só o de tela
   pequena de verdade. */
@media (max-width: 1100px) { #chart-src { display: none; } }

/* ── escada de profundidade (o lugar do "order book") ─────────────────────
   Visual de livro, rótulo honesto: cada linha é um tamanho de verdade
   precificado contra as reservas reais pela curva do pool. Ver src/depth.js. */
.panel-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 9px;
  flex: none;
}

.panel-note {
  margin: 0 14px 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  color: var(--mute);
  font-size: 10.5px;
  line-height: 1.5;
  flex: none;
}

#depth-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 0 14px 6px;
  flex: none;
}

#depth-head .label:nth-child(2),
#depth-head .label:nth-child(3) { text-align: right; }

/* As duas escadas se encostam na marca do meio e o vazio sobra nas pontas,
   como num livro de verdade. Sem isto, com só oito degraus, o painel abria um
   buraco entre a escada e a marca e parecia que faltava dado. */
.ladder { flex: none; display: flex; flex-direction: column; }
#depth-ask { margin-top: auto; }
#depth-bid { margin-bottom: auto; }

.lvl {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 4px 14px;
  font-size: 11px;
  position: relative;
  isolation: isolate;
}

/* a barra de fundo é o total acumulado daquele degrau, em escala do maior */
.lvl::before {
  content: "";
  position: absolute;
  inset: 1px 0 1px auto;
  right: 0;
  width: var(--fill);
  z-index: -1;
}

.lvl.ask::before { background: var(--down-wash); }
.lvl.bid::before { background: var(--up-wash); }
.lvl.ask .p { color: var(--down); }
.lvl.bid .p { color: var(--up); }
.lvl .s, .lvl .t { text-align: right; color: var(--mute); }
.lvl:hover { background: var(--sunk); }

#depth-mark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
  flex: none;
}

#depth-spot { font-size: 15px; letter-spacing: -0.02em; }

.ladder-empty {
  padding: 18px 14px;
  white-space: normal;
  line-height: 1.5;
  color: var(--mute);
}

/* minigráfico da lista (página Leverage) */
.spark { display: block; overflow: visible; }
.spark-vazio { color: var(--faint); font-family: var(--mono); font-size: 11px; }

/* ── lista de mercados perp ──────────────────────────────────────────────
   Três colunas: quem é / minigráfico / preço. O selo de alavancagem sai de
   ALAVANCAGEM_MAX no PerpMarket.sol, não de um número escolhido no CSS. */
.row.perp {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
}

.row.perp .who { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.row.perp .mini { display: flex; align-items: center; flex: none; opacity: 0.9; }
.row.perp .sym { display: flex; align-items: center; gap: 6px; }

.row.perp .lev {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  padding: 1px 5px;
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--mute);
  border: 1px solid var(--rule);
}

.row.perp[aria-selected="true"] .lev { border-color: var(--rule-firm); }

/* ── painel de posições (Leverage) ──────────────────────────────────────── */
/* Aviso de motor em desenvolvimento na Leverage. Fica no topo do centro, antes
   do preço, porque é a primeira coisa que alguém precisa saber antes de ler
   qualquer número desta tela como produto pronto. */
#perp-dev {
  padding: 10px 20px;
  background: var(--down-wash);
  border-bottom: 1px solid var(--down);
  color: var(--mute);
  font-size: 12.5px;
  line-height: 1.55;
  flex: none;
}

#perp-dev strong { color: var(--down); font-weight: 600; }
#perp-dev a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

#positions {
  border-top: 1px solid var(--rule);
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* As abas Positions/Trades saíram quando o painel passou a ler posição de
   verdade: "Trades" só teria sentido varrendo os eventos `Abriu`/`Fechou` do
   mercado, e uma aba que existe para dizer "nada aqui" é pior que nenhuma. */
#posbody { padding: 18px 16px 20px; overflow-y: auto; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 76ch;
}

.empty-state .tag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--down-wash);
  color: var(--down);
  border: 1px solid var(--down);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.empty-state p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--mute); }
.empty-state p strong { color: var(--ink); font-weight: 600; }
.empty-state p .mono { font-size: 12px; }
.empty-state a.cta { padding: 7px 14px; font-size: 12px; }

/* ── seletor de alavancagem ─────────────────────────────────────────────── */
#lev {
  width: 100%;
  margin: 4px 0 8px;
  accent-color: var(--ink);
}

#lev:disabled { opacity: 0.45; cursor: not-allowed; }
#lev-marks { white-space: normal; line-height: 1.5; }

/* ── página Leverage: mercados de perp ───────────────────────────────────
   A lista tem DOIS grupos, e a separação é o recado principal do trilho: seis
   ativos têm mercado de perp, quinze não têm. Misturá-los num só rolo sugeriria
   que dá para alavancar os vinte e um. */
.rail-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 12px 6px;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}

.rail-group:first-child { border-top: 0; margin-top: 0; padding-top: 6px; }
.rail-group .n { margin-left: auto; font-family: var(--mono); color: var(--faint); font-size: 10.5px; }

.rail-why {
  padding: 0 12px 8px;
  white-space: normal;
  line-height: 1.5;
  color: var(--faint);
}

.row.perp .vault { font-size: 10.5px; color: var(--faint); font-family: var(--mono); }

/* Linha de ativo SEM perp: continua legível e continua levando a algum lugar
   (o spot dele existe), mas não é selecionável aqui. */
.row.nomarket {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 10px;
  text-align: left;
  opacity: 0.72;
}

.row.nomarket:hover { background: var(--sunk); opacity: 1; }
.row.nomarket .who { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.row.nomarket .tagno {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mute);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  white-space: nowrap;
}

/* O ticket da Leverage tem dois painéis exclusivos — abrir e fechar. Cada um
   herda a coluna flex do `#ticket` para que a ficha role e o botão de ação
   fique colado embaixo, como no ticket do spot. */
#pane-open, #pane-close {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── controle segmentado de tolerância ──────────────────────────────────── */
#tol, #ctol { display: flex; gap: 6px; margin-top: 6px; }

#tol button, #ctol button {
  flex: 1;
  padding: 7px 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}

#tol button:hover, #ctol button:hover { color: var(--ink); border-color: var(--rule-firm); }

#tol button[aria-pressed="true"], #ctol button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

#tol-note { color: var(--faint); }

/* ── painel de posição de verdade ───────────────────────────────────────── */
#poscap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  flex: none;
}

#poscap .label:last-child { margin-left: auto; font-family: var(--mono); color: var(--faint); }

.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 14px 22px;
}

.pos-grid .v { font-size: 13.5px; margin-top: 3px; }
.pos-note { margin: 14px 0 0; white-space: normal; line-height: 1.55; max-width: 92ch; }

#pos-flags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#pos-flags:empty { display: none; }

/* Dinheiro a receber do perp v2: saída adiada por assentar e crédito por
   resgatar. Aparece com ou sem posição aberta — é justamente depois de fechar
   que ele costuma existir —, por isso mora fora de #pos-live e tem borda
   própria em vez de herdar a do painel. */
#pos-pend {
  margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
#pos-pend .pos-note { margin: 0; }
#pos-pend .cta { padding: 7px 14px; font-size: 12px; }

.flag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--rule-firm);
  color: var(--mute);
}

.flag.up { background: var(--up-wash); color: var(--up); border-color: var(--up); }
.flag.dn { background: var(--down-wash); color: var(--down); border-color: var(--down); }

/* A saída sem limite não pode PARECER o botão principal, mas também não pode
   parecer desligada: é a porta de emergência e precisa estar sempre à mão. */
#go-panic {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  padding: 10px;
  font-size: 12.5px;
}

/* ── tabela de venues / prosa do centro ────────────────────────────────── */
#venues { border-top: 1px solid var(--rule); flex: none; }

#venues .cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
}

#venues table { width: 100%; border-collapse: collapse; }

#venues th, #venues td {
  text-align: right;
  padding: 8px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--rule);
}

#venues th {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
  font-weight: 400;
}

#venues tr:last-child td { border-bottom: 0; }
#venues th:first-child, #venues td:first-child { text-align: left; padding-left: 22px; }
#venues th:last-child, #venues td:last-child { padding-right: 22px; }
#venues tbody tr[data-best="true"] td { background: var(--sunk); }
#venues td.dead { color: var(--faint); }

/* ── ticket ─────────────────────────────────────────────────────────────── */
#side {
  display: flex;
  gap: 4px;
  padding: 14px 16px 0;
  flex: none;
}

#side button {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mute);
  background: var(--sunk);
  border-radius: var(--r-md);
}

#side button[aria-pressed="true"] { color: var(--ink); background: var(--paper); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--rule-firm); }

.field { padding: 14px 16px; }

.field .lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

/* O campo de quantia virou uma caixa arredondada de verdade — no Prism o
   input de valor é um cartão, não um número solto sobre um fio. */
.amt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.amt:focus-within { border-color: var(--rule-firm); }

.amt input {
  border: 0;
  background: none;
  width: 100%;
  min-width: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 25px;
  letter-spacing: -0.03em;
  padding: 0;
}

.amt input::placeholder { color: var(--faint); }
.amt input::-webkit-outer-spin-button,
.amt input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.amt .unit { font-family: var(--mono); font-size: 13px; color: var(--mute); flex: none; }

#out { font-size: 25px; letter-spacing: -0.03em; color: var(--ink); }
#out[data-empty="true"] { color: var(--faint); }

#quick { display: flex; gap: 6px; margin-top: 10px; }

#quick button {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
}

#quick button:hover { color: var(--ink); border-color: var(--rule-firm); background: var(--sunk); }

#detail, .detail { padding: 6px 16px 12px; flex: 1; overflow-y: auto; }

.dl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}

.dl:last-child { border-bottom: 0; }
.dl .k { color: var(--mute); }
.dl .v { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.dl .v small { color: var(--faint); font-size: 10.5px; display: block; }

#act, .act { padding: 14px 16px 16px; flex: none; }

#go, #go-close {
  width: 100%;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
}

#go:disabled, #go-close:disabled { background: var(--sunk); color: var(--faint); cursor: not-allowed; box-shadow: inset 0 0 0 1px var(--rule); }

#cstatus {
  margin-top: 10px;
  font-size: 11.5px;
  font-family: var(--mono);
  line-height: 1.45;
  color: var(--ink);
  word-break: break-word;
}

#cstatus:empty { display: none; }
#cstatus.dn { color: var(--down); }
#cstatus a { text-decoration: underline; text-underline-offset: 2px; }

#msg, #cmsg {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--mute);
  font-family: var(--mono);
  line-height: 1.45;
  min-height: 1.45em;
  word-break: break-word;
}

#msg a, #cmsg a { text-decoration: underline; text-underline-offset: 2px; }
#msg strong, #cmsg strong { color: var(--ink); font-weight: 700; }
#msg.dn, #cmsg.dn { color: var(--down); }

/* ── faixa "coming soon" (leverage / predict) ──────────────────────────── */
.soon {
  margin: 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--sunk);
  border: 1px dashed var(--rule-firm);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.soon .tag {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.soon p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--mute); }
.soon p strong { color: var(--ink); font-weight: 600; }

/* ── aba Predict: espelho de leitura do Polymarket ───────────────────────
   A aba Predict não é produto do Nyx — ela mostra mercado, preço, histórico e
   livro que são do POLYMARKET, lidos da API pública deles. Por isso ela não
   reusa `#go` como botão: ali existe um LINK que leva ao mercado lá, e o botão
   de comprar simplesmente não existe, porque não há nada no Nyx para comprar.

   O que muda de forma em relação ao terminal de spot: um mercado de previsão é
   uma PERGUNTA, não um ticker de quatro letras. Então o título do centro e a
   linha da lista quebram em duas linhas em vez de cortar no meio da frase. */
#railnote strong { color: var(--ink); font-weight: 600; }

.row.pm { grid-template-columns: 1fr; }
.row.pm .pick { padding: 9px 11px; gap: 12px; align-items: flex-start; }

.row.pm .sym {
  white-space: normal;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row.pm .co { font-size: 10.5px; }

/* A imagem é a do mercado no Polymarket. Sem fundo e sem borda de propósito: se
   ela demorar ou falhar, o espaço de 24px continua reservado e as perguntas
   seguem alinhadas, em vez de a lista inteira dançar conforme cada imagem
   chega. O `onerror` esconde, não remove, pelo mesmo motivo. */
.pm-ico { flex: none; width: 24px; height: 24px; border-radius: var(--r-sm); object-fit: cover; }

.row.pm .r { padding-top: 1px; }
.row.pm .px { font-size: 14px; font-weight: 700; }

/* Título do mercado: frase, não símbolo. Duas linhas e corta — a frase inteira
   fica no `title` e na página do Polymarket, que está linkada logo abaixo. */
#center.pm #head .top { align-items: flex-start; }

#center.pm #hsym {
  font-size: 16px;
  line-height: 1.32;
  white-space: normal;
  max-width: 64ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#center.pm #hpx { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-top: 10px; }

/* A linha que separa duas medidas parecidas: o número grande é o meio do livro,
   as fichas de resultado são a cotação mais lenta do Gamma. */
#center.pm #hpx-lab {
  white-space: normal;
  line-height: 1.55;
  max-width: 88ch;
  margin: 8px 0 0;
  color: var(--mute);
}

/* Cada resultado possível do mercado, com a probabilidade que o Polymarket
   está pagando por ele. A barra é a MESMA probabilidade desenhada, não uma
   segunda medida: nada aqui é escala inventada. */
#outcomes {
  padding: 2px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
  max-height: 46vh;
  overflow-y: auto;
}

.oc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--sunk);
  text-align: left;
}

.oc:hover { box-shadow: inset 0 0 0 1px var(--rule-firm); }
.oc[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.oc .n { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oc .p {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.oc .bar { grid-column: 1 / -1; height: 3px; border-radius: var(--r-pill); background: var(--rule); overflow: hidden; }
.oc .bar > i { display: block; height: 100%; background: var(--ink); }

.oc-vazio { padding: 14px 14px 4px; white-space: normal; line-height: 1.5; color: var(--mute); }

/* "order book by Polymarket" é crédito, não rótulo decorativo, e não pode ser
   cortado quando a coluna aperta — então o cabeçalho quebra em vez de sumir. */
#depth .panel-cap, #ticket .panel-cap { flex-wrap: wrap; row-gap: 2px; }

/* O lugar do botão de ação é ocupado por um LINK para o Polymarket. Ele parece
   com `#go` porque é o mesmo lugar na tela, mas leva para fora — e enquanto não
   há mercado escolhido ele fica desligado de verdade (`pointer-events: none`),
   não só cinza. */
a#go.go-link {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

a#go.go-link[aria-disabled="true"] {
  background: var(--sunk);
  color: var(--faint);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* Dado velho na tela nunca passa por atual: quando a atualização falha, o que
   já estava desenhado continua desenhado, mas o rodapé fica vermelho e diz há
   quanto tempo aquilo foi lido de verdade. */
.pm-velho { color: var(--down); }
.pm-erro { color: var(--down); white-space: normal; line-height: 1.5; }

/* ── responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 1440px) {
  :root { --rail: 268px; --ticket: 300px; --depth: 218px; }
}

/* Abaixo disso a escada de profundidade sai da frente antes do ticket: ela é
   leitura, o ticket é a ação. Some inteira em vez de espremer as três colunas
   de número até ficarem ilegíveis. */
@media (max-width: 1240px) {
  #body.com-depth { grid-template-columns: var(--rail) minmax(0, 1fr) var(--ticket); }
  #depth { display: none; }
}

@media (max-width: 1080px) {
  :root { --rail: 240px; --ticket: 280px; }
}

/* O botão de menu só existe em tela estreita (criado por `ligarMenu` em ui.js). */
#menu { display: none; }

@media (max-width: 900px) {
  /* `#body.com-depth` repete o seletor de propósito. A regra de 1240 px acima
     é (1,1,0) e a daqui era só `#body` (1,0,0): a de 1240 vencia no celular e
     o terminal continuava em três colunas, com o gráfico medindo 2 px e a
     página rolando de lado. */
  #body, #body.com-depth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow-y: visible; }
  /* No celular o gráfico e o ticket vêm antes da lista: com a lista em cima,
     o preço e o gráfico ficavam abaixo da dobra. */
  #body > #center { order: 1; }
  #body > #ticket { order: 2; }
  #body > #rail { order: 3; }
  #list { max-height: 230px; }
  #chartwrap { height: 300px; flex: none; }
  #shell { height: auto; min-height: 100dvh; }
  #positions { max-height: none; }

  /* Menu: a fila de abas vira um painel que abre embaixo da barra. Esconder
     a fila sem pôr nada no lugar deixava o celular sem caminho para as outras
     páginas. */
  #menu { display: inline-flex; font-family: var(--sans); font-size: 12.5px; color: var(--ink); }
  #tabs {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 10px 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
    overflow: visible;
  }
  #bar[data-menu="open"] #tabs { display: flex; }
  #tabs a { padding: 11px 14px; font-size: 14px; border-radius: var(--r-md); }
  #hmeta > div { flex: 1 1 40%; }
  #head .top { flex-wrap: wrap; row-gap: 8px; }
  #zoomctl { border-left: 0; padding-left: 0; margin-left: 0; }
}

@media (max-width: 520px) {
  html #bar { gap: 6px; padding: 0 10px; }
  /* A faixa "no trades since…" tapava metade do gráfico de 300 px: aqui ela
     sai de cima das velas e fica logo abaixo delas. */
  #chartwrap { height: auto; display: flex; flex-direction: column; }
  #chart { height: 300px; flex: none; }
  #chartidle { position: static; order: 2; width: auto; max-width: none; margin: 0 10px 8px; }
  #chart-history { white-space: normal; }
  #menu span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
  #brand .word { display: none; }
  /* o selo fica só com o ponto; o texto do estado continua no `title` */
  #chip-chain { padding: 7px 9px; }
  #chip-chain #chainlab { display: none; }
  /* `#bar #connect` para vencer `.cta` nas páginas de conteúdo, onde o botão
     é maior e empurrava a barra para 404 px numa tela de 390 */
  #bar #connect { padding: 8px 10px; font-size: 12px; }
  #bar #theme { padding: 7px 9px; }
  #menu { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Páginas do site (spot, portfolio, docs, referrals, contact...).
   Mesma casca (#bar) do terminal, corpo em cartões com `.page` centralizando
   a largura de leitura. Aqui há ar; no terminal há densidade.
   ═══════════════════════════════════════════════════════════════════════════ */

.site-body { min-height: 100dvh; background: var(--canvas); }

.page { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--ink);
}

.cta.ghost {
  background: none;
  color: var(--ink);
  border: 1px solid var(--rule-firm);
  font-weight: 600;
}

/* ── seção ──────────────────────────────────────────────────────────────── */
section.band { padding: 56px 0; border-bottom: 1px solid var(--rule); }
section.band:last-of-type { border-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

h1.lede {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 700;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}

h2.head {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 20ch;
  text-wrap: balance;
}

p.sub { font-size: 15px; line-height: 1.62; color: var(--mute); max-width: 60ch; margin: 20px 0 0; }
p.sub strong { color: var(--ink); font-weight: 600; }

.actions { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; }

/* ── cartão genérico: envolve tabela, prova, formulário ────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}

.card-table {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card-table table.data { border: 0; }
.card-table table.data th:first-child, .card-table table.data td:first-child { padding-left: 20px; }
.card-table table.data th:last-child, .card-table table.data td:last-child { padding-right: 20px; }

/* tabela de dados genérica das páginas */
table.data { width: 100%; border-collapse: collapse; }

table.data th, table.data td {
  padding: 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  text-align: right;
}

table.data th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--faint);
}

table.data th:first-child, table.data td:first-child { text-align: left; padding-left: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--sunk); }

/* prosa de docs */
.prose { max-width: 68ch; }
.prose h3 { font-size: 15px; margin: 34px 0 10px; letter-spacing: -0.01em; }
.prose p { font-size: 14px; line-height: 1.68; color: var(--mute); margin: 0 0 14px; }
.prose p strong { color: var(--ink); font-weight: 600; }
.prose code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--sunk);
  padding: 2px 6px;
  border-radius: 6px;
}

.prose ul { margin: 0 0 14px; padding-left: 0; list-style: none; }

.prose li {
  font-size: 14px;
  line-height: 1.68;
  color: var(--mute);
  padding: 9px 0 9px 20px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.prose li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-firm); }
.prose li:last-child { border-bottom: 0; }

/* aviso: agora é caixa arredondada com fundo tingido, não fio à esquerda */
.warn {
  border: 1px solid var(--down);
  background: var(--down-wash);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 72ch;
}

.warn strong { color: var(--ink); font-weight: 600; }

.note {
  border: 1px solid var(--rule-firm);
  background: var(--sunk);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 72ch;
}

.note strong { color: var(--ink); font-weight: 600; }

footer.site {
  border-top: 1px solid var(--rule);
  padding: 26px 0 44px;
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 12px;
}

footer.site a { color: var(--mute); text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .spacer { flex: 1; }

/* ── herói de duas colunas (spot) ───────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 40px;
  align-items: start;
  padding: 56px 0 52px;
  border-bottom: 1px solid var(--rule);
}

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.steps > li {
  list-style: none;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}

.steps .n { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.steps h3 { font-size: 15px; margin: 10px 0 8px; letter-spacing: -0.01em; }
.steps p { font-size: 13.5px; line-height: 1.6; color: var(--mute); margin: 0; }

/* ── histórico de trocas da carteira (portfolio.html) ─────────────────────
   Mesma linguagem do resto: cartão de fundo papel, filete `--rule`, número em
   mono tabular. Compra e venda usam os MESMOS `--up`/`--down` das velas e da
   escada de profundidade — verde é sempre a mesma coisa nesta venue. */
.tr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
}

.tr-stats > div { background: var(--paper); padding: 16px 18px; }
.tr-stats .v { font-size: 17px; letter-spacing: -0.02em; margin-top: 5px; }

/* Pílula de lado. Contorno, não bloco chapado: a linha inteira já é dado, e um
   retângulo sólido puxaria o olho para o rótulo em vez do número. */
.side {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.side.buy { color: var(--up); background: var(--up-wash); }
.side.sell { color: var(--down); background: var(--down-wash); }
.side.other { color: var(--mute); background: var(--sunk); border-color: var(--rule-firm); }

/* Hash da transação: leva ao explorador, que é onde o dado pode ser conferido
   sem passar por nós. É o ponto inteiro de reconstruir da chain. */
a.tx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-firm);
  padding-bottom: 1px;
}

a.tx:hover { color: var(--ink); }

.tr-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 11px;
  color: var(--faint);
}

.tr-foot .spacer { flex: 1 1 auto; }
.tr-foot button { color: var(--mute); }
.tr-foot button:hover:not(:disabled) { color: var(--ink); border-color: var(--rule-firm); }
.tr-foot button:disabled { opacity: 0.5; cursor: default; }
.tr-foot .dn { color: var(--down); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .steps { grid-template-columns: 1fr; }
  .page { padding: 0 18px; }
  #bar { gap: 14px; padding: 0 14px; }
  .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A tabela de trocas tem sete colunas e não cabe em tela estreita; rolar a
     tabela é melhor que espremer o número até virar duas linhas. */
  .card-table { overflow-x: auto; }
  /* tabelas soltas da Docs (seletores, taxas, carteiras do bot) rolam dentro
     de si em vez de alargar a página */
  .prose table.data { display: block; overflow-x: auto; max-width: 100%; }
}

/* ── placar (leaderboard.html) ─────────────────────────────────────────────
   Controles numa fila só, do mesmo tamanho dos chips da barra. O rótulo
   "testnet, test money" mora no próprio título da seção e não num banner:
   é um fato sobre cada número da página, não um aviso para fechar. */
.lb-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-controls .spacer { flex: 1 1 auto; }
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill); }
.seg button { padding: 5px 11px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; color: var(--mute); }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); font-weight: 700; }
.lb-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: var(--mute); cursor: pointer; }
.lb-resumo { font-size: 11px; color: var(--faint); }
.lb-test { color: var(--ink); border-color: var(--rule-firm); }
.lb-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--rule-firm); border-radius: var(--r-pill); font-family: var(--mono); font-size: 10px; color: var(--mute); background: var(--sunk); vertical-align: 1px; }
.lb-tag.you { color: var(--up); border-color: var(--up); background: var(--up-wash); }
.lb-addr { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-firm); }
tr.lb-nossa td { color: var(--mute); }
@media (max-width: 900px) {
  .lb-controls .spacer { display: none; }
  .lb-resumo { flex-basis: 100%; }
}

/* ── checklist de primeira visita (Trade, rodapé do trilho) ────────────────
   Três linhas curtas no lugar do bloco da torneira, que volta quando o
   checklist é dispensado. Estado vem de `data-estado`, escrito a partir de
   leitura: "feito" (verde), "falta" (contorno), "nao-lido" (tracejado: sem
   carteira não há saldo para ler, e isso não é saldo zero). */
#onboard { margin: -2px 0 2px; }
.ob-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
#ob-x { color: var(--faint); font-size: 16px; line-height: 1; padding: 0 6px 2px; border-radius: var(--r-pill); }
#ob-x:hover { color: var(--ink); background: var(--sunk); }
.ob { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ob li { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 5px 3px 8px; border-radius: var(--r-sm); background: var(--sunk); font-size: 12px; }
.ob li i { position: relative; width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1.5px solid var(--rule-firm); }
.ob li[data-estado="nao-lido"] i { border-style: dashed; }
.ob li[data-estado="feito"] i { background: var(--up); border-color: var(--up); }
.ob li[data-estado="feito"] i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 3px; height: 6px; border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ob .ob-n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.ob .ob-t { flex: 1; min-width: 0; color: var(--ink); }
.ob li[data-estado="feito"] .ob-t { color: var(--mute); }
.ob .ob-act { flex: none; padding: 3px 9px; border: 1px solid var(--rule-firm); border-radius: var(--r-pill); background: var(--paper); font-family: var(--mono); font-size: 10.5px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.ob .ob-act:hover { border-color: var(--ink); }
.ob li[data-estado="feito"] .ob-act { display: none; }

/* ── preço médio em três tamanhos (ticket da Trade) ─────────────────────── */
.sizes { padding: 8px 0 9px; border-bottom: 1px solid var(--rule); font-size: 12px; }
.sizes-k { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sizes-k .k { color: var(--mute); }
.sizes-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.sizes-g > div { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 5px 8px; background: var(--sunk); border-radius: var(--r-sm); min-width: 0; }
.sizes-g .label { font-size: 10px; }
.sizes-g .num { font-size: 12px; font-variant-numeric: tabular-nums; }
.sizes-g .imp { color: var(--faint); font-size: 10.5px; }
.sizes-g .dn { font-size: 10.5px; }
.sizes-vazio { grid-column: 1 / -1; white-space: normal; line-height: 1.5; }

/* endereço do pool no rodapé do gráfico: saiu dos chips do cabeçalho para os fatos
   de mercado (last trade, 24h volume, liquidity) caberem numa fila só */
#chartfoot #m-pool { font-size: 10.5px; color: var(--faint); text-decoration: none; border-bottom: 1px solid var(--rule); }
#chartfoot #m-pool:hover { color: var(--ink); }

/* ── cartão compartilhável (portfolio) ──────────────────────────────────── */
.cta:disabled { opacity: 0.45; cursor: not-allowed; }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.share-top { position: absolute; top: 16px; right: 16px; }
.share-row { padding: 3px 9px; font-size: 10.5px; }
.share-row:hover:not(:disabled), .share-top:hover:not(:disabled) { color: var(--ink); border-color: var(--rule-firm); }
#share-dlg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(10, 10, 12, 0.55); }
#share-dlg .share-box { width: min(760px, 100%); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-2); }
#share-dlg img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
#share-dlg .share-act { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
#share-dlg .share-act .spacer { flex: 1 1 auto; }
#share-dlg .share-act .label { white-space: normal; }

/* ── cotação sem carteira na Spot ───────────────────────────────────────── */
.spot-q { margin-bottom: 12px; }
.spot-amt { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill); font-size: 12px; color: var(--mute); }
.spot-amt:focus-within { border-color: var(--rule-firm); }
.spot-amt input { width: 9ch; border: 0; background: none; font-family: var(--mono); font-size: 14px; color: var(--ink); padding: 4px 0; text-align: right; }
.spot-amt input:focus { outline: none; }
.spot-amt input::-webkit-outer-spin-button, .spot-amt input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.spot-qnota { white-space: normal; line-height: 1.5; flex: 1 1 320px; }
.spot-qnota a { text-decoration: underline; text-underline-offset: 2px; }
.spot-sub { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.spot-sub.dn { color: var(--down); }
.spot-sub-u { font-size: 10.5px; color: var(--faint); }
.spot-tres { font-size: 11.5px; color: var(--mute); white-space: nowrap; }
/* placar no celular: a tabela rola dentro do cartão em vez de quebrar endereço
   e "buy / sell" em quatro linhas (visto no print de 390 px) */
#lb-table th, #lb-table td { white-space: nowrap; }
@media (max-width: 520px) { #lb-table th, #lb-table td { padding: 10px 8px; } }
/* Spot: número não quebra linha ("19,420.49 / tUSDC" em duas); a tabela rola
   dentro do cartão no celular */
.spot-q + .card-table td.num, .spot-q + .card-table td:last-child { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Referência ao vivo (Hyperliquid) no terminal — 2026-09-13.
   Duas fontes na mesma tela, e a regra é que NUNCA se misturem sem rótulo:
   `#body[data-fonte]` diz qual está no centro, e cada peça que só faz sentido
   para uma delas carrega `.so-arc` ou `.so-ref`.
   ═══════════════════════════════════════════════════════════════════════════ */
#body[data-fonte="ref"] .so-arc { display: none !important; }
#body:not([data-fonte="ref"]) .so-ref { display: none !important; }

/* categorias: fila que rola de lado em vez de espremer oito botões em 268 px */
#railcats {
  display: flex;
  gap: 4px;
  padding: 10px 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: none;
}
#railcats::-webkit-scrollbar { display: none; }
#railcats button {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--mute);
  white-space: nowrap;
}
#railcats button:hover { color: var(--ink); border-color: var(--rule-firm); }
#railcats button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
#railcats button[data-cat="arc"] { font-family: var(--mono); font-size: 11px; }

/* lista virtual: altura FIXA de linha, casada com ALTURA_LINHA em src/main.js */
#list { position: relative; }
.vl-miolo { position: relative; width: 100%; }
.row.vrow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  margin: 0;
  will-change: transform;
}
.row.vrow .pick { padding: 6px 10px 6px 5px; height: 100%; }
.row.vrow .co { display: flex; align-items: center; gap: 5px; }
.row.vrow .co .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row.vrow .sub { white-space: nowrap; }
.row.vrow .vol { color: var(--faint); }

/* selo de fonte: "on Arc" é o que dá para negociar, "ref" é só referência */
.mtag {
  display: inline-block;
  flex: none;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 2px 5px 2px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.mtag.arc { background: var(--ink); color: var(--paper); }
.mtag.ref { border: 1px solid var(--rule-firm); color: var(--mute); }
#hbadge { font-size: 10px; padding: 3px 8px; }

/* tick: pisca a cor da direção e volta ao normal */
.tick-up { animation: tick-up 700ms ease-out; }
.tick-dn { animation: tick-dn 700ms ease-out; }
@keyframes tick-up { from { color: var(--up); background: var(--up-wash); } to { background: transparent; } }
@keyframes tick-dn { from { color: var(--down); background: var(--down-wash); } to { background: transparent; } }
.row .px.tick-up, .row .px.tick-dn { border-radius: 4px; }

/* preço velho (feed fora): continua na tela, cinza, sem cor de direção */
.row.vrow.velho .px { color: var(--faint); }
.row.vrow.velho .px::after { content: " ·"; color: var(--down); }
#hpx.velho { color: var(--faint); }

/* alternador referência / pool, com o mesmo corpo do seletor de timeframe */
#fonte {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  flex: none;
}
#fonte button {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
}
#fonte button:hover { color: var(--ink); }
#fonte button[aria-selected="true"] { color: var(--paper); background: var(--ink); font-weight: 700; }

/* faixa de estado do feed sobre o gráfico */
#chartfeed {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 82px);
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
  color: var(--mute);
  white-space: normal;
  line-height: 1.45;
  pointer-events: none;
}
#chartfeed[data-caiu="true"] { color: var(--down); border-color: var(--down); background: color-mix(in srgb, var(--paper) 92%, var(--down) 8%); }
#chartfeed .dot.live { animation: pulso 1.6s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: 0.35; } }
#chart-history.dn { color: var(--down); }

/* livro da Hyperliquid na coluna de profundidade */
#refbook { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#refbook .panel-cap .label:first-child { color: var(--ink); white-space: normal; }
#refbook .rb-head, #refbook .rb-t {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 6px;
  padding: 0 14px 6px;
}
#refbook .rb-head .label:not(:first-child) { text-align: right; }
#refbook .rb-t { padding: 3px 14px; font-size: 11px; }
#refbook .rb-t .num:not(:first-child) { text-align: right; color: var(--mute); }
#refbook .rb-t .t { font-size: 10px; color: var(--faint); }
#rb-mark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
}
#rb-mid { font-size: 14px; letter-spacing: -0.02em; }
#refbook .rb-tcap { border-top: 1px solid var(--rule); margin-top: 8px; }
#rb-trades { flex: 1; min-height: 0; overflow: hidden; }
#rb-idade.dn { color: var(--down); }
#refbook.velho .lvl .p { color: var(--faint); }

/* ticket de referência: diz que não há execução, e oferece o caminho que há */
#ticket-ref { padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; }
#ticket-ref .tr-cap { color: var(--mute); }
#ticket-ref h3 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }
#ticket-ref p { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.55; }
#ticket-ref .cta { justify-content: center; white-space: normal; text-align: center; }
#ticket-ref .tr-nota { white-space: normal; line-height: 1.5; margin-top: -4px; }

/* No celular a linha de procedência some (regra de 1100 px acima). Para a
   referência ela é a frase que diz que o gráfico não é mercado do Nyx, então
   continua. */
@media (max-width: 1100px) { #body[data-fonte="ref"] #chart-src { display: block; } }
@media (max-width: 900px) { #ticket-ref { padding: 16px; } }
/* linha do trilho: ticker e volume em cima, selo e nome embaixo; preço e 24 h à direita */
.row.vrow .l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.row.vrow .l1 .vol { font-size: 10px; color: var(--faint); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   Trade, layout 2026-09-13 (pedido do dono: "melhora interface, velocidade,
   gráficos vivos"; referência Hyperliquid / Lighter / Variational, identidade
   Prism mantida: cartões arredondados sobre o fundo, preto-branco-cinza, cor
   só para alta e baixa).
     · cabeçalho do mercado numa linha só, em cima de gráfico + livro;
     · barra do gráfico (timeframe, zoom) dentro do cartão do gráfico;
     · painel de conta embaixo (Balances / Positions / Open orders / Trade history);
     · trilho e ticket de alto a baixo nas laterais;
     · celular: um cartão por vez, escolhido nas abas do rodapé.
   Tudo preso a `#body.trade`: Leverage e Predict usam as mesmas peças base e
   não mudam.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --bottom: clamp(180px, 27vh, 290px); }

#body.trade {
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--depth) var(--ticket);
  grid-template-rows: auto minmax(0, 1fr) var(--bottom);
}
#body.trade > #rail   { grid-column: 1; grid-row: 1 / -1; }
#body.trade > #mhead  { grid-column: 2 / 4; grid-row: 1; }
#body.trade > #center { grid-column: 2; grid-row: 2; }
#body.trade > #depth  { grid-column: 3; grid-row: 2; }
#body.trade > #bottom { grid-column: 2 / 4; grid-row: 3; }
#body.trade > #ticket { grid-column: 4; grid-row: 1 / -1; }

#mtabs, #mview { display: none; }

/* ── cabeçalho numa linha ── */
#mhead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  white-space: nowrap;
  overflow: hidden;
}
#hpick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 7px;
  border-radius: var(--r-md);
  flex: none;
  min-width: 0;
  max-width: 280px;
}
#hpick:hover { background: var(--sunk); }
#mhead #hsym { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--sans); }
#mhead #hsym .hs-t { margin-left: 8px; }
#mhead #hco { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; max-width: 15ch; }
#hpick .caret { color: var(--faint); flex: none; }
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font: 500 10.5px/1 var(--mono);
  color: var(--faint);
  background: var(--paper);
  border: 1px solid var(--rule-firm);
  border-bottom-width: 2px;
  border-radius: 5px;
  flex: none;
}
#mhead .pxrow { flex-wrap: nowrap; gap: 9px; flex: none; align-items: baseline; padding: 0 4px; }
#mhead #hpx {
  font-size: 21px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.03em;
  font-weight: 500;
  min-width: 7ch;
  border-radius: 5px;
}
#mhead #hchg { font-size: 12.5px; color: var(--faint); }
#mhead #hchg.up { color: var(--up); }
#mhead #hchg.dn { color: var(--down); }
#mhead #hmeta {
  display: flex;
  gap: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
#mhead #hmeta::-webkit-scrollbar { display: none; }
#mhead #hmeta > div { background: none; border-radius: 0; padding: 1px 14px; border-left: 1px solid var(--rule); flex: none; }
#mhead #hmeta .label { font-size: 10px; }
#mhead #hmeta .v { font-size: 12.5px; margin-top: 1px; min-width: 6ch; }
#mhead #fonte, #mhead #hbadge { flex: none; }

/* ── barra do gráfico ── */
#charttools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  flex: none;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
#charttools::-webkit-scrollbar { display: none; }
#charttools .spacer { flex: 1; }
#body.trade #chartwrap { border-top: 0; }
#body.trade #chartfoot { padding: 7px 14px; }

/* ── painel de conta ── */
#bottom {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.bt-cap { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 6px; border-bottom: 1px solid var(--rule); flex: none; min-width: 0; }
.bt-cap .spacer { flex: 1; }
#btabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
#btabs::-webkit-scrollbar { display: none; }
#btabs button {
  padding: 11px 11px 9px;
  font-size: 12.5px;
  color: var(--mute);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  border-radius: 0;
}
#btabs button:hover { color: var(--ink); }
#btabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
#bt-nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bt-corpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.bt-scroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
table.bt-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.bt-t th {
  position: sticky;
  top: 0;
  background: var(--paper);
  font: 400 10.5px var(--mono);
  color: var(--faint);
  text-align: right;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  z-index: 1;
}
table.bt-t td { padding: 6px 14px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
table.bt-t th:first-child, table.bt-t td:first-child { text-align: left; }
table.bt-t tbody tr:last-child td { border-bottom: 0; }
table.bt-t tbody tr:hover td { background: var(--sunk); }
table.bt-t td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.bt-t .mute { color: var(--mute); font-size: 11.5px; }
table.bt-t .side { padding: 1px 8px; font-size: 10.5px; }
.bt-a { display: inline-flex; align-items: center; gap: 8px; }
.bt-a b { font-weight: 600; }
.ico-gas { width: 20px; height: 20px; font-size: 11px; background: var(--ink); color: var(--paper); }
.bt-pe { padding: 7px 14px; border-top: 1px solid var(--rule); white-space: normal; line-height: 1.5; flex: none; }
.bt-pe a { text-decoration: underline; text-underline-offset: 2px; }
.bt-vazio { padding: 16px 20px; max-width: 76ch; }
.bt-vazio strong { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.bt-vazio p { margin: 4px 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.bt-vazio a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.bt-vazio .cta { padding: 7px 14px; font-size: 12px; }
.linkbtn { font: 500 11.5px var(--mono); color: var(--ink); text-decoration: underline; text-underline-offset: 2px; padding: 0; background: none; }
.linkbtn:hover { color: var(--mute); }

/* ── trilho: teclado ── */
.rail-search .kbd { margin-left: auto; }
#search:focus + .kbd { visibility: hidden; }
.row.cursor { background: var(--sunk); box-shadow: inset 0 0 0 1.5px var(--rule-firm); }
.row.cursor[aria-selected="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ── skeleton ───────────────────────────────────────────────────────────────
   Leitura a caminho = barra pulsando; travessão = não existe ou não foi lido
   (com o motivo no title). O texto por baixo continua lá, transparente. */
@keyframes sk-pulso { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.sk, [data-carregando="true"]::after {
  background: linear-gradient(90deg, var(--sunk) 20%, var(--rule) 50%, var(--sunk) 80%);
  background-size: 220% 100%;
  animation: sk-pulso 1.4s ease-in-out infinite;
  border-radius: 5px;
}
.sk { display: inline-block; height: 0.8em; min-width: 3ch; vertical-align: middle; }
.sk-ico { width: 22px; height: 22px; border-radius: 50%; min-width: 0; }
[data-carregando="true"] { position: relative; color: transparent !important; min-width: 5ch; display: inline-block; }
[data-carregando="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.8em; transform: translateY(-50%); }
#mhead #hpx[data-carregando="true"] { min-width: 8ch; }
.row .px[data-carregando="true"] { min-width: 7ch; }
.row .pct[data-carregando="true"] { min-width: 5ch; }
.lvl.sk-lvl, .rb-t.sk-lvl { pointer-events: none; }
.lvl.sk-lvl::before { display: none; }
.sk-lvl .sk { height: 9px; justify-self: end; width: 70%; }
.sk-lvl .sk:first-child { justify-self: start; }
.sk-cel { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 7px 8px; background: var(--sunk); border-radius: var(--r-sm); }
.sk-cel .sk { width: 70%; height: 9px; }
.sk-cel .sk + .sk { width: 40%; }
tr.sk-row td .sk { width: 60%; height: 9px; }
tr.sk-row td:first-child .sk { width: 40%; }
@media (prefers-reduced-motion: reduce) { .sk, [data-carregando="true"]::after { animation: none; } }

/* número que muda de largura empurraria o vizinho a cada tick */
#mhead #hmeta .v, .row .px, .row .pct, #rb-mid, #depth-spot { font-variant-numeric: tabular-nums; }

/* ── até 1240: sem coluna de livro ── */
@media (max-width: 1240px) {
  #body.trade { grid-template-columns: var(--rail) minmax(0, 1fr) var(--ticket); }
  #body.trade > #mhead, #body.trade > #center, #body.trade > #bottom { grid-column: 2; }
  #body.trade > #ticket { grid-column: 3; }
  #mhead #hco { display: none; }
}
@media (max-width: 1080px) {
  #hpick .kbd { display: none; }
}

/* ── celular: um cartão por vez ── */
@media (max-width: 900px) {
  #body.trade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 8px;
    padding: 8px 8px calc(72px + env(safe-area-inset-bottom));
  }
  #body.trade > * { grid-column: 1 !important; grid-row: auto !important; order: 0 !important; display: none !important; }
  #body.trade[data-m="markets"] > #rail,
  #body.trade[data-m="chart"] > #mhead,
  #body.trade[data-m="chart"] > #center,
  #body.trade[data-m="trade"] > #mhead,
  #body.trade[data-m="trade"] > #ticket,
  #body.trade[data-m="account"] > #bottom { display: flex !important; }
  #body.trade[data-m="chart"][data-v="book"] > #depth { display: flex !important; min-height: 64dvh; }
  #body.trade[data-m="chart"][data-v="book"] #chartwrap,
  #body.trade[data-m="chart"][data-v="book"] #chartfoot,
  #body.trade[data-m="chart"][data-v="book"] #tf,
  #body.trade[data-m="chart"][data-v="book"] #zoomctl { display: none !important; }

  #body.trade > #rail { height: calc(100dvh - var(--bar) - 88px - env(safe-area-inset-bottom)); }
  #body.trade #list { max-height: none; }
  #body.trade #chart { height: min(52dvh, 430px); }
  #body.trade #chartwrap { height: auto; flex: none; display: block; }
  #body.trade #chartidle { position: absolute; }
  #body.trade > #bottom { min-height: 60dvh; }
  #body.trade #railfoot { border-top: 1px solid var(--rule); }
  #mview { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--r-pill); flex: none; }
  #mview button { padding: 4px 11px; border-radius: var(--r-pill); font: 500 11.5px var(--mono); color: var(--mute); }
  #mview button[aria-selected="true"] { background: var(--ink); color: var(--paper); font-weight: 700; }

  #mhead { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  #hpick { padding: 4px 6px 4px 2px; max-width: none; }
  #hpick .kbd, #mhead #hco { display: none; }
  #mhead .pxrow { margin-left: auto; }
  #mhead #fonte, #mhead #hbadge { order: 3; }
  #mhead #hmeta { order: 4; flex: 1 1 100%; }
  #mhead #hmeta > div:first-child { border-left: 0; padding-left: 2px; }
  #body.trade[data-m="trade"] #mhead #hmeta { display: none; }
  .rail-search .kbd { display: none; }

  #mtabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px rgba(10, 10, 12, 0.05);
  }
  #mtabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 0 6px;
    font-size: 11px;
    color: var(--mute);
    border-radius: var(--r-md);
  }
  #mtabs button[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--sunk); }
  table.bt-t th, table.bt-t td { padding-left: 10px; padding-right: 10px; }
}

/* ── ajustes depois do primeiro print (1440 / 1280 / 390) ── */
#mhead .h-src .v { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); }
#mhead .h-src .mtag { font-size: 9.5px; padding: 2px 6px; }
#mhead .h-src .mute { color: var(--faint); font-size: 11px; }
#mhead #hmeta > div.h-src { border-left: 0; padding-left: 6px; }
#refbook .panel-cap { flex-wrap: nowrap; }
#refbook .panel-cap .label:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#body.trade #chartfoot { flex-wrap: nowrap; column-gap: 14px; }
#body.trade #chartfoot > .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#body.trade #chart-status { flex: 0 1 auto; }
#body.trade #chart-src { flex: 1 1 0; text-align: right; }
#body[data-fonte="ref"] #chart-history:not(.dn) { display: none; }
#body.trade #chartfoot .spacer { display: none; }

.tr-pools { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.tr-pools .tr-cap { margin-bottom: 6px; }
.tr-pools .tp { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); text-align: left; font-size: 12.5px; }
.tr-pools .tp:hover { background: var(--sunk); }
.tr-pools .tp b { font-weight: 600; }
.tr-pools .tp .nm { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-pools .tp .num { font-size: 12.5px; text-align: right; }
.tr-pools .linkbtn { align-self: flex-start; margin: 8px 8px 0; }

@media (max-width: 1440px) {
  #mhead { gap: 8px; }
  #mhead #hmeta > div { padding: 1px 11px; }
  #mhead #hpx { font-size: 19px; }
  #hpick .kbd { display: none; }
}
@media (max-width: 1300px) {
  #mhead #hco { display: none; }
  #mhead .h-src .mute { display: none; }
}
@media (max-width: 900px) {
  #body.trade #zoomctl { display: none; }
  #body.trade #chartfoot { flex-wrap: wrap; }
  #body.trade #chart-src { text-align: left; flex-basis: 100%; }
}
@media (max-width: 520px) {
  .so-largo { display: none; }
}

/* ── segunda rodada: cabeçalho por cima do ticket também (cabe numa linha a 1280) ── */
#body.trade > #mhead  { grid-column: 2 / -1; }
#body.trade > #ticket { grid-row: 2 / -1; }
@media (max-width: 1240px) {
  #body.trade > #mhead { grid-column: 2 / -1; }
  #body.trade > #ticket { grid-column: 3; grid-row: 2 / -1; }
}
#body.trade #chart-status { flex: 1 1 auto; }
#body.trade #chart-src { flex: 0 1 auto; max-width: 55%; }
#chartfeed > span { min-width: 0; }
.tr-pools .tr-cap { white-space: normal; }

/* livro da referência: a coluna divide a altura em vez de cortar o lado de compra */
#body.trade #refbook #rb-ask, #body.trade #refbook #rb-bid { flex: 1 1 0; min-height: 0; overflow: hidden; }
#body.trade #refbook #rb-ask { justify-content: flex-end; }
#body.trade #refbook #rb-trades { flex: 1 1 0; }
#body.trade #depth-ask, #body.trade #depth-bid { flex: 1 1 0; min-height: 0; overflow: hidden; margin: 0; }
#body.trade #depth-ask { justify-content: flex-end; }

/* terceira rodada */
#body.trade #ticket-ref { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 1440px) { #body.trade[data-fonte="ref"] #chart-src { display: none; } }
@media (max-width: 900px) { #body.trade #chartfoot > .label { white-space: normal; } #body.trade[data-fonte="ref"] #chart-src { display: block; } }
@media (max-width: 900px) { #bt-nota { display: none; } }

/* ticket: o cartão rola inteiro e o botão fica preso embaixo (com os passos
   Approve/Buy a grade "avg fill" era espremida pelo scroll interno do #detail) */
#body.trade > #ticket { overflow-y: auto; }
#body.trade #detail { flex: 1 0 auto; overflow: visible; }
#body.trade #act { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); z-index: 2; }
@media (max-width: 900px) {
  #body.trade > #ticket { overflow: visible; }
  #body.trade #act { bottom: calc(64px + env(safe-area-inset-bottom)); border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* ── Leverage: o mesmo cabeçalho compacto da Trade (preço + números em fila com fio,
   sem os cartões de 58 px de preço), para as duas telas de mercado lerem igual ── */
#body.lev #head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; padding: 12px 16px; }
#body.lev #head .top { flex: 1 1 100%; }
#body.lev #head .pxrow { flex: none; gap: 9px; align-items: baseline; flex-wrap: nowrap; }
#body.lev #hsym { font-size: 16px; }
#body.lev #hpx { font-size: 24px; margin: 0; letter-spacing: -0.03em; font-weight: 500; line-height: 1.1; }
#body.lev #hchg { font-size: 12.5px; }
#body.lev #hmeta { flex: 1 1 0; min-width: 0; margin: 0; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#body.lev #hmeta::-webkit-scrollbar { display: none; }
#body.lev #hmeta > div { background: none; border-radius: 0; padding: 1px 12px; border-left: 1px solid var(--rule); flex: none; }
#body.lev #hmeta .label { font-size: 10px; }
#body.lev #hmeta .v { font-size: 12.5px; margin-top: 1px; }
@media (max-width: 900px) {
  #body.lev #hmeta { flex-basis: 100%; }
  #body.lev #hmeta > div:first-child { border-left: 0; padding-left: 0; }
}
/* no pool o rodapé carrega o aviso do bot de volume: quebra linha em vez de cortar */
#body.trade[data-fonte="arc"] #chartfoot { flex-wrap: wrap; row-gap: 3px; }
#body.trade[data-fonte="arc"] #chartfoot > .label { white-space: normal; overflow: visible; }
#body.trade[data-fonte="arc"] #chart-src { flex: 1 1 100%; max-width: none; text-align: left; }
/* o cartaz de estado vazio fica POR CIMA do canvas (antes os fios dos eixos vazios do
   gráfico apareciam desenhados em cima do texto, como uma caixa torta) */
#chartnote { z-index: 4; }
#refbook .panel-cap .label:first-child { white-space: normal; overflow: visible; }
/* botão preso embaixo do ticket: sombra para dizer que há conteúdo rolando por trás */
#body.trade #act { box-shadow: 0 -10px 18px -12px rgba(10, 10, 12, 0.18); }
#body.trade .field { padding: 12px 16px; }
#body.trade .amt { padding: 10px 14px; }
#body.trade .amt input, #body.trade #out { font-size: 23px; }
/* tela baixa: a nota fixa do livro sai (o título já diz de quem é o livro, e a frase
   inteira fica no title) para sobrar altura para os níveis de preço */
@media (min-width: 901px) and (max-height: 980px) {
  #body.trade #refbook .panel-note { display: none; }
}

/* ── QA-FINAL-2 ── */
/* M6: nas linhas com pool e referência, o preço diz de onde veio */
.row .px[data-src]::before {
  content: attr(data-src);
  font: 400 8.5px/1 var(--mono);
  color: var(--faint);
  margin-right: 5px;
  vertical-align: 1px;
  letter-spacing: 0.02em;
}
.row .px[data-src="pool"]::before { color: var(--ink); }

/* B-9: cortes. Categorias e métricas rolam de lado com esmaecimento na borda,
   em vez de cortar um rótulo no meio. */
#railcats { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); padding-right: 22px; }
#body.lev #hmeta > div:last-child, #mhead #hmeta > div:last-child { margin-right: 22px; }
#body.trade #refbook .rb-head { position: relative; z-index: 1; background: var(--paper); }
#body.trade #refbook #rb-ask { padding-top: 2px; }
@media (max-width: 900px) {
  #body.trade #bt-corpo table.bt-t { min-width: 0; }
  #body.trade #bt-corpo table.bt-saldos th:nth-child(3), #body.trade #bt-corpo table.bt-saldos td:nth-child(3) { display: none; }
  #body.trade #bt-corpo table.bt-t td, #body.trade #bt-corpo table.bt-t th { padding-left: 6px; padding-right: 6px; }
  #body.trade #bt-corpo .bt-a .mute { display: none; }
}
/* B-10: estado vazio do placar não pode ficar mais largo que a tela */
@media (max-width: 520px) {
  #lb-table td.lb-vazio .lb-vazio-t { position: sticky; left: 8px; max-width: calc(100vw - 80px); }
}