/* As regras do diálogo de transferência mudaram para `transferir.css`, que as
 * duas telas carregam — ver o cabeçalho de lá. */
/* futuros.css — controles da tela de perpétuo.
 *
 * 🔑 O reset da captura prefixa toda regra com [dir], o que dá
 * especificidade (0,1,1) e vence qualquer seletor de uma classe só. Por
 * isso as regras daqui nascem com [dir] também — e a cor sai da RAIZ que
 * eu controlo, nunca herdada: o `body` da captura calcula rgb(0,0,0) numa
 * página escura, e texto preto em fundo escuro some sem erro nenhum.
 */

/* 🔴 O seletor de par SUMIU da tela, e a causa era uma VIRGULA.
 *
 * Esta linha era `[dir] .oc-fut-seletor-alvo,` — com virgula no fim e nenhuma
 * regra propria depois. O seletor grudou na regra SEGUINTE e herdou o
 * `display: none` dela, que e o estado FECHADO do painel de lista. O nome do
 * par ficou no DOM, com 0x0, e o cabecalho da tela de perpetuo passou a
 * mostrar so a estrela e o preco.
 *
 * 🔑 Virgula pendurada em CSS nao da erro: ela GRUDA o seletor na proxima
 * regra, seja ela qual for. Aqui a proxima era `display: none` — o pior
 * vizinho possivel. Nenhum linter reclama, o arquivo continua valido, e o
 * elemento some sem deixar rastro.
 *
 * O alvo agora tem regra PROPRIA: e clicavel, entao diz isso.
 */
[dir] .oc-fut-seletor-alvo {
  cursor: pointer;
  user-select: none;
}

/* ── lista de mercados ───────────────────────────────────────────────── */

[dir] .oc-fut-lista {
  display: none;
  position: fixed;
  z-index: 4000;
  width: 320px;
  max-height: 60vh;
  padding: 8px;
  border: 1px solid #2a2c33;
  border-radius: 8px;
  background: #101114;
  color: #f4f4f5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
[dir] .oc-fut-lista.oc-aberto {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[dir] .oc-fut-busca {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #2a2c33;
  border-radius: 6px;
  background: #16171b;
  color: #f4f4f5;
  font-size: 13px;
}
[dir] .oc-fut-busca::placeholder {
  color: #6b6d75;
}

[dir] .oc-fut-lista-corpo {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

[dir] .oc-fut-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #f4f4f5;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
}
[dir] .oc-fut-item:hover {
  background: #1c1e24;
}
[dir] .oc-fut-item.oc-on {
  background: #1c1e24;
  color: #f7931a;
}
[dir] .oc-fut-item-par {
  flex: 1;
  font-weight: 600;
}
[dir] .oc-fut-item-lev {
  color: #8b8d95;
  min-width: 34px;
}
[dir] .oc-fut-item-preco {
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
  min-width: 88px;
  text-align: end;
}

/* ── transferência ───────────────────────────────────────────────────── */

/* ── saldo e ordens abertas ──────────────────────────────────────────── */

[dir] .oc-fut-saldo-valor {
  color: #f4f4f5;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[dir] .oc-fut-abertas {
  display: block;
  /* Encostado na barra de abas: o painel tem 640px reservados pela captura e
   * cada pixel de folga aqui empurra a posição para baixo da dobra. */
  padding: 2px 14px 12px;
  color: #f4f4f5;
  font-size: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
}

[dir] .oc-fut-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #1f2027;
  white-space: nowrap;
}
[dir] .oc-fut-par {
  font-weight: 600;
  min-width: 64px;
}
[dir] .oc-fut-tipo {
  color: #a1a1aa;
  min-width: 104px;
}
[dir] .oc-fut-lado.oc-compra {
  color: #00e08f;
}
[dir] .oc-fut-lado.oc-venda {
  color: #ff4d4f;
}
[dir] .oc-fut-preco,
[dir] .oc-fut-qtd {
  font-variant-numeric: tabular-nums;
}
[dir] .oc-fut-preco {
  min-width: 92px;
}
[dir] .oc-fut-marca {
  padding: 1px 6px;
  border: 1px solid #3f424c;
  border-radius: 4px;
  color: #8b8d95;
  font-size: 10px;
}

[dir] .oc-fut-vazio {
  color: #8b8d95;
  padding: 10px 0;
}

/* ── entrada de ordem ────────────────────────────────────────────────── */
/* Os botoes de acao NAO existem na captura: "Open Long" aparece zero vezes
 * no HTML cru, porque a origem renderiza OU "Login to trade" OU eles, e a
 * captura foi feita deslogada. Estes nascem aqui. */

[dir] .oc-fut-entrada {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 14px;
  color: #f4f4f5;
}

/* A caixa do preço-limite no MESMO desenho do Cost (dono, 06/09/2026). Os
 * números são os do `.ti-outer-wrap` da origem, medidos no ar: 52px de
 * altura, raio 8, fundo rgba(42,44,44,.5), 12px de vão à esquerda
 * (`.gap-w12`), unidade à direita com 6px de cada lado, 16px de corpo. O
 * `input` de dentro vive nu — a caixa é quem tem borda e fundo. */
[dir] .oc-fut-preco-caixa {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 52px;
  margin: 0 0 8px;
  padding: 0 0 0 12px;
  border-radius: 8px;
  background: rgba(42, 44, 44, 0.5);
}
[dir] .oc-fut-preco-caixa .oc-fut-preco {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
  outline: none;
}
[dir] .oc-fut-preco-caixa .oc-fut-preco::placeholder {
  color: #777b83;
}
[dir] .oc-fut-preco-un {
  flex: 0 0 auto;
  padding: 0 6px;
  margin-right: 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}

[dir] .oc-fut-resumo {
  color: #8b8d95;
  font-size: 11px;
  min-height: 14px;
}

/* ── Open Long / Open Short ───────────────────────────────────────────
 *
 * São os dois botões que mandam dinheiro, e a forma os separa de tudo o mais
 * no painel. Até 30/08 isso era uma cápsula arredondada; desde 09/09/2026 é o
 * PAR DIVIDIDO do modelo 2 (`botao.css`, seção `.ocb-pair`): um bloco só,
 * três diagonais de 23.5° — os dois cortes externos e o divisor central, com
 * 3px de folga preta. Raio zero.
 *
 * 🔑 Desde 09/09/2026 o par é SÓ O LADO (`--label-only`, pedido do dono): o
 * ASK/BID saiu de dentro do botão — a caixa `Valor · Custo · Liq.` logo acima
 * já mostra o mesmo número. Sem a segunda linha vale o `--s` de 48px, e 48
 * ainda passa do piso de 44 do alvo de toque: errar o alvo entre comprar e
 * vender não é um clique perdido.
 *
 * Forma, cor, degradê e estado vêm da folha do botão. Aqui fica só o que é do
 * painel. Um `background` aqui pintaria um retângulo ATRÁS do corte, e uma
 * `height` fixa brigaria com o `--ocb-h` que governa as três diagonais. */
[dir] .oc-fut-acao {
  margin-top: 4px;
}
/* As metades são `position:absolute` dentro do par: nada de `flex` nem de
 * largura aqui — quem reparte a coluna é o `width: 50% + slant/2` da folha. */
[dir] .oc-fut-btn {
  letter-spacing: 0;
}

[dir] .oc-fut-ordem-aviso {
  font-size: 12px;
  line-height: 1.45;
  color: #00e08f;
}
[dir] .oc-fut-ordem-aviso.oc-ruim {
  color: #ff4d4f;
}
[dir] .oc-fut-ordem-aviso:empty {
  display: none;
}

/* Controles que JA EXISTIAM na captura e agora respondem: precisam PARECER
 * clicaveis, senao a pessoa nao descobre que mudaram. */
[dir] .oc-fut-clicavel {
  cursor: pointer;
}
[dir] .oc-fut-clicavel:hover {
  opacity: 0.82;
}
[dir] .oc-fut-clicavel:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

/* ── fita de negocios ────────────────────────────────────────────────── */
/* Fonte: recentTrades da Hyperliquid. O /market/trades le a NOSSA tabela
 * Trade, cujo registro mais novo tinha 15 dias — fita com dado velho nao e
 * menos completa, e falsa. */

[dir] .oc-fut-trades {
  display: none;
  padding: 4px 10px 10px;
  color: #f4f4f5;
  font-size: 12px;
}
[dir] .oc-fut-trades-corpo {
  display: flex;
  flex-direction: column;
  max-height: 460px;
  overflow-y: auto;
}
[dir] .oc-fut-trade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[dir] .oc-fut-trade.oc-compra .oc-fut-trade-preco {
  color: #00e08f;
}
[dir] .oc-fut-trade.oc-venda .oc-fut-trade-preco {
  color: #ff4d4f;
}
[dir] .oc-fut-trade-preco {
  min-width: 84px;
}
[dir] .oc-fut-trade-qtd {
  color: #a1a1aa;
  min-width: 74px;
  text-align: end;
}
[dir] .oc-fut-trade-hora {
  color: #6b6d75;
  font-size: 11px;
}

/* ── gatilho (TP/SL) e abas de historico ─────────────────────────────── */

[dir] .oc-fut-gatilho {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[dir] .oc-fut-gatilho-btn {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #2a2c33;
  border-radius: 6px;
  background: #16171b;
  color: #a1a1aa;
  font-size: 12px;
  cursor: pointer;
}
[dir] .oc-fut-gatilho-btn.oc-on {
  border-color: #f7931a;
  color: #f7931a;
  background: #101114;
}
[dir] .oc-fut-gatilho-preco {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #2a2c33;
  border-radius: 6px;
  background: #16171b;
  color: #f4f4f5;
  font-size: 13px;
}
[dir] .oc-fut-gatilho-preco::placeholder {
  color: #6b6d75;
}
/* O aviso mostra a posicao a que o gatilho vai se prender — ou diz que nao
 * ha nenhuma, em vez de oferecer um botao que a HL recusaria sozinha. */
[dir] .oc-fut-gatilho-nota {
  color: #8b8d95;
  font-size: 11px;
  line-height: 1.45;
}
[dir] .oc-fut-gatilho-nota.oc-ruim {
  color: #ff4d4f;
}

[dir] .oc-fut-col {
  font-variant-numeric: tabular-nums;
}
[dir] .oc-fut-col.oc-fut-par {
  font-weight: 600;
  min-width: 62px;
}
[dir] .oc-fut-col.oc-fut-tipo {
  color: #a1a1aa;
  min-width: 96px;
}
[dir] .oc-fut-col.oc-compra {
  color: #00e08f;
  transition: color .15s ease;
}
[dir] .oc-fut-col.oc-venda {
  color: #ff4d4f;
  transition: color .15s ease;
}
[dir] .oc-fut-col.oc-fut-hora {
  color: #6b6d75;
  font-size: 11px;
  margin-inline-start: auto;
}
[dir] .oc-fut-col.oc-fut-marca {
  padding: 1px 6px;
  border: 1px solid #3f424c;
  border-radius: 4px;
  color: #8b8d95;
  font-size: 10px;
}
/* ── as listas do histórico como TABELA ───────────────────────────────
 *
 * 04/09/2026. As quatro abas empilhavam valores sem dizer o que eram. Com
 * grade, o cabeçalho fica em cima do número e a coluna não escorrega: cada
 * aba declara as suas larguras em `--oc-fut-cols` (ver `desenhaLista`), e a
 * mesma grade vale para o cabeçalho e para as linhas.
 *
 * 🔑 `grid` e não `flex`: no flex a largura de cada célula vinha do conteúdo,
 * então a coluna "Entrada" de uma linha não caía sob a "Entrada" da outra —
 * era o que fazia a lista parecer uma fila de números soltos.
 *
 * A caixa já rola na horizontal (`overflow-x:auto` do painel); `min-width`
 * na grade impede as colunas de se espremerem antes de a rolagem começar. */
[dir] [data-oc-fut-grade] .oc-fut-linha {
  display: grid;
  grid-template-columns: var(--oc-fut-cols);
  align-items: center;
  gap: 0 10px;
  min-width: 760px;
}

[dir] .oc-fut-cab {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 0 6px;
  border-bottom: 1px solid #2a2c33;
  background: #0b0b0d;
  color: #6b6d75;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* O cabeçalho não é dado: repetir os títulos ao leitor de tela a cada linha
 * seria ruído, mas escondê-los tiraria a única pista de qual coluna é qual. */
[dir] .oc-fut-cab .oc-fut-col {
  color: #6b6d75;
}

/* Cada célula corta o que não cabe em vez de empurrar a vizinha: uma moeda
 * de nome longo desalinhava a linha inteira. */
[dir] [data-oc-fut-grade] .oc-fut-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Monograma dentro do seletor de par: mesma caixa do `<img>` para a coluna
 * de nomes não escorregar quando um par não tem arte. */
[dir] i.oc-fut-item-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: hsl(var(--oc-h, 0), 62%, 62%);
  color: #16120b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Par com a marca do token à esquerda (04/09). O nome corta com reticências
 * em vez de empurrar a coluna: um símbolo longo desalinharia a linha da
 * tabela inteira. */
[dir] .oc-fut-col.oc-fut-moeda {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
[dir] .oc-fut-moeda-logo {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
/* Substituto de quando não há arte: não finge ser a marca que falta, faz bem
 * o que PODE fazer, que é dizer qual moeda é aquela linha. */
[dir] .oc-fut-moeda-mono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: hsl(var(--oc-h, 0), 62%, 62%);
  color: #16120b;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}
[dir] .oc-fut-moeda-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* Selo de direção e de desfecho. Sem tom é neutro — o `CANCELED` não é erro
 * nem acerto, e pintá-lo de vermelho diria que algo falhou. */
[dir] .oc-fut-selo {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid #3f424c;
  border-radius: 4px;
  color: #8b8d95;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
[dir] .oc-fut-selo.oc-selo-compra {
  border-color: rgba(0, 224, 143, 0.45);
  background: rgba(0, 224, 143, 0.1);
  color: #00e08f;
}
[dir] .oc-fut-selo.oc-selo-venda {
  border-color: rgba(255, 77, 79, 0.45);
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

/* Taxa é custo: fica em tom apagado para não competir com o resultado, que é
 * o número que a pessoa veio ler. */
[dir] .oc-fut-col.oc-fut-taxa {
  color: #8b8d95;
}
[dir] .oc-fut-col.oc-fut-neutro {
  color: #6b6d75;
}
/* Na grade a data já tem coluna própria; o `margin-inline-start:auto` do
 * flex a empurraria para fora dela. */
[dir] [data-oc-fut-grade] .oc-fut-col.oc-fut-hora {
  margin-inline-start: 0;
}

/* O botão de compartilhar da linha do histórico: mesmo desenho do da posição
 * aberta, encolhido para caber na altura da linha. */
[dir] .oc-fut-linha .oc-pos-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #3f424c;
  border-radius: 6px;
  background: transparent;
  color: #8b8d95;
  cursor: pointer;
}
[dir] .oc-fut-linha .oc-pos-share:hover {
  color: #f7931a;
  border-color: #f7931a;
}

[dir] .oc-fut-cancelar {
  margin-inline-start: 8px;
  padding: 3px 9px;
  border: 1px solid #3f424c;
  border-radius: 5px;
  background: transparent;
  color: #a1a1aa;
  font-size: 11px;
  cursor: pointer;
}
[dir] .oc-fut-cancelar:hover {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
[dir] .oc-fut-cancelar:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Linha de posicao: a lista fica em duas alturas porque ela tem rotulo e
 * valor alternados (Tam. / Entrada / Liq. / Margem / PnL). */
[dir] .oc-fut-linha-pos {
  flex-wrap: wrap;
  gap: 8px 10px;
}
[dir] .oc-fut-rot {
  color: #6b6d75;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* A liquidacao e a mais importante da linha: e o preco em que a posicao
 * deixa de existir. */
[dir] .oc-fut-col.oc-fut-liq {
  color: #f7931a;
}

/* ── bracket (alvo/stop na entrada) e TWAP ────────────────────────────── */
[dir] .oc-fut-alvo-caixa,
[dir] .oc-fut-twap-caixa {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[dir] .oc-fut-alvo-tp,
[dir] .oc-fut-alvo-sl,
[dir] .oc-fut-twap-min {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #2a2c33;
  border-radius: 6px;
  background: #16171b;
  color: #f4f4f5;
  font-size: 13px;
}
[dir] .oc-fut-alvo-tp::placeholder,
[dir] .oc-fut-alvo-sl::placeholder,
[dir] .oc-fut-twap-min::placeholder {
  color: #6b6d75;
}
/* O alvo puxa verde e o stop puxa vermelho no foco: quem digita 77000 nos
 * dois campos tem de ver QUAL é qual sem reler o placeholder. */
[dir] .oc-fut-alvo-tp:focus {
  border-color: #00e08f;
  outline: none;
}
[dir] .oc-fut-alvo-sl:focus {
  border-color: #ff4d4f;
  outline: none;
}
[dir] .oc-fut-twap-min:focus {
  border-color: #f7931a;
  outline: none;
}
[dir] .oc-fut-nota {
  color: #8b8d95;
  font-size: 11px;
  line-height: 1.45;
}

/* ── TP/SL: a caixa e o que ela revela ────────────────────────────────
 *
 * A caixa nativa é escondida e não removida: ela continua sendo o que o
 * teclado alcança, o que o leitor de tela anuncia e o que o `:checked`
 * desenha. Trocar por uma `<div>` com `role` daria a mesma aparência e
 * perderia as três coisas de graça. */
[dir] .oc-fut-tpsl {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  /* Alvo de toque de 44px sem 44px de moldura: o rótulo inteiro é o alvo. */
  min-height: 32px;
  padding: 6px 0;
  user-select: none;
}
[dir] .oc-fut-tpsl-cx {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[dir] .oc-fut-tpsl-risco {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid #3a3d46;
  border-radius: 4px;
  background: #101115;
  color: #06130d;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
[dir] .oc-fut-tpsl-risco svg {
  opacity: 0;
  transition: opacity 0.12s ease;
}
[dir] .oc-fut-tpsl:hover .oc-fut-tpsl-risco {
  border-color: #4d5159;
}
[dir] .oc-fut-tpsl-cx:checked + .oc-fut-tpsl-risco {
  background: #00e08f;
  border-color: #00e08f;
}
[dir] .oc-fut-tpsl-cx:checked + .oc-fut-tpsl-risco svg {
  opacity: 1;
}
/* O foco vive no quadrado, que é o que parece o controle — a caixa real
 * está escondida e não tem onde mostrar anel. */
[dir] .oc-fut-tpsl-cx:focus-visible + .oc-fut-tpsl-risco {
  outline: 2px solid #3a6df0;
  outline-offset: 2px;
}
[dir] .oc-fut-tpsl-rot {
  font-size: 13px;
  color: #d4d4d8;
  letter-spacing: 0.01em;
}
[dir] .oc-fut-tpsl-campos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── tipos novos: Gatilho, Stop móvel e Chase (16/09/2026) ────────────
 *
 * Os campos vestem o MESMO desenho da caixa de preço-limite (que veste a do
 * Cost): 52px, raio 8, o fundo da origem, unidade à direita. Um campo de
 * outra família no meio da pilha diria que é outro tipo de coisa. */
[dir] .oc-fut-cond-caixa,
[dir] .oc-fut-trail-caixa,
[dir] .oc-fut-chase-caixa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 8px;
}
[dir] .oc-fut-campo-caixa {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 52px;
  padding: 0 0 0 12px;
  border-radius: 8px;
  background: rgba(42, 44, 44, 0.5);
}
[dir] .oc-fut-campo-caixa .oc-fut-campo {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
  outline: none;
}
[dir] .oc-fut-campo-caixa .oc-fut-campo::placeholder {
  color: #777b83;
}
/* "Marca ⇅" e "USDT ⇅": o texto é o estado atual, a seta diz que troca. */
[dir] .oc-fut-ref {
  flex: 0 0 auto;
  margin: 0 6px 0 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
[dir] .oc-fut-ref::after {
  content: " ⇅";
  color: #777b83;
  font-size: 11px;
}
[dir] .oc-fut-ref:hover {
  background: rgba(255, 255, 255, 0.06);
}
[dir] .oc-fut-ref:focus-visible,
[dir] .oc-fut-atalho:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 1px;
}
/* Atalhos 1% e 2% da taxa de retorno, como na Aster. */
[dir] .oc-fut-atalho {
  flex: 0 0 auto;
  padding: 6px 6px;
  border: 0;
  background: transparent;
  color: #777b83;
  font-size: 13px;
  cursor: pointer;
}
[dir] .oc-fut-atalho:last-child {
  margin-right: 6px;
}
[dir] .oc-fut-atalho:hover {
  color: #ffffff;
}
/* O menu de tipos abre POR CIMA do formulário. A captura o deixava atrás
 * dos irmãos seguintes (o slider e o "Disp." apareciam através dele): a
 * barra de tipos ganha a própria camada, acima do resto do painel. */
[dir] .order-panel-trade-type {
  position: relative;
  z-index: 40;
}
[dir] .oc-fut-seg {
  display: flex;
  gap: 6px;
}
[dir] .oc-fut-seg .oc-fut-gatilho-btn {
  flex: 1;
  min-height: 34px;
}

/* ── liquidação estimada dos dois lados ───────────────────────────────
 *
 * Verde à esquerda e vermelho à direita, na MESMA ordem dos dois botões
 * logo acima: a coluna embaixo do botão é a do botão. */
[dir] .oc-fut-est {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-top: 2px;
}
[dir] .oc-fut-est-col {
  min-width: 0;
}
[dir] .oc-fut-est-curto {
  text-align: right;
}
[dir] .oc-fut-est-rot {
  font-size: 11px;
  color: #6b6d75;
  border-bottom: 1px dashed #33353d;
  display: inline-block;
  padding-bottom: 1px;
}
[dir] .oc-fut-est-val {
  margin-top: 3px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-fut-est-longo .oc-fut-est-val {
  color: #00e08f;
}
[dir] .oc-fut-est-curto .oc-fut-est-val {
  color: #ff4d4f;
}

/* Opção do menu que a Hyperliquid não executa por conta própria: fica
 * visivelmente fora, não muda calada. Um item apagado seria a origem
 * prometendo o que ninguém cumpre. */
[dir] .oc-fut-indisponivel {
  opacity: 0.38;
  cursor: not-allowed;
}
[dir] .oc-fut-indisponivel:hover {
  background: transparent;
}

/* ── modal ────────────────────────────────────────────────────────────
 *
 * Casca dos popups da casa (handoff "Popups de Futuros", 01/09/2026): card
 * 470px #0f0f0f, borda #232323, raio 20, fio de 2px no topo em gradiente do
 * acento e três listras diagonais no canto. Vidro escuro por trás, painel
 * subindo 6px. O comportamento (foco preso, Esc, pilha) é o de sempre. */
[dir] .oc-modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  font-family:
    "Space Grotesk",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
}
[dir] .oc-modal-fundo.oc-modal-dentro {
  opacity: 1;
}
[dir] .oc-modal-fundo.oc-modal-saindo {
  opacity: 0;
  transition-duration: 0.14s;
}
[dir] .oc-modal-painel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 470px;
  max-height: min(92vh, 960px);
  overflow: hidden;
  border: 1px solid #232323;
  border-radius: 20px;
  background: #0f0f0f;
  color: #fff;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  outline: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.16s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
[dir] .oc-modal-dentro .oc-modal-painel {
  opacity: 1;
  transform: none;
}
[dir] .oc-modal-saindo .oc-modal-painel {
  opacity: 0;
  transform: translateY(4px);
  transition-duration: 0.14s;
}
/* Quem pediu menos movimento recebe só o fade — a informação é a mesma. */
@media (prefers-reduced-motion: reduce) {
  [dir] .oc-modal-painel {
    transform: none;
    transition: opacity 0.12s linear;
  }
  [dir] .oc-modal-dentro .oc-modal-painel,
  [dir] .oc-modal-saindo .oc-modal-painel {
    transform: none;
  }
}
[dir] .oc-modal-fio {
  flex-shrink: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #f7931a 50%,
    transparent 100%
  );
}
[dir] .oc-modal-listras {
  position: absolute;
  top: -30px;
  right: 40px;
  height: 130px;
  width: 60px;
  pointer-events: none;
}
[dir] .oc-modal-listras span {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: skewX(-26.6deg);
}
[dir] .oc-modal-listras span:nth-child(1) {
  right: 0;
  width: 20px;
  background: rgba(247, 147, 26, 0.05);
}
[dir] .oc-modal-listras span:nth-child(2) {
  right: 32px;
  width: 9px;
  background: rgba(247, 147, 26, 0.035);
}
[dir] .oc-modal-listras span:nth-child(3) {
  right: 52px;
  width: 4px;
  background: rgba(247, 147, 26, 0.025);
}
/* Acento vermelho: fechar posição. */
[dir] .oc-modal-vermelho .oc-modal-fio {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ef4444 50%,
    transparent 100%
  );
}
[dir] .oc-modal-vermelho .oc-modal-listras span:nth-child(1) {
  background: rgba(239, 68, 68, 0.05);
}
[dir] .oc-modal-vermelho .oc-modal-listras span:nth-child(2) {
  background: rgba(239, 68, 68, 0.035);
}
[dir] .oc-modal-vermelho .oc-modal-listras span:nth-child(3) {
  background: rgba(239, 68, 68, 0.025);
}
[dir] .oc-modal-cab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 26px;
  border-bottom: 1px solid #1c1c1c;
}
[dir] .oc-modal-cab-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
[dir] .oc-modal-cab-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
[dir] .oc-modal-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir] .oc-modal-sub {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #6a6a6a;
}
/* Selo diagonal do lado: retângulo com canto esquerdo redondo + paralelogramo. */
[dir] .oc-modal-selo {
  position: relative;
  flex-shrink: 0;
  height: 20px;
  padding: 0 12px 0 9px;
  display: inline-flex;
  align-items: center;
}
[dir] .oc-modal-selo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 6px;
  background: var(--selo-bg);
  border-radius: 6px 0 0 6px;
}
[dir] .oc-modal-selo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1px;
  width: 10px;
  background: var(--selo-bg);
  transform: skewX(-26.6deg);
}
/* 🔑 `::after` é o último filho: sem z-index o rótulo some atrás dele. */
[dir] .oc-modal-selo-txt {
  position: relative;
  z-index: 1;
  color: var(--selo-cor);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
[dir] .oc-modal-selo-longo {
  --selo-bg: rgba(34, 197, 94, 0.14);
  --selo-cor: #22c55e;
}
[dir] .oc-modal-selo-curto {
  --selo-bg: rgba(239, 68, 68, 0.14);
  --selo-cor: #ef4444;
}
[dir] .oc-modal-x {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid #262626;
  border-radius: 9px;
  background: transparent;
  color: #7a7a7a;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
[dir] .oc-modal-x:hover {
  border-color: #f7931a;
  color: #f7931a;
  background: transparent;
}
[dir] .oc-modal-x:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}
[dir] .oc-modal-corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 26px 26px;
  font-size: 13px;
  line-height: 1.5;
}
@keyframes ocPosEntra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[dir] .oc-modal-pos .oc-modal-corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: ocPosEntra 0.25s ease;
}
/* 🔴 Filho de flex-column com `overflow: hidden` ganha `min-height: 0` e
 * ENCOLHE quando o conteúdo passa da altura do corpo — o cartão do PnL era
 * o único assim e aparecia cortado ao meio, sem rolar nada. Nada aqui
 * encolhe: o corpo rola. */
[dir] .oc-modal-pos .oc-modal-corpo > * {
  flex-shrink: 0;
}
@media (max-width: 520px) {
  [dir] .oc-modal-fundo {
    padding: 10px;
  }
  [dir] .oc-modal-cab {
    padding: 14px 18px;
  }
  [dir] .oc-modal-corpo {
    padding: 16px 18px 22px;
  }
}

/* ── ficha da posição ─────────────────────────────────────────────────── */
[dir] .oc-ficha-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}
[dir] .oc-ficha-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #1d1f24;
}
[dir] .oc-ficha-rot {
  color: #8b8d95;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[dir] .oc-ficha-val {
  color: #f4f4f5;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-ficha-val.oc-alerta {
  color: #f7931a;
}
[dir] .oc-ficha-secao {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b8d95;
}
[dir] .oc-ficha-nota {
  margin: 6px 0 0;
  color: #8b8d95;
  font-size: 11px;
  line-height: 1.5;
}
[dir] .oc-ficha-margem {
  display: flex;
  gap: 6px;
  align-items: center;
}
[dir] .oc-ficha-campo {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #2a2c33;
  border-radius: 7px;
  background: #101114;
  color: #f4f4f5;
  font-size: 13px;
}
[dir] .oc-ficha-campo::placeholder {
  color: #6b6d75;
}
[dir] .oc-ficha-campo:focus {
  border-color: #3a3d45;
  outline: none;
}
[dir] .oc-ficha-btn {
  padding: 8px 14px;
  border: 1px solid #2a2c33;
  border-radius: 7px;
  background: #1c1e23;
  color: #f4f4f5;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    background 0.15s;
}
[dir] .oc-ficha-btn:hover {
  border-color: #3a3d45;
}
[dir] .oc-ficha-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
[dir] .oc-ficha-btn:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 1px;
}
/* Adicionar margem AFASTA a liquidação — é a ação que ganha o verde.
 * Remover fica neutra: aproximar a liquidação não é o caminho a sugerir. */
[dir] .oc-ficha-btn-bom {
  border-color: #00e08f;
  color: #00e08f;
}
[dir] .oc-ficha-btn-bom:hover {
  background: #14231c;
  border-color: #00e08f;
}
[dir] .oc-ficha-btn-ruim {
  border-color: #ff4d4f;
  color: #ff4d4f;
}
[dir] .oc-ficha-btn-ruim:hover {
  background: #241618;
  border-color: #ff4d4f;
}
[dir] .oc-ficha-btn-largo {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
}
[dir] .oc-ficha-chips {
  display: flex;
  gap: 6px;
}
[dir] .oc-ficha-chip {
  flex: 1;
  padding: 7px 0;
  border: 1px solid #2a2c33;
  border-radius: 7px;
  background: #101114;
  color: #8b8d95;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
[dir] .oc-ficha-chip:hover {
  border-color: #3a3d45;
  color: #f4f4f5;
}
[dir] .oc-ficha-chip.oc-on {
  border-color: #3a6df0;
  color: #f4f4f5;
  background: #151a26;
}
[dir] .oc-ficha-chip:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 1px;
}
[dir] .oc-ficha-aviso {
  margin-top: 10px;
  font-size: 12px;
  color: #8b8d95;
}
[dir] .oc-ficha-aviso.oc-ruim {
  color: #ff4d4f;
}
[dir] .oc-fut-linha-pos:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: -2px;
}

@media (max-width: 520px) {
  [dir] .oc-ficha-grade {
    grid-template-columns: 1fr;
  }
}
[dir] .oc-ficha-item-largo {
  grid-column: 1 / -1;
}
[dir] .oc-ficha-btn-mini {
  padding: 4px 10px;
  font-size: 11px;
}

/* ── menus de seleção herdados da captura ─────────────────────────────
 *
 * Dois defeitos no mesmo componente, e os dois aparecem como "menu meio
 * transparente por cima do painel":
 *
 * 🔑 O menu nasce em `top: calc(100% + 4px)` — quatro pixels de VÃO entre o
 * cabeçalho e a lista. Descendo o mouse até um item, o ponteiro atravessa
 * esse vão sem estar sobre nenhum dos dois, o `:hover` cai e o menu começa
 * a sumir; voltando, começa a aparecer. O que se vê no meio disso é o
 * painel de ordem através do menu.
 *
 * 🔑 E some devagar: `transition: all .2s, opacity .15s`. Um menu que leva
 * 150ms para ficar opaco passa 150ms deixando ler o que está atrás dele.
 *
 * Conserto: encosta a lista no cabeçalho (sem vão para atravessar) e tira a
 * transição — menu aparece e desaparece, não desbota. */
/* 🔑 `[dir][dir]` para empatar a especificidade da regra da origem, que
   carrega um `[data-v-…]`. O hash do Vue MUDA de página para página — casar
   com ele acertaria uma tela e erraria as outras. Empatado, vence quem vem
   depois, e esta folha é injetada no corpo. */
[dir][dir] .bx-select-menu-wrap .bx-select-modal-wrap {
  top: 100%;
  transition: none;
}
/* Ponte invisível sobre o vão: uma faixa que pertence à LISTA cobre o
   caminho entre ela e o cabeçalho, e o `:hover` não tem mais onde cair. */
[dir][dir] .bx-select-menu-wrap .bx-select-modal-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

/* Ícone da moeda na lista de pares. Tamanho fixo para a linha não pular
   quando um logo chega depois do outro. */
[dir] .oc-fut-item-icone {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  object-fit: contain;
  background: #16171b;
}

/* Abas de categoria do TradFi.
   🔑 QUEBRAM em duas linhas, não rolam. Medido: as seis pedem 381px num
   painel de 320, então com rolagem lateral o "Pre-IPO" nascia fora da borda
   — e aba que só aparece depois de arrastar é aba que ninguém acha. As duas
   linhas custam 28px de altura; a categoria escondida custa a categoria. */
[dir] .oc-fut-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
}
[dir] .oc-fut-cat {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #2a2c33;
  border-radius: 999px;
  background: transparent;
  color: #8b8d95;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
[dir] .oc-fut-cat:hover {
  color: #f4f4f5;
  border-color: #3a3d45;
}
[dir] .oc-fut-cat.oc-on {
  color: #f4f4f5;
  border-color: #3a6df0;
  background: #151a26;
}
[dir] .oc-fut-cat:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 1px;
}

/* ── dois defeitos herdados da captura, no painel de ordem ────────────────
 *
 * 🔴 **A alavancagem aparecia DUAS vezes.** A origem separa o valor por lado
 * (`.leverage.long` verde, `.leverage.short` vermelho) porque la ha uma
 * alavancagem para long e outra para short. Aqui e UMA so — a HL guarda o
 * valor por MERCADO —, entao o `futuros.js` escreve o mesmo numero nos dois
 * spans, de proposito, para nao deixar a tela dizendo `20x` de um lado e o
 * valor novo do outro. Visualmente saia `20X 20X`.
 *
 * 🔑 Controle repetido nao e redundancia, e duvida: quem le dois numeros
 * iguais lado a lado procura a diferenca entre eles, e nao ha nenhuma.
 *
 * O `short` some e o `long` perde a cor de lado: nao ha lado. O JS continua
 * escrevendo nos dois — assim, se alguem tirar esta regra, a tela volta ao
 * comportamento anterior em vez de mostrar um valor velho.
 */
[data-oc-fut-alavancagem] .leverage.short {
  display: none !important;
}
[data-oc-fut-alavancagem] .leverage.long {
  color: inherit !important;
}

/* 30/08/2026: os dois chips ("Isolated Margin", "20X") vestem o botão padrão
 * (`chanfra()` no futuros.js). A moldura que a origem dava a `.text-input-label`
 * e `.content` sai — o corte diagonal é dos pseudo-elementos, e um fundo
 * herdado apareceria ATRÁS dele como um retângulo. */
[dir] [data-oc-fut-margem].oc-bt,
[dir] [data-oc-fut-alavancagem].oc-bt {
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* A origem pinta `.content` de cinza e `.leverage` de branco por regras
   * mais longas que estas — medido no ar: (119,123,131) e (255,255,255) num
   * chip cujo tom é o do botão padrão. */
  color: var(--bt-tinta) !important;
  line-height: 1;
}
/* ── 30/08/2026: "Isolada Margem ⟍ 20X" — faixa CHEIA com partição no meio.
 * Aprovado AO VIVO com estilo injetado (6ª rodada; as anteriores na memória):
 * mesma cor nos dois segmentos, largura total do painel com metades iguais,
 * e a partição é um RISCO PRETO diagonal PINTADO — entre dois cinzas iguais
 * o vão de fundo não lê (o Long/Short particiona pelas cores). */
[dir] .account-header {
  width: 100%;
}
[dir] .account-header .left-wrapper.oc-bt-cadeia {
  --cadeia-h: 34px;
  --cadeia-raio: 8px;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  margin: 0;
  gap: 0;
}
[dir] [data-oc-fut-margem].oc-bt {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* Invólucros do 20X: a METADE direita da faixa, cada nível repassando a
 * largura (a origem os cria na medida do conteúdo). O chip estica junto. */
[dir] .account-header .symbol-param-change-tooltip-wrap {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
}
[dir] .account-header .symbol-param-change-tooltip,
[dir] .account-header .symbol-param-change-tooltip .btn,
[dir] .account-header .symbol-param-change-reference,
[dir] .account-header .symbol-param-change-reference .text-input-label,
[dir] .account-header .symbol-param-change-reference .label {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[dir] [data-oc-fut-alavancagem].oc-bt {
  width: 100% !important;
  min-width: 0 !important;
  /* A origem dá overflow:hidden ao .content e decapitava a diagonal. */
  overflow: visible !important;
}
[dir] [data-oc-fut-alavancagem].oc-bt .oc-bt-rot {
  width: 100%;
  justify-content: center;
}
/* O risco separador — a partição que o par de baixo ganha das cores.
 *
 * 🔴 Só DENTRO da cadeia (foto do dono, 06/09/2026, móvel deslogado): a
 * emenda nascia em todo `.symbol-param-change-tooltip-wrap`, e sem sessão os
 * chips são texto cru (o `chanfra()` mora no `montaEntrada`, que só roda
 * logado) — o risco preto caía em cima do "2" de "20X", no celular e no
 * desktop. A emenda é peça da cadeia; sem cadeia, não há o que emendar. */
[dir] .account-header .left-wrapper.oc-bt-cadeia .symbol-param-change-tooltip-wrap::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 6px;
  width: 7px;
  transform: skewX(-32deg);
  background: #000;
  z-index: 2;
}

/* 🔴 Dono, 30/08 23:29 (print): "2 cortes entre Isolated e o 20X". Cada chip
   ainda desenhava o PRÓPRIO chanfro (corpo + tampa do botão comum) e o risco
   preto acima virava o segundo corte — e entre as metades havia um buraco de
   8px. Dentro da cadeia os dois viram LAJES (sem tampa, canto redondo só na
   ponta de fora), as metades se encostam e o risco é a ÚNICA emenda. */
[dir] .left-wrapper.oc-bt-cadeia > [data-oc-fut-margem].oc-bt::before {
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  border-radius: var(--raio) 0 0 var(--raio);
}
[dir] .left-wrapper.oc-bt-cadeia > [data-oc-fut-margem].oc-bt::after {
  display: none;
}
[dir]
  .account-header
  .left-wrapper.oc-bt-cadeia
  .symbol-param-change-tooltip-wrap {
  margin-left: -8px !important;
}
[dir] .left-wrapper.oc-bt-cadeia [data-oc-fut-alavancagem].oc-bt::before {
  left: 0;
  right: 0;
  /* 🔴 O chip REAL também leva `oc-bt-cadeia-fim` (futuros.js): a regra da
     cadeia traz `width: var(--h)` (34px) e a laje ficava desse tamanho —
     "a caixa do 20x ficou pequeno" (dono, 30/08 23:46). Declarar vence. */
  width: auto;
  transform: none;
  border-radius: 0 var(--raio) var(--raio) 0;
}
[dir] .left-wrapper.oc-bt-cadeia [data-oc-fut-alavancagem].oc-bt::after {
  display: none;
}

[dir] [data-oc-fut-margem].oc-bt .label,
[dir] [data-oc-fut-margem].oc-bt .content,
[dir] [data-oc-fut-alavancagem].oc-bt .inner-content,
[dir] [data-oc-fut-alavancagem].oc-bt .leverage {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
[dir] .oc-fut-clicavel.oc-bt:hover {
  opacity: 1;
}

/* 🔴 **Dois saldos na mesma linha, e um deles morto.** Ao lado do nosso
 * `Disp. 102,00 USDC` a captura deixou o `Avail. -- USDC` dela, que nunca foi
 * preenchido — o Vue que o alimentava nao veio.
 *
 * 🔑 `--` ao lado de um numero nao le como "sem dado": le como "zero". Numa
 * tela de margem, dois saldos discordando sobre quanto ha para operar e a
 * pior forma de dizer um numero.
 *
 * Escondido, nao cortado: e no do DOM da origem, e cortar no aqui ja levou
 * secao vizinha junto.
 */
/* ⚠️ A classe e `op-asset-content`, medida no DOM servido — nao adivinhada.
 * Chutei `.avail-usdc` na primeira escrita e a regra nao casaria nada: regra
 * que nao casa nao da erro, deixa o defeito de pe e o arquivo com ar de
 * consertado. */
[data-oc-fut-saldo] .op-asset-content {
  display: none !important;
}

/* ── abas mortas ao lado do GRAFICO ──────────────────────────────────────
 *
 * `Sobre a moeda` e `Informacoes` (dono, 24/08/2026). As duas sao da captura:
 * o conteudo delas era montado pelo Vue da origem, que nao veio, e clicar
 * apenas troca a aba para um painel vazio.
 *
 * 🔑 Aba que abre nada e pior que aba ausente — a pessoa clica, ve o vazio, e
 * passa a desconfiar das que funcionam. Mesmo caso do blob de IA e do globo
 * de moeda que sairam do cabecalho.
 *
 * Escondido por CSS, nao cortado: sao nos do DOM da origem, e a fileira de
 * abas se realinha sozinha com uma so — `GRAFICO` fica onde estava.
 */
/* Ancora ESTRUTURAL, nunca o rotulo: esta folha vale nas sete linguas, e
 * `Sobre a moeda` ja chega traduzido. O que nao passa pelo tradutor e a
 * POSICAO — a barra de abas do cabecalho do grafico (`.title-header`) tem
 * exatamente tres itens, e o primeiro e o grafico. Do segundo em diante, sai.
 *
 * Assim tambem nao ha lista de rotulos para envelhecer: se a origem
 * acrescentar uma quarta aba morta, ela ja nasce escondida. */
[dir] .title-header .bx-tab-bar .bx-tab-item:nth-child(n + 2) {
  display: none !important;
}

/* ── diálogo de alavancagem ───────────────────────────────────────────
 *
 * Um campo grande com o número, a régua até o TETO do mercado, o aviso
 * quando o valor é alto e quanto de posição aquilo permite. A ordem é a da
 * decisão: escolher → ver a consequência → confirmar. */
[dir] .oc-lev {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[dir] .oc-lev-campo {
  border: 1px solid #2a2c33;
  border-radius: 10px;
  background: #16171b;
  padding: 10px 14px 12px;
  transition: border-color 0.15s ease;
}
[dir] .oc-lev-campo:focus-within {
  border-color: #3a6df0;
}
[dir] .oc-lev-rot {
  font-size: 12px;
  color: #8b8d95;
}
[dir] .oc-lev-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
[dir] .oc-lev-num {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
[dir] .oc-lev-num:focus {
  outline: none;
}
[dir] .oc-lev-x {
  color: #8b8d95;
  font-size: 15px;
  flex: none;
}

/* A régua nativa, repintada. `appearance: none` desliga o desenho do
 * sistema nos três motores; sem os três a trilha aparece dupla.
 *
 * Os pontos das marcas ficam numa camada ATRÁS do controle, não dentro do
 * `::-webkit-slider-runnable-track`: pseudo-elemento de track não aceita
 * filho, e desenhá-los com gradiente repetido erraria a posição sempre que
 * o teto do mercado não fosse divisível pelas cinco marcas. */
[dir] .oc-lev-trilho {
  position: relative;
  --oc-pct: 0%;
}
[dir] .oc-lev-pontos {
  position: absolute;
  top: 50%;
  /* 8px de recuo de cada lado = metade da bolinha. O navegador encolhe o
   * curso do polegar por essa margem; sem o mesmo recuo aqui, o ponto de
   * 100% ficaria à direita de onde a bolinha consegue chegar. */
  left: 8px;
  right: 8px;
  height: 0;
  pointer-events: none;
}
[dir] .oc-lev-ponto {
  position: absolute;
  top: -2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #5a5d66;
}
[dir] .oc-lev-faixa {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
[dir] .oc-lev-faixa::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #f4f4f5 0,
    #f4f4f5 var(--oc-pct),
    #3a3d46 var(--oc-pct),
    #3a3d46 100%
  );
}
[dir] .oc-lev-faixa::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    #f4f4f5 0,
    #f4f4f5 var(--oc-pct),
    #3a3d46 var(--oc-pct),
    #3a3d46 100%
  );
}
[dir] .oc-lev-faixa::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7px;
  border-radius: 50%;
  background: #f4f4f5;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
[dir] .oc-lev-faixa::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f4f4f5;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
[dir] .oc-lev-faixa:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 4px;
  border-radius: 4px;
}

[dir] .oc-lev-marcas {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: -6px;
}
[dir] .oc-lev-marca {
  border: 0;
  background: transparent;
  color: #8b8d95;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-lev-marca:hover {
  color: #f4f4f5;
  background: #1d1f25;
}
[dir] .oc-lev-marca:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 1px;
}

/* O aviso ocupa lugar SEMPRE, aceso ou apagado: aparecer do nada empurraria
 * o botão de confirmar para baixo justo quando o dedo já está indo nele. */
[dir] .oc-lev-aviso {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #ff4d4f;
  visibility: hidden;
}
[dir] .oc-lev-aviso.oc-on {
  visibility: visible;
}
[dir] .oc-lev-max {
  margin: 0;
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[dir] .oc-lev-max-rot {
  color: #8b8d95;
}
[dir] .oc-lev-max-val {
  color: #f4f4f5;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-lev-nota {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #6b6d75;
}
[dir] .oc-lev-acao {
  display: flex;
}
[dir] .oc-lev-ok {
  flex: 1;
}
[dir] .oc-lev-ok:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

/* ── diálogo do modo de margem ────────────────────────────────────────
 *
 * Os dois textos inteiros, um sob o outro, e o visto na escolha atual. A
 * borda marca a selecionada — cor sozinha não bastaria para quem não a
 * distingue. */
[dir] .oc-mm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[dir] .oc-mm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px;
  border: 1px solid #2a2c33;
  border-radius: 10px;
  background: #16171b;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
[dir] .oc-mm-item:hover {
  border-color: #4d5159;
}
[dir] .oc-mm-item.oc-on {
  border-color: #00e08f;
  background: #12211a;
}
[dir] .oc-mm-item:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 2px;
}
[dir] .oc-mm-txt {
  flex: 1;
  min-width: 0;
}
[dir] .oc-mm-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #f4f4f5;
}
[dir] .oc-mm-desc {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: #8b8d95;
}
[dir] .oc-mm-check {
  flex: none;
  color: #00e08f;
  opacity: 0;
  transition: opacity 0.12s ease;
}
[dir] .oc-mm-item.oc-on .oc-mm-check {
  opacity: 1;
}
[dir] .oc-mm-acao {
  display: flex;
  margin-top: 4px;
}

/* ── ficha em CARTÕES (24/08/2026) ────────────────────────────────────
 *
 * 🔴 A ficha era uma coluna contínua: números, margem, TP, SL, gatilhos
 * ativos e fechamento, um embaixo do outro, com quatro campos de texto que
 * aceitam número e três botões verdes. A única fronteira entre "isto é
 * informação" e "isto opera dinheiro" era o tamanho da fonte do título.
 *
 * 🔑 Cada assunto num cartão com fundo e borda próprios. A separação não é
 * enfeite: ela é o que impede de digitar no campo de margem achando que é o
 * do stop. O TP/SL saiu daqui e ganhou janela própria.
 */
[dir] .oc-ficha-bloco {
  border: 1px solid #23252b;
  border-radius: 10px;
  background: #131418;
  padding: 12px 14px 14px;
  margin-bottom: 12px;
}
/* O primeiro título de um cartão não empurra: a margem de 18px do
 * `.oc-ficha-secao` existe para separar seções numa coluna contínua, e
 * dentro do cartão o topo dele já faz esse trabalho. */
[dir] .oc-ficha-bloco > .oc-ficha-secao:first-child {
  margin-top: 0;
}
[dir] .oc-ficha-bloco > .oc-ficha-grade {
  gap: 0 16px;
}
/* Fechar é o único destrutivo — a borda avisa antes de a pessoa ler. */
[dir] .oc-ficha-bloco-fechar {
  border-color: #33222380;
}
[dir] .oc-ficha-bloco-tp {
  border-color: #1c3b2e;
}
[dir] .oc-ficha-bloco-sl {
  border-color: #3a2426;
}

/* Marca de referência no topo da janela de gatilhos: os dois campos são
 * julgados contra ela. */
[dir] .oc-ficha-ref {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #23252b;
  border-radius: 10px;
  background: #101115;
  margin-bottom: 12px;
}

/* ── margem: escolher a direção, depois confirmar ─────────────────────
 *
 * Os dois modos são um par exclusivo, não dois botões de ação — por isso a
 * cor só aparece no SELECIONADO. Dois botões coloridos lado a lado seriam
 * de novo duas ações prontas para disparar. */
[dir] .oc-ficha-modos {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
[dir] .oc-ficha-modo {
  flex: 1;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #2a2c33;
  border-radius: 8px;
  background: #16171b;
  color: #a1a1aa;
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}
[dir] .oc-ficha-modo:hover:not(:disabled) {
  border-color: #3a3d46;
  color: #f4f4f5;
}
[dir] .oc-ficha-modo:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
[dir] .oc-ficha-modo:focus-visible {
  outline: 2px solid #3a6df0;
  outline-offset: 2px;
}
[dir] .oc-ficha-modo-bom.oc-on {
  border-color: #00e08f;
  color: #00e08f;
  background: #12211a;
}
[dir] .oc-ficha-modo-ruim.oc-on {
  border-color: #ff4d4f;
  color: #ff4d4f;
  background: #211416;
}
[dir] .oc-ficha-campo-largo {
  width: 100%;
  box-sizing: border-box;
}

/* ── TP/SL na linha da posição ────────────────────────────────────────
 *
 * Mesmo corpo do botão de fechar, cor neutra: os dois vivem lado a lado e
 * só um deles encerra a posição. Pintar os dois de vermelho apagaria a
 * diferença justo no par em que ela mais importa. */
[dir] .oc-fut-btn-gatilho {
  color: #a1a1aa;
}
[dir] .oc-fut-btn-gatilho:hover {
  color: #f4f4f5;
  border-color: #3a3d45;
}

/* ── transferir, no canto direito da barra Trade | Bots ───────────────
 *
 * Pequeno e branco por decisão do dono. `margin-left:auto` empurra para o
 * canto sem mexer nas duas abas — a barra é `flex` da origem, e posicionar
 * por `position:absolute` sairia do lugar quando o rótulo traduzido mudar
 * de largura (`Transferir`, `Перевести`, `स्थानांतरण`). */
/* ── Transferir, no canto da barra `Trade | Bots` ──────────────────────
 *
 * 🔴 Era uma pastilha BRANCA (`background: #f4f4f5`) — a única superfície
 * clara do painel inteiro. Num bloco escuro, o elemento mais claro é o que o
 * olho lê primeiro, e ele estava pesando mais que `Open Long` e `Open Short`,
 * que são as ações primárias desta tela. Transferir é secundário: quem chega
 * aqui vem negociar.
 *
 * 🔑 Uma tela, uma ação primária. O botão passa a ser um chip VAZADO, na mesma
 * família das caixas `Isolated Margin` e `20X` que estão logo abaixo — borda
 * fina, fundo do painel, texto secundário. Ele continua achável sem disputar.
 *
 * 🔴 O alvo de toque tinha ~22px de altura (`padding: 4px 12px` sobre 11px de
 * corpo). O mínimo é 44px no telefone; 36px aqui e 44 na consulta de mídia,
 * com a área crescendo além da caixa visível.
 *
 * 🔴 E o anel de foco era AZUL (`#3a6df0`), herdado de outro sistema, num
 * painel cuja marca é laranja.
 *
 * 06/09/2026: LARANJA, por ordem do dono ("botão transfer tem que ficar
 * laranja") — `oc-bt-marca` no `futuros.js`; a regra de "uma ação primária"
 * acima fica registrada como a razão do chip escuro que ele substituiu.
 *
 * 09/09/2026: MODELO 2 (`botao.css`, seção `.ocb`), por ordem do dono. O tom
 * laranja de 06/09 continua — no modelo novo ele é o preenchimento PADRÃO do
 * `.ocb`, e não precisa de modificador. A forma é que muda: paralelogramo de
 * 23.5° com a célula da seta dentro do corpo, no lugar da cápsula de canto
 * redondo. Aqui só mora ONDE ele fica; forma, cor e estado são da folha do
 * botão. */
[dir] .oc-fut-transf-topo {
  margin-left: auto;
  align-self: center;
}

/* ── o disponível, logo acima do Cost ─────────────────────────────────
 *
 * UMA linha de saldo no painel (dono, 28/08/2026). Ela fica colada ao campo
 * onde se digita o custo, com o ícone de transferir ao lado — quem lê o saldo
 * e vê que falta margem tem a ação à mão. A linha `Avail.` da origem, abaixo
 * do slider, dizia o MESMO número e é escondida logo abaixo.
 *
 * `tabular-nums`: o saldo é repintado a cada segundo pelo pulso, e sem largura
 * fixa de dígito a linha inteira treme a cada tique. */
.oc-fut-disp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #a8a8a8;
  font-variant-numeric: tabular-nums;
}

[dir] .oc-fut-disp {
  margin: 0 0 8px;
}

.oc-fut-disp-val {
  white-space: nowrap;
}
/* O rótulo ganhou span próprio (o celular o separa); aqui o `gap` de 8px
   vira o espaço de antes. */
[dir] .oc-fut-disp-rot {
  margin-right: -4px;
  white-space: nowrap;
}

/* O `⇌` da origem, agora vizinho do saldo. Alvo de toque próprio: ele é o
   caminho de quem descobriu que a margem não dá. */
[dir] .oc-fut-disp .oc-fut-disp-tr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #a8a8a8;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

[dir] .oc-fut-disp .oc-fut-disp-tr:hover {
  color: var(--offcode-brand, #f7931a);
  background: rgba(255, 255, 255, 0.05);
}

/* 🔑 A linha da origem sai por CSS, não por JS: nó da captura removido do DOM
   é nó que outro passe não encontra mais — e o `liga_futuros` carimba um
   gancho justamente nele. */
[dir] [data-oc-fut-saldo] {
  display: none;
}

/* ── a fita `Aberto | Fechar` ─────────────────────────────────────────
 *
 * Saiu da tela por decisão do dono em 24/08/2026: esta entrada abre, sempre.
 * Fechar já tem o lugar dele, no cartão da posição, onde estão o tamanho e o
 * preço de entrada. Dois caminhos para a mesma coisa, num painel que não sabe
 * quanto há aberto, é onde nasce o engano — a pessoa deixa "Fechar" ligado de
 * uma vez anterior e manda uma `reduceOnly` que não fecha o que ela pensa.
 *
 * 🔴 O esconder morava no `montaEntrada()` do `futuros.js`, que só roda COM
 * SESSÃO. Quem chegava deslogado via a fita inteira. 🔑 Elemento que some por
 * decisão de PRODUTO some na folha: ela vale para todo mundo, e o motor só
 * para quem chegou até onde ele roda.
 *
 * É o pai que sai, não os itens: uma barra de abas com uma aba só é ruído que
 * ainda parece escolha. */
[dir] [data-oc-fut-lado-abrir],
[dir] [data-oc-fut-lado-fechar] {
  display: none;
}
[dir] .trade-tab:has([data-oc-fut-lado-abrir]) {
  display: none;
}

@media (max-width: 780px) {
  /* 44px é o alvo mínimo de toque — no modelo 2 a altura inteira sai de uma
   * variável só (`--ocb-h`), e com ela o slant, a célula da seta e o rótulo.
   * O `--r`/`--raio` do modelo 1 não existem mais aqui: deixá-los seria uma
   * declaração que ninguém lê, e o botão voltaria aos 34px no telefone. */
  [dir] .oc-fut-transf-topo {
    --ocb-h: 44px;
  }
  [dir] .oc-fut-disp .oc-fut-disp-tr {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── os três botões da seção CONTA (Depósito · Transferir · Comprar cripto),
   no padrão do site, três por linha — antes eram as pílulas mortas da
   captura, e o do meio vazava por cima do vizinho (tag corrompida). */
/* 🔴 As regras de `.oc-fut-conta-botoes` saíram em 10/09/2026, com os três
 * botões que elas vestiam (Depósito · Transferir · Comprar cripto). O bloco
 * CONTA some do painel em qualquer estado — `escondeConta()` no futuros.js —,
 * e regra de CSS para classe que nada mais escreve é peso morto que ninguém
 * apaga depois porque ninguém sabe se ainda vale. */

/* ── popups da posição: `.oc-pos-*` (handoff 01/09/2026) ───────────────
 *
 * Popup 1 (posição + margem) e popup 2 (fechar). Cartões #111111/#1e1e1e
 * raio 14; rótulos #6a6a6a 10px caixa alta espaçados; valores mono 13px sem
 * quebra. Botões diagonais em PEÇA ÚNICA com clip-path — sobrepor
 * retângulo + cauda deixa emenda visível. */
[dir] .oc-pos-rot {
  color: #6a6a6a;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
}
[dir] .oc-pos-val,
[dir] .oc-pos-linha-val {
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[dir] .oc-pos-laranja {
  color: #f7931a;
}
[dir] .oc-pos-verde {
  color: #22c55e;
}
[dir] .oc-pos-vermelho {
  color: #ef4444;
}
[dir] .oc-pos-cartao {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* PnL em destaque */
[dir] .oc-pos-pnl {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
}
[dir] .oc-pos-pnl-faixas {
  position: absolute;
  top: -20px;
  right: 30px;
  height: 120px;
  width: 40px;
  pointer-events: none;
}
[dir] .oc-pos-pnl-faixas span {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: skewX(-26.6deg);
  background: rgba(34, 197, 94, 0.07);
}
[dir] .oc-pos-pnl-faixas span:nth-child(1) {
  right: 0;
  width: 14px;
}
[dir] .oc-pos-pnl-faixas span:nth-child(2) {
  right: 22px;
  width: 5px;
}
[dir] .oc-pos-neg .oc-pos-pnl-faixas span {
  background: rgba(239, 68, 68, 0.07);
}
[dir] .oc-pos-pnl-esq,
[dir] .oc-pos-pnl-dir {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  min-width: 0;
}
[dir] .oc-pos-pnl-dir {
  align-items: flex-end;
  flex-shrink: 0;
}
[dir] .oc-pos-pnl-num {
  color: #22c55e;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}
[dir] .oc-pos-roe-num {
  color: #22c55e;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
[dir] .oc-pos-neg .oc-pos-pnl-num,
[dir] .oc-pos-neg .oc-pos-roe-num {
  color: #ef4444;
}

/* distância da liquidação */
[dir] .oc-pos-dist {
  display: flex;
  flex-direction: column;
  gap: 7px;
  --dist-cor: #22c55e;
}
[dir] .oc-pos-dist.oc-pos-atencao {
  --dist-cor: #f7931a;
}
[dir] .oc-pos-dist.oc-pos-perigo {
  --dist-cor: #ef4444;
}
[dir] .oc-pos-dist-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
[dir] .oc-pos-dist-val {
  color: var(--dist-cor);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
}
[dir] .oc-pos-dist-trilho {
  height: 5px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
[dir] .oc-pos-dist-barra {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--dist-cor);
  border-radius: 3px;
  /* width anima com layout (thrash); scaleX é só compositor. Nasce a 0 e a
   * barra ENCOLHIDA cresce da esquerda porque a origem da escala é a
   * esquerda — mesmo efeito visual do width, sem o custo de layout. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* grade 2 colunas; última linha sem divisória */
[dir] .oc-pos-grade {
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 14px;
  padding: 6px 16px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
}
[dir] .oc-pos-cel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 8px;
  border-bottom: 1px solid #1c1c1c;
  min-width: 0;
}
[dir] .oc-pos-grade .oc-pos-cel:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* marcador de seção */
[dir] .oc-pos-secao {
  display: flex;
  align-items: center;
  gap: 9px;
}
[dir] .oc-pos-marca {
  width: 4px;
  height: 12px;
  background: #f7931a;
  transform: skewX(-26.6deg);
}
[dir] .oc-pos-marca-vermelha {
  background: #ef4444;
}
[dir] .oc-pos-secao-txt {
  color: #8a8a8a;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* toggle Adicionar | Remover: duas peças coladas, fundos SÓLIDOS */
[dir] .oc-pos-modos {
  display: flex;
  align-items: stretch;
  gap: 3px;
}
[dir] .oc-pos-modo {
  flex: 1;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #161616;
  color: #6a6a6a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
[dir] .oc-pos-modo-mais {
  border-radius: 10px 0 0 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 19px) 100%, 0 100%);
  margin-right: -16px;
  padding-right: 10px;
}
[dir] .oc-pos-modo-menos {
  border-radius: 0 10px 10px 0;
  clip-path: polygon(19px 0, 100% 0, 100% 100%, 0 100%);
  padding-left: 10px;
}
[dir] .oc-pos-modo:hover {
  filter: brightness(1.12);
}
[dir] .oc-pos-modo-mais.oc-on {
  background: #153a24;
  color: #22c55e;
}
[dir] .oc-pos-modo-menos.oc-on {
  background: #3a1818;
  color: #ef4444;
}
[dir] .oc-pos-modo:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

/* campo USDT + MÁX */
[dir] .oc-pos-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 6px 0 14px;
  background: #141414;
  border: 1px solid #232323;
  border-radius: 11px;
  transition: border-color 0.15s ease;
}
[dir] .oc-pos-campo:focus-within {
  border-color: #f7931a;
}
[dir] .oc-pos-campo-in {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 600;
  outline: none;
}
[dir] .oc-pos-campo-in::placeholder {
  color: #3a3a3a;
}
[dir] .oc-pos-campo-moeda {
  color: #565656;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
[dir] .oc-pos-max {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  color: #f7931a;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
[dir] .oc-pos-max:hover {
  border-color: #f7931a;
}

/* linhas rótulo · valor (disponível/removível, nova liquidação, resumo) */
[dir] .oc-pos-linhas {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #1c1c1c;
  padding-bottom: 4px;
}
[dir] .oc-pos-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 9px;
}
[dir] .oc-pos-linhas .oc-pos-linha-val {
  font-size: 12px;
  color: #e8e8e8;
}
[dir] .oc-pos-liq-de {
  color: #5a5a5a;
}
[dir] .oc-pos-liq-seta {
  color: #e8e8e8;
}
[dir] .oc-pos-liq-para {
  color: #f7931a;
}

/* CTA: peça única, canto esquerdo redondo, ponta direita cortada */
[dir] .oc-pos-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 11px 0 0 11px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  background: #1a1a1a;
  color: #4f4f4f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
  transition:
    filter 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
[dir] .oc-pos-cta-seta {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
[dir] .oc-pos-cta.oc-pos-cta-ok {
  background: #f7931a;
  color: #140b02;
  cursor: pointer;
}
[dir] .oc-pos-cta-vermelho.oc-pos-cta-ok {
  background: #ef4444;
  color: #140505;
}
[dir] .oc-pos-cta.oc-pos-cta-ok:hover {
  filter: brightness(1.08);
}
[dir] .oc-pos-cta-espera {
  opacity: 0.6;
  pointer-events: none;
}
[dir] .oc-pos-cta:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

[dir] .oc-pos-msg {
  margin: 0;
  color: #22c55e;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.45;
}
[dir] .oc-pos-msg-ruim {
  color: #ef4444;
}
[dir] .oc-pos-nota {
  margin: 0;
  color: #4a4a4a;
  font-size: 11px;
  line-height: 1.55;
}
[dir] .oc-pos-nota-centro {
  text-align: center;
}

/* popup 2: três pílulas coladas */
[dir] .oc-pos-pilulas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}
[dir] .oc-pos-pilulas .oc-pos-cel {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 11px 14px;
  background: #111;
  border: 1px solid #1e1e1e;
  border-radius: 4px;
}
[dir] .oc-pos-pilulas .oc-pos-cel:first-child {
  border-radius: 12px 4px 4px 12px;
}
[dir] .oc-pos-pilulas .oc-pos-cel:last-child {
  border-radius: 4px 12px 12px 4px;
}

/* chips 25 | 50 | 75 | 100 — quatro peças */
[dir] .oc-pos-chips {
  display: flex;
  align-items: stretch;
}
[dir] .oc-pos-chip {
  flex: 1;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin-right: -14px;
  clip-path: polygon(17px 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
  background: #161616;
  color: #8a8a8a;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    filter 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
[dir] .oc-pos-chip:first-child {
  border-radius: 10px 0 0 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
}
[dir] .oc-pos-chip:last-child {
  margin-right: 0;
  border-radius: 0 10px 10px 0;
  clip-path: polygon(17px 0, 100% 0, 100% 100%, 0 100%);
}
[dir] .oc-pos-chip:hover {
  filter: brightness(1.12);
}
[dir] .oc-pos-chip.oc-on {
  background: #ef4444;
  color: #140505;
}
[dir] .oc-pos-chip:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

/* resumo do fechamento */
[dir] .oc-pos-resumo {
  padding: 4px 16px;
  gap: 0;
}
[dir] .oc-pos-resumo .oc-pos-linha {
  padding: 11px 0;
  border-bottom: 1px solid #1c1c1c;
}
[dir] .oc-pos-resumo .oc-pos-linha:last-child {
  border-bottom: 0;
}
[dir] .oc-pos-resumo .oc-pos-linha-val {
  font-size: 12.5px;
  color: #e8e8e8;
}
[dir] .oc-pos-resumo .oc-pos-resumo-pnl {
  font-size: 14px;
  font-weight: 700;
}

/* tela de sucesso */
[dir] .oc-pos-fim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 0 8px;
  animation: ocPosEntra 0.25s ease;
}
[dir] .oc-pos-fim-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(247, 147, 26, 0.1);
  border: 1px solid rgba(247, 147, 26, 0.4);
  color: #f7931a;
  font-size: 22px;
}
[dir] .oc-pos-fim-titulo {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
[dir] .oc-pos-fim-rot {
  color: #6a6a6a;
  font-size: 12px;
}
[dir] .oc-pos-fim-num {
  margin-top: -8px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  font-weight: 700;
  white-space: nowrap;
}
[dir] .oc-pos-fim-cartao {
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  border-radius: 12px;
}
[dir] .oc-pos-fim-cartao .oc-pos-linha {
  padding: 10px 0;
}
[dir] .oc-pos-fim-cartao .oc-pos-linha-val {
  font-size: 12px;
}
[dir] .oc-pos-fim-btn {
  margin-top: 6px;
  height: 38px;
  padding: 0 22px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid #262626;
  color: #8a8a8a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}
[dir] .oc-pos-fim-btn:hover {
  border-color: #f7931a;
  color: #f7931a;
}
[dir] .oc-pos-fim-btn:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

@media (max-width: 440px) {
  [dir] .oc-pos-grade {
    grid-template-columns: 1fr;
  }
  [dir] .oc-pos-grade .oc-pos-cel:nth-last-child(-n + 2) {
    border-bottom: 1px solid #1c1c1c;
  }
  [dir] .oc-pos-grade .oc-pos-cel:last-child {
    border-bottom: 0;
  }
  [dir] .oc-pos-pnl-num {
    font-size: 22px;
  }
  [dir] .oc-pos-roe-num {
    font-size: 16px;
  }
}

/* O convite "Entrar ou Criar conta agora" do painel de ordens virou link de
 * verdade (OC-10 da auditoria de 04/09/2026). A aparência é a da captura; o
 * que muda é ele responder ao clique e ao teclado. */
[dir] .oc-fut-convite {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
[dir] .oc-fut-convite:hover { color: var(--offcode-brand, #f7931a); }

/* O `Entrar para operar` do painel de ordem, no botão do modelo 2
 * (`botao.css`, seção `.ocb`) — dono, 10/09/2026.
 *
 * 🔑 `.un-login-wrap` tem `padding-top: 48px` na folha da origem: era o
 * respiro que empurrava a pílula para o meio do painel VAZIO. Com o bloco
 * CONTA fora da tela (`escondeConta`), esses 48px viram um buraco entre o
 * slider e o botão — o convite fica boiando longe do que ele conclui. */
[dir] .un-login-wrap { padding-top: 20px; }

/* Largura do painel: é o único controle do painel para quem não entrou, e o
 * `.ocb` nasce `inline-flex`, na medida do rótulo. */
[dir] .oc-fut-entrar { width: 100%; }

/* 🔴 "Conectar carteira para operar" pedia 262px numa caixa de 265 com 105px
 * de recuo e a célula da seta por cima: o rótulo saía cortado dos dois lados
 * ("nectar carteira para o"), medido em 1440px em 16/09/2026. O rótulo quebra
 * em duas linhas dentro do paralelogramo — em qualquer idioma, sem medir um
 * por um. */
[dir] .oc-fut-entrar {
  /* 15,1px: duas linhas de rótulo cabem nos 56px do botão */
  --ocb-label-ratio: .27;
}
[dir] .oc-fut-entrar .ocb__label {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  min-width: 0;
  /* a célula da seta invade 8px do recuo direito na diagonal */
  margin-right: 10px;
}

/* 🔑 A cor SAIU daqui em 10/09/2026 e mora no token (`botao.css`,
 * `--ocb-fill-primary`). Ela era repetida aqui e no mercados.css, e o token
 * seguia em degradê: a mesma ação com duas aparências, dependendo da
 * tela. */


/* ── desktop: o painel de ordem mais junto na vertical (dono, 06/09/2026) ──
 *
 * "Diminuir um pouco o espaçamento das coisas no desktop, na vertical".
 * Medido no ar antes: cabeçalho `Trade | Bots` com 16px em cima, chips de
 * margem a 10px dele, Limite | Mercado a 16px dos chips, o bloco do custo a
 * 12px das abas, slider com 16px em cima e embaixo, Máx. a 8px, e a entrada
 * (TP/SL, botões) com 10/14 de padding e 8 de vão. Cada um cede um pouco;
 * juntos são ~45px. Só na janela larga: o celular tem a sua vista de ordem
 * (`terminal-movel.css`), com espaços próprios. */
@media (min-width: 1025px) {
  [dir] .order-panel-wrapper .order-panel-tabs { padding-top: 10px; }
  [dir] .order-panel-wrapper .account-header { margin-top: 6px; }
  [dir] .order-panel-wrapper .order-panel-trade-type { margin-top: 10px; }
  [dir] .order-panel-wrapper .number.amount-input-wrap { margin-top: 4px; }
  /* "Avail." maior, branco e um pouco mais para cima (dono, 06/09/2026, 22:49):
   * 12px cinza → 14px branco, rótulo, valor e o ⇌; o vão acima cai de 8 para
   * 4 nos dois modos (o da caixa de preço, no limite; o do bloco, no mercado). */
  [dir] .order-panel-wrapper .oc-fut-disp { margin-bottom: 6px; font-size: 14px; color: #ffffff; }
  [dir] .order-panel-wrapper .oc-fut-disp .oc-fut-disp-tr { color: #ffffff; }
  [dir] .order-panel-wrapper .oc-fut-preco-caixa { margin-bottom: 4px; }
  [dir] .order-panel-wrapper .slider-wrap { margin: 10px 0; }
  [dir] .order-panel-wrapper .info-line { margin-top: 4px; }
  [dir] .order-panel-wrapper .oc-fut-entrada { gap: 6px; padding: 6px 12px 12px; }
}