/* ── futuros.css ── */
/* 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;
}

/* ── 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%; }

/* 🔑 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; }
}

/* ── transferir.css ── */
/* transferir.css — o diálogo de transferência entre Spot e Futuros.
 *
 * Saiu do `futuros.css` em 24/08/2026, junto com o `transferir.js`: a tela de
 * SPOT passou a ter o mesmo diálogo e precisa das mesmas regras.
 *
 * 30/08/2026 — desenho novo (handoff `Popup Transferir OFFCODE.dc.html`). O
 * diálogo antigo era uma caixa com dois botões de direção e um campo; o novo
 * mostra os DOIS lados com saldo, o que sobra depois, e a taxa antes do
 * confirmar. As classes viraram `oc-tr-*`. Os botões de corte diagonal
 * (CTA, MÁX, atalhos) são o `botao.css` — o padrão do site nasceu aqui.
 *
 * 🔑 O prefixo mudou de propósito. `oc-fut-*` é compartilhado com o
 * `futuros.css` (60+ classes da tela de perpétuo): reusar aquele espaço de
 * nomes num diálogo que vive em 116 páginas é convidar a mordida dos dois
 * lados — apagar aqui mata vizinho, reusar lá sequestra o dono. Só os ganchos
 * dos ALVOS continuam `oc-fut-*`, porque o `futuros.js` os aplica.
 *
 * ⚠️ Nada de `rem`: a raiz do espelho é 13.33vw e 1rem vale ~240px.
 * ⚠️ O reset da captura é `[dir] *` (0,1,0) e zera margin/padding de classe
 *    única. Toda regra daqui nasce com `[dir]` para ficar em (0,2,0).
 */

/* ── ganchos dos botões que abrem (aplicados pelo JS) ─────────────────── */

[dir] .oc-fut-transferir-alvo { cursor: pointer; }
[dir] .oc-fut-seletor-alvo:hover,
[dir] .oc-fut-transferir-alvo:hover { opacity: .85; }
[dir] .oc-fut-seletor-alvo:focus-visible,
[dir] .oc-fut-transferir-alvo:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

/* ── o pano ───────────────────────────────────────────────────────────── */

[dir] .oc-tr-pano {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 4100;
  padding: 24px 12px;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
[dir] .oc-tr-pano.oc-aberto {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── o painel ─────────────────────────────────────────────────────────── */

[dir] .oc-tr-painel {
  width: min(430px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #232323;
  border-radius: 18px;
  background: #0f0f0f;
  color: #ffffff;
  font-family: 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
/* O fio laranja do topo do desenho. */
[dir] .oc-tr-fio {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #f7931a 50%, transparent 100%);
}

/* ── cabeçalho ────────────────────────────────────────────────────────── */

[dir] .oc-tr-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #1c1c1c;
}
[dir] .oc-tr-marca-caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* O símbolo `</>` é DESENHADO, não é arquivo: o `apple-touch-icon.png` do
 * espelho ainda é o X azul da origem, e marca de terceiro dentro de um
 * diálogo de dinheiro é pior que nenhuma. */
[dir] .oc-tr-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid #2a2a2a;
  border-radius: 9px;
  background: #131313;
  color: #ffffff;
}
[dir] .oc-tr-marca svg { display: block; width: 20px; height: 20px; }
[dir] .oc-tr-titulos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[dir] .oc-tr-titulo {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}
[dir] .oc-tr-subtitulo {
  color: #616161;
  font-size: 9.5px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
[dir] .oc-tr-x {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #262626;
  border-radius: 8px;
  background: transparent;
  color: #7a7a7a;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
[dir] .oc-tr-x:hover { border-color: #f7931a; color: #f7931a; }

/* ── os dois lados ────────────────────────────────────────────────────── */

[dir] .oc-tr-lados {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 20px 24px 0;
}
[dir] .oc-tr-lado {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #202020;
  border-radius: 12px;
  background: #141414;
}
[dir] .oc-tr-lado-rot {
  color: #5f5f5f;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
[dir] .oc-tr-lado-nome {
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[dir] .oc-tr-lado-saldo {
  overflow: hidden;
  color: #7a7a7a;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[dir] .oc-tr-inverter {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #2a2a2a;
  border-radius: 11px;
  background: #141414;
  color: #f7931a;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
[dir] .oc-tr-inverter:hover {
  border-color: #f7931a;
  background: rgba(247, 147, 26, .1);
  transform: rotate(180deg);
}
[dir] .oc-tr-inverter:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }

/* ── valor ────────────────────────────────────────────────────────────── */

[dir] .oc-tr-valor { padding: 20px 24px 0; }
[dir] .oc-tr-valor-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
[dir] .oc-tr-valor-rot { color: #ffffff; font-size: 13px; font-weight: 600; }
[dir] .oc-tr-disp {
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: #7a7a7a;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[dir] .oc-tr-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 16px;
  border: 1px solid #232323;
  border-radius: 12px;
  background: #141414;
  transition: border-color .15s ease;
}
[dir] .oc-tr-disp:hover:not(:disabled) { color: #e6e6e6; text-decoration: underline; }
[dir] .oc-tr-disp:disabled { cursor: default; }
[dir] .oc-tr-disp:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
[dir] .oc-tr-campo:focus-within { border-color: #f7931a; }
[dir] .oc-tr-campo.oc-ruim,
[dir] .oc-tr-campo.oc-ruim:focus-within { border-color: rgba(239, 68, 68, .5); }
[dir] .oc-tr-campo input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.5px;
}
[dir] .oc-tr-campo input:focus { outline: none; }
[dir] .oc-tr-campo input::placeholder { color: #4a4a4a; }
[dir] .oc-tr-ticker {
  flex-shrink: 0;
  color: #f7931a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ── MÁX e atalhos ────────────────────────────────────────────────────
 *
 * 30/08/2026: o corte diagonal virou o botão padrão do site (`botao.css`).
 * Este diálogo foi onde ele nasceu; a implementação própria que vivia aqui
 * saiu, e o que fica é só o que é DESTE lugar: espaçamento e tamanho. Duas
 * cópias do mesmo corte envelheceriam em ritmos diferentes. */
[dir] .oc-tr-max { flex-shrink: 0; }
[dir] .oc-tr-atalhos { margin-top: 10px; }
[dir] .oc-tr-atalho .oc-bt-rot {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

/* ── resumo (mínimo, taxa, saldo depois) ──────────────────────────────── */

[dir] .oc-tr-resumo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 24px 0;
  padding: 13px 15px;
  border: 1px solid #202020;
  border-radius: 12px;
  background: #141414;
}
[dir] .oc-tr-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
[dir] .oc-tr-linha.oc-oculta { display: none; }
[dir] .oc-tr-linha-rot { color: #7a7a7a; font-size: 12px; }
[dir] .oc-tr-linha-val {
  color: #cfcfcf;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-align: right;
}
[dir] .oc-tr-risco { height: 1px; background: #202020; }
[dir] .oc-tr-linha-forte .oc-tr-linha-rot {
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
}
[dir] .oc-tr-linha-forte .oc-tr-linha-val {
  color: #f7931a;
  font-size: 13px;
  font-weight: 600;
}

/* ── recado ───────────────────────────────────────────────────────────── */

[dir] .oc-tr-msg {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 14px 24px 0;
  padding: 11px 14px;
  border: 1px solid rgba(247, 147, 26, .28);
  border-radius: 11px;
  background: rgba(247, 147, 26, .06);
  animation: ocTrSobe .22s ease;
}
[dir] .oc-tr-msg.oc-on { display: flex; }
[dir] .oc-tr-msg-ponto {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f7931a;
}
[dir] .oc-tr-msg-txt { color: #f7931a; font-size: 12px; font-weight: 600; line-height: 1.45; }
[dir] .oc-tr-msg.oc-ruim { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .06); }
[dir] .oc-tr-msg.oc-ruim .oc-tr-msg-ponto { background: #ef4444; }
[dir] .oc-tr-msg.oc-ruim .oc-tr-msg-txt { color: #ef4444; }
[dir] .oc-tr-msg.oc-bom { border-color: rgba(76, 179, 123, .3); background: rgba(76, 179, 123, .07); }
[dir] .oc-tr-msg.oc-bom .oc-tr-msg-ponto { background: #4cb37b; }
[dir] .oc-tr-msg.oc-bom .oc-tr-msg-txt { color: #4cb37b; }
[dir] .oc-tr-msg.oc-andando .oc-tr-msg-ponto { animation: ocTrPulso 1.4s ease infinite; }

/* ── processando ──────────────────────────────────────────────────────── */

[dir] .oc-tr-proc {
  display: none;
  align-items: flex-start;
  gap: 13px;
  margin: 14px 24px 0;
  padding: 16px 16px 14px;
  border: 1px solid #232323;
  border-radius: 12px;
  background: #131313;
  animation: ocTrSobe .24s ease;
}
[dir] .oc-tr-proc.oc-on { display: flex; }
[dir] .oc-tr-roda {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid rgba(247, 147, 26, .18);
  border-top-color: #f7931a;
  border-radius: 50%;
  animation: ocTrGira .75s linear infinite;
}
[dir] .oc-tr-proc-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
[dir] .oc-tr-proc-tit { color: #ffffff; font-size: 13px; font-weight: 600; }
/* Barra INDETERMINADA de propósito: quem sabe a hora do crédito é a chain, e
 * uma porcentagem cronometrada aqui seria número inventado sobre dinheiro. */
[dir] .oc-tr-barra {
  position: relative;
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: #1b1b1b;
}
[dir] .oc-tr-barra::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9d5600, #f7931a 60%, #ffbe5c);
  animation: ocTrCorre 1.5s ease-in-out infinite;
}
[dir] .oc-tr-proc-txt { color: #8a8a8a; font-size: 11.5px; line-height: 1.55; }
[dir] .oc-tr-proc-txt strong { color: #f7931a; font-weight: 600; }

/* ── rodapé / confirmar ───────────────────────────────────────────────── */

[dir] .oc-tr-rodape { padding: 18px 24px 22px; }

/* ── tela estreita ────────────────────────────────────────────────────── */

@media (max-width: 400px) {
  [dir] .oc-tr-cab { padding: 15px 16px; }
  [dir] .oc-tr-lados { gap: 8px; padding: 16px 16px 0; }
  [dir] .oc-tr-lado { padding: 11px 12px; }
  [dir] .oc-tr-valor { padding: 16px 16px 0; }
  [dir] .oc-tr-resumo { margin: 14px 16px 0; }
  [dir] .oc-tr-msg,
  [dir] .oc-tr-proc { margin: 12px 16px 0; }
  [dir] .oc-tr-rodape { padding: 16px 16px 18px; }
  [dir] .oc-tr-titulo { letter-spacing: 2px; }
  [dir] .oc-tr-subtitulo { letter-spacing: 2px; }
  [dir] .oc-tr-campo input { font-size: 21px; }
}

/* ── animações ────────────────────────────────────────────────────────── */

@keyframes ocTrGira { to { transform: rotate(360deg); } }
@keyframes ocTrPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 147, 26, .45); }
  50% { box-shadow: 0 0 0 6px rgba(247, 147, 26, 0); }
}
@keyframes ocTrSobe {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes ocTrCorre {
  0% { left: -45%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  [dir] .oc-tr-msg,
  [dir] .oc-tr-proc { animation: none; }
  [dir] .oc-tr-inverter:hover { transform: none; }
  [dir] .oc-tr-barra::after { animation: none; left: 0; width: 100%; opacity: .55; }
}

/* ── grid-nativo.css ── */
/* grid-nativo.css — painel do grid NATIVO da Aster (dono, 27/08/2026).
 * Mesma linguagem visual do terminal: fundo do site, cartão escuro, verde/vermelho
 * só como sinal. Sem gradiente, sem cor de marca inventada. */
/* ⚠️ ESPECIFICIDADE — leia antes de acrescentar regra de espaçamento aqui.
 *
 * A captura traz um reset da origem no formato `[dir] abbr, [dir] address,
 * [dir] article, … { border: 0; margin: 0; padding: 0 }`. Ele tem
 * especificidade (0,1,1) — um atributo mais um tipo — e ganha de qualquer
 * classe sozinha, que é (0,1,0). Medido nesta tela: `.oc-gn-term` pedia
 * `padding: 12px` e o computado era `0px`; o painel encostava nas duas bordas
 * da coluna e os campos pareciam vazar.
 *
 * 🔑 Toda regra desta folha que define `padding` ou `margin` vai prefixada com
 * `:root `, que leva a especificidade a (0,2,0) e passa na frente do reset. Cor,
 * fonte, `display` e `gap` não precisam: o reset não fala deles.
 *
 * É a quarta vez que este reset morde o projeto (a barra de navegação, os
 * cartões de bots, o selo `Soon` e agora esta folha). O prefixo é o conserto;
 * lembrar dele é a parte difícil.
 */

.oc-gn { display: flex; flex-direction: column; gap: 14px; }
.oc-gn-campo { display: flex; flex-direction: column; gap: 6px; }
.oc-gn-rot { font-size: 12px; color: #8b93a7; }
:root .oc-gn-input {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px;
  background: #101216; border: 1px solid #23262f; border-radius: 8px;
  color: #e8eaf0; font-size: 14px; font-variant-numeric: tabular-nums;
}
.oc-gn-input:focus-visible, .oc-gn-sel:focus-visible { outline: 2px solid #f7931a; outline-offset: 1px; }
/* O seletor de par usa a MESMA caixa dos campos: um controle com outra
 * moldura na mesma coluna lê como se fosse de outro formulário. A seta é
 * desenhada aqui porque `appearance:none` tira a do sistema. */
:root .oc-gn-sel {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 30px 0 10px;
  background: #101216 no-repeat right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b93a7' stroke-width='1.6'/%3E%3C/svg%3E");
  border: 1px solid #23262f; border-radius: 8px;
  color: #e8eaf0; font-size: 14px; font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.oc-gn-sel option { background: #101216; color: #e8eaf0; }
/* "Máx." vive na mesma linha do disponível: é o teto DAQUELE saldo, e numa
 * linha própria pareceria outro número. */
/* 30/08/2026: Máx., segmentos, Criar e os secundários são o botão padrão do
 * site (`botao.css`, corte diagonal). Fundo, borda e raio vêm de lá; aqui só
 * o que é deste painel. Um `background` aqui pintaria um retângulo ATRÁS do
 * corte. */
:root .oc-gn-max { margin-left: 6px; font-variant-numeric: tabular-nums; }
.oc-gn-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root .oc-gn-segs { display: flex; gap: 8px; }
:root .oc-gn-seg { flex: 1; min-width: 0; font-size: 13px; }
:root .oc-gn-nota { margin: 0; font-size: 12px; line-height: 1.45; color: #8b93a7; }
:root .oc-gn-auto { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #101216; border-radius: 8px; }
.oc-gn-linha { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; }
.oc-gn-linha strong { color: #e8eaf0; font-variant-numeric: tabular-nums; }
:root .oc-gn-link { background: none; border: 0; color: #f7931a; font-size: 13px; cursor: pointer; padding: 0; text-align: left; }
.oc-gn-disp { font-size: 12px; color: #8b93a7; font-variant-numeric: tabular-nums; }
.oc-gn-disp-rot { margin-right: 4px; }
:root .oc-gn-nums { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #101216; border-radius: 8px; }
/* O painel de grades é um cartão como os outros — sem a moldura ele lia como
 * texto solto no fim da página. */
:root .oc-gn-painel-caixa {
  background: #16181d; border: 1px solid #23262f; border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
:root .oc-gn-avancado { border-top: 1px solid #23262f; padding-top: 10px; }
.oc-gn-avancado summary { cursor: pointer; font-size: 13px; color: #8b93a7; }
:root .oc-gn-avancado-corpo { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.oc-gn-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #c7cbd6; }
.oc-gn-criar { font-size: 14px; }
:root .oc-gn-botao-sec { --h: 30px; --r: 9px; --raio: 8px; font-size: 12px; }
:root .oc-gn-aviso { margin: 0; font-size: 13px; color: #8b93a7; min-height: 18px; }
.oc-gn-aviso.oc-ruim { color: #ff6b6e; }
.oc-gn-painel { display: flex; flex-direction: column; gap: 10px; }
.oc-gn-abas { display: flex; }
:root .oc-gn-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #1c1f27; border-radius: 8px; font-size: 13px;
}
.oc-gn-item-par { color: #e8eaf0; }
.oc-gn-item-dir, .oc-gn-item-faixa, .oc-gn-item-grades, .oc-gn-item-status { color: #8b93a7; font-variant-numeric: tabular-nums; }
:root .oc-gn-item-lucro { margin-left: auto; font-variant-numeric: tabular-nums; }
.oc-gn-item-lucro.oc-compra { color: #00e08f; }
.oc-gn-item-lucro.oc-venda { color: #ff6b6e; }
:root .oc-gn-vazio { margin: 0; padding: 14px; font-size: 13px; color: #8b93a7; }
.oc-gn-modal {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; background: rgba(4,4,6,.72);
}
.oc-gn-modal.oc-aberto { display: flex; }
:root .oc-gn-modal-painel {
  width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px;
  padding: 18px; background: #14161a; border: 1px solid #23262f; border-radius: 12px;
}
:root .oc-gn-modal-painel h3 { margin: 0 0 4px; font-size: 15px; color: #e8eaf0; }
:root .oc-gn-modal-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
@media (max-width: 720px) {
  .oc-gn-dupla { grid-template-columns: 1fr; }
  .oc-gn-item { gap: 8px; }
  :root .oc-gn-item-lucro { margin-left: 0; }
}

/* ── modo GRADE: o painel dentro do terminal ──────────────────────────────
 *
 * Desde 28/08/2026 `/futures-grid/<PAR>` é a tela de perpétuo, servida pelo
 * mesmo arquivo (reescrita do Caddy). O `futuros.js` marca `data-oc-modo` no
 * `<html>` assim que executa, e é essa marca que troca a tela.
 *
 * 🔑 A marca vai no `<html>` e não numa classe do `<body>`: a folha precisa
 * valer para os dois nós de coluna, e o `body` da captura é reescrito por
 * passes que não conhecem esta folha.
 */

/* As duas colunas que saem. O livro some porque a tela de grade da Aster não
 * tem livro (decisão do dono) — e o que ele ocupava vira largura de gráfico.
 *
 * 🔑 A troca é feita no `.vgl-item`, o bloco do vue-grid-layout, e NÃO no
 * conteúdo dele: cada item é uma caixa absoluta em pixel, e esconder o miolo
 * deixa a caixa de pé ocupando a coordenada.
 *
 * 🔑 E é feita com `!important`, porque o vgl está VIVO e reescreve o `style`
 * inline dos itens a partir do modelo dele. Medido: escrever `style.width`
 * pelo JS durava menos de 2,5s antes de ele restaurar 998px sozinho. Folha com
 * `!important` vence style inline sem `!important` — este é o único ponto do
 * arquivo em que ele se justifica.
 *
 * `:has()` em vez de um carimbo do passe Python: o que identifica o item é
 * justamente CONTER o livro ou o gráfico, e isso segue verdade em qualquer
 * recapture. */
:root[data-oc-modo="grade"] .vgl-item:has([data-oc-fut-coluna-livro]) {
  display: none !important;
}

/* O gráfico herda o espaço do livro. Para que lado ele cresce depende de onde
 * o livro estava, e quem descobre isso é o `futuros.js` medindo o modelo do
 * vgl: à direita em tela larga, embaixo quando o vgl empilha.
 *
 * `width: auto` mais `right`, e não uma `width` calculada: `right` é
 * propriedade que o vgl não escreve, então não há disputa — ele segue mandando
 * em `left` e `top`, que estão certos.
 *
 * 🔑 Sem valor de reserva. Se a medição não acontecer, o atributo do eixo não
 * é escrito, nenhuma destas regras casa e a tela fica como a captura. Uma
 * reserva aqui já mascarou uma medição morta uma vez: a tela ficava certa pelo
 * número cravado, e nada denunciava que o código de medir estava parado. */
:root[data-oc-modo="grade"][data-oc-grade-eixo="x"] .vgl-item:has([data-oc-grafico]) {
  width: auto !important;
  right: var(--oc-grade-direita) !important;
}
:root[data-oc-modo="grade"][data-oc-grade-eixo="y"] .vgl-item:has([data-oc-grafico]) {
  height: var(--oc-grade-altura) !important;
}

/* Na coluna do painel de ordem fica SÓ o painel da grade. Escondo os irmãos,
 * não o pai: esconder a coluna inteira levaria o meu nó junto.
 *
 * 🔴 `> :not([data-oc-gridn])` e não `> *`: o segundo mataria também o que eu
 * mesmo insiro, e a coluna ficaria vazia — o mesmo formato de defeito do
 * `go-login-wrapper`, em que esconder o filho errado deixa a tela oca. */
:root[data-oc-modo="grade"] [data-oc-fut-coluna-ordem] > :not([data-oc-gridn]) {
  display: none !important;
}
:root[data-oc-modo="grade"] [data-oc-fut-coluna-ordem] {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mesma troca na área de baixo: ali ficam as GRADES, não as posições e ordens
 * da conta. O painel entra no fim do bloco, então o que sai é tudo o que veio
 * antes dele — inclusive a fita de abas da origem, que oferece "Posições" e
 * "Ordens" que esta tela não preenche. */
:root[data-oc-modo="grade"] [data-oc-fut-abertas] > :not(.oc-gn-painel-term) {
  display: none !important;
}
:root[data-oc-modo="grade"] [data-oc-fut-abertas] { overflow: auto; }

/* O painel: a densidade é a da tela de negociação, não a do cartão largo da
 * página antiga — a coluna tem ~320px, e 14px de intervalo entre campos
 * empurrava o botão Criar para fora da dobra. */
:root .oc-gn-term {
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
}
.oc-gn-term .oc-gn-input, .oc-gn-term .oc-gn-sel { height: 34px; font-size: 13px; }
.oc-gn-term .oc-gn-criar { --h: 38px; --r: 11px; }
:root .oc-gn-term .oc-gn-auto, :root .oc-gn-term .oc-gn-nums { padding: 8px 10px; }
:root .oc-gn-nota-graf { border-top: 1px solid #1c1f27; padding-top: 10px; }

/* A barra da margem, com as cinco marcas da tela deles. */
.oc-gn-barra-margem { display: flex; flex-direction: column; gap: 4px; }
:root .oc-gn-faixa-margem {
  width: 100%; margin: 0; height: 18px;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.oc-gn-faixa-margem::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: #363b47;
}
.oc-gn-faixa-margem::-moz-range-track { height: 3px; border-radius: 2px; background: #363b47; }
:root .oc-gn-faixa-margem::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -5px;
  width: 13px; height: 13px; border-radius: 50%; background: #f7931a; border: 0;
}
.oc-gn-faixa-margem::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: #f7931a; border: 0;
}
.oc-gn-faixa-margem:disabled { opacity: .45; cursor: default; }
.oc-gn-faixa-margem:focus-visible { outline: 2px solid #f7931a; outline-offset: 3px; }
/* As marcas são botões de verdade: 0/25/50/75/100% do que cabe. Losango de
 * 7px, como na tela deles — e com área de clique de 22px em volta, porque
 * alvo de 7px num controle de dinheiro erra mais do que acerta. */
:root .oc-gn-marcas { display: flex; justify-content: space-between; padding: 0 5px; }
:root .oc-gn-marca {
  width: 22px; height: 14px; padding: 0; border: 0; background: transparent;
  cursor: pointer; position: relative;
}
:root .oc-gn-marca::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: #2b2f3a; transform: rotate(45deg); border-radius: 1px;
}
.oc-gn-marca:hover::before { background: #f7931a; }

/* O aviso de risco dentro do diálogo de confirmação. Amarelo de aviso, não
 * vermelho de erro: nada deu errado — é o custo do que se está aceitando. */
:root .oc-gn-risco {
  margin: 6px 0 0; padding: 10px 12px; font-size: 12px; line-height: 1.5;
  color: #e2c15f; background: rgba(240,185,11,.07);
  border: 1px solid rgba(240,185,11,.28); border-radius: 8px;
}

/* ── a tabela de grades, embaixo ──────────────────────────────────────── */
:root .oc-gn-painel-term { padding: 10px 12px 14px; gap: 8px; }
.oc-gn-painel-term .oc-gn-abas { align-items: center; gap: 8px; }
/* O filtro fica no canto oposto às abas: é leitura, não navegação. */
:root .oc-gn-filtro {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #8b93a7; cursor: pointer; white-space: nowrap;
}
.oc-gn-filtro input { accent-color: #f7931a; width: 13px; height: 13px; }
/* 🔑 A rolagem horizontal fica NESTA caixa, nunca na página: são dez colunas,
 * e uma tabela larga que empurra o `<body>` faz a barra de navegação e o
 * gráfico deslizarem junto. */
/* Ver `.oc-mk-abas` em `mercados.css`: `overflow-x` sozinho faz do elemento um
   scroller vertical de curso zero, e o dedo que toca aqui deixa de rolar a
   página. */
.oc-gn-lista-term { overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; }
.oc-gn-tab {
  width: 100%; border-collapse: collapse; font-size: 12px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
:root .oc-gn-tab th {
  padding: 6px 10px; text-align: right; font-weight: 400; color: #8b93a7;
  border-bottom: 1px solid #1c1f27;
}
.oc-gn-tab th:first-child, .oc-gn-tab th:nth-child(2) { text-align: left; }
:root .oc-gn-td { padding: 8px 10px; text-align: right; color: #c7cbd6; }
.oc-gn-tab td:first-child { text-align: left; color: #8b93a7; }
.oc-gn-td-par { text-align: left; display: flex; align-items: baseline; gap: 6px; }
.oc-gn-td-par strong { color: #e8eaf0; }
.oc-gn-td-status { color: #8b93a7; }
.oc-gn-td-acao { text-align: right; }
.oc-gn-tab tbody tr:not(:last-child) td { border-bottom: 1px solid #14161a; }
.oc-gn-td.oc-compra { color: #00e08f; }
.oc-gn-td.oc-venda { color: #ff6b6e; }

/* 🔴 O formulário perdeu o espaçamento ao mudar de casa. Na página antiga
 * `[data-gn-form]` era filho direto de `.oc-gn`, e era o `gap` DELE que
 * separava os campos. No terminal o form ganhou um pai novo, então o gap
 * passou a separar o form da nota do rodapé — e os campos, que são irmãos
 * DENTRO do form, ficaram colados: "Direção" encostava na frase de cima.
 *
 * 🔑 Espaçamento por `gap` mora no PAI dos itens. Mudar um nó de lugar leva
 * junto tudo o que dependia de quem era o pai dele. */
:root [data-gn-form] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* O botão ocupa a coluna. `<button>` não estica sozinho num flex column
 * porque o reset da origem lhe dá largura automática — e um botão de 45px
 * chamado "Criar" ao lado de um campo de 292px não parece a ação principal
 * da tela, parece um link que sobrou. */
:root .oc-gn-criar { width: 100%; }

/* ── Transferir, no topo do painel da grade ────────────────────────────
 *
 * 🔴 A grade roda com a margem da conta de FUTUROS da Aster, e o único botão
 * de transferência da tela mora dentro do painel de ordem — que o modo grade
 * esconde inteiro. Quem abrisse a grade com o dinheiro no spot lia
 * `Disp. 0,00 USDT` e não tinha caminho nenhum na tela para enchê-la.
 *
 * 🔑 Quem mostra um saldo tem de mostrar como enchê-lo.
 *
 * O botão é o MESMO do perpétuo (`.oc-fut-transf-topo`, em `futuros.css`,
 * carregado nesta mesma página); aqui só se define ONDE ele fica. À direita,
 * como lá — e `flex` em vez de `text-align`, porque o rótulo muda de largura
 * entre idiomas e o alinhamento não pode depender do texto. */
:root .oc-gn-topo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 2px;
}

/* ── mil.css ── */
/* mil.css — o painel do 1001x (Shield da Aster).
 *
 * Mesma linguagem do painel da grade: fundo do site, cartão escuro, verde e
 * vermelho só como sinal. O que difere é o AVISO — nesta tela ele não é um
 * detalhe no rodapé, é o elemento com mais peso visual depois do preço.
 *
 * ⚠️ ESPECIFICIDADE: a captura traz um reset da origem no formato
 * `[dir] abbr, [dir] address, … { border:0; margin:0; padding:0 }`, com
 * especificidade (0,1,1) — ele ganha de classe sozinha (0,1,0). Toda regra
 * daqui que define `padding` ou `margin` vai prefixada com `:root `, que leva a
 * (0,2,0). É a sexta vez que esse reset morde o projeto.
 */

/* O painel entra na coluna do painel de ordem, que o modo esconde. */
:root[data-oc-modo="mil"] [data-oc-fut-coluna-ordem] > :not([data-oc-mil]) {
  display: none !important;
}
:root[data-oc-modo="mil"] [data-oc-fut-coluna-ordem] {
  padding: 12px;
  overflow: auto;
}

/* O livro não existe no Shield — não há livro de ofertas nesta venue. Esconder
 * é dizer a verdade; deixá-lo ali mostraria a profundidade de OUTRO mercado. */
:root[data-oc-modo="mil"] .vgl-item:has([data-oc-fut-coluna-livro]) {
  display: none !important;
}

/* Ritmo do /futures: blocos separados por 18px, rótulo colado no seu campo.
 *
 * 🔴 O `gap` estava só no `.oc-mil`, e TODO o conteúdo vive dentro de um `div`
 * interno (`[data-mil-form]`) que não era flex: o gap valia para um filho só e
 * o painel saía com tudo colado — o aviso de liquidação encostando no botão de
 * Long. Quem tem os filhos é quem precisa do `gap`. */
.oc-mil {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
:root .oc-mil [data-mil-form] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.oc-mil-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oc-mil-rot {
  font-size: 12px;
  color: #8b93a7;
}
:root .oc-mil-campo {
  gap: 8px;
}

:root .oc-mil-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
}
:root .oc-mil-selo {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(247, 147, 26, 0.12);
  border: 1px solid rgba(247, 147, 26, 0.35);
  color: var(--offcode-brand, #f7931a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.oc-mil-venue {
  font-size: 12px;
  color: #8b93a7;
}

/* Campo PREENCHIDO e sem borda, alto — o mesmo desenho do `Cost` do
 * /futures. A borda que havia aqui fazia o campo parecer um chip a mais no
 * meio de outros chips com borda; no molde do futuros o que se digita é
 * sólido e o que se escolhe é contornado. */
:root .oc-mil-input {
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  background: #1c1d22;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #e8eaf0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.oc-mil-input::placeholder {
  color: #6b7280;
}
.oc-mil-input:hover {
  border-color: #2a2d36;
}
.oc-mil-input:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 1px;
}

/* Escolha = caixa ALTA com borda, lado a lado — o molde do par
 * `Isolated Margin | 20X` do /futures. Sem a caixa cinza em volta: no futuros
 * os chips flutuam sobre o fundo do painel, e o contorno já os separa.
 *
 * 🔴 A alavancagem virou BARRA (dono, 29/08/2026) e eu apaguei este bloco
 * junto — mas o MESMO molde veste o seletor de taxa (`Flat fee | Profit fee`),
 * que ficou preto sobre preto, invisível. Classe compartilhada não morre com
 * o primeiro dono. */
:root .oc-mil-segs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
/* 30/08/2026: segmentos e os dois lados são o botão padrão do site
 * (`botao.css`, corte diagonal). Fundo, borda, raio e o estado escolhido vêm
 * de lá; aqui só o que é deste painel. */
/* 🔴 OC-26 da auditoria de 04/09/2026: "no 1001x desktop o rótulo da taxa
 * sobre lucro aparece cortado". Medido ao vivo numa janela de 1800 px —
 * portanto NÃO é falta de espaço na tela:
 *
 *     "Taxa fixa  0.030%"          precisa de 170 px, cabe em 170
 *     "Taxa sobre o lucro  10%"    precisa de 176 px, cabe em 170  ← cortado
 *
 * `flex: 1 1 0` dava aos dois a MESMA largura, ignorando o texto; `min-width:
 * 0` deixava encolher abaixo do conteúdo; e o rótulo do botão padrão é
 * `white-space: nowrap` com `overflow: hidden`. As três juntas cortam em
 * silêncio — sem reticências, sem rolagem, sem aviso.
 *
 * 🔑 Em inglês ("Profit fee 10%") cabia, e por isso passou. Largura igual para
 * rótulos de tamanhos diferentes é um defeito que só aparece nos idiomas que
 * ninguém abre para conferir — e a tradução mais longa é a regra, não a
 * exceção: PT, ES e RU são todas maiores que o inglês aqui.
 *
 * `flex: 1 1 auto` faz a base ser o CONTEÚDO: cada um recebe o que o texto
 * pede e a sobra é dividida. Sem `min-width: 0`, nenhum encolhe abaixo do
 * próprio texto; se não couberem lado a lado, o `flex-wrap: wrap` do contêiner
 * os empilha — legível em vez de cortado. */
/* 🔴 Segunda mordida: a regra acima era `:root .oc-mil-seg` (0,2,0) e o
 * `botao.css` tem `[dir] .oc-bt-segs > .oc-bt { flex: 1 }` (0,3,0) — que
 * ganha, e `flex: 1` é `flex: 1 1 0%`, a largura igual de novo. Medi depois de
 * subir e o corte continuava lá, com o CSS "corrigido" no arquivo.
 *
 * 🔑 Trocar a declaração sem conferir QUEM vence é escrever no arquivo e não
 * na tela. Aqui a regra do painel precisa passar por cima da do botão padrão:
 * as duas classes do contêiner mais o `[dir]` dão (0,4,0). */
[dir] .oc-bt-segs.oc-mil-segs > .oc-mil-seg {
  flex: 1 1 auto;
  min-width: auto;
}
:root .oc-mil-seg {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── a barra de alavancagem ───────────────────────────────────────────────
 *
 * Molde do slider do 21st (@micka_design, id 10325): trilho em pílula que
 * ENGORDA no toque, polegar branco com sombra, pontos das âncoras e a etiqueta
 * do valor flutuando acima do dedo.
 *
 * 🔑 O controle real é o `input[type=range]` invisível por cima — teclado,
 * leitor de tela e toque vêm de graça e corretos. Tudo abaixo é pintura, e por
 * isso leva `pointer-events: none`: um pixel clicável aqui roubaria o arrasto.
 */
:root .oc-mil-barra {
  position: relative;
  padding: 30px 0 6px;
  touch-action: none;
}
.oc-mil-trilho {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #2a2d36;
  pointer-events: none;
  transition:
    height 0.14s ease,
    margin 0.14s ease;
}
.oc-mil-cheio {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--offcode-brand, #f7931a);
}
/* Os `leverageNodes` da corretora: âncoras VISÍVEIS na faixa contínua. */
/* ⚠️ Centrado por `transform`, NÃO por margem negativa: o reset `[dir] *` da
 * origem tem especificidade 0,1,1 e zera `margin` de classe única — medido
 * aqui, deslocava polegar e pontos em 7px à direita do dedo. `transform` o
 * reset não toca. */
:root .oc-mil-ponto {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #4b5162;
  transition:
    background 0.12s,
    transform 0.12s;
}
.oc-mil-ponto.oc-on {
  background: rgba(0, 0, 0, 0.35);
}
:root .oc-mil-polegar {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transition:
    width 0.14s ease,
    height 0.14s ease;
}
/* A etiqueta acompanha o polegar — o valor tem de estar onde o olho está. */
:root .oc-mil-barra-val {
  position: absolute;
  top: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #1c1d22;
  border: 1px solid #2a2d36;
  color: #e8eaf0;
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

/* O controle de verdade: invisível, mas é ele que recebe o dedo. A faixa alta
 * (28px) existe porque um alvo de 6px não se acerta no toque. */
:root .oc-mil-range {
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 28px;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.oc-mil-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}
.oc-mil-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

/* Engorda no toque — o retorno de que o controle está vivo na mão. */
.oc-mil-barra:hover .oc-mil-trilho,
.oc-mil-barra:focus-within .oc-mil-trilho {
  height: 8px;
  margin: -1px 0;
}
:root .oc-mil-barra:hover .oc-mil-polegar,
:root .oc-mil-barra:focus-within .oc-mil-polegar {
  width: 18px;
  height: 18px;
}
:root .oc-mil-barra:hover .oc-mil-ponto {
  transform: translate(-50%, -50%) scale(1.25);
}
.oc-mil-barra:focus-within .oc-mil-polegar {
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(240, 185, 11, 0.45);
}

/* ⚠️ A caixa vermelha de liquidação SAIU (dono, 29/08/2026) — o número ficou,
 * como linha da lista. Abaixo de 1% ele fica vermelho: é a faixa em que um
 * movimento comum do minuto zera a posição. */
.oc-mil-perto-num {
  color: #ff4d4f;
}

/* Os dois lados em PÍLULA alta — a forma do botão principal do /futures
 * (`Login to trade`). É o elemento que a pessoa vai apertar, e no molde da
 * casa o que se aperta é redondo e alto. */
:root .oc-mil-lados.oc-bt-cadeia {
  --cadeia-h: 50px;
  --cadeia-raio: 10px;
}
:root .oc-mil-botao {
  --h: 50px;
  --r: 13px;
  --raio: 13px;
}
/* No formato de duas linhas o peso mora nas classes .oc-bt-l1/.oc-bt-l2
 * do botao.css — font-size no botão inteiro achatava as duas. */

/* A lista de números perde a caixa: no /futures os dados de apoio vivem
 * SOBRE o fundo do painel, separados por respiro, não por moldura. Uma caixa
 * dentro do painel dentro da coluna são três molduras aninhadas. */
:root .oc-mil-nums {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 0;
  margin: 2px 0 0;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid #1f2229;
}
.oc-mil-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
}
/* Rótulo com sublinhado pontilhado — a marca que o /futures usa em
 * `Max Long (BTC)` para dizer "isto é um dado, não um botão". */
.oc-mil-linha .oc-mil-rot {
  border-bottom: 1px dashed #3a3f4d;
  padding-bottom: 1px;
}
.oc-mil-linha strong {
  color: #e8eaf0;
  font-variant-numeric: tabular-nums;
}
/* ── as notas do custo ─────────────────────────────────────────────────
 *
 * 🔴 Aqui havia um CARTÃO com a tabela de custo (fundo, borda, filete no
 * total). Ele existia para desfazer a surpresa da taxa cobrada por fora do
 * valor digitado; desde que a taxa passou a ser descontada de dentro dele
 * (dono, 10/09/2026) não há surpresa a desfazer, e o dono mandou tirar.
 *
 * 🔑 Sobra um bloco SEM moldura: o que resta são notas, e nota com borda e
 * fundo compete com o botão de Long logo abaixo — que é o elemento que a tela
 * inteira existe para enquadrar.
 *
 * ⚠️ `display: flex` mata o `[hidden]`, que só vale enquanto ninguém declara um
 * `display`. Sem esta regra o bloco vazio ocupa a altura do `gap` do painel
 * enquanto ninguém digitou valor nenhum.
 */
.oc-mil-custo[hidden] {
  display: none !important;
}
:root .oc-mil-custo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

:root .oc-mil-nota {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #8b93a7;
}
.oc-mil-nota.oc-mil-ruim {
  color: #ff4d4f;
}
.oc-mil-semrota {
  color: #c9ced9;
}

/* ── saldo e o caminho para arrumá-lo, na linha do rótulo da margem ──────
 *
 * 🔑 A margem é o único campo que a pessoa digita aqui, e o teto dele é o
 * saldo de futuros. Deixar o "Disp." numa lista seis linhas abaixo do input —
 * e o caminho para depositar em OUTRA tela — é o desenho que faz alguém
 * digitar um número que vai ser recusado.
 */
:root .oc-mil-campo {
  position: relative;
}
:root .oc-mil-meta {
  position: absolute;
  top: -4px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  line-height: 1;
}
.oc-mil-saldo {
  color: #8b93a7;
  font-variant-numeric: tabular-nums;
}
/* 🔴 Sem o :root o reset [dir] (0,1,1) engolia este margin e "Disp." colava
 * no valor — "Disp.2,23" (foto do dono, 30/08). */
:root .oc-mil-saldo-rot {
  margin-right: 5px;
}
:root .oc-mil-transf {
  margin-left: auto;
  align-self: center;
}
.oc-mil-transf:hover {
  border-color: var(--offcode-brand, #f7931a);
  color: #fff;
}
.oc-mil-transf:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 1px;
}

/* ── o gráfico ocupa a linha inteira ─────────────────────────────────────
 *
 * O livro está escondido (o Shield não tem livro), e o layout da captura é
 * `vue-grid-layout` com posição em PIXEL ABSOLUTO: esconder um painel não faz
 * os vizinhos refluírem. Sobravam 339px de preto entre o gráfico e o painel de
 * ordem.
 *
 * 🔴 A biblioteca continua viva e REESCREVE o `style.width` do item — medido,
 * uma largura posta à mão voltava sozinha em menos de um segundo.
 *
 * 🔴 E a tentativa anterior de resolver isso AQUI não funcionava: o
 * `vue-grid-layout` escreve `width: 1426px !important` INLINE, e no cascata
 * uma declaração inline com `!important` ganha de QUALQUER regra de folha,
 * `!important` inclusive. Medido em 10/09/2026 em produção: a variável valia
 * 1803px, esta regra casava, e o computado seguia 1426px — 377px de preto
 * entre o gráfico e o painel de ordem, exatamente o defeito que a regra
 * dizia consertar.
 *
 * 🔑 Quem escreve inline só perde para outro inline. Agora é o `mil.js` que
 * impõe (`style.setProperty(..., 'important')`, com um MutationObserver que
 * repõe quando a biblioteca reescreve). A variável fica como registro da
 * medida — quem quiser ler a largura de linha cheia a encontra aqui.
 */

/* ── posições abertas ──────────────────────────────────────────────────
 *
 * 🔴 A faixa de baixo da tela de perpétuo lista as posições da FAPI. O Shield é
 * outra venue: quem abre aqui não aparece lá. Deixar a faixa do perpétuo nesta
 * tela mostraria "nenhuma posição" para quem acabou de abrir uma a 1001x — e a
 * 1001x essa mentira dura até a liquidação.
 *
 * Mesma decisão que já vale para a coluna do livro, e o mesmo recorte que o
 * modo grade usa (`[data-oc-fut-abertas] > :not(...)`).
 */
:root[data-oc-modo="mil"] [data-oc-fut-abertas] > :not([data-oc-mil-painel]) {
  display: none !important;
}
:root[data-oc-modo="mil"] [data-oc-fut-abertas] {
  overflow: auto;
}

:root .oc-mil-abas {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-bottom: 1px solid #1c1f27;
}
/* Duas abas desde 04/09 (posição aberta · histórico): a segunda só se
 * reconhece como clicável se o cursor disser. */
.oc-mil-aba {
  font-size: 13px;
  color: #8b93a7;
  cursor: pointer;
}
.oc-mil-aba:hover {
  color: #c9cad1;
}
.oc-mil-aba.oc-on {
  color: #eaecef;
}
/* O contador da aba (`Posições (1)`), como no /futures. Fica um tom abaixo do
 * rótulo: ele qualifica a aba, não é um segundo título. */
.oc-mil-aba-n {
  color: #6f7789;
  font-variant-numeric: tabular-nums;
}
.oc-mil-aba.oc-on .oc-mil-aba-n {
  color: #9aa2b4;
}
:root .oc-mil-lista {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── posições no formato do perpétuo (dono, 30/08): as linhas usam as
 * classes do futuros.css, que esta página já carrega. Aqui só o que é
 * exclusivo do 1001x: as marcas de gatilho e o editor de TP/SL. ── */
:root .oc-fut-marca.oc-mil-marca-tp {
  color: #01e785;
  border-color: rgba(1, 231, 133, 0.5);
}
:root .oc-fut-marca.oc-mil-marca-sl {
  color: #ff4d4f;
  border-color: rgba(255, 77, 79, 0.5);
}

:root .oc-mil-ed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin: 2px 0 8px;
  border: 1px solid #1e222c;
  border-radius: 8px;
  background: #0d0f15;
}
.oc-mil-ed-linha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
:root .oc-mil-ed-input {
  width: 100%;
}
.oc-mil-ed-acoes {
  display: flex;
  gap: 8px;
}

:root .oc-mil-fechar .oc-bt-rot {
  font-size: 13px;
}

/* 🔴 `.oc-sobe` / `.oc-desce` NÃO são globais no espelho: cada arquivo que as
 * usa define a sua (`.oc-btc-var.oc-sobe`, `.oc-b .oc-cabeca-var.oc-sobe`,
 * `[data-oc-carteira] .oc-chip24.oc-sobe`). Sem regra própria aqui, o lado da
 * posição e o resultado sairiam na cor do texto — e num painel de 1001x o sinal
 * de ganho e o de perda ficariam idênticos. */
.oc-mil-pos .oc-sobe {
  color: #01e785;
}
.oc-mil-pos .oc-desce {
  color: #ff4d4f;
}

/* A lista do painel do 1001x recebe a MESMA grade do painel de futuros
 * (`futuros.css` já está carregado nesta tela). Só falta poder rolar quando
 * as onze colunas passam da largura da coluna. */
:root[data-oc-modo="mil"] [data-oc-mil-lista][data-oc-fut-grade] {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ── compartilha-posicao.css ── */
/* O popup do cartão de compartilhamento (ver `compartilha-posicao.js`).
 *
 * Folha própria e não dentro de `futuros.css` porque o botão vale nos quatro
 * terminais — Futuros, 1001x, TradFi e IPO — e cada um carrega um conjunto
 * diferente de folhas. */

.oc-cp-fundo {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(3px);
}

.oc-cp-painel {
  width: min(420px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border-radius: 16px;
  background: #0f0f11;
  color: #f5f3ee;
}

[dir] .oc-cp-painel { border: 1px solid #232326; padding: 20px; }

.oc-cp-painel:focus { outline: none; }

.oc-cp-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oc-cp-tit { font-size: 16px; font-weight: 700; }

.oc-cp-x {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #8a8578;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

[dir] .oc-cp-x { border: 0; background: transparent; padding: 0; }
.oc-cp-x:hover { color: #f5f3ee; background: rgba(255, 255, 255, .07); }

.oc-cp-sub { font-size: 12.5px; color: #8a8578; line-height: 1.5; }
[dir] .oc-cp-sub { margin: 6px 0 16px; }

.oc-cp-palco { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* O canvas é 1080x1350; aqui ele cabe na largura do painel. `height: auto`
 * mantém a proporção — sem isso o navegador usa o atributo `height` do
 * elemento e a arte sai achatada. */
.oc-cp-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

[dir] .oc-cp-img { border: 1px solid #232326; }

.oc-cp-espera,
.oc-cp-nota { font-size: 12.5px; color: #8a8578; text-align: center; }
[dir] .oc-cp-espera { margin: 28px 0; }
[dir] .oc-cp-nota { margin: 2px 0 0; }

.oc-cp-acoes { display: flex; gap: 8px; }
[dir] .oc-cp-acoes { margin-top: 16px; }

.oc-cp-bt {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  background: #1c1c1f;
  color: #f5f3ee;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

[dir] .oc-cp-bt { border: 0; padding: 0 16px; }
.oc-cp-bt:hover { filter: brightness(1.14); }
.oc-cp-bt--p { background: var(--offcode-brand, #f7931a); color: #0a0a0a; }

.oc-cp-bt:focus-visible {
  outline: 2px solid var(--offcode-brand, #f7931a);
  outline-offset: 2px;
}

/* O botão na linha da posição. Herda o desenho dos outros botões da linha e
 * só troca o conteúdo por um ícone. */
.oc-pos-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #8a8578;
  cursor: pointer;
  vertical-align: middle;
}

[dir] .oc-pos-share { border: 0; background: transparent; padding: 0; }
.oc-pos-share svg { width: 15px; height: 15px; display: block; }
.oc-pos-share:hover { color: var(--offcode-brand, #f7931a); background: rgba(247, 147, 26, .12); }

.oc-pos-share:focus-visible {
  outline: 2px solid var(--offcode-brand, #f7931a);
  outline-offset: 2px;
}