/* ── deposito.css ── */
/* Os diálogos de dinheiro no desenho novo (handoff do dono, 01/09/2026):
 * depósito e saque compartilham este molde — véu, cartão de 470px, header
 * com ‹ título ✕, stepper de três peças diagonais, lista com busca, chips
 * "trocar", notas e erros. O `poe_barra.py` injeta esta folha em TODA página,
 * então tudo o que os dois fluxos têm em comum mora aqui; o `saque.css` só
 * acrescenta o que é do saque.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A folha da ORIGEM reseta as direcionais num bloco à parte:
 *
 *     [dir] div, [dir] p, [dir] button … { border: 0; margin: 0; padding: 0 }
 *
 * Isso é (0,1,1) e vence classe sozinha (0,1,0) — a regra chega ao navegador
 * com METADE das declarações aplicadas. `[dir] .oc-dp-item` é (0,2,0) e ganha.
 * Toda `margin`, `padding`, `border` e `background` daqui vive em `[dir]`.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum. Tudo aqui é px (`_tools/checa_css.py`).
 *
 * ## Fontes
 *
 * Space Grotesk na UI, JetBrains Mono em número, endereço, ticker e contador.
 * Os dois arquivos em `_local/fonts/` são VARIÁVEIS (tabela `fvar`): o "400"
 * do nome é só o nome. A CSP do espelho é `font-src 'self'` — Google Fonts
 * não carrega, e é por isso que as fontes moram aqui.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/_local/fonts/space-grotesk-400.cbee7234.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/_local/fonts/JetBrainsMono.340e696a.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

/* ── o véu ──────────────────────────────────────────────────────────────
 *
 * `overflow-y: auto` no VÉU, nunca no cartão: num laptop de 768px o cartão
 * do endereço passa da altura da janela, e `align-items: center` com
 * `overflow: hidden` cortaria cabeçalho e rodapé sem barra de rolagem —
 * lição do `saque-status.css`. */
.oc-dep-veu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
}
[dir] .oc-dep-veu { padding: 40px 16px; }

/* ── o cartão ─────────────────────────────────────────────────────────── */
.oc-dep-painel {
  position: relative;
  width: 100%;
  max-width: 470px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .02);
  box-sizing: border-box;
  color: #fff;
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
[dir] .oc-dep-painel { margin: auto; border: 1px solid #232323; background: #0f0f0f; }
.oc-dep-painel:focus { outline: none; }

/* Dentro da carteira (`monta`) o MESMO cartão, sem véu, na largura do painel. */
.oc-dp-inline {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
[dir] .oc-dp-inline { border: 1px solid #232323; background: #0f0f0f; }

/* Fio-gradiente no topo e as três listras diagonais do canto. */
.oc-dp-fio { height: 2px; background: linear-gradient(90deg, transparent 0%, #f7931a 50%, transparent 100%); }
.oc-dp-listras { position: absolute; top: -30px; right: 40px; height: 130px; width: 60px; pointer-events: none; }
.oc-dp-listras span { position: absolute; top: 0; bottom: 0; transform: skewX(-26.6deg); }
.oc-dp-listras span:nth-child(1) { right: 0; width: 20px; background: rgba(247, 147, 26, .05); }
.oc-dp-listras span:nth-child(2) { right: 32px; width: 9px; background: rgba(247, 147, 26, .035); }
.oc-dp-listras span:nth-child(3) { right: 52px; width: 4px; background: rgba(247, 147, 26, .025); }

/* ── header: ‹ título ✕ ───────────────────────────────────────────────── */
.oc-dp-topo { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[dir] .oc-dp-topo { padding: 18px 26px; border-bottom: 1px solid #1c1c1c; }
.oc-dp-topo-esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.oc-dp-titulo { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: -.2px; white-space: nowrap; }

/* 🔑 40px de alvo (44 no ✕): numa tela onde o toque errado escolhe a rede
 * errada, o alvo é parte do anteparo (medido no telefone em 25/08). */
.oc-dp-voltar, .oc-dp-x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #8a8a8a;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
[dir] .oc-dp-voltar, [dir] .oc-dp-x { border: 1px solid #262626; padding: 0; margin: 0; }
.oc-dp-voltar { font-size: 20px; }
.oc-dp-x { width: 44px; height: 44px; font-size: 14px; color: #7a7a7a; }
[dir] .oc-dp-x { margin: -4px -8px -4px 0; }
[dir] .oc-dp-voltar:hover, [dir] .oc-dp-x:hover { border-color: #f7931a; color: #f7931a; }
.oc-dp-voltar:focus-visible, .oc-dp-x:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
.oc-dp-voltar[hidden] { display: none; }

/* ── abas Cripto / PIX (só o depósito tem) ────────────────────────────── */
.oc-dep-painel .oc-abas, .oc-dp-inline .oc-abas { display: flex; gap: 6px; }
[dir] .oc-dep-painel .oc-abas, [dir] .oc-dp-inline .oc-abas { padding: 16px 26px 0; }
.oc-dep-painel .oc-aba, .oc-dp-inline .oc-aba {
  background: transparent;
  color: #6a6a6a;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 9px;
  min-height: 34px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
[dir] .oc-dep-painel .oc-aba, [dir] .oc-dp-inline .oc-aba { border: 1px solid #232323; padding: 0 14px; }
.oc-dep-painel .oc-aba.is-active, .oc-dp-inline .oc-aba.is-active { color: #f7931a; }
[dir] .oc-dep-painel .oc-aba.is-active, [dir] .oc-dp-inline .oc-aba.is-active { border-color: rgba(247, 147, 26, .5); background: rgba(247, 147, 26, .08); }
.oc-dep-painel .oc-aba-corpo[hidden], .oc-dp-inline .oc-aba-corpo[hidden] { display: none !important; }
/* 🔴 No telefone o `barra.js` carrega o `abas-movel.css` da barra de abas, que
 * usa os MESMOS nomes (`.oc-abas` em grade de 5, `.oc-aba` de 62px em coluna,
 * com a pastilha `::before`). Dentro do cartão essas regras faziam CRIPTO e
 * PIX virarem dois quadrados de 62px com uma pastilha fantasma. Aqui elas são
 * devolvidas ao desenho do cartão, com especificidade maior. */
.oc-dep-painel .oc-aba, .oc-dp-inline .oc-aba { height: 34px; flex-direction: row; flex: 0 0 auto; }
.oc-dep-painel .oc-aba::before, .oc-dp-inline .oc-aba::before { content: none; }
[dir] .oc-dep-painel .oc-abas, [dir] .oc-dp-inline .oc-abas { border-top: 0; }

/* ── o stepper: três peças diagonais, vão de 3px ──────────────────────
 *
 * Cada peça é um <button> com spans absolutos por baixo do rótulo:
 *   ini  = corpo com canto esquerdo redondo + paralelogramo à direita
 *   meio = um paralelogramo só
 *   fim  = paralelogramo à esquerda + corpo com canto direito redondo
 * `skewX(-26.6deg)` porque tan(26,6°) = 0,5 — a diagonal anda meia altura,
 * o mesmo ângulo do `botao.css`. A cor das peças vem de `data-estado`. */
.oc-dp-passos { display: flex; align-items: stretch; gap: 3px; position: relative; }
[dir] .oc-dp-passos { padding: 18px 26px 0; }
.oc-dp-passo {
  position: relative;
  flex: 1;
  height: 34px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  --peca: #141414;
  --tinta: #4a4a4a;
}
[dir] .oc-dp-passo { padding: 0; border: 0; margin: 0; }
.oc-dp-passo[data-estado="atual"] { --peca: #f7931a; --tinta: #0a0a0a; }
.oc-dp-passo[data-estado="feito"] { --peca: #1c1c1c; --tinta: #f7931a; }
.oc-dp-passo[data-livre="0"] { cursor: default; }
.oc-dp-passo:not([data-livre="0"]):hover { filter: brightness(1.12); }
.oc-dp-passo:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
.oc-dp-passo-a, .oc-dp-passo-b { position: absolute; top: 0; bottom: 0; background: var(--peca); }
.oc-dp-passo[data-pos="ini"] .oc-dp-passo-a { left: 0; right: 9px; border-radius: 10px 0 0 10px; }
.oc-dp-passo[data-pos="ini"] .oc-dp-passo-b { right: 2px; width: 15px; transform: skewX(-26.6deg); }
.oc-dp-passo[data-pos="meio"] .oc-dp-passo-a { display: none; }
.oc-dp-passo[data-pos="meio"] .oc-dp-passo-b { left: 8px; right: 8px; transform: skewX(-26.6deg); }
.oc-dp-passo[data-pos="fim"] .oc-dp-passo-a { left: 9px; right: 0; border-radius: 0 10px 10px 0; }
.oc-dp-passo[data-pos="fim"] .oc-dp-passo-b { left: 2px; width: 15px; transform: skewX(-26.6deg); }
.oc-dp-passo-rot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 100%;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}
.oc-dp-passo-n { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; }

/* ── o corpo do passo ─────────────────────────────────────────────────── */
@keyframes ocDpStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.oc-dp-corpo { position: relative; display: flex; flex-direction: column; gap: 12px; animation: ocDpStepIn .25s ease; }
[dir] .oc-dp-corpo { padding: 18px 26px 26px; }
@media (prefers-reduced-motion: reduce) { .oc-dp-corpo { animation: none; } }

/* Rótulo em caixa alta com contador à direita ("12 de 34"). */
.oc-dp-rot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.oc-dp-rot-txt { color: #8a8a8a; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-dp-rot-esq { display: flex; align-items: center; gap: 9px; min-width: 0; }
.oc-dp-cont { color: #545454; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }

/* A busca. */
.oc-dp-busca { display: flex; align-items: center; gap: 10px; height: 40px; border-radius: 11px; }
[dir] .oc-dp-busca { padding: 0 14px; border: 1px solid #232323; background: #141414; }
[dir] .oc-dp-busca:focus-within { border-color: #f7931a; }
.oc-dp-busca-lupa { color: #565656; font-size: 13px; }
.oc-dp-busca-in { flex: 1; min-width: 0; background: transparent; color: #fff; font: inherit; font-size: 12.5px; }
[dir] .oc-dp-busca-in { border: 0; padding: 0; margin: 0; }
.oc-dp-busca-in:focus { outline: none; }
.oc-dp-busca-in::placeholder { color: #565656; }

/* A lista: caixa rolável com sombra interna no rodapé e scroll fino. */
.oc-dp-lista {
  max-height: 346px;
  overflow-y: auto;
  border-radius: 14px;
  box-shadow: inset 0 -16px 16px -16px rgba(0, 0, 0, .9);
  scrollbar-width: thin;
  scrollbar-color: #262626 transparent;
}
[dir] .oc-dp-lista { border: 1px solid #1e1e1e; background: #111111; }
.oc-dp-lista::-webkit-scrollbar { width: 8px; }
.oc-dp-lista::-webkit-scrollbar-thumb { background: #262626; border-radius: 99px; border: 2px solid #111111; }
.oc-dp-vazio { color: #4a4a4a; font-size: 12.5px; text-align: center; }
[dir] .oc-dp-vazio { padding: 26px; }

/* A linha: ícone · ticker/nome · coluna da direita · seta. */
.oc-dp-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: background .12s ease;
}
[dir] .oc-dp-item { padding: 11px 16px; border: 0; border-top: 1px solid #191919; margin: 0; }
[dir] .oc-dp-item:first-child { border-top: 0; }
[dir] .oc-dp-item:hover { background: #181818; }
.oc-dp-item:focus-visible { outline: 2px solid #f7931a; outline-offset: -2px; }
.oc-dp-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.oc-dp-item-t1 { color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dp-item-t2 { color: #5c5c5c; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dp-item-dir { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex: 0 0 auto; }
.oc-dp-item-d1 { color: #e8e8e8; font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }
.oc-dp-item-d2 { color: #545454; font-size: 10.5px; white-space: nowrap; }
.oc-dp-item-seta { color: #3d3d3d; font-size: 15px; flex: 0 0 auto; }
/* Selo "menor taxa" na linha da rede sugerida. */
.oc-dp-selo { color: #f7931a; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
[dir] .oc-dp-selo { padding: 3px 8px; border: 1px solid rgba(247, 147, 26, .35); background: rgba(247, 147, 26, .08); }

/* O ícone da moeda (34px na lista, 26 no chip). Mesma cascata do carteira.js:
 * CDN → local → iniciais. Sem tamanho fixo a imagem do CDN entra com a
 * largura natural dela e empurra o nome para fora da linha. */
.oc-dep-moeda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: #0a0a0a;
}
[dir] .oc-dep-moeda { background: #f7931a; }
.oc-dep-moeda img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-dp-chip .oc-dep-moeda { width: 26px; height: 26px; font-size: 8px; }
.oc-dp-rot .oc-dep-moeda { width: 22px; height: 22px; font-size: 8px; }

/* A sigla da rede numa caixa. */
.oc-dp-rede-sigla {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #f7931a;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
}
[dir] .oc-dp-rede-sigla { background: #1a1a1a; border: 1px solid #262626; }
/* A logo da rede dentro da caixinha; a sigla só quando não há logo. */
.oc-dp-rede-sigla img { display: block; width: 22px; height: 22px; border-radius: 50%; }
.oc-dp-chip .oc-dp-rede-sigla { width: 26px; height: 26px; border-radius: 8px; font-size: 7.5px; }
.oc-dp-chip .oc-dp-rede-sigla img { width: 16px; height: 16px; }

/* Chips Moeda / Rede com "trocar". */
.oc-dp-chips { display: flex; gap: 10px; }
.oc-dp-chip { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; border-radius: 12px; }
[dir] .oc-dp-chip { padding: 11px 14px; border: 1px solid #202020; background: #141414; }
.oc-dp-chip-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oc-dp-chip-k { color: #5f5f5f; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.oc-dp-chip-v { color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dp-chip-trocar { margin-left: auto; background: transparent; color: #f7931a; font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer; }
[dir] .oc-dp-chip-trocar { border: 0; padding: 6px 0 6px 6px; margin: -6px 0 -6px auto; }
.oc-dp-chip-trocar:hover { color: #ffb04d; }

/* Notas, erros e o aviso laranja. */
.oc-dp-nota { color: #4a4a4a; font-size: 11px; line-height: 1.5; }
.oc-dp-erro { display: flex; align-items: center; gap: 9px; border-radius: 10px; color: #ef8b8b; font-size: 11.5px; line-height: 1.45; }
[dir] .oc-dp-erro { padding: 10px 13px; border: 1px solid rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .06); margin: 0; }
.oc-dp-erro::before { content: '!'; color: #ef4444; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.oc-dp-erro[hidden] { display: none; }
.oc-dp-aviso { display: flex; align-items: flex-start; gap: 11px; border-radius: 12px; color: #9a9a9a; font-size: 11.5px; line-height: 1.55; }
[dir] .oc-dp-aviso { padding: 12px 14px; border: 1px solid rgba(247, 147, 26, .25); background: rgba(247, 147, 26, .06); margin: 0; }
.oc-dp-aviso-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; color: #f7931a; font-size: 12px; font-weight: 700; }
[dir] .oc-dp-aviso-ic { background: rgba(247, 147, 26, .12); border: 1px solid rgba(247, 147, 26, .5); }
.oc-dp-aviso b { color: #f7931a; font-weight: 700; }
.oc-dp-espera { color: #8a8a8a; font-size: 12.5px; }

/* ── o card do endereço (passo 3 do depósito) ─────────────────────────── */
.oc-dp-end-card { position: relative; overflow: hidden; border-radius: 16px; }
[dir] .oc-dp-end-card { border: 1px solid #232323; background: #141414; }
.oc-dp-end-card .oc-dp-fio { background: linear-gradient(90deg, transparent 0%, rgba(247, 147, 26, .7) 50%, transparent 100%); }
.oc-dp-end-card .oc-dp-listras { top: -20px; bottom: -20px; height: auto; right: 24px; width: 40px; }
.oc-dp-end-card .oc-dp-listras span:nth-child(1) { right: 0; width: 16px; }
.oc-dp-end-card .oc-dp-listras span:nth-child(2) { right: 26px; width: 7px; }
.oc-dp-end-card .oc-dp-listras span:nth-child(3) { display: none; }
.oc-dp-end-linha { display: flex; align-items: center; gap: 18px; }
[dir] .oc-dp-end-linha { padding: 16px 18px 18px; }

/* A caixa clara do QR com o selo OFF no centro. O svg do `qr.js` já traz
 * fundo branco; a caixa por baixo é o creme do desenho. A correção do QR é M
 * (15%): o selo de 26px num QR de 116px come ~5% dos módulos, com folga. */
.oc-dp-qr { position: relative; flex: 0 0 auto; width: 138px; height: 138px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
[dir] .oc-dp-qr { background: #f4f0e8; padding: 0; margin: 0; }
.oc-dp-qr svg { display: block; width: 116px; height: 116px; border-radius: 6px; }
/* O selo é a MARCA (decisão do dono, 01/09/2026): pílula laranja com o
 * wordmark branco. 50×20 num QR de 116px come ~7,5% dos módulos — abaixo
 * dos 15% que o nível M corrige; o wordmark é largo (8,9:1) e um quadrado
 * o deixaria ilegível. */
.oc-dp-qr-selo { position: absolute; width: 50px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
[dir] .oc-dp-qr-selo { background: #f7931a; border: 2px solid #f4f0e8; padding: 0 4px; }
.oc-dp-qr-selo img { display: block; width: 100%; height: auto; }
.oc-dp-end-col { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.oc-dp-marca { width: 8px; height: 8px; flex: 0 0 auto; transform: skewX(-26.6deg); border-radius: 1px; }
[dir] .oc-dp-marca { background: #f7931a; }
.oc-dp-end-txt { display: block; color: #e8e8e8; font-size: 11.5px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; line-height: 1.6; word-break: break-all; user-select: all; border-radius: 10px; }
[dir] .oc-dp-end-txt { padding: 10px 12px; border: 1px solid #232323; background: #0f0f0f; margin: 0; }

/* A grade Mínimo / Crédito em / Tempo estimado. Duas ou três células —
 * `grid-auto-flow`, não `grid-template-columns: 1fr 1fr 1fr`: o Mínimo só
 * entra quando o servidor manda `minDeposit`. */
.oc-dp-grade { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.oc-dp-cel { display: flex; flex-direction: column; gap: 3px; min-width: 0; border-radius: 11px; }
[dir] .oc-dp-cel { padding: 11px 13px; border: 1px solid #1d1d1d; background: #141414; }
.oc-dp-cel-k { color: #5f5f5f; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.oc-dp-cel-v { color: #fff; font-size: 12px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── o histórico de depósitos (fica, abaixo dos passos) ──────────────── */

/* ── a aba PIX dentro do cartão ─────────────────────────────────────────
 *
 * O `pix.js` monta `.oc-campo`, `.oc-input`, `.oc-botao`, `.oc-endereco` e
 * `.oc-qr`, que só o `carteira.css` estiliza — e ele prefixa tudo com
 * `[data-oc-carteira]`, ancestral que o diálogo não tem. Fora da carteira a
 * aba nascia crua. O mínimo para ela caber no desenho novo: */
.oc-dep-painel .oc-aba-corpo, .oc-dp-inline .oc-aba-corpo { display: flex; flex-direction: column; gap: 12px; }
[dir] .oc-dep-painel .oc-aba-corpo:not([data-oc-dep-cripto]), [dir] .oc-dp-inline .oc-aba-corpo:not([data-oc-dep-cripto]) { padding: 18px 26px 26px; }
.oc-dep-painel .oc-campo-rot, .oc-dp-inline .oc-campo-rot { color: #8a8a8a; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; }
.oc-dep-painel .oc-input, .oc-dp-inline .oc-input { width: 100%; height: 46px; border-radius: 12px; color: #fff; font: inherit; font-size: 14px; box-sizing: border-box; }
[dir] .oc-dep-painel .oc-input, [dir] .oc-dp-inline .oc-input { padding: 0 14px; border: 1px solid #232323; background: #141414; }
[dir] .oc-dep-painel .oc-input:focus, [dir] .oc-dp-inline .oc-input:focus { border-color: #f7931a; outline: none; }
.oc-dep-painel .oc-botao, .oc-dp-inline .oc-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; background: #f7931a; color: #0a0a0a; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
[dir] .oc-dep-painel .oc-botao, [dir] .oc-dp-inline .oc-botao { border: 0; padding: 0 20px; }
.oc-dep-painel .oc-botao:hover, .oc-dp-inline .oc-botao:hover { filter: brightness(1.08); }
.oc-dep-painel .oc-endereco, .oc-dp-inline .oc-endereco { display: flex; align-items: center; gap: 10px; border-radius: 10px; }
[dir] .oc-dep-painel .oc-endereco, [dir] .oc-dp-inline .oc-endereco { padding: 10px 12px; border: 1px solid #232323; background: #0f0f0f; }
.oc-dep-painel .oc-endereco-txt, .oc-dp-inline .oc-endereco-txt { flex: 1; min-width: 0; font: 11.5px/1.6 'JetBrains Mono', ui-monospace, Menlo, monospace; overflow-wrap: anywhere; user-select: all; color: #e8e8e8; }
.oc-dep-painel .oc-copiar, .oc-dp-inline .oc-copiar { flex: 0 0 auto; background: #f7931a; color: #0a0a0a; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-radius: 9px; min-height: 40px; }
[dir] .oc-dep-painel .oc-copiar, [dir] .oc-dp-inline .oc-copiar { border: 0; padding: 0 14px; }
.oc-dep-painel .oc-qr, .oc-dp-inline .oc-qr { width: 148px; border-radius: 12px; }
[dir] .oc-dep-painel .oc-qr, [dir] .oc-dp-inline .oc-qr { margin: 0 auto; padding: 8px; background: #f4f0e8; }
.oc-dep-painel .oc-qr svg, .oc-dp-inline .oc-qr svg { display: block; width: 100%; height: auto; }
.oc-dep-painel .oc-aviso, .oc-dp-inline .oc-aviso { font-size: 12.5px; line-height: 1.5; color: #9a9a9a; }
[dir] .oc-dep-painel .oc-aviso, [dir] .oc-dp-inline .oc-aviso { margin: 0; }
.oc-dep-painel .oc-aviso.oc-erro, .oc-dp-inline .oc-aviso.oc-erro { color: #ef8b8b; }
.oc-dep-painel .oc-aviso.oc-alerta, .oc-dp-inline .oc-aviso.oc-alerta { color: #9a9a9a; border-radius: 12px; }
[dir] .oc-dep-painel .oc-aviso.oc-alerta, [dir] .oc-dp-inline .oc-aviso.oc-alerta { padding: 12px 14px; border: 1px solid rgba(247, 147, 26, .25); background: rgba(247, 147, 26, .06); }
.oc-dep-painel .oc-sucesso, .oc-dp-inline .oc-sucesso { color: #2ebd85; }

/* ── telefone ─────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  [dir] .oc-dep-veu { padding: 12px 8px; }
  [dir] .oc-dp-topo { padding: 14px 16px; }
  [dir] .oc-dp-passos { padding: 14px 16px 0; }
  [dir] .oc-dp-corpo { padding: 14px 16px 20px; }
  [dir] .oc-dep-painel .oc-abas, [dir] .oc-dp-inline .oc-abas { padding: 14px 16px 0; }
  .oc-dp-lista { max-height: 300px; }
  .oc-dp-end-linha { flex-direction: column; align-items: stretch; }
  .oc-dp-qr { align-self: center; }
  .oc-dp-grade { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .oc-dp-passo-rot { font-size: 10px; gap: 5px; }
}

/* Nota de reservas no popup (auditoria 05/09/2026): a ressalva do PoR onde o
 * dinheiro entra, em vez de só na docs. Link, discreto, para a página Segurança. */
.oc-dp-nota-reservas { display: block; color: #6a6a6a; font-size: 11px; line-height: 1.5; text-decoration: none; }
[dir] .oc-dp-nota-reservas { margin: 8px 0 0; }
.oc-dp-nota-reservas:hover { color: #f7931a; }

/* ── botao.css ── */
/* botao.css — o botão padronizado da OFFCODE: corte diagonal, pontas retas.
 *
 * Desenho do dono (30/08/2026, `botao-offcode.html`): uma barra com o canto
 * esquerdo arredondado e a ponta direita cortada na diagonal, mais um bloco
 * escuro com a seta ↗ que fecha o conjunto. Nasceu no popup de transferir e
 * virou o botão de TODA ação de dinheiro e de negociação: Long/Short, Depositar,
 * Sacar, Converter, Add margin, Copiar, os chips de alavancagem e margem.
 *
 * ## Como o corte é feito
 *
 * Dois pseudo-elementos: `::before` é o corpo (canto esquerdo redondo) e
 * `::after` é um paralelogramo — `skewX(-26.6deg)`, porque tan(26,6°) = 0,5:
 * a diagonal anda meia altura na horizontal, o MESMO ângulo em todo tamanho.
 *
 * Geometria em função da altura H e do recuo R (a variável `--r`):
 *   · o corpo termina em `right: R + H/2` — sempre DENTRO do paralelogramo,
 *     nos dois cantos, por isso a emenda nunca abre;
 *   · o paralelogramo tem largura H e `right: R`; a diagonal vai de
 *     (W − R + H/4) no topo a (W − R − H/4) na base;
 *   · R ≥ H/4 para a ponta de cima não vazar da caixa do botão.
 *
 * 🔴 O rótulo vai num `<span class="oc-bt-rot">` COM `z-index: 1`. Sem isso
 * ele some: `::after` é o último filho, e entre filhos posicionados sem
 * z-index quem vem depois pinta por cima — `MÁX` virou `M`, `25%` virou `25`
 * e a seta desapareceu inteira na primeira captura do popup.
 *
 * ## Uso
 *
 *   <button class="oc-bt oc-bt-m oc-bt-marca"><span class="oc-bt-rot">Depositar</span></button>
 *
 *   tamanhos  oc-bt-g (56px, CTA) · oc-bt-m (44px) · oc-bt-p (34px) · oc-bt-pp (28px)
 *   tons      oc-bt-marca (laranja) · oc-bt-escuro · oc-bt-longo (verde) ·
 *             oc-bt-curto (vermelho) · oc-bt-bom (verde de "feito") ·
 *             oc-bt-quente (laranja escuro de "enviando")
 *   estados   :disabled · .oc-on (segmento escolhido = laranja)
 *   CTA       <div class="oc-bt-linha"><button class="oc-bt oc-bt-g oc-bt-marca">…</button>
 *               <button class="oc-bt-seta" tabindex="-1" aria-hidden="true">
 *                 <span class="oc-bt-seta-rot">↗</span></button></div>
 *
 * Funciona em `<a>` e em `<button>`: o `<a>` do herói da home é o mesmo botão.
 *
 * ⚠️ Nada de `rem`: a raiz do espelho é 13.33vw e 1rem vale ~240px.
 * ⚠️ O reset da captura é `[dir] *` (0,1,0). Toda regra daqui nasce com
 *    `[dir]` (0,2,0), e a base repõe borda/fundo/padding em zero de propósito:
 *    a forma é dos pseudo-elementos, e qualquer fundo herdado apareceria
 *    ATRÁS do corte como um retângulo.
 */

/* ── base ─────────────────────────────────────────────────────────────── */

[dir] .oc-bt {
  --h: 44px;
  --r: 12px;
  --raio: 12px;
  --bt-fundo: #161616;
  --bt-tinta: #9a9a9a;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  height: var(--h);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bt-tinta);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter .15s ease, color .15s ease;
}
[dir] .oc-bt::before,
[dir] .oc-bt::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--bt-fundo);
  transition: background .18s ease;
}
[dir] .oc-bt::before {
  left: 0;
  right: calc(var(--r) + var(--h) / 2);
  border-radius: var(--raio) 0 0 var(--raio);
}
[dir] .oc-bt::after {
  right: var(--r);
  width: var(--h);
  transform: skewX(-26.6deg);
}
[dir] .oc-bt-rot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  /* A ponta direita é diagonal: o texto tem de parar antes de onde ela
   * entra na metade da altura, mais uma folga. */
  padding: 0 calc(var(--r) + var(--h) / 4 + 4px) 0 calc(var(--raio) + 2px);
  color: inherit;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
[dir] .oc-bt:hover { filter: brightness(1.1); }
[dir] .oc-bt:active { filter: brightness(.94); }
[dir] .oc-bt:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
/* Desligado tem de PARECER desligado: um botão vivo que não faz nada é pior
 * que um apagado que diz por quê. */
[dir] .oc-bt:disabled,
[dir] .oc-bt[aria-disabled="true"] {
  --bt-fundo: #181818;
  --bt-tinta: #4f4f4f;
  cursor: not-allowed;
  filter: none;
}

/* ── tamanhos ─────────────────────────────────────────────────────────── */

[dir] .oc-bt-g { --h: 56px; --r: 16px; --raio: 16px; font-size: 19px; letter-spacing: -.2px; }
[dir] .oc-bt-m { --h: 44px; --r: 12px; --raio: 12px; font-size: 14px; }
[dir] .oc-bt-p { --h: 34px; --r: 10px; --raio: 9px; font-size: 12.5px; }
[dir] .oc-bt-pp { --h: 28px; --r: 8px; --raio: 7px; font-size: 11.5px; }
/* O CTA alinha o rótulo à esquerda, como no desenho. */
[dir] .oc-bt-g .oc-bt-rot { justify-content: flex-start; padding-left: 22px; }
/* Botão que ocupa a linha inteira. */
[dir] .oc-bt-cheio { display: flex; width: 100%; }

/* ── tons ─────────────────────────────────────────────────────────────── */

[dir] .oc-bt-marca { --bt-fundo: #f7931a; --bt-tinta: #0a0a0a; }
[dir] .oc-bt-escuro { --bt-fundo: #161616; --bt-tinta: #9a9a9a; }
[dir] .oc-bt-escuro:hover { --bt-tinta: #f7931a; filter: brightness(1.25); }
/* ── par Long/Short no formato da referência (dono, 30/08/2026): dois
 * paralelogramos espelhados, rótulo em cima e PREÇO embaixo. `oc-bt-esq`
 * espelha o corte para a ESQUERDA (o padrão corta à direita) — mesma
 * inclinação de 26,6° do sistema, que é a da foto. ── */
[dir] .oc-bt-esq::before {
  left: calc(var(--r) + var(--h) / 2);
  right: 0;
  border-radius: 0 var(--raio) var(--raio) 0;
}
[dir] .oc-bt-esq::after {
  left: var(--r);
  right: auto;
  width: var(--h);
  transform: skewX(-26.6deg);
}
[dir] .oc-bt-esq .oc-bt-rot {
  padding: 0 calc(var(--raio) + 2px) 0 calc(var(--r) + var(--h) / 4 + 4px);
}
[dir] .oc-bt-2l { --h: 48px; }
[dir] .oc-bt-2l .oc-bt-rot { flex-direction: column; gap: 1px; line-height: 1.15; }
[dir] .oc-bt-2l .oc-bt-l1 { font-size: 12.5px; font-weight: 700; opacity: .82; }
[dir] .oc-bt-2l .oc-bt-l2 {
  font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

[dir] .oc-bt-longo { --bt-fundo: #00e08f; --bt-tinta: #06130d; }
[dir] .oc-bt-curto { --bt-fundo: #ff4d4f; --bt-tinta: #1b0b0c; }
[dir] .oc-bt-bom { --bt-fundo: #4cb37b; --bt-tinta: #0a0a0a; }
[dir] .oc-bt-quente { --bt-fundo: #b86c0c; --bt-tinta: #0a0a0a; }
/* Segmento escolhido: laranja. Os outros ficam escuros. */
[dir] .oc-bt.oc-on { --bt-fundo: #f7931a; --bt-tinta: #0a0a0a; }
[dir] .oc-bt.oc-on:hover { filter: brightness(1.06); }
/* "Enviando" e "feito" ficam travados de propósito — e têm de manter a cor
 * enquanto travados: cinza ali diria "não dá", quando o que está acontecendo
 * é "está indo" / "foi". Estas duas vencem o `:disabled` da base. */
[dir] .oc-bt-quente:disabled { --bt-fundo: #b86c0c; --bt-tinta: #0a0a0a; cursor: wait; }
[dir] .oc-bt-bom:disabled { --bt-fundo: #4cb37b; --bt-tinta: #0a0a0a; cursor: default; }

/* ── variante SEM `.oc-bt-rot` ────────────────────────────────────────────
 *
 * Para botão cujo texto alguém escreve por `textContent` (o `.oc-ord-enviar`
 * do spot troca o rótulo a cada lado e a cada cotação). O corte vai ATRÁS do
 * texto: `z-index: -1` nos pseudo-elementos, dentro de um contexto próprio
 * (`isolation: isolate`) — sem o contexto, iriam parar atrás do painel. */
[dir] .oc-bt.oc-bt-solo {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--r) + var(--h) / 4 + 4px) 0 calc(var(--raio) + 2px);
  font-weight: 600;
}
[dir] .oc-bt.oc-bt-solo::before,
[dir] .oc-bt.oc-bt-solo::after { z-index: -1; }

/* ── grupo de segmentos ───────────────────────────────────────────────── */

[dir] .oc-bt-segs { display: flex; gap: 8px; }
[dir] .oc-bt-segs > .oc-bt { flex: 1; }
[dir] .oc-bt-segs > .oc-bt > .oc-bt-rot { width: 100%; }

/* ── o CTA com o bloco de seta ────────────────────────────────────────── */

[dir] .oc-bt-linha { display: flex; align-items: stretch; width: 100%; }
[dir] .oc-bt-linha > .oc-bt { flex: 1; min-width: 0; }
[dir] .oc-bt-linha > .oc-bt > .oc-bt-rot { width: 100%; }
/* A seta é a METADE direita do mesmo botão, cortada na mesma diagonal — não
 * é um segundo controle. Quem a monta a tira do foco (`tabindex=-1`,
 * `aria-hidden`) para o teclado achar UM botão, não dois. */
[dir] .oc-bt-seta {
  --h: 56px;
  --raio: 16px;
  --seta-cor: #3d3d3d;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--h) + 20px);
  height: var(--h);
  margin: 0 0 0 calc(-1 * (var(--h) / 4 + 4px));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--seta-cor);
  font: inherit;
  cursor: pointer;
  transition: color .18s ease;
}
[dir] .oc-bt-seta::before,
[dir] .oc-bt-seta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background: #171717;
}
[dir] .oc-bt-seta::before {
  left: calc(var(--h) / 4);
  width: calc(var(--h) - 16px);
  transform: skewX(-26.6deg);
}
[dir] .oc-bt-seta::after {
  left: calc(var(--h) / 4 + 16px);
  right: 0;
  border-radius: 0 var(--raio) var(--raio) 0;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06);
}
[dir] .oc-bt-seta-rot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: calc(var(--h) / 4 + 6px);
  font-size: 21px;
  line-height: 1;
}
[dir] .oc-bt-seta:disabled { cursor: not-allowed; }
/* A cor da seta segue o botão ao lado: laranja quando dá para clicar, verde
 * quando terminou, apagada quando não dá. */
[dir] .oc-bt-marca + .oc-bt-seta { --seta-cor: #f7931a; }
[dir] .oc-bt-quente + .oc-bt-seta { --seta-cor: #b86c0c; }
[dir] .oc-bt-bom + .oc-bt-seta { --seta-cor: #4cb37b; }
[dir] .oc-bt:disabled + .oc-bt-seta { --seta-cor: #3d3d3d; }
/* "Indo" e "foi" travam o botão de propósito e a seta acompanha a cor — a
 * regra de cima (0,4,0) venceria o tom (0,3,0) e a apagaria. */
[dir] .oc-bt-quente:disabled + .oc-bt-seta { --seta-cor: #b86c0c; }
[dir] .oc-bt-bom:disabled + .oc-bt-seta { --seta-cor: #4cb37b; }
[dir] .oc-bt-linha:hover .oc-bt-seta:not(:disabled) { --seta-cor: #ffb04d; }
/* Seta em tamanho médio (44px). */
[dir] .oc-bt-m + .oc-bt-seta { --h: 44px; --raio: 12px; }
[dir] .oc-bt-m + .oc-bt-seta .oc-bt-seta-rot { font-size: 17px; }

/* ── cadeia: segmentos colados numa faixa só ──────────────────────────
 *
 * Desenho do dono (30/08/2026, cabeçalho no iPhone): Depositar, saldo e conta
 * viram UMA faixa — laranja, escuro, laranja — com as emendas na diagonal e
 * um respiro de 3px entre elas. Medido no desenho (tela de 440pt): faixa de
 * 38px, emendas a 32° (tan = 0,625: a diagonal anda 5/8 da altura), ponta
 * esquerda inclinada a 14° com cantos de 4px, ponta direita reta com os
 * mesmos cantos.
 *
 *   <div class="oc-bt-cadeia">
 *     <a class="oc-bt oc-bt-marca oc-bt-cadeia-ini"><span class="oc-bt-rot">…</span></a>
 *     <a class="oc-bt oc-bt-escuro oc-bt-cadeia-meio"><span class="oc-bt-rot">…</span></a>
 *     <button class="oc-bt oc-bt-marca oc-bt-cadeia-fim"><span class="oc-bt-rot">…</span></button>
 *   </div>
 *
 * A posição é uma classe explícita, não `:first-child`: o último segmento
 * pode viver dentro de um invólucro (o menu de conta precisa de um pai
 * `position: relative` para o painel), e o clone do botão que vai para a
 * gaveta NÃO está numa cadeia — por isso toda regra daqui exige
 * `.oc-bt-cadeia` acima: fora dela o mesmo elemento é o botão comum.
 *
 * Geometria (altura H; toda inclinação gira em torno do próprio centro, de
 * modo que na METADE da altura a borda visual coincide com a caixa do
 * elemento — é o que faz as caixas do flex valerem as medidas do desenho):
 *   · ini: corpo `::before` inclinado a 14° (a ponta de cima anda
 *     H/2·tan14° ≈ 4,7px para a direita) terminando em `right: H/2`, sempre
 *     por baixo do paralelogramo `::after` de largura H que faz a emenda;
 *   · meio: um paralelogramo só, `left: 0; right: 0`;
 *   · fim: paralelogramo de largura H à esquerda e retângulo `::after` a
 *     partir de H/2 com os cantos direitos arredondados.
 *   Duas bordas com a MESMA inclinação são paralelas: o respiro entre
 *   segmentos é a margem horizontal entre as caixas, e vale igual do topo à
 *   base.
 *   Rótulo: a diagonal entra na caixa até H/2·tan32° ≈ 0,31H nas pontas de
 *   cima e de baixo; o texto fica no meio da altura, e as folgas (medidas no
 *   desenho) são variáveis para quem monta a cadeia ajustar por segmento.
 * ⚠️ Os paralelogramos SAEM da caixa (≈ 0,31H nas pontas): quem embrulha a
 *    cadeia não pode ter `overflow: hidden`.
 */
[dir] .oc-bt-cadeia {
  --cadeia-h: 38px;
  --cadeia-raio: 4px;
  --cadeia-emenda: 3px;
  --cadeia-inc: -32deg;
  --cadeia-ini: -14deg;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini,
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio,
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim {
  --h: var(--cadeia-h);
  --raio: var(--cadeia-raio);
  flex: 0 0 auto;
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio,
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim { margin-left: var(--cadeia-emenda); }

/* ini: ponta esquerda inclinada, emenda diagonal à direita. */
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini::before {
  left: 0;
  right: calc(var(--h) / 2);
  border-radius: var(--raio);
  transform: skewX(var(--cadeia-ini));
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini::after {
  right: 0;
  width: var(--h);
  transform: skewX(var(--cadeia-inc));
}
/* meio: paralelogramo inteiro. */
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio::before {
  left: 0;
  right: 0;
  border-radius: 0;
  transform: skewX(var(--cadeia-inc));
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio::after { display: none; }
/* fim: emenda diagonal à esquerda, ponta direita reta. */
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim::before {
  left: 0;
  right: auto;
  width: var(--h);
  border-radius: 0;
  transform: skewX(var(--cadeia-inc));
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim::after {
  left: calc(var(--h) / 2);
  right: 0;
  width: auto;
  border-radius: 0 var(--raio) var(--raio) 0;
  transform: none;
}
/* Cadeia que ocupa a linha inteira (trio da carteira, barra do futuros no
 * celular): os segmentos dividem a largura; quem precisa de largura fixa
 * (a Quantidade) põe o próprio `flex` com especificidade maior. */
[dir] .oc-bt-cadeia.oc-bt-cadeia-cheia { display: flex; width: 100%; }
[dir] .oc-bt-cadeia.oc-bt-cadeia-cheia > .oc-bt { flex: 1 1 0; min-width: 0; }
[dir] .oc-bt-cadeia.oc-bt-cadeia-cheia > .oc-bt > .oc-bt-rot { width: 100%; }
[dir] .oc-bt-cadeia .oc-bt-cadeia-ini > .oc-bt-rot {
  padding: 0 var(--cadeia-pad-dir, calc(var(--h) / 2 + 5px)) 0 var(--cadeia-pad-esq, 16px);
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-meio > .oc-bt-rot {
  padding: 0 var(--cadeia-pad-dir, 14px) 0 var(--cadeia-pad-esq, 15px);
}
[dir] .oc-bt-cadeia .oc-bt-cadeia-fim > .oc-bt-rot {
  padding: 0 var(--cadeia-pad-dir, 10px) 0 var(--cadeia-pad-esq, 10px);
}

/* ── roda de "enviando" dentro do rótulo ──────────────────────────────── */

[dir] .oc-bt-roda {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: ocBtGira .7s linear infinite;
}
[dir] .oc-bt-roda.oc-oculta { display: none; }
@keyframes ocBtGira { to { transform: rotate(360deg); } }

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

@media (max-width: 400px) {
  [dir] .oc-bt-g { font-size: 17px; }
  [dir] .oc-bt-g .oc-bt-rot { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  [dir] .oc-bt, [dir] .oc-bt::before, [dir] .oc-bt::after, [dir] .oc-bt-seta { transition: none; }
}

/* ── par colado (Log In | Sign Up) ────────────────────────────────────
 *
 * Duas peças do MESMO botão, com o vão diagonal fino da casa: a peça A
 * corta na direita SEM raio (a diagonal encosta na borda do elemento) e a
 * peça B nasce ESPELHADA — corte à esquerda, raio só à direita. O vão é o
 * `gap` do wrapper; as duas diagonais usam o mesmo skew e ficam paralelas. */
[dir] .oc-bt-par { display: inline-flex; gap: 3px; align-items: stretch; }
[dir] .oc-bt-par > .oc-bt { flex: 1; }
[dir] .oc-bt-par-a { --r: 0px; }
[dir] .oc-bt-par-a::before { right: calc(var(--h) / 2); border-radius: var(--raio) 0 0 var(--raio); }
[dir] .oc-bt-par-a::after { right: 0; }
[dir] .oc-bt-par-a .oc-bt-rot { padding: 0 calc(var(--h) / 4 + 6px) 0 calc(var(--raio) + 6px); }
[dir] .oc-bt-par-b::before { left: calc(var(--h) / 2); right: 0; border-radius: 0 var(--raio) var(--raio) 0; }
[dir] .oc-bt-par-b::after { left: 0; right: auto; width: var(--h); transform: skewX(-26.6deg); }
[dir] .oc-bt-par-b .oc-bt-rot { padding: 0 calc(var(--raio) + 6px) 0 calc(var(--h) / 4 + 6px); }
/* Reforço contra a regra móvel da barra (`.oc-b .oc-bt.oc-barra-btn:not(…)`,
 * 0-4-0), que devolvia --r e afastava a diagonal da borda no par. */
[dir] .oc-b .oc-bt.oc-bt-par-a { --r: 0px; }
[dir] .oc-b .oc-barra-gaveta-acoes .oc-bt-par { flex: 1; width: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
 * MODELO 2 — `.ocb`, o botão de ação (handoff `design_handoff_botao`, 09/09/2026)
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Sucede o `.oc-bt` acima nos CTAs de dinheiro e de negociação. Os dois
 * convivem: o `.oc-bt` continua na BARRA (Depositar do topo, saldo, avatar,
 * Log In/Sign Up) e nos secundários, e a barra não é tocada.
 *
 * ## A regra geométrica
 *
 * Paralelogramo horizontal de ângulo FIXO 23.5°. Todas as diagonais derivam
 * da ALTURA, nunca da largura:
 *
 *   slant          = 0.436 × h   →  atan(0.436) = 23.55°
 *   célula da seta = 0.846 × h
 *   rótulo         = 0.325 × h
 *   padding lateral= 0.30  × h   (+ slant à esquerda, + célula à direita)
 *   gap entre pares= 0.23  × h
 *
 * 🔑 Por que da altura: um botão cuja largura é definida pelo rótulo, com
 * slant em % da LARGURA, muda de ângulo a cada rótulo — `Confirmar` e `Ok`
 * sairiam com cortes diferentes. Derivando da altura o ângulo é invariante.
 * Uma variável só, `--ocb-h`, governa o componente inteiro.
 *
 * ## Tamanhos — mapeamento pelo PIXEL, não pela letra
 *
 * As duas escalas têm nomes iguais e alturas diferentes. Converter `oc-bt-g`
 * em `ocb--g` engordaria o botão de 56 para 78px:
 *
 *   oc-bt-g  56px → ocb--m  56px
 *   oc-bt-m  44px → ocb--p  44px
 *   oc-bt-p  34px → ocb--xp 34px
 *   oc-bt-pp 28px → sem par (o piso do modelo é 34) — segue no `.oc-bt`
 *
 * `ocb--p` (44px) é o piso em mobile: é o alvo mínimo de toque. `ocb--xp`
 * (34px) só em barra densa de desktop.
 *
 * ## Uso
 *
 *   <button type="button" class="ocb ocb--m ocb--block ocb--positive">
 *     <span class="ocb__label">Long</span>
 *     <span class="ocb__arrow" aria-hidden="true"><svg …></svg></span>
 *   </button>
 *
 * A célula da seta é PARTE do botão — não existe mais o `<button class=
 * "oc-bt-seta">` colado ao lado, que o modelo 1 precisava.
 *
 * ⚠️ O reset da captura é `[dir] div,[dir] span,…{border:0;margin:0;padding:0}`
 *    (0,1,1). Toda regra daqui nasce com `[dir]` (0,2,0) — sem isso o padding
 *    do corpo e a caixa do rótulo voltam a zero e o botão desenha colado.
 * ⚠️ Nada de `rem`: a raiz do espelho é 13.33vw e 1rem vale ~240px.
 * 🔑 `--ocb-h` também é o nome da altura da BARRA (`barra.css`, em `.oc-b`).
 *    Não colidem porque aqui ele é declarado no PRÓPRIO elemento `.ocb`, e o
 *    valor do elemento vence o herdado. Não mova estes tokens para `:root`.
 */

[dir] .ocb,
[dir] .ocb-pair {
  --ocb-slant-ratio: .436;
  --ocb-arrow-ratio: .846;
  --ocb-label-ratio: .325;
  --ocb-pad-ratio: .30;

  /* Corpo em COR SÓLIDA desde 10/09/2026 (dono, três pedidos seguidos: o
   * `Entrar para operar`, o `Negociar` da tabela e o par Long/Short).
   *
   * 🔴 O laranja era `#F7931A` em duas SOBRESCRITAS locais — uma no
   * `futuros.css`, outra no `mercados.css` — enquanto o token seguia em
   * degradê. Uma cor definida em três lugares diverge na primeira correção, e
   * todo `.ocb` laranja fora daquelas duas telas continuava com o degradê
   * antigo: a mesma ação com duas aparências. A cor mora no token, e só nele.
   *
   * 🔑 `#F7931A` é o laranja do BITCOIN, não o `#FFA51F` do handoff — decisão
   * do dono, e é o mesmo tom que a marca usa no resto do site. */
  --ocb-fill-primary:  #F7931A;
  /* 🔑 Verde e vermelho SÓLIDOS desde 10/09/2026 (dono, com foto do par
   * Long/Short: "deixe cor solida verde e vermelho"). São os tokens do SITE —
   * `--kline-up` e `--kline-down` —, não um verde próprio do botão: o mesmo
   * verde que diz "subiu" na tabela é o que diz "compra" no botão, e duas
   * telas com dois verdes é como se descobre que uma delas está errada.
   *
   * Os fios de luz do topo e a sombra da base FICAM: eles são a borda que
   * define a forma, não degradê de corpo. Sem eles o botão vira um retângulo
   * chapado. */
  --ocb-fill-positive: #009457;
  --ocb-fill-negative: #DF2B33;
  /* 🔑 Os dois SÓLIDOS também (dono, 10/09/2026). A cor é a parada de 58% do
   * degradê que havia aqui — o ponto onde o corpo assenta, e o mesmo 58% onde
   * os fios de luz do modelo desvanecem. Escolher o tom de ENTRADA (15%)
   * clarearia o botão inteiro; escolher o de saída (100%) o apagaria. O que
   * some é o degradê, não a cor que a pessoa via. */
  --ocb-fill-neutral:  #454A52;
  --ocb-fill-disabled: #26272A;

  /* Célula da seta: o MESMO tom escurecido e 1.5px de luz SOBRE a própria
   * diagonal. Não é outro botão — sem borda, sem raio, sem preto absoluto. */
  --ocb-cell-primary:  linear-gradient(90deg, rgba(255,228,178,.17) 0 1.5px, #C2740F 1.5px);
  /* Com o corpo sólido, a célula é o MESMO tom escurecido — não um bloco quase
   * preto grudado numa cor lisa. O fio de 1,5px sobre a diagonal continua
   * sendo o que separa as duas. */
  --ocb-cell-positive: linear-gradient(90deg, rgba(198,255,228,.17) 0 1.5px, #006B3F 1.5px);
  --ocb-cell-negative: linear-gradient(90deg, rgba(255,206,210,.17) 0 1.5px, #A11F26 1.5px);

  --ocb-arrow-primary:  #FFE0B0;
  --ocb-arrow-positive: #C9FFE7;
  --ocb-arrow-negative: #FFD9DA;

  --ocb-accent: #FFA51F;
  --ocb-surface: #0C0D10;   /* fundo atrás do botão — usado pelo outline */
}

/* ── modelo ───────────────────────────────────────────────────────────── */

[dir] .ocb {
  --ocb-h: 56px;
  --ocb-slant: calc(var(--ocb-h) * var(--ocb-slant-ratio));
  --ocb-arrow: calc(var(--ocb-h) * var(--ocb-arrow-ratio));
  --ocb-pad: calc(var(--ocb-h) * var(--ocb-pad-ratio));
  --ocb-fill: var(--ocb-fill-primary);
  --ocb-cell: var(--ocb-cell-primary);
  --ocb-arrow-color: var(--ocb-arrow-primary);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--ocb-h);
  margin: 0;
  padding: 0 calc(var(--ocb-arrow) + var(--ocb-pad)) 0 calc(var(--ocb-slant) + var(--ocb-pad));
  border: 0;
  border-radius: 0;
  font: inherit;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;

  /* Hairline de topo e sombra de base como CAMADAS DE FUNDO: desvanecem aos
   * 58% da largura, acompanhando o escurecimento do corpo.
   * 🔑 Não trocar por `border` nem por `box-shadow: inset 0 1px 0`: opacidade
   * constante continuaria brilhando na ponta escura e achataria o botão. */
  background:
    linear-gradient(90deg, rgba(255,255,255,.44), rgba(255,255,255,0) 58%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 58%) bottom / 100% 1px no-repeat,
    var(--ocb-fill);

  box-shadow: inset 0 calc(var(--ocb-h) * -.28) calc(var(--ocb-h) * .36) calc(var(--ocb-h) * -.28) rgba(0,0,0,.30);
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
  transition: filter .15s ease, transform .1s ease;
}

/* Entrada esquerda: wash largo + fio de luz correndo sobre a diagonal.
 * 🔴 Nenhum corte, fenda, notch ou segundo paralelogramo. O destaque é só
 * luz e saturação — e o branco do fio é BAIXO (.34→.14): um véu forte
 * dessatura a entrada e transforma verde vivo em menta pastel. */
[dir] .ocb::before,
[dir] .ocb::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  pointer-events: none;
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb::before {
  width: calc(var(--ocb-slant) + var(--ocb-h) * .58);
  /* .08 e não .19: com o corpo em cor SÓLIDA o véu não tem degradê por baixo
   * para se misturar — ele só clareia, e clarear o corpo é o que fazia o
   * rótulo branco sumir. */
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
[dir] .ocb::after {
  width: calc(var(--ocb-slant) + var(--ocb-h) * .045);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
}

[dir] .ocb:hover { filter: brightness(1.04); }
[dir] .ocb:active { filter: brightness(.96); transform: scale(.994); }
[dir] .ocb:focus-visible { outline: 2px solid #FFC24A; outline-offset: 3px; }

/* 🔴 O rótulo precisa de `z-index: 1`. Sem ele some: `::after` é pintado
 * depois, e entre irmãos posicionados sem z-index quem vem depois vence. */
[dir] .ocb__label {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: calc(var(--ocb-h) * var(--ocb-label-ratio));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .004em;
  white-space: nowrap;
}

[dir] .ocb__arrow {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  width: calc(var(--ocb-arrow) + var(--ocb-slant));
  display: grid;
  place-items: center;
  color: var(--ocb-arrow-color);
  background: var(--ocb-cell);
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb__arrow svg {
  display: block;
  width: calc(var(--ocb-h) * .28);
  height: calc(var(--ocb-h) * .28);
}

/* ── tamanhos ─────────────────────────────────────────────────────────── */

[dir] .ocb--g  { --ocb-h: 78px; }
[dir] .ocb--m  { --ocb-h: 56px; }
[dir] .ocb--p  { --ocb-h: 44px; }   /* piso mobile: alvo de toque */
[dir] .ocb--xp { --ocb-h: 34px; --ocb-label-ratio: .353; }   /* só desktop denso */

/* Largura total da coluna: mantém o ângulo, só estica o corpo. */
[dir] .ocb--block { display: flex; width: 100%; }

/* ── botão SEM a célula de seta ───────────────────────────────────────────
 *
 * 🔴 O padding do `.ocb` reserva `célula + respiro` à direita, e a célula vale
 * 0,846 × h. Um botão sem o `<span class="ocb__arrow">` dentro fica com esse
 * espaço VAZIO: num botão de 44px são 37px de nada colados ao rótulo, e ele
 * parece desalinhado sem que nada esteja errado no desenho.
 *
 * 🔑 A seta é para a ação PRINCIPAL. Num par de CTAs, num MÁX de campo, num
 * atalho de 25%, ela não diz nada que o rótulo já não diga. Quem não leva seta
 * leva esta classe, e o respiro volta a ser simétrico. */
[dir] .ocb--sem-seta {
  padding-right: calc(var(--ocb-h) * var(--ocb-pad-ratio));
}
[dir] .ocb--sem-seta > .ocb__arrow { display: none; }

/* ── paletas ──────────────────────────────────────────────────────────── */

[dir] .ocb--positive {
  --ocb-fill: var(--ocb-fill-positive);
  --ocb-cell: var(--ocb-cell-positive);
  --ocb-arrow-color: var(--ocb-arrow-positive);
}
[dir] .ocb--negative {
  --ocb-fill: var(--ocb-fill-negative);
  --ocb-cell: var(--ocb-cell-negative);
  --ocb-arrow-color: var(--ocb-arrow-negative);
}
[dir] .ocb--neutral {
  --ocb-fill: var(--ocb-fill-neutral);
  /* A célula acompanha: o mesmo cinza escurecido, com o fio de 1,5px sobre a
   * diagonal — não um véu preto por cima de uma cor lisa. */
  --ocb-cell: linear-gradient(90deg, rgba(220,226,236,.14) 0 1.5px, #2B2F35 1.5px);
  --ocb-arrow-color: #C3CAD4;
}

/* ── outline ──────────────────────────────────────────────────────────────
 * 🔑 O rim é GEOMETRIA, não `box-shadow`: um inset box-shadow é recortado
 * pelo `clip-path` e desaparece justamente nas DUAS DIAGONAIS — o contorno
 * ficaria só no topo e na base e a forma se dissolveria. O accent preenche o
 * elemento e o `::before`, com `inset: 1px` e o mesmo clip, carrega o
 * preenchimento: o accent sobra como faixa de 1px nas quatro arestas. */

[dir] .ocb--outline {
  background: color-mix(in oklab, var(--ocb-accent) 44%, transparent);
  box-shadow: none;
}
[dir] .ocb--outline::before {
  inset: 1px;
  width: auto;
  background:
    linear-gradient(90deg, rgba(255,165,31,.22), rgba(255,165,31,.06) 46%, rgba(255,165,31,.02) 100%),
    var(--ocb-surface);
}
[dir] .ocb--outline::after { display: none; }
[dir] .ocb--outline .ocb__label { color: #FFC24A; }
[dir] .ocb--outline .ocb__arrow {
  background: linear-gradient(90deg, rgba(255,165,31,.10), rgba(255,165,31,.04));
  color: #C4841F;
}

/* ── só seta (paginação, avançar/voltar) ──────────────────────────────── */

[dir] .ocb--icon {
  padding: 0;
  width: calc(var(--ocb-h) * 1.64);
}
[dir] .ocb--icon .ocb__arrow { display: none; }
[dir] .ocb--icon svg {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(var(--ocb-h) * .34);
  height: calc(var(--ocb-h) * .34);
  color: #3A2000;
}
[dir] .ocb--icon.ocb--outline svg { color: #C4841F; }

/* ── desativado ───────────────────────────────────────────────────────── */

[dir] .ocb:disabled,
[dir] .ocb[aria-disabled="true"] {
  --ocb-fill: var(--ocb-fill-disabled);
  --ocb-cell: linear-gradient(90deg, rgba(160,166,176,.10) 0 1.5px, #1A1B1E 1.5px);
  --ocb-arrow-color: #4C5158;
  cursor: not-allowed;
  box-shadow: none;
}
[dir] .ocb:disabled .ocb__label,
[dir] .ocb[aria-disabled="true"] .ocb__label { color: #878D97; }
[dir] .ocb:disabled::after,
[dir] .ocb[aria-disabled="true"]::after { display: none; }
[dir] .ocb:disabled:hover,
[dir] .ocb[aria-disabled="true"]:hover { filter: none; }

/* ── feito ────────────────────────────────────────────────────────────────
 * O verde de "deu certo", e ele SOBREVIVE ao `:disabled`. O cinza do
 * desativado é certo para um botão que ainda não dá para clicar e errado para
 * um que já foi: aqui o verde é o recibo. Mesma exceção que o modelo 1 abre
 * em `.oc-bt-bom:disabled`.
 *
 * 🔑 É modificador PRÓPRIO, não o `.ocb--positive`: um Long desativado tem de
 * parecer desativado, e sobrecarregar a paleta apagaria essa distinção. */

[dir] .ocb--feito,
[dir] .ocb--feito:disabled,
[dir] .ocb--feito[aria-disabled="true"] {
  --ocb-fill: var(--ocb-fill-positive);
  --ocb-cell: var(--ocb-cell-positive);
  --ocb-arrow-color: var(--ocb-arrow-positive);
  cursor: default;
}
[dir] .ocb--feito:disabled .ocb__label,
[dir] .ocb--feito[aria-disabled="true"] .ocb__label { color: #FFFFFF; }

/* ── carregando ───────────────────────────────────────────────────────── */

[dir] .ocb--loading { pointer-events: none; overflow: hidden; }
[dir] .ocb--loading .ocb__label { color: rgba(255,255,255,.86); }
[dir] .ocb--loading::after {
  width: 26%;
  clip-path: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  animation: ocbSweep 1.5s linear infinite;
}
@keyframes ocbSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(220%); }
}
@media (prefers-reduced-motion: reduce) {
  [dir] .ocb--loading::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Par dividido — duas ações opostas num bloco só
 * Três diagonais no MESMO ângulo: os dois cortes externos e o divisor, com
 * 3px de folga preta no divisor. Raio zero.
 * ══════════════════════════════════════════════════════════════════════════ */

[dir] .ocb-pair {
  --ocb-h: 66px;
  --ocb-slant: calc(var(--ocb-h) * var(--ocb-slant-ratio));
  --ocb-gap: 3px;

  position: relative;
  height: var(--ocb-h);
  background: #000000;
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb-pair--m { --ocb-h: 56px; }
[dir] .ocb-pair--s { --ocb-h: 48px; }

[dir] .ocb-pair__side {
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  width: calc(50% + var(--ocb-slant) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ocb-h) * .045);
  margin: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: filter .15s ease;
}
[dir] .ocb-pair__side:hover { filter: brightness(1.05); }
[dir] .ocb-pair__side:active { filter: brightness(.95); }
[dir] .ocb-pair__side:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -3px; }
/* Desativado (a ordem está indo): o handoff não desenha estado para o par, e
 * trocar as duas metades pelo cinza do `.ocb:disabled` apagaria a única cor
 * que diz de que LADO a ordem foi. Dessaturar e escurecer diz "trabalhando"
 * sem tirar a leitura de verde/vermelho. */
[dir] .ocb-pair__side:disabled,
[dir] .ocb-pair__side[aria-disabled="true"] {
  filter: saturate(.55) brightness(.78);
  cursor: not-allowed;
}
[dir] .ocb-pair__side:disabled:hover,
[dir] .ocb-pair__side[aria-disabled="true"]:hover { filter: saturate(.55) brightness(.78); }

[dir] .ocb-pair__side::before,
[dir] .ocb-pair__side::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  pointer-events: none;
}

/* Metade A — a borda de entrada é o corte externo esquerdo. */
[dir] .ocb-pair__side--a {
  left: 0;
  padding: 0 calc(var(--ocb-slant) / 2) 0 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.40), rgba(255,255,255,0) 62%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 62%) bottom / 100% 1px no-repeat,
    var(--ocb-fill-positive);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
[dir] .ocb-pair__side--a::before,
[dir] .ocb-pair__side--a::after {
  clip-path: polygon(var(--ocb-slant) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, 0 100%);
}
/* 🔴 Este véu cobria 40% da largura com branco a .15 e LAVAVA a cor: medido no
 * verde, ele clareava #009457 para perto de um pastel, e era metade da razão
 * pela qual o rótulo branco sumia. O wash existe para dar a entrada viva da
 * esquerda, e a .06 ele ainda dá — sem apagar a cor que o botão precisa
 * afirmar. */
[dir] .ocb-pair__side--a::before {
  width: calc(var(--ocb-slant) + 40%);
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
[dir] .ocb-pair__side--a::after {
  width: calc(var(--ocb-slant) + 3px);
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
}

/* Metade B — a borda de entrada é o divisor central. */
[dir] .ocb-pair__side--b {
  right: 0;
  padding: 0 0 0 calc(var(--ocb-slant) / 2);
  background:
    linear-gradient(90deg, rgba(255,255,255,.40), rgba(255,255,255,0) 62%) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08) 62%) bottom / 100% 1px no-repeat,
    var(--ocb-fill-negative);
  clip-path: polygon(calc(var(--ocb-slant) + var(--ocb-gap)) 0, 100% 0, 100% 100%, var(--ocb-gap) 100%);
}
[dir] .ocb-pair__side--b::before,
[dir] .ocb-pair__side--b::after {
  clip-path: polygon(calc(var(--ocb-slant) + var(--ocb-gap)) 0, 100% 0, calc(100% - var(--ocb-slant)) 100%, var(--ocb-gap) 100%);
}
[dir] .ocb-pair__side--b::before {
  width: calc(var(--ocb-slant) + var(--ocb-gap) + 40%);
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
[dir] .ocb-pair__side--b::after {
  width: calc(var(--ocb-slant) + var(--ocb-gap) + 3px);
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
}

[dir] .ocb-pair__label {
  position: relative;
  z-index: 1;
  font-size: calc(var(--ocb-h) * .19);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(255,255,255,.76);
}
[dir] .ocb-pair__value {
  position: relative;
  z-index: 1;
  font-size: calc(var(--ocb-h) * .333);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}

/* Variante sem preço — o par do terminal e do mobile.
 *
 * 🔑 `.39 × h` (dono, 10/09/2026: "quero a escrita maior tbm"). Num par de
 * 48px são 18,7px em peso 700 — e o número não é de gosto: 18,66px em negrito
 * é o PISO de "texto grande", onde a régua de contraste cai de 4,5:1 para
 * 3:1. O verde renderizado dá 3,6:1; a 17px ele ficaria abaixo da régua que
 * lhe cabe, a 18,7 fica acima com folga. Tamanho e cor se resolvem juntos. */
[dir] .ocb-pair--label-only .ocb-pair__label {
  font-size: calc(var(--ocb-h) * .39);
  font-weight: 700;
  letter-spacing: .01em;
  color: #FFFFFF;
}

/* Par EMPILHADO (Long em cima, Short embaixo): o gap é 0.23 × h. */
[dir] .ocb-coluna {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ocb-col-h, 56px) * .23);
}
[dir] .ocb-coluna--p { --ocb-col-h: 44px; }
[dir] .ocb-coluna--xp { --ocb-col-h: 34px; }

/* ── carteira.css ── */
/* Os painéis que o carteira.js monta dentro da tela de ativos.
 *
 * A captura não trouxe tabela de saldo nem cartão de total — veio deslogada,
 * com o estado vazio. Estes painéis são markup novo, então precisam parecer
 * parte da tela e não um enxerto.
 *
 * ## Por que TODO seletor aqui é escopado
 *
 * 🔑 O reset da captura prefixa cada regra com `[dir]`: as declarações dela
* são `[dir] a { background: transparent; padding: 0 }`. Isso é elemento +
 * atributo — especificidade (0,1,1) —, que **ganha de qualquer classe
 * única**. Escrevi `.oc-botao` com fundo laranja e o botão saiu transparente
 * e sem padding, com a regra presente e correta na folha.
 *
 * Nenhum `!important` estava envolvido, e nenhuma ordem de folha resolveria:
 * classe pura perde de (0,1,1) em qualquer posição do cascade.
 *
 * `[data-oc-carteira] .oc-botao` dá (0,2,0) e passa na frente. O escopo
 * ainda impede o caminho inverso — estas regras não vazam para os
 * componentes da captura, que dividem nomes genéricos com meio mundo.
 *
 * ## Cores
 *
 * Saem dos tokens da PRÓPRIA captura (`--bx-bg-*`, `--bx-line-*`): o tema
 * claro/escuro dela já os inverte, e herdar o token é o que faz o painel
 * virar junto. Cor fixa ficaria certa num tema e ilegível no outro.
 *
 * O fallback existe porque o token pode não estar definido em toda página:
 * sem ele o painel nasceria transparente sobre fundo transparente.
 */

/* 🔑 O `hidden` da captura não desliga nada sozinho.
 *
 * `.experimental-assets-wrapper` recebe `display:flex` de uma regra com
 * especificidade `[dir]`, e ela ganha do `[hidden]{display:none}` do
 * navegador. Medido: atributo `hidden` presente, `display` computado `flex`.
 * O elemento continuava na tela com a marca de escondido.
 *
 * É o mesmo defeito que deixou o campo de 2FA aparecendo no login. O
 * `!important` aqui não é atalho: `hidden` é contrato do HTML, e folha de
 * terceiro não pode revogá-lo em silêncio. */
[data-oc-carteira] [hidden] {
  display: none !important;
}

/* 🔑 Cor explícita, nunca herdada.
 *
 * O `body` desta captura computa `color: rgb(0,0,0)` — preto — e a página é
 * escura. Cada componente dela define a própria cor (o subtítulo do depósito
 * é branco). Quem herda nasce preto no escuro, invisível.
 *
 * `--text-1` é o token da própria captura, então acompanha o tema dela. */
/* A cor vai na RAIZ, não nos painéis.
 *
 * Ela já estava em `.oc-painel` — e a barra de ações, que fica FORA dos
 * painéis, saiu com texto preto sobre fundo escuro: dois botões que pareciam
 * vazios. O texto estava lá o tempo todo.
 *
 * 🔑 Numa árvore onde o `body` computa preto, cada elemento que eu acrescento
 * precisa herdar de um ancestral MEU. Pôr a cor no filho cobre o filho;
 * pôr na raiz cobre tudo o que eu vier a acrescentar depois — inclusive o
 * que eu ainda não escrevi. */
[data-oc-carteira] {
  color: var(--text-1, #f4f4f5);
}

[data-oc-carteira] .oc-painel {
  padding: 4px 0 32px;
}

[data-oc-carteira] .oc-painel[hidden] {
  display: none;
}

/* ── cartão de total ─────────────────────────────────────────────────── */

[data-oc-carteira] .oc-total {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.22));
  border-radius: 12px;
  background: var(--bx-bg-two, rgba(128, 128, 128, 0.06));
}

[data-oc-carteira] .oc-total-rot {
  font-size: 13px;
  opacity: 0.7;
}

[data-oc-carteira] .oc-total-num {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Dígito de largura fixa: sem isto o total treme a cada atualização e a
     coluna de valores da tabela deixa de alinhar na vírgula. */
  font-variant-numeric: tabular-nums;
}

/* ── grade de contas ─────────────────────────────────────────────────── */

[data-oc-carteira] .oc-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

[data-oc-carteira] .oc-grade .oc-total-num {
  font-size: 19px;
}

/* ── tabela ──────────────────────────────────────────────────────────── */

/* O container rola sozinho: sem isto a tabela larga empurra a PÁGINA para o
   lado, e o rail sai da tela junto. */
/* 🔴 Esta regra tinha `display: block` — e `display: block` num `<table>`
 * desliga o layout de tabela: as colunas param de se distribuir e os textos
 * encostam uns nos outros. Só não aparecia porque a tabela vivia numa coluna
 * estreita, onde tudo ficava apertado de qualquer jeito. Com o rail fora e a
 * largura inteira, virou `ATIVODISPONÍVELEM USO` numa linha só.
 *
 * 🔑 Quem rola é o INVÓLUCRO (`.oc-tabela-rolo`), não a tabela. Tabela que
 * rola a si mesma paga com o alinhamento das colunas. */
[data-oc-carteira] .oc-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: table;
  table-layout: auto;
}

[data-oc-carteira] .oc-tabela-rolo {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

[dir] [data-oc-carteira] .oc-tabela-rolo { margin-top: 20px; }

.oc-tabela th,
[data-oc-carteira] .oc-tabela td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.16));
}

[data-oc-carteira] .oc-tabela th {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

[data-oc-carteira] .oc-tabela .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[data-oc-carteira] .oc-tabela tbody tr:last-child td {
  border-bottom: 0;
}

/* ── avisos e ação ───────────────────────────────────────────────────── */

[data-oc-carteira] .oc-aviso {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.72;
  max-width: 62ch;
}

[data-oc-carteira] .oc-botao {
  margin-top: 14px;
}


[data-oc-carteira] .oc-botao:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* O rail da captura não tinha estado de foco: quem navega por teclado não
   via onde estava. */
[data-oc-secao]:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: -2px;
  border-radius: 8px;
}

@media (max-width: 720px) {
[data-oc-carteira] .oc-total-num { font-size: 22px; }
[data-oc-carteira] .oc-grade { grid-template-columns: 1fr 1fr; }
}

/* ── depósito ────────────────────────────────────────────────────────── */

[data-oc-carteira] .oc-secao-titulo {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-oc-carteira] .oc-dep-seletores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-width: 620px;
}

[data-oc-carteira] .oc-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-oc-carteira] .oc-campo-rot {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* `appearance:none` + seta própria: o select nativo herda o fundo branco do
   sistema em alguns navegadores, e sobre o tema escuro isso vira texto claro
   em caixa clara. */
[data-oc-carteira] .oc-select {
  appearance: none;
  width: 100%;
  padding: 11px 38px 11px 14px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
  border-radius: 10px;
  background: var(--bx-bg-two, rgba(128, 128, 128, 0.08));
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 51%, calc(100% - 14px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

[data-oc-carteira] .oc-select:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 1px;
}

[data-oc-carteira] .oc-dep-endereco {
  margin-top: 26px;
  max-width: 620px;
}

/* O endereço é o dado mais importante da tela. Monoespaçado e quebrando em
   qualquer caractere: fonte proporcional embaralha 0/O e 1/l, e sem o
   `anywhere` um endereço longo estoura a caixa em vez de quebrar. */
[data-oc-carteira] .oc-endereco {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.28));
  border-radius: 10px;
  background: var(--bx-bg-two, rgba(128, 128, 128, 0.06));
}

[data-oc-carteira] .oc-endereco-txt {
  flex: 1;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}

[data-oc-carteira] .oc-copiar {
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--bx-line-three, rgba(128, 128, 128, 0.4));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

[data-oc-carteira] .oc-copiar:hover {
  border-color: #f7931a;
  color: #f7931a;
}

[data-oc-carteira] .oc-qr {
  width: 176px;
  margin-top: 18px;
  padding: 12px;
  border-radius: 10px;
  /* Fundo branco fixo, e é de propósito: leitor de QR espera módulo escuro
     sobre claro. Sobre o tema escuro o código simplesmente não lê. */
  background: #ffffff;
}

[data-oc-carteira] .oc-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* O aviso de rede não é decoração: é o que separa depósito creditado de
   dinheiro perdido. Fica com destaque próprio, não diluído entre os outros. */
[data-oc-carteira] .oc-alerta {
  padding: 12px 14px;
  border: 1px solid rgba(247, 147, 26, 0.42);
  border-radius: 10px;
  background: rgba(247, 147, 26, 0.08);
  color: inherit;
  opacity: 1;
}

[data-oc-carteira] .oc-erro {
  color: #ff4d4f;
  opacity: 1;
}

/* ── abas do depósito e PIX ──────────────────────────────────────────── */

[data-oc-carteira] .oc-abas {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  padding: 4px;
  border-radius: 10px;
  background: var(--bx-bg-two, rgba(128, 128, 128, 0.08));
  width: fit-content;
}

[data-oc-carteira] .oc-aba {
  padding: 8px 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.62;
  cursor: pointer;
}

[data-oc-carteira] .oc-aba.is-active {
  background: var(--bx-bg-four, rgba(128, 128, 128, 0.2));
  opacity: 1;
}

[data-oc-carteira] .oc-aba:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 1px;
}

[data-oc-carteira] .oc-aba-corpo[hidden] {
  display: none !important;
}

[data-oc-carteira] .oc-input {
  width: 100%;
  max-width: 320px;
  padding: 11px 14px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
  border-radius: 10px;
  background: var(--bx-bg-two, rgba(128, 128, 128, 0.08));
  color: inherit;
  font: inherit;
  font-size: 15px;
  /* Dígito de largura fixa: valor e CPF são lidos algarismo a algarismo, e
     fonte proporcional embaralha 1 com l e 0 com O. */
  font-variant-numeric: tabular-nums;
}

[data-oc-carteira] .oc-input:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 1px;
}

[data-oc-carteira] .oc-pix-cpf,
[data-oc-carteira] .oc-pix-valor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  max-width: 620px;
}

[data-oc-carteira] .oc-sucesso {
  padding: 12px 14px;
  border: 1px solid rgba(74, 168, 110, 0.45);
  border-radius: 10px;
  background: rgba(74, 168, 110, 0.1);
  color: inherit;
  opacity: 1;
}

/* O código PIX é bem mais longo que um endereço: quebra em várias linhas e a
   caixa precisa acompanhar em vez de rolar para o lado. */
[data-oc-carteira] .oc-pix-valor + .oc-endereco .oc-endereco-txt,
[data-oc-carteira] .oc-endereco .oc-endereco-txt {
  max-height: 7.5em;
  overflow-y: auto;
}

/* ── ações e saque ───────────────────────────────────────────────────── */

[data-oc-carteira] .oc-acoes {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
}

/* 30/08/2026: as três ações, os links por linha e o histórico são o botão
 * padrão do site (`botao.css`, corte diagonal). Fundo, borda, raio e estado
 * desligado vêm de lá; aqui só tamanho e letra. Um `background` aqui pintaria
 * um retângulo ATRÁS do corte. */
[data-oc-carteira] .oc-acao { font-size: 14px; }

[data-oc-carteira] .oc-acao:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
}

[data-oc-carteira] .oc-saque-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
  max-width: 680px;
  align-items: start;
}

[data-oc-carteira] .oc-campo-largo,
[data-oc-carteira] .oc-saque-form > .oc-aviso,
[data-oc-carteira] .oc-saque-form > .oc-botao {
  grid-column: 1 / -1;
}

[data-oc-carteira] .oc-input-largo {
  max-width: none;
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-oc-carteira] .oc-valor-linha {
  display: flex;
  gap: 8px;
}

/* ── o anteparo antes de o dinheiro sair ─────────────────────────────── */

/* `position: fixed` e z-index alto de propósito: numa das versões da tela do
   app o popup do código perdeu o `fixed` e apareceu EMPILHADO NO FLUXO, no
   último passo antes de o saque concluir. */
[data-oc-carteira] .oc-modal-fundo,
.oc-modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
}

.oc-modal {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
  border-radius: 14px;
  background: var(--bx-bg-one, #16171b);
  /* Cor explícita: o body da captura computa preto, e esta caixa nasce fora
     de `[data-oc-carteira]`, no fim do body. */
  color: var(--text-1, #f4f4f5);
}

.oc-modal-titulo {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
}

.oc-modal .oc-input {
  max-width: none;
}

.oc-codigo {
  letter-spacing: 0.34em;
  text-align: center;
  font-size: 20px;
}

.oc-modal-acoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}

.oc-modal-acoes .oc-botao {
  margin-top: 0;
}

/* ── converter ───────────────────────────────────────────────────────── */

[data-oc-carteira] .oc-convert-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 16px;
  max-width: 640px;
  align-items: start;
}

[data-oc-carteira] .oc-convert-form > .oc-aviso,
[data-oc-carteira] .oc-convert-form > .oc-botao {
  grid-column: 1 / -1;
}

[data-oc-carteira] .oc-cotacao {
  max-width: 640px;
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.24));
  border-radius: 12px;
  background: var(--bx-bg-two, rgba(128, 128, 128, 0.06));
}

[data-oc-carteira] .oc-cotacao[hidden] {
  display: none !important;
}

[data-oc-carteira] .oc-cotacao .oc-total {
  padding: 0;
  border: 0;
  background: none;
}

[data-oc-carteira] .oc-convert-hist {
  margin-top: 34px;
  max-width: 640px;
}

/* ── segurança ───────────────────────────────────────────────────────── */

[data-oc-carteira] .oc-seg-cartao {
  max-width: 660px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.24));
  border-radius: 12px;
}

[data-oc-carteira] .oc-seg-titulo {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

[data-oc-carteira] .oc-seg-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

[data-oc-carteira] .oc-seg-linha .oc-botao,
[data-oc-carteira] .oc-seg-cartao > .oc-botao {
  margin-top: 0;
}

[data-oc-carteira] .oc-seg-cartao > .oc-botao {
  margin-top: 16px;
}

[data-oc-carteira] .oc-seg-area {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.2));
}

[data-oc-carteira] .oc-seg-area .oc-campo {
  margin-top: 12px;
  max-width: 320px;
}

/* O selo diz o estado em PALAVRA, não só em cor: quem não distingue as
   cores precisa ler "Ligada" ou "Desligada" — e este é o estado que decide
   se um saque pede código. */
[data-oc-carteira] .oc-selo {
  padding: 4px 12px;
  border: 1px solid var(--bx-line-three, rgba(128, 128, 128, 0.4));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.75;
}

[data-oc-carteira] .oc-selo-on {
  border-color: rgba(74, 168, 110, 0.5);
  background: rgba(74, 168, 110, 0.12);
  opacity: 1;
}

[data-oc-carteira] .oc-caixa {
  width: 18px;
  height: 18px;
  accent-color: #f7931a;
  cursor: pointer;
}

[data-oc-carteira] .oc-lista {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
}

/* ── indicações ──────────────────────────────────────────────────────── */

[data-oc-carteira] .oc-afiliado .oc-grade {
  max-width: 720px;
  margin-top: 22px;
}

[data-oc-carteira] .oc-afiliado .oc-endereco,
[data-oc-carteira] .oc-afiliado > .oc-aviso {
  max-width: 720px;
}

[data-oc-carteira] .oc-afiliado-lista {
  margin-top: 30px;
  max-width: 720px;
}

[data-oc-carteira] .oc-afiliado-links {
  margin-top: 34px;
  max-width: 720px;
}

[data-oc-carteira] .oc-link-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  align-items: start;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.2));
}

[data-oc-carteira] .oc-link-form > .oc-aviso,
[data-oc-carteira] .oc-link-form > .oc-botao {
  grid-column: 1 / -1;
}

/* ── Conta (perfil) ──────────────────────────────────────────────────────
 * `/profile` veio da captura como casca — menu, rodapé, zero campo — e a tela
 * só existia no front-go. Esta é a seção que a substitui: foto, apelido
 * editável, UID, e-mail com o selo de verificação e a data de entrada.
 *
 * 🔑 As regras levam DOIS níveis de seletor: a folha da origem traz um reset
 * `[dir] *` com a mesma especificidade de uma classe, e vem depois na cascata.
 * Com seletor simples, `margin` vira `0px` sem erro nenhum. */
.oc-painel .oc-perfil-titulo { margin: 0 0 18px; font-size: 20px; font-weight: 600; }
.oc-painel .oc-perfil-caixa { max-width: 560px; }

.oc-painel .oc-perfil-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.oc-painel .oc-perfil-foto {
  width: 64px; height: 64px; flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(247, 147, 26, .16);
  color: var(--offcode-brand, #f7931a);
  font-size: 22px; font-weight: 700;
  overflow: hidden;
}
/* `display:block` e `aspect-ratio` juntos: como filho de um flex container, a
 * imagem herda alinhamento e pode sair achatada mesmo com width/height em
 * 100%. O `aspect-ratio` a prende no quadrado antes de o `cover` recortar. */
.oc-painel .oc-perfil-foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
.oc-painel .oc-perfil-foto-lado { display: flex; flex-direction: column; gap: 4px; }
.oc-painel .oc-perfil-foto-btn {
  align-self: flex-start;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(185, 181, 170, .28);
  background: none; color: #f5f3ee; font: inherit; font-size: 13px; cursor: pointer;
}
.oc-painel .oc-perfil-foto-btn:hover { border-color: var(--offcode-brand, #f7931a); }
.oc-painel .oc-perfil-nota { font-size: 11.5px; color: #7e796e; }

.oc-painel .oc-perfil-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(185, 181, 170, .12);
  font-size: 13.5px;
}
.oc-painel .oc-perfil-rot { flex: 0 0 132px; color: #7e796e; }
.oc-painel .oc-perfil-val { flex: 1; color: #f5f3ee; font-weight: 500; word-break: break-all; }
.oc-painel .oc-perfil-campo {
  flex: 1; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(185, 181, 170, .28);
  background: #0d0d0f; color: #f5f3ee; font: inherit; font-size: 13.5px;
}
.oc-painel .oc-perfil-editar,
.oc-painel .oc-perfil-salvar,
.oc-painel .oc-perfil-cancelar {
  flex: none; padding: 6px 13px; border-radius: 999px;
  font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid rgba(185, 181, 170, .28); background: none; color: #b9b5aa;
}
.oc-painel .oc-perfil-salvar {
  border: 0; background: var(--offcode-brand, #f7931a); color: #0d0d0f; font-weight: 600;
}
.oc-painel .oc-perfil-selo {
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
}
.oc-painel .oc-perfil-selo.oc-bom { background: rgba(28, 193, 102, .16); color: #1cc166; }
.oc-painel .oc-perfil-selo.oc-pendente { background: rgba(247, 147, 26, .16); color: var(--offcode-brand, #f7931a); }

.oc-painel .oc-perfil-aviso { margin: 16px 0 0; font-size: 13px; color: #1cc166; }
.oc-painel .oc-perfil-aviso.oc-ruim { color: #ff6b6b; }

/* ═══════════════════════════════════════════════════════════════════════
   A CARTEIRA, REFEITA — fundo preto do site e cartões (dono, 25/08/2026)
   ═══════════════════════════════════════════════════════════════════════

   Antes daqui a carteira era um "instrumento": papel milimetrado atrás,
   traço na frente, contas como células de uma régua de 1px. O dono pediu o
   contrário — *"tire esse fundo quadriculado, quero fundo preto estilo todo
   do site atual, e bonito mais organizado"*.

   🔑 O chão é o MESMO do site, medido, não escolhido: `--background-one` é
   `#020202` e é o que o `body` computa em toda página. A carteira pintava
   `#050507` sobre ele — um retângulo mais claro que a página, com uma grade
   por cima. Duas discordâncias visíveis a olho nu numa tela só.

   ## A gramática vem do que já foi ao ar

   Raio 16, `1px solid var(--line-mango)`, fundo `var(--container-four)`,
   pílula 999 para ação: é a linguagem dos capítulos da home, que já está no
   ar e aprovada. Nada inventado aqui.

   ## Três blocos, nesta ordem

       ┌ topo ─────────────────────────────────┐
       │ TOTAL ESTIMADO          [ações]       │
       │ US$ 129,32                            │
       │ ───────── traço 24h ───────────────── │
       └───────────────────────────────────────┘
       [fundos] [futuros] [bots] [copy] [movimentos]
       ┌ lista da conta escolhida ─────────────┐

   O topo não troca. Os cartões de conta são a navegação (as ações moraram
   soltas entre eles e a lista por uma rodada — uma faixa de pílulas sem
   dono, entre dois blocos que tinham). Agora moram no cartão do total,
   ao lado do número em que se age.

   ## Metade das regras mora em `[dir]`

   A folha da ORIGEM reseta as direcionais em (0,1,1), que vence classe
   sozinha (0,1,0). `[dir] [data-oc-carteira] .x` é (0,2,0) e ganha.
*/

/* ⚠️ Especificidade MEDIDA, não contada de cabeça: a origem pinta este nó com
 * `[dir] .asset-panel .asset-content-container[data-v-0ed1c443]` (0,4,0). O
 * atributo repetido quatro vezes é (0,5,0) e passa sem `!important` — que
 * esconderia a disputa em vez de resolvê-la. Percorrer `document.styleSheets`
 * e perguntar `elemento.matches(regra.selectorText)` diz quem casa; contar de
 * cabeça custou duas rodadas na versão anterior desta folha. */
[dir] [data-oc-carteira][data-oc-carteira][data-oc-carteira][data-oc-carteira] {
  background: var(--background-one, #020202);
  background-image: none;
  width: 100%;
  /* 1.100px de coluna, centrada (desenho de 28/08/2026). A tela ia de borda a
     borda: num monitor de 2.560px a linha de um ativo tinha 2,4 m de vão entre
     o ticker e o valor, e o olho perdia a linha no caminho. */
  /* 🔴 1100px numa tela de 1938 deixava 838px de vazio — o conteúdo ocupava
     57% da largura enquanto a barra de navegação ia de ponta a ponta, e o
     desencontro entre os dois é o que lia como "proporção estranha" (dono,
     29/08/2026, comparando com a BingX). 1440px é largo o bastante para a
     tela grande e ainda segura a tabela de virar linhas ralas. */
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 64px 32px 96px;
  box-sizing: border-box;
  flex: 1 1 auto;
}

@media (max-width: 720px) {
  [dir] [data-oc-carteira][data-oc-carteira][data-oc-carteira][data-oc-carteira] {
    padding: 32px 18px 64px;
  }
}

/* O rail de 240px da origem sai: os cartões de conta são a navegação. */
[dir] .asset-panel .asset-menu { display: none; }

[data-oc-carteira] {
  --oc-cartao: var(--container-four, rgba(42, 44, 44, .4));
  --oc-linha: var(--line-mango, #232323);
  --oc-marca: var(--offcode-brand, #f7931a);
}

/* ── o topo: o saldo, a variação de 24h e as três ações ──────────────
 *
 * Desenho de 28/08/2026. O número grande e o que fazer com ele na MESMA
 * linha, alinhados pela base — as ações deixam de morar embaixo do número e
 * passam a ficar do lado dele, onde sobra largura num container de 1.100px.
 *
 * O cartão que embrulhava tudo saiu: fundo, borda e raio pintavam uma moldura
 * em volta de um bloco que não é um cartão, é a dobra da página.
 */
/* 🔑 DUAS COLUNAS (dono, 28/08/2026): o saldo à esquerda, as contas à direita.
 *
 * Elas estavam embaixo, e ali a dobra ficava com 500px de nada do lado direito
 * do número enquanto a comparação entre contas — que é a segunda pergunta de
 * quem abre a carteira — só aparecia depois de rolar.
 *
 * A esquerda leva tudo o que fala do TOTAL (rótulo, número, variação, as três
 * ações e a barra de alocação); a direita leva a repartição por conta. As
 * ações descem para debaixo do número: a direita deixou de ser delas.
 *
 * `align-items: start` e não `end`: as duas colunas têm alturas diferentes e
 * alinhá-las pela base deixaria o rótulo "SALDO POR CONTA" flutuando no meio
 * do vão. */
.oc-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
  align-items: start;
  gap: 56px;
}

[dir] [data-oc-carteira] .oc-topo {
  padding: 0;
  border: 0;
  background: none;
}

.oc-topo-esq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* ── o rótulo e o interruptor de ocultar ─────────────────────────────── */

.oc-saldo-rot {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--foreground-three, #757575);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1px;
}

/* Botão de texto sem moldura. É o mesmo objeto nos dois lugares em que a tela
   tem um: ocultar saldos e ocultar saldos pequenos. */
[data-oc-carteira] .oc-alternar {
  color: #4a4a4a;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s ease;
  white-space: nowrap;
}

[dir] [data-oc-carteira] .oc-alternar {
  background: none;
  border: 0;
  padding: 0;
}

[data-oc-carteira] .oc-alternar:hover { color: #b8b8b8; }

[data-oc-carteira] .oc-alternar:focus-visible {
  outline: 2px solid var(--oc-marca);
  outline-offset: 3px;
}

/* ── o número ────────────────────────────────────────────────────────── */

/* Três tamanhos numa linha só, alinhados pela BASE: o cifrão e os centavos
   pequenos, os inteiros grandes. `letter-spacing: -3px` é do desenho e é o
   que faz um número de nove dígitos caber sem encolher a fonte. */
.oc-saldo-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -1.8px;
  min-width: 0;
}

.oc-saldo-cifrao {
  color: #4f4f4f;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
}

[dir] [data-oc-carteira] .oc-saldo-cifrao { margin-right: 8px; }

/* ⚠️ A PROPORÇÃO entre os três tamanhos é o desenho; o valor absoluto não é.
   62px era quase o dobro do que a BingX usa no mesmo lugar, e o total gritava
   sobre uma tabela de 13px. 40/21 guarda a mesma razão (1,9×) num tamanho que
   convive com o resto da página. */
.oc-saldo-int {
  font-size: 40px;
  font-weight: 500;
  line-height: .95;
  color: var(--foreground-one, #fff);
  /* O número não quebra: um total de nove dígitos partido ao meio deixa de
     ser um número e vira dois. Em tela estreita ele encolhe (ver a consulta
     de mídia lá embaixo). */
  white-space: nowrap;
}

.oc-saldo-cent { color: #636363; font-size: 21px; font-weight: 400; }

.oc-saldo-oculto {
  font-size: 40px;
  font-weight: 500;
  line-height: .95;
  letter-spacing: 2px;
  color: #4f4f4f;
}

/* O til avisa que a soma está POR BAIXO — ativo sem cotação fica de fora. */
.oc-saldo-aprox {
  color: var(--foreground-three, #757575);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
}

[dir] [data-oc-carteira] .oc-saldo-aprox { margin-right: 4px; }

/* ── o chip de 24h ───────────────────────────────────────────────────── */

.oc-saldo-24 {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.oc-chip24 {
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  white-space: pre;
}

/* As cores de alta e baixa do desenho. Não são as do mercado (`--rise-color`
   e `--fall-color`, que pintam livro e velas): sobre um fundo translúcido o
   desenho pede um verde e um vermelho mais baixos, senão o chip vira o
   elemento mais forte da dobra e disputa com o número. */
[dir] [data-oc-carteira] .oc-chip24 { padding: 5px 10px; border: 0; }

[dir] [data-oc-carteira] .oc-chip24.oc-sobe { background: rgba(63, 166, 106, .11); }
[data-oc-carteira] .oc-chip24.oc-sobe { color: #4cb37b; }

[dir] [data-oc-carteira] .oc-chip24.oc-cai { background: rgba(229, 83, 75, .11); }
[data-oc-carteira] .oc-chip24.oc-cai { color: #e5675f; }

.oc-saldo-24-rot { color: #545454; font-size: 12.5px; }

/* ── as três ações ───────────────────────────────────────────────────── */

/* 30/08/2026: os três COLADOS numa faixa só — a cadeia do cabeçalho
 * (`botao.css`, `.oc-bt-cadeia`): Depositar é a ponta esquerda inclinada,
 * Sacar o paralelogramo do meio, Converter a ponta direita reta. Altura e
 * cantos vêm daqui pelas variáveis da cadeia; o respiro de 3px é a margem
 * entre os segmentos, não `gap`. */
[data-oc-carteira] .oc-acoes {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

[dir] [data-oc-carteira] .oc-acoes { --cadeia-h: 44px; --cadeia-raio: 5px; margin: 10px 0 0; }

/* Caixa normal, não versalete: `DEPOSITAR` em caixa alta ao lado de um número
   de 62px lê-se como aviso, não como ação. Depositar é a ação primária (laranja):
   é a única que não depende de já haver saldo. */
[data-oc-carteira] .oc-acao { font-size: 13.5px; white-space: nowrap; }
/* O rótulo centrado no segmento: na metade da altura a borda visual coincide
 * com a caixa, então folgas iguais = texto no centro do paralelogramo. */
[dir] [data-oc-carteira] .oc-acao { --cadeia-pad-esq: 20px; --cadeia-pad-dir: 20px; }
[dir] [data-oc-carteira] .oc-acao.oc-bt-cadeia-meio { --cadeia-pad-esq: 18px; --cadeia-pad-dir: 18px; }

[data-oc-carteira] .oc-acao:focus-visible {
  outline: 2px solid var(--oc-marca);
  outline-offset: 2px;
}

/* ── a barra de alocação ─────────────────────────────────────────────
 *
 * Cinco pixels de altura respondendo "estou concentrado demais?" sem obrigar
 * ninguém a comparar seis números. Ela só existe quando a soma está COMPLETA
 * — com um ativo sem cotação de fora, as fatias somariam 100% de um total que
 * não é o total (ver `fatiasDe` no carteira.js).
 */
.oc-aloc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Dentro da coluna agora: sem isto a barra herda a largura do conteúdo
     mais largo do flex e encolhe. */
  align-self: stretch;
}

[dir] [data-oc-carteira] .oc-aloc { margin-top: 34px; }

.oc-aloc-trilho { display: flex; height: 5px; gap: 3px; }

.oc-aloc-seg { border-radius: 3px; min-width: 2px; }

.oc-aloc-legenda { display: flex; gap: 22px; flex-wrap: wrap; }

.oc-aloc-item { display: flex; align-items: center; gap: 7px; }

.oc-aloc-cor { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 2px; }

.oc-aloc-tick { font-size: 12px; color: #9e9e9e; font-weight: 500; }

.oc-aloc-pct {
  font-size: 12px;
  color: #545454;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── as barrinhas: quanto há em cada conta ───────────────────────────────
 *
 * 🔴 Estas classes chamavam-se `.oc-barra*`. `.oc-barra` JÁ EXISTE neste
 * site: é a barra de navegação do topo, `<header class="oc-b oc-barra">`, que
 * o `poe_barra.py` põe em todas as 861 páginas. As minhas regras estavam
 * presas a `[data-oc-carteira]` e por isso não pintavam o cabeçalho — mas
 * `.oc-conta-linha:focus-visible`, escrita sem o ancestral, pintava; e
 * qualquer `querySelector('.oc-barra')` passava a devolver o cabeçalho como
 * primeiro resultado.
 *
 * 🔑 Prefixo próprio não basta: `oc-` é meu em toda parte, e a colisão foi
 * DENTRO do meu próprio espaço de nomes. Antes de batizar um bloco novo,
 * procurar o nome no que já está no ar.
 *
 * Entraram no lugar do gráfico de 24h e dos cinco cartões de conta.
 *
 * 🔑 O trilho aparece SEMPRE, o preenchimento só quando há proporção. Conta
 * zerada mostra o trilho vazio; conta que não respondeu mostra `—` e trilho
 * vazio também — a diferença está no valor, que é onde ela pode ser dita sem
 * ambiguidade. Uma barra mínima "para não ficar vazio" seria dinheiro
 * desenhado onde não há.
 *
 * A linha inteira é o alvo de clique: 100% de largura, e mais alvo do que os
 * cartões tinham ocupando um terço do espaço.
 */

[data-oc-carteira] .oc-contas { display: flex; flex-direction: column; gap: 2px; }

/* As contas voltaram a ser uma FAIXA embaixo, e não a coluna da direita: no
   desenho de 28/08 a direita do topo é das três ações. O filete volta a ser
   horizontal — um traço vertical aqui cortaria a largura toda. */
/* Coluna da direita: o filete que a separa do saldo é VERTICAL. Um traço
   horizontal aqui cortaria a coluna errada. */
[dir] [data-oc-carteira] .oc-contas {
  margin: 0;
  padding: 0 0 0 40px;
  border-left: 1px solid #1d1d1d;
}

[data-oc-carteira] .oc-contas-rot {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
}

[dir] [data-oc-carteira] .oc-contas-rot { margin-bottom: 12px; }

/* 🔴 A barrinha ocupava a largura inteira do cartão — 950px de trilho, que
 * lido de longe é um filete separador, não uma medida. E a linha gastava 52px
 * de altura para dizer dois números.
 *
 * 🔑 Barra pequena, na MESMA linha do nome e do valor: 180px é largura de
 * sobra para comparar cinco proporções, e a linha cai para 38px. */
[data-oc-carteira] .oc-conta-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border-radius: 10px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .18s ease;
}

[dir] [data-oc-carteira] .oc-conta-linha { padding: 10px 12px; border: 0; }
[dir] [data-oc-carteira] .oc-conta-linha:hover { background: rgba(255, 255, 255, .045); }

/* A conta escolhida: fundo da marca e o nome em laranja. A barra em si NÃO
   muda de cor — ela diz quanto há, e essa leitura tem de valer igual em todas
   as linhas para as cinco poderem ser comparadas de relance. */
[dir] [data-oc-carteira] .oc-conta-linha[aria-current="true"] { background: rgba(247, 147, 26, .10); }
[data-oc-carteira] .oc-conta-linha[aria-current="true"] .oc-conta-nome { color: var(--oc-marca); }

.oc-conta-linha:focus-visible { outline: 2px solid var(--oc-marca); outline-offset: -2px; }

/* O nome tem largura fixa: sem ela as cinco barras começariam em pontos
   diferentes, e barra que não parte do mesmo lugar não se compara. */
[data-oc-carteira] .oc-conta-nome {
  flex: 0 0 132px;
  width: 132px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
  transition: color .18s ease;
}

[data-oc-carteira] .oc-conta-val {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-one, #fff);
  white-space: nowrap;
}

[data-oc-carteira] .oc-conta-trilho,
[data-oc-carteira] .oc-conta-vago {
  display: block;
  flex: 0 0 180px;
  width: 180px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

/* Movimentos é contagem, não saldo: o espaço do trilho fica RESERVADO e
   vazio, para o valor da linha continuar alinhado com os outros quatro. */
[data-oc-carteira] .oc-conta-vago { background: none; }

[data-oc-carteira] .oc-conta-cheio {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--oc-marca);
  transition: width .4s ease;
}

/* ── grade de cartões (agora só o painel de Indicações usa) ──────────────
 *
 * Os cinco cartões de conta que moravam aqui viraram as barrinhas do topo. A
 * classe fica porque `desenhaAfiliado` monta os quatro números da rede com
 * ela — apagá-la deixaria aquele painel cru.
 */
[data-oc-carteira] .oc-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: 10px;
  background: none;
}

[dir] [data-oc-carteira] .oc-grade { margin: 14px 0 0; }

[data-oc-carteira] .oc-grade .oc-total {
  gap: 7px;
  border-radius: 14px;
  background: var(--oc-cartao);
  min-height: 84px;
  justify-content: center;
}

[dir] [data-oc-carteira] .oc-grade .oc-total {
  padding: 15px 16px;
  border: 1px solid var(--oc-linha);
}

[data-oc-carteira] .oc-grade .oc-total-rot {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
}

[data-oc-carteira] .oc-grade .oc-total-num {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--foreground-one, #fff);
}

/* ── a lista da conta escolhida ──────────────────────────────────────── */

[data-oc-carteira] .oc-painel:not([data-oc-painel="visao"]) { border-radius: 16px; }

[dir] [data-oc-carteira] .oc-painel:not([data-oc-painel="visao"]) {
  margin: 10px 0 32px;
  padding: 8px 22px 18px;
  border: 1px solid var(--oc-linha);
  background: var(--oc-cartao);
}

/* Página com endereço próprio (`/convert`, `/security`, …): o painel É a
   página, não um cartão dentro dela. Sem o topo da carteira acima, a moldura
   de 1.100px em volta de um cartão de 520px não delimita nada. */
[dir] [data-oc-carteira][data-oc-so-secao] .oc-painel:not([data-oc-painel="visao"]) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* A lista de ativos traz o cartão DELA (`.oc-ativos`: fundo, borda e raio
   próprios). Sem esta exceção seriam duas molduras concêntricas a 22px uma da
   outra, e a de fora não delimita nada. */
[dir] [data-oc-carteira] .oc-painel[data-oc-painel="fund"],
[dir] [data-oc-carteira] .oc-painel[data-oc-painel="spot"] {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: none;
}

/* Conta vazia: a única linha do cartão fica no meio dele, não encostada no
   alto — assim o cartão lê-se como resposta, não como tabela cortada. */
[dir] [data-oc-carteira] .oc-painel > .oc-aviso:only-child { margin: 13px 0 8px; }

/* O painel do topo não é cartão: ele CONTÉM os cartões. */
[dir] [data-oc-carteira] .oc-painel[data-oc-painel="visao"] {
  padding: 0;
  border: 0;
  background: none;
}

[data-oc-carteira] .oc-tabela th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 1;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
}

[dir] [data-oc-carteira] .oc-tabela th {
  padding: 14px 14px 11px;
  border-bottom: 1px solid var(--oc-linha);
}

[dir] [data-oc-carteira] .oc-tabela td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

[data-oc-carteira] .oc-tabela tbody tr { transition: background .18s ease; }
[dir] [data-oc-carteira] .oc-tabela tbody tr:hover { background: rgba(255, 255, 255, .028); }
[dir] [data-oc-carteira] .oc-tabela tbody tr:last-child td { border-bottom: 0; }

/* A primeira coluna é o nome do ativo: é por ela que se procura na lista. */
[data-oc-carteira] .oc-tabela td:first-child {
  font-weight: 600;
  color: var(--foreground-one, #fff);
}

/* ── a lista de ativos ───────────────────────────────────────────────────
 *
 * Seis colunas numa grade, não numa `<table>`.
 *
 * O desenho pede larguras fracionárias (`1.9fr 1.1fr 0.8fr 1.3fr 1.2fr
 * 112px`) que o algoritmo de tabela não sabe dar — e `display: grid` sobre
 * `<tr>`/`<td>` desmonta esse algoritmo: foi assim que cinco filetes de borda
 * saíram escalonados quando um `<td>` ganhou `display: flex`. A grade é de
 * `<div>`s com `role="table"`, e a árvore de acessibilidade continua vendo
 * uma tabela (ver `tabelaDeAtivos` no carteira.js).
 *
 * 🔑 Reconhecimento antes de leitura: o logo da moeda é achado de relance, o
 * ticker tem de ser lido. Numa lista onde se procura UMA linha, o ícone é o
 * que encurta a procura.
 */

[data-oc-carteira] .oc-ativos {
  border-radius: 16px;
  overflow: hidden;
}

[dir] [data-oc-carteira] .oc-ativos {
  background: #0d0d0d;
  border: 1px solid #1d1d1d;
}

/* O rolo é do CORPO, não do cartão: com o rolo no cartão, o rodapé (que cabe
   sempre) rolaria junto com a grade e sairia da tela em telas estreitas. */
[data-oc-carteira] .oc-ativos-corpo { overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; }

.oc-ativos-grade {
  display: grid;
  /* Cinco colunas desde 31/08/2026: a sexta era a das ações por linha, e o
     desenho v4 tirou os botões repetidos de cada linha. */
  grid-template-columns: 1.9fr 1.1fr 0.8fr 1.3fr 1.2fr;
  gap: 20px;
  align-items: center;
  /* Abaixo disto as colunas se espremem até o valor encostar no preço.
     O corpo rola no eixo x em vez de deixar as colunas colidirem. */
  min-width: 660px;
}

[data-oc-carteira] .oc-ativos-cab {
  color: #565656;
  font-size: 11.5px;
  font-weight: 500;
}

[dir] [data-oc-carteira] .oc-ativos-cab {
  padding: 13px 22px;
  background: #0b0b0b;
  border-bottom: 1px solid #1a1a1a;
}

[data-oc-carteira] .oc-ativos-linha { transition: background .12s ease; }

[dir] [data-oc-carteira] .oc-ativos-linha {
  padding: 16px 22px;
  border-bottom: 1px solid #161616;
}

[dir] [data-oc-carteira] .oc-ativos-linha:hover { background: #121212; }
[dir] [data-oc-carteira] .oc-ativos-linha:last-of-type { border-bottom: 0; }

[data-oc-carteira] .oc-ativos-grade .num { text-align: right; }

[data-oc-carteira] .oc-ativo {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

[data-oc-carteira] .oc-moeda {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
}

[data-oc-carteira] .oc-moeda img { width: 100%; height: 100%; object-fit: contain; }

/* Quando o `onerror` troca a imagem pelas iniciais, o `<img>` quebrado já
   saiu do nó — mas a regra acima ainda casaria com um filho remanescente. */
[data-oc-carteira] .oc-moeda[data-oc-sem-icone] img { display: none; }

[data-oc-carteira] .oc-ativo-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

[data-oc-carteira] .oc-ativo-nome {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--foreground-one, #fff);
}

[data-oc-carteira] .oc-ativo-desc {
  font-size: 11.5px;
  color: #565656;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-oc-carteira] .oc-ativo-preco {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #a8a8a8;
}

/* A variação de 24h: a única informação de MERCADO nesta tela. Cor E sinal —
   quem não distingue verde de vermelho lê o `+` e o `−`. */
[data-oc-carteira] .oc-ativo-var {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

[data-oc-carteira] .oc-sobe { color: #4cb37b; }
[data-oc-carteira] .oc-cai { color: #e5675f; }
[data-oc-carteira] .oc-neutro { color: #4a4a4a; }

[data-oc-carteira] .oc-ativo-qtd {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #d0d0d0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A segunda linha da coluna QUANTIDADE: só existe quando há saldo preso em
   ordem aberta. A coluna própria de EM USO saiu no desenho de 28/08 — eram
   seis colunas de número em 1.100px. */
[data-oc-carteira] .oc-ativo-preso {
  font-size: 11px;
  font-weight: 400;
  color: #565656;
  text-transform: lowercase;
}

[data-oc-carteira] .oc-ativo-valor {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: #ffffff;
}

[data-oc-carteira] .oc-ativo-acoes {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

[data-oc-carteira] .oc-ativo-acao { font-size: 12px; white-space: nowrap; }
/* 🔴 No ar (30/08/2026) "Depositar" saía com 57px e a última letra cortada: a
 * célula é estreita e o chip, `min-width: 0` do botão padrão, encolhia junto.
 * Chip não encolhe — a célula é que cede. */
[dir] [data-oc-carteira] .oc-ativo-acao { flex: 0 0 auto; }
[dir] [data-oc-carteira] .oc-ativo-acoes { gap: 8px; white-space: nowrap; }

[data-oc-carteira] .oc-ativo-acao:focus-visible {
  outline: 2px solid var(--oc-marca);
  outline-offset: 3px;
}

/* ── o rodapé do cartão ──────────────────────────────────────────────── */

[data-oc-carteira] .oc-ativos-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

[dir] [data-oc-carteira] .oc-ativos-pe { padding: 14px 22px; background: #0b0b0b; }

[data-oc-carteira] .oc-ativos-conta { color: #4a4a4a; font-size: 12.5px; }

[data-oc-carteira] .oc-ativos-hist { font-size: 12px; }

[data-oc-carteira] .oc-ativos-hist:focus-visible {
  outline: 2px solid var(--oc-marca);
  outline-offset: 3px;
}

/* Reabrir o acompanhamento de um saque, na coluna QUANDO do extrato. */
[data-oc-carteira] .oc-reg-abrir {
  color: var(--oc-marca);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

[dir] [data-oc-carteira] .oc-reg-abrir {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 12px;
}

[data-oc-carteira] .oc-reg-abrir:hover { text-decoration: underline; }

[data-oc-carteira] .oc-reg-abrir:focus-visible {
  outline: 2px solid var(--oc-marca);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  [data-oc-carteira] .oc-moeda { flex-basis: 22px; width: 22px; height: 22px; }
  [data-oc-carteira] .oc-ativo { gap: 9px; }
  [data-oc-carteira] .oc-ativo-nome { font-size: 13px; }
  /* Alvo de toque: os botões da linha são texto puro, e 12,5px de altura não
     é alvo. O `padding` vertical entra só no telefone, onde a linha tem folga
     para crescer (seção 4 do handoff). */
  [dir] [data-oc-carteira] .oc-ativo-acao { --h: 36px; --r: 10px; --raio: 9px; }
  [data-oc-carteira] .oc-ativo-acoes { gap: 16px; }
}

/* ── o cabeçalho do cartão da lista ─────────────────────────────────────
 *
 * Diz de QUE conta é a lista, e quantos itens tem. A barrinha escolhida lá
 * em cima acende, mas fica a 200px daqui — quem chega rolando não teria como
 * saber se está olhando fundos ou futuros.
 */
[data-oc-carteira] .oc-lista-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

/* Sem filete: o cartão logo abaixo já começa com a régua de colunas sobre
   fundo próprio, e as duas linhas juntas viravam um degrau de 2px. */
[dir] [data-oc-carteira] .oc-lista-cab {
  margin: 56px 0 16px;
  padding: 0;
  border: 0;
}

[data-oc-carteira] .oc-lista-nome {
  font-family: 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--foreground-one, #fff);
}

/* O painel de uma seção que NÃO é a de ativos ainda é um cartão com moldura,
   e ali o cabeçalho encosta no topo dela. */
[dir] [data-oc-carteira] .oc-painel:not([data-oc-painel="visao"]) .oc-lista-cab {
  margin: 0;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--oc-linha);
}

[data-oc-carteira] .oc-lista-conta {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
}

/* Com cabeçalho, a régua de colunas já tem uma linha acima dela: a borda
   dupla vira um degrau de 2px. Fica a do cabeçalho. */
[dir] [data-oc-carteira] .oc-lista-cab + .oc-tabela-rolo { margin-top: 0; }
[dir] [data-oc-carteira] .oc-lista-cab + .oc-tabela-rolo .oc-tabela th {
  padding-top: 13px;
  border-bottom-color: rgba(255, 255, 255, .055);
}

/* As pontas encostam na margem do cartão; o respiro fica entre as colunas. */
[dir] [data-oc-carteira] .oc-tabela th:first-child,
[dir] [data-oc-carteira] .oc-tabela td:first-child { padding-left: 0; }
[dir] [data-oc-carteira] .oc-tabela th:last-child,
[dir] [data-oc-carteira] .oc-tabela td:last-child { padding-right: 0; }

/* Quando o número e as três ações deixam de caber lado a lado, o `flex-wrap`
   do `.oc-topo` já empilha sozinho — o que falta é o respiro entre os dois. */
/* Abaixo de 1040px as duas colunas espremem a barrinha de conta até ela deixar
   de medir coisa nenhuma. Voltam a empilhar, e o filete volta a ser
   horizontal. */
@media (max-width: 1040px) {
  .oc-topo { grid-template-columns: 1fr; gap: 0; }
  [dir] [data-oc-carteira] .oc-contas {
    margin: 36px 0 0;
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid #1d1d1d;
  }
}

@media (max-width: 860px) {
  [data-oc-carteira] .oc-acoes { width: 100%; }
  [dir] [data-oc-carteira] .oc-aloc { margin-top: 32px; }
  [dir] [data-oc-carteira] .oc-lista-cab { margin-top: 40px; }
}

/* O número de 62px não cabe em 390px: seis dígitos com separador passam de
   340px. Ele encolhe, e com ele o cifrão e os centavos — o desenho é a
   PROPORÇÃO entre os três tamanhos, não o valor absoluto de cada um. */
@media (max-width: 560px) {
  .oc-saldo-int,
  .oc-saldo-oculto { font-size: 32px; }
  .oc-saldo-cifrao,
  .oc-saldo-cent,
  .oc-saldo-aprox { font-size: 17px; }
  .oc-saldo-num { letter-spacing: -1.6px; }
  [dir] [data-oc-carteira] .oc-saldo-cifrao { margin-right: 5px; }
}

@media (max-width: 720px) {
  [dir] [data-oc-carteira] .oc-painel:not([data-oc-painel="visao"]) { padding: 6px 16px 14px; }
  [data-oc-carteira] .oc-grade { grid-template-columns: 1fr 1fr; }
  [dir] [data-oc-carteira] .oc-conta-linha { padding: 9px 6px; }
  [data-oc-carteira] .oc-conta-linha { gap: 10px; }
  /* `COPY TRADING` quebrava em duas linhas a 92px e desalinhava a barra da
     linha vizinha — cinco barras que não começam na mesma altura não se
     comparam. Cabe inteiro a 9.5px com o rastreamento menor. */
  [data-oc-carteira] .oc-conta-nome {
    flex-basis: 104px;
    width: 104px;
    font-size: 9.5px;
    letter-spacing: .1em;
  }
  /* Num telefone a barra encolhe antes do nome e antes do valor: é a única
     das três que ainda diz o que diz com metade do tamanho. */
  [data-oc-carteira] .oc-conta-trilho,
  [data-oc-carteira] .oc-conta-vago { flex: 1 1 40px; width: auto; }
  /* Classe dupla + `[dir]`: a cadeia do `botao.css` fixa `flex: 0 0 auto`
   * nos segmentos (0,3,0); aqui os três dividem a largura por igual. */
  [dir] [data-oc-carteira] .oc-acoes > .oc-acao { flex: 1 1 0; min-width: 0; justify-content: center; }
  [dir] [data-oc-carteira] .oc-acoes > .oc-acao > .oc-bt-rot { width: 100%; }
  /* Depositar é `.ocb` desde 09/09: ele divide a linha como os outros, e o
   * mínimo de 150px do desktop sairia da tela numa coluna de 390px. */
  [dir] [data-oc-carteira] .oc-acoes > .oc-acoes-dep.ocb { flex: 1 1 0; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-oc-carteira] .oc-acao,
  [data-oc-carteira] .oc-conta-linha,
  [data-oc-carteira] .oc-conta-cheio,
  [data-oc-carteira] .oc-tabela tbody tr { transition: none; }
}

/* ── convite a depositar: só depois de ler ────────────────────────────────
 *
 * 🔴 A carteira abria com "Instant crediting, capture market opportunities
 * anytime!" e o botão Deposit — o estado vazio da captura — para quem tem
 * saldo, e só o trocava pelo número segundos depois, quando `/auth/me` e as
 * oito leituras voltavam (dono, 28/08/2026 — foto).
 *
 * 🔑 Elemento que some por decisão de PRODUTO some na FOLHA, não no motor.
 * Enquanto estava no motor ele dependia de uma ida à rede para sumir, e
 * "some depois da rede" é o mesmo que "aparece" para quem está olhando. O
 * mesmo erro tirou a fita Aberto|Fechar do futuros nesta semana.
 *
 * O motor marca `data-oc-mostrar` quando a leitura DIZ que não há saldo. Sem
 * a marca, some — e some sem escolher `display` nenhum: quem tem a marca cai
 * fora do seletor e volta a valer o que a origem manda. */
[dir] [data-oc-carteira] [data-oc-painel="vazio"]:not([data-oc-mostrar]) {
  display: none;
}

/* ── as medidas do esqueleto da carteira ─────────────────────────────────
 *
 * Cada bloco tem a altura da linha que vai substituir, para que a entrada do
 * número não empurre nada. A textura vem do `.oc-esq`, em `offcode.css`. */
/* As alturas saem da MEDIDA da tela carregada, não de estimativa:
 * rótulo 15,5 · número 61 · variação 27 · trilho 5 · legenda 15,5 ·
 * rótulo das contas 12 · linha de conta 38. */
[data-oc-carteira] .oc-esq-rot   { width: 132px; height: 15px; }
[data-oc-carteira] .oc-esq-num   { width: 268px; height: 61px; border-radius: 6px; }
[data-oc-carteira] .oc-esq-24    { width: 172px; height: 27px; border-radius: 6px; }
[data-oc-carteira] .oc-esq-trilho { width: 100%; height: 5px; border-radius: 3px; }
[data-oc-carteira] .oc-esq-tick  { width: 62px; height: 15px; }
[data-oc-carteira] .oc-esq-conta-rot { width: 118px; height: 12px; }
[data-oc-carteira] .oc-esq-conta { width: 100%; height: 38px; border-radius: 8px; }
[data-oc-carteira] .oc-esq-cel   { height: 12px; }
/* O painel de futuros e o de bots mostram UMA frase quando os dados
   chegam; o esqueleto deles é do tamanho dessa frase. */
[data-oc-carteira] .oc-esq-so    { width: 292px; height: 13px; }
[data-oc-carteira] .oc-esq-cel-2 { height: 12px; width: 62%; }

/* 🔴 Nenhuma margem aqui. `.oc-topo-esq` e `.oc-aloc` já espaçam com
 * `gap: 14px`, e as margens que eu tinha posto SOMAVAM a esse gap: o
 * esqueleto saía 34px mais alto que a tela pronta, e o conteúdo subia ao
 * chegar. Salto para cima é salto igual.
 *
 * 🔑 Esqueleto que reusa o contêiner real herda o espaçamento dele. */
[data-oc-carteira] .oc-esq-legenda { display: flex; gap: 22px; flex-wrap: wrap; }

[data-oc-carteira] .oc-esq-contas { display: flex; flex-direction: column; gap: 2px; }

/* A linha da grade repete as SEIS colunas da tabela real: um esqueleto com
   outra largura de coluna reposiciona tudo no instante em que os dados
   chegam, que é exatamente o que ele existe para evitar. */
[data-oc-carteira] .oc-esq-linha {
  display: grid;
  grid-template-columns: 1.9fr 1.1fr 0.8fr 1.3fr 1.2fr 112px;
  gap: 20px;
  align-items: center;
  min-width: 720px;
}

[dir] [data-oc-carteira] .oc-esq-linha {
  padding: 17px 22px;
  border-bottom: 1px solid #141414;
}

/* A primeira célula é ícone + nome, como na linha de verdade. */
[data-oc-carteira] .oc-esq-ativo { display: flex; align-items: center; gap: 11px; }
[data-oc-carteira] .oc-esq-moeda { width: 26px; height: 26px; border-radius: 50%; }
[data-oc-carteira] .oc-esq-nome  { flex: 1 1 auto; height: 12px; max-width: 128px; }

/* O cartão genérico da espera de sessão: título e três linhas. É a forma que
   segurança, afiliado, perfil, depósito e saque têm em comum. */
[data-oc-carteira] .oc-esq-cartao { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
[data-oc-carteira] .oc-esq-cartao-tit   { width: 168px; height: 21px; }
[data-oc-carteira] .oc-esq-cartao-linha { width: 100%; height: 46px; border-radius: 10px; }

/* ── o estado vazio ──────────────────────────────────────────────────────
 *
 * O que a captura punha aqui era um cartão de outra marca, com arte deles e
 * um convite a um artigo que não existe mais. O nosso é um cartão só, na
 * mesma largura e no mesmo raio dos outros da carteira — foi a largura solta
 * que o dono leu como "mal formada" (29/08/2026).
 *
 * 🔑 Escopo `[data-oc-carteira]` pelo motivo de sempre nesta folha: o reset
 * `[dir] div` da origem é (0,1,1) e vence classe sozinha, então padding,
 * margem e borda escritos em classe única chegam ao navegador descartados.
 */
[data-oc-carteira] .oc-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

[dir] [data-oc-carteira] .oc-vazio {
  margin: 4px 0 0;
  padding: 44px 24px 48px;
  border: 1px solid #141414;
  border-radius: 14px;
  background: #060606;
}

[data-oc-carteira] .oc-vazio-arte {
  display: block;
  color: rgba(255, 255, 255, .22);
}

[data-oc-carteira] .oc-vazio-tit {
  font-size: 16px;
  font-weight: 500;
  color: var(--foreground-one, #fff);
}

[data-oc-carteira] .oc-vazio-sub {
  font-size: 13px;
  line-height: 1.5;
  max-width: 380px;
  color: var(--foreground-three, rgba(255, 255, 255, .48));
}

/* O botão herda o `.oc-botao` da carteira; aqui só o respiro acima dele. */
[dir] [data-oc-carteira] .oc-vazio .oc-botao { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
 * CARTEIRA v4 — o desenho do dono de 31/08/2026 (`design_handoff_wallet_v4`)
 *
 * O que mudou em relação ao topo de 28/08:
 *
 *   barra de alocação  →  ANEL, em cartão próprio à direita
 *   cinco linhas de conta (navegação) → SELETOR colado que FILTRA a tabela
 *   três ações  →  cinco: Depositar (+seta) · Sacar · Transferir · Converter ·
 *                  Histórico, e as quatro últimas coladas numa cadeia
 *   "Registros" como linha de conta → o rodapé do cartão do anel, levando à
 *                  página nova `/wallet/history`
 *
 * As regras vêm DEPOIS das antigas de propósito: no empate de peso, quem vem
 * por último ganha, e assim o topo v3 é sobrescrito sem eu ter de caçar cada
 * regra dele no meio de 1.700 linhas. As classes que sumiram do JS
 * (`.oc-conta-linha`, `.oc-aloc-trilho`, `.oc-ativo-acoes`) ficam sem uso —
 * ninguém as escreve mais.
 *
 * ⚠️ Todo seletor leva `[data-oc-carteira]` (0,2,0) ou `[dir]` junto: o reset
 *    da captura é `[dir] div` (0,1,1) e vence classe sozinha.
 * ⚠️ Nada de `rem` — a raiz do espelho é 13.33vw. `checa_css.py` reprova.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-oc-carteira] .oc-topo {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
  gap: 24px;
}
@media (max-width: 900px) {
  [data-oc-carteira] .oc-topo { grid-template-columns: 1fr; }
}

/* O tick diagonal da marca, o mesmo do resto do sistema. */
[data-oc-carteira] .oc-tick {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--oc-marca, #f7931a);
  transform: skewX(-26.6deg);
  border-radius: 2px;
}
[data-oc-carteira] .oc-tick.oc-tick-p { width: 9px; height: 9px; border-radius: 1px; }

/* ── cartão do saldo ─────────────────────────────────────────────────── */

[data-oc-carteira] .oc-saldo-cartao {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
[dir] [data-oc-carteira] .oc-saldo-cartao {
  padding: 26px 28px;
  background: #0f0f0f;
  border: 1px solid #232323;
  border-radius: 18px;
}
[data-oc-carteira] .oc-saldo-cartao::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #f7931a 50%, transparent 100%);
}
/* As três listras diagonais decorativas. `pointer-events: none` porque elas
 * atravessam o cartão inteiro e engoliriam o clique dos botões. */
[data-oc-carteira] .oc-saldo-listra,
[data-oc-carteira] .oc-saldo-listra2 {
  position: absolute;
  top: -20px;
  bottom: -20px;
  transform: skewX(-26.6deg);
  pointer-events: none;
}
[data-oc-carteira] .oc-saldo-listra { right: 28px; width: 22px; background: rgba(247, 147, 26, .06); }
[data-oc-carteira] .oc-saldo-listra2 { right: 62px; width: 10px; background: rgba(247, 147, 26, .04); }

[data-oc-carteira] .oc-saldo-rot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8a8a8a;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
[data-oc-carteira] .oc-saldo-num { position: relative; }
[data-oc-carteira] .oc-saldo-24 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}
[data-oc-carteira] .oc-saldo-24-resumo {
  color: #545454;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── a linha de ações ────────────────────────────────────────────────── */

[data-oc-carteira] .oc-acoes {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
/* 44 e não 46: Depositar virou o modelo 2 em `ocb--p`, que são 44px exatos.
 * A cadeia ao lado desce junto — dois botões colados com 2px de diferença de
 * altura leem como desalinho, não como hierarquia. */
[dir] [data-oc-carteira] .oc-acoes { --cadeia-h: 44px; --cadeia-raio: 6px; margin: 6px 0 0; }
/* Depositar não estica: é peça fixa. O resto divide o que sobrar.
 * 🔑 O mínimo subiu de 112 para 150: no modelo 2 a célula da seta (0.846 × 44
 * = 37px) e o slant (19px) vivem DENTRO do botão, e o rótulo só respira a
 * partir daí. */
[dir] [data-oc-carteira] .oc-acoes-dep.ocb { flex: 0 0 auto; min-width: 150px; }
[dir] [data-oc-carteira] .oc-acoes-resto { flex: 1 1 240px; min-width: 0; }
[dir] [data-oc-carteira] .oc-acoes .oc-bt-m { --h: 44px; --r: 14px; --raio: 14px; }

/* ── cartão da alocação (o anel) ─────────────────────────────────────── */

[data-oc-carteira] .oc-aloc-cartao {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
[dir] [data-oc-carteira] .oc-aloc-cartao {
  padding: 24px 26px;
  background: #0f0f0f;
  border: 1px solid #232323;
  border-radius: 18px;
}
[data-oc-carteira] .oc-aloc-cartao::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(247, 147, 26, .35) 50%, transparent 100%);
}
[data-oc-carteira] .oc-aloc-rot {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a8a8a;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
[data-oc-carteira] .oc-aloc-vazio { color: #4a4a4a; font-size: 12.5px; }

[data-oc-carteira] .oc-donut { display: flex; align-items: center; gap: 18px; min-width: 0; }
[data-oc-carteira] .oc-donut-anel { position: relative; width: 118px; height: 118px; flex: 0 0 118px; }
/* `rotate(-90deg)` põe o zero no topo; o `stroke-dashoffset` de cada arco já
 * conta a partir dali (ver `donutDeAlocacao` no carteira.js). */
[data-oc-carteira] .oc-donut-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
[data-oc-carteira] .oc-donut-anel circle { transition: opacity .15s ease, stroke-width .15s ease; }
@media (prefers-reduced-motion: reduce) {
  [data-oc-carteira] .oc-donut-anel circle { transition: none; }
}
[data-oc-carteira] .oc-donut-anel [data-oc-fatia] { cursor: pointer; }
[data-oc-carteira] .oc-donut-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* O centro não pode roubar o hover dos arcos que ele cobre. */
  pointer-events: none;
}
[data-oc-carteira] .oc-donut-centro-val {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
[data-oc-carteira] .oc-donut-centro-sub { font-size: 10px; color: #545454; letter-spacing: .5px; }

[data-oc-carteira] .oc-donut-legenda { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
[data-oc-carteira] .oc-donut-item { display: flex; align-items: center; gap: 10px; }
[dir] [data-oc-carteira] .oc-donut-item { padding: 5.5px 10px; border-radius: 9px; }
[dir] [data-oc-carteira] .oc-donut-item:hover { background: #141414; }
[data-oc-carteira] .oc-donut-cor { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 2px; }
[data-oc-carteira] .oc-donut-tick { font-size: 12.5px; color: #cfcfcf; font-weight: 600; }
[data-oc-carteira] .oc-donut-pct {
  margin-left: auto;
  color: var(--oc-marca, #f7931a);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
}

[data-oc-carteira] .oc-aloc-pe {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[dir] [data-oc-carteira] .oc-aloc-pe { padding: 12px 12px 2px; border-top: 1px solid #161616; }
[data-oc-carteira] .oc-aloc-pe-rot {
  color: #4a4a4a;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
[data-oc-carteira] .oc-aloc-pe-val {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #cfcfcf;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
[data-oc-carteira] .oc-aloc-pe-val:hover { color: var(--oc-marca, #f7931a); }
[data-oc-carteira] .oc-aloc-pe-val b { font-size: 11px; color: #545454; font-weight: 400; }

/* ── seletor de conta ────────────────────────────────────────────────── */

[data-oc-carteira] .oc-selconta { display: flex; flex-direction: column; gap: 11px; }
[dir] [data-oc-carteira] .oc-selconta { margin-top: 22px; }
[data-oc-carteira] .oc-selconta-rot {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a8a8a;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
/* 🔴 Era `flex-wrap: wrap` com `height: 38px` FIXO. No celular os cinco
 * rótulos somam 555px e não cabem em 390: quebravam para uma segunda linha
 * que o contêiner de altura travada não comportava, e ela TRANSBORDAVA 38px
 * por cima do título "Assets" logo abaixo. Medido em 390×844.
 *
 * O trilho rola na horizontal em vez de quebrar — e sem media query, porque o
 * problema não é o celular e sim o comprimento dos rótulos: em alemão ou
 * indonésio o mesmo estouro aconteceria numa tela maior.
 *
 * 🔑 `overflow-y: hidden` é obrigatório ao lado do `overflow-x: auto`: sem ele
 * a faixa vira uma área onde o dedo não rola a PÁGINA (ver a lição do gesto
 * engolido). E `flex: 0 0 auto` nos botões, senão o flex os comprime até
 * caberem em vez de rolar. */
[data-oc-carteira] .oc-selconta-trilho {
  display: flex;
  align-items: stretch;
  height: 38px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-oc-carteira] .oc-selconta-trilho::-webkit-scrollbar { display: none; }
[data-oc-carteira] .oc-selconta-bt {
  flex: 0 0 auto;
  height: 38px;
  background: #1c1c1c;
  color: #8a8a8a;
  font-size: 12.5px;
  font-weight: 700;
  transform: skewX(-26.6deg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[dir] [data-oc-carteira] .oc-selconta-bt { border: 0; padding: 0 20px; }
[dir] [data-oc-carteira] .oc-selconta-bt + .oc-selconta-bt { margin-left: 3px; }
[dir] [data-oc-carteira] .oc-selconta-bt:first-child { border-radius: 12px 0 0 12px; }
[dir] [data-oc-carteira] .oc-selconta-bt:last-child { border-radius: 0 12px 12px 0; }
/* O texto volta ao prumo: o corte é da PEÇA, não da palavra. */
[data-oc-carteira] .oc-selconta-bt > span { transform: skewX(26.6deg); display: block; white-space: nowrap; }
[data-oc-carteira] .oc-selconta-bt:hover { filter: brightness(1.15); }
[data-oc-carteira] .oc-selconta-bt.oc-on { background: var(--oc-marca, #f7931a); color: #0a0a0a; }
[data-oc-carteira] .oc-selconta-bt:focus-visible { outline: 2px solid var(--oc-marca, #f7931a); outline-offset: 2px; }

/* ── cabeçalho da tabela de ativos ───────────────────────────────────── */

[data-oc-carteira] .oc-ativos-cabeca { display: flex; align-items: center; gap: 12px; }
[dir] [data-oc-carteira] .oc-ativos-cabeca { margin: 26px 0 12px; }
[data-oc-carteira] .oc-ativos-tit { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: #fff; }
[dir] [data-oc-carteira] .oc-ativos-tit { margin: 0; }
[data-oc-carteira] .oc-ativos-chip {
  color: #565656;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
}
[dir] [data-oc-carteira] .oc-ativos-chip { padding: 3px 9px; border: 1px solid #2b2b2b; border-radius: 7px; }

[data-oc-carteira] .oc-ativos-hist {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #8a8a8a;
  text-decoration: none;
}
[data-oc-carteira] .oc-ativos-hist:hover { color: var(--oc-marca, #f7931a); }
[data-oc-carteira] .oc-ativos-hist b { font-weight: 400; }

/* Esqueleto do anel enquanto a leitura não volta. */
[data-oc-carteira] .oc-esq-anel { width: 118px; height: 118px; border-radius: 50%; flex: 0 0 118px; }

/* ── a conta de Copy Trading (01/09/2026) ─────────────────────────────── */
[data-oc-carteira] .oc-tabela-copy td.oc-copy-pend { color: #f7931a; }
[data-oc-carteira] .oc-tabela-copy td.oc-copy-ativa { color: #4cb37b; }
[data-oc-carteira] .oc-tabela-copy td.oc-copy-acoes { text-align: right; white-space: nowrap; }
[data-oc-carteira] .oc-tabela-copy .oc-copy-ver { color: #9a9a9a; font-size: 12px; margin-right: 12px; text-decoration: none; }
[data-oc-carteira] .oc-tabela-copy .oc-copy-ver:hover { color: #fff; }

/* ── telefone: a carteira cabe na tela (dono, 06/09/2026) ─────────────────
 *
 * Três fotos do iPhone: a barrinha "Saldo por conta" cortada em "Co…", a
 * lista de ativos rolando de lado com o cabeçalho em "set" (de "Asset") e o
 * pedido — "diminua para caber na tela sem ter que deslizar".
 *
 * A barrinha: fonte menor, peça mais curta e `flex: 1 1 auto` — as cinco
 * peças se repartem a largura quando cabem. Se em algum idioma não couberem,
 * o trilho continua rolando (o `flex-shrink` não passa do texto): a peça
 * cortada era o defeito, e cortar não é opção.
 *
 * A lista: cinco colunas em 330px não cabem em fonte nenhuma que se leia —
 * preço, quantidade e valor são dez caracteres cada. A linha vira DUAS:
 *
 *     [logo] BTC                         US$ 54.188,04
 *            $80,117.25  +0.36%             0,48210000
 *
 * O nome por extenso sai (o ticker basta); o cabeçalho fica com Ativo e
 * Valor. Nada disto toca o desktop: tudo vive na media query. */
@media (max-width: 620px) {
  [data-oc-carteira] .oc-selconta-trilho { height: 34px; }
  /* Os cantos do chanfro: a peça inclinada de 34px avança 8,5px além da
     própria caixa de cada lado. Sem folga, o canto da primeira era CORTADO
     (foto: "All" sem o pé) e o da última virava 9px de rolagem. O trilho
     sangra 9px para dentro da margem da página e devolve como padding — a
     largura útil é a mesma e os cantos ficam inteiros. */
  [dir] [data-oc-carteira] .oc-selconta-trilho { margin: 0 -9px; padding: 0 9px; }
  [data-oc-carteira] .oc-selconta-bt { flex: 1 1 auto; height: 34px; font-size: 10.5px; }
  [dir] [data-oc-carteira] .oc-selconta-bt { padding: 0 8px; }
  [dir] [data-oc-carteira] .oc-selconta-bt + .oc-selconta-bt { margin-left: 2px; }

  [data-oc-carteira] .oc-ativos-corpo { overflow-x: hidden; }
  [data-oc-carteira] .oc-ativos-grade {
    min-width: 0;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-areas: "ativo ativo valor" "preco var qtd";
    gap: 3px 10px;
  }
  [data-oc-carteira] .oc-ativos-cab { grid-template-areas: "ativo ativo valor"; }
  /* O cabeçalho não tem classe por coluna: é a ordem de `tabelaDeAtivos`
     (Ativo · Preço · 24h · Quantidade · Valor). */
  [data-oc-carteira] .oc-ativos-cab > :nth-child(1) { grid-area: ativo; }
  [data-oc-carteira] .oc-ativos-cab > :nth-child(5) { grid-area: valor; }
  [data-oc-carteira] .oc-ativos-cab > :nth-child(2),
  [data-oc-carteira] .oc-ativos-cab > :nth-child(3),
  [data-oc-carteira] .oc-ativos-cab > :nth-child(4) { display: none; }
  [dir] [data-oc-carteira] .oc-ativos-cab { padding: 10px 14px; }
  [dir] [data-oc-carteira] .oc-ativos-linha { padding: 11px 14px; }
  [data-oc-carteira] .oc-ativo { grid-area: ativo; }
  [data-oc-carteira] .oc-ativo-desc { display: none; }
  [data-oc-carteira] .oc-ativo-preco { grid-area: preco; font-size: 11px; text-align: left; }
  /* Alinhado sob o ticker: a logo de 22px mais o vão de 9px. */
  [dir] [data-oc-carteira] .oc-ativo-preco { padding-left: 31px; }
  [data-oc-carteira] .oc-ativo-var { grid-area: var; font-size: 11px; text-align: left; }
  [data-oc-carteira] .oc-ativo-valor { grid-area: valor; font-size: 13px; }
  [data-oc-carteira] .oc-ativo-qtd { grid-area: qtd; font-size: 11px; color: #8a8a8a; align-items: flex-end; }
  [dir] [data-oc-carteira] .oc-ativos-pe { padding: 12px 14px; }
}
/* iPhone mini/SE (375) e o russo em 390: um degrau a menos na barrinha.
   Medido (`prova_carteira_movel.py`): em 390 o russo — "Копитрейдинг" +
   "Фьючерсы" — sobra 10px; em 375 precisa do último degrau. */
@media (max-width: 400px) {
  [data-oc-carteira] .oc-selconta-bt { font-size: 10px; }
  [dir] [data-oc-carteira] .oc-selconta-bt { padding: 0 6px; }
}
@media (max-width: 380px) {
  [dir] [data-oc-carteira] .oc-selconta-bt { padding: 0 5px; }
}

/* ── saque.css ── */
/* O saque no desenho novo: campos, resumo "Você recebe", rodapé com o CTA e
 * o mini-popup do código 2FA. O embrulho (véu, cartão, header, stepper,
 * lista, busca, chips, notas, erros) vem do `deposito.css`, carregado em
 * TODA página. Aqui mora só o que o saque tem e o depósito não.
 *
 * As duas regras da casa: caixa (margin/padding/border/background) em regra
 * `[dir] .classe` — o reset `[dir] *` da origem é (0,1,1) e vence classe
 * sozinha; e nada de `rem` (raiz de 13,33vw; `_tools/checa_css.py`).
 */

/* ── campos ──────────────────────────────────────────────────────────── */
/* O <form> do passo 3 empilha chips, campos, resumo, erro e rodapé. */
.oc-dp-corpo-form { display: flex; flex-direction: column; gap: 15px; }
.oc-dp-campo { display: flex; flex-direction: column; gap: 8px; }
.oc-dp-campo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.oc-dp-campo-dir { color: #616161; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }
.oc-dp-campo-dir b { color: #cfcfcf; font-weight: 400; }

/* A caixa do campo. `focus-within`, porque quem fica em foco é o <textarea>
 * ou o <input> de dentro; a borda vermelha do erro vence a do foco. */
.oc-dp-in { display: flex; align-items: center; gap: 10px; border-radius: 12px; min-height: 46px; box-sizing: border-box; transition: border-color .18s ease; }
[dir] .oc-dp-in { padding: 0 14px; border: 1px solid #232323; background: #141414; }
[dir] .oc-dp-in:focus-within { border-color: #f7931a; }
[dir] .oc-dp-in.oc-dp-in-erro { border-color: #ef4444; }
.oc-dp-in-txt { flex: 1; min-width: 0; background: transparent; color: #fff; font: 12.5px/1.55 'JetBrains Mono', ui-monospace, Menlo, monospace; }
[dir] .oc-dp-in-txt { border: 0; padding: 12px 0; margin: 0; }
.oc-dp-in-txt:focus { outline: none; }
.oc-dp-in-txt::placeholder { color: #565656; }
/* O endereço é <textarea> que QUEBRA: 44 caracteres não cabem numa linha e
 * o pedaço que sumiria é o MEIO — onde o sequestro de área de transferência
 * troca dígitos. A pessoa lê os 44 inteiros antes de sacar. */
textarea.oc-dp-in-txt { resize: none; overflow-wrap: anywhere; display: block; min-height: 24px; }

/* A linha do valor: input grande, ≈ US$, ticker, MAX. */
.oc-dp-valor { height: 48px; }
[dir] .oc-dp-valor { padding: 0 8px 0 14px; }
.oc-dp-valor .oc-dp-in-txt { font-size: 16px; font-weight: 600; }
.oc-dp-valor-usd { color: #616161; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; white-space: nowrap; }
.oc-dp-valor-tk { color: #8a8a8a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.oc-dp-max { flex: 0 0 auto; border-radius: 8px; color: #f7931a; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: background .15s ease; }
[dir] .oc-dp-max { padding: 7px 12px; border: 1px solid rgba(247, 147, 26, .35); background: rgba(247, 147, 26, .08); margin: 0; }
[dir] .oc-dp-max:hover { background: rgba(247, 147, 26, .16); }
.oc-dp-max:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }

/* ── o resumo: taxa de rede → Você recebe ──────────────────────────── */
.oc-dp-resumo { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; }
[dir] .oc-dp-resumo { padding: 13px 16px; border: 1px solid #1d1d1d; background: #141414; margin: 0; }
.oc-dp-resumo-l { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #7a7a7a; font-size: 11.5px; }
.oc-dp-resumo-l b { color: #cfcfcf; font-weight: 400; font-size: 12px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; text-align: right; overflow-wrap: anywhere; }
.oc-dp-resumo-sep { height: 1px; }
[dir] .oc-dp-resumo-sep { background: #1d1d1d; }
.oc-dp-recebe { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #fff; font-size: 12.5px; font-weight: 600; }
.oc-dp-recebe-dir { display: flex; align-items: baseline; gap: 8px; }
.oc-dp-recebe-v { color: #f7931a; font-size: 16px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.oc-dp-recebe-usd { color: #616161; font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* ── o rodapé: a nota e o CTA Sacar ↗ ─────────────────────────────────── */
.oc-dp-rodape { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.oc-dp-rodape-nota { color: #545454; font-size: 10.5px; line-height: 1.5; max-width: 170px; }
[dir] .oc-dp-rodape > .ocb { flex: 0 0 auto; min-width: 152px; }

/* ── o mini-popup do código (decisão do dono: pequeno, só o código) ────
 *
 * Nasce POR CIMA do cartão, no mesmo desenho. `Esc` e o clique fora não o
 * fecham: há um pedido em voo e um código pela metade — só o ✕ dele fecha,
 * e o cartão volta ao passo 3 com endereço e valor preservados. */
.oc-dp-mini-veu { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .6); overflow-y: auto; font-family: 'Space Grotesk', 'Geist', 'OFFCODE Sans', system-ui, sans-serif; }
[dir] .oc-dp-mini-veu { padding: 20px 16px; }
.oc-dp-mini { position: relative; width: 100%; max-width: 360px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); color: #fff; font-size: 13px; line-height: 1.4; }
[dir] .oc-dp-mini { border: 1px solid #262626; background: #0f0f0f; margin: auto; }
.oc-dp-mini:focus { outline: none; }
.oc-dp-mini-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[dir] .oc-dp-mini-topo { padding: 16px 20px; border-bottom: 1px solid #1c1c1c; }
.oc-dp-mini-corpo { display: flex; flex-direction: column; gap: 12px; }
[dir] .oc-dp-mini-corpo { padding: 18px 20px 20px; }
.oc-dp-mini-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #8a8a8a; font-size: 11.5px; }
.oc-dp-mini-linha b { color: #fff; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.oc-dp-codigo { width: 100%; box-sizing: border-box; height: 56px; border-radius: 12px; color: #fff; background: #141414; font: 22px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .34em; text-align: center; }
/* O `letter-spacing` empurra o último dígito para fora do centro óptico; o
 * recuo à esquerda devolve o bloco ao meio. */
[dir] .oc-dp-codigo { padding: 0 10px 0 calc(10px + .34em); border: 1px solid #232323; margin: 0; }
[dir] .oc-dp-codigo:focus { border-color: #f7931a; outline: none; }
[dir] .oc-dp-codigo.oc-dp-in-erro { border-color: #ef4444; }
.oc-dp-mini-dica { color: #8a8a8a; font-size: 11.5px; line-height: 1.5; }
.oc-dp-mini-reenviar { background: transparent; color: #f7931a; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
[dir] .oc-dp-mini-reenviar { border: 0; padding: 0; margin: 0 0 0 6px; }
.oc-dp-mini-reenviar:hover { color: #ffb04d; }
.oc-dp-mini-reenviar:disabled { color: #545454; cursor: default; }

/* ── "Saque solicitado" — só quando o acompanhamento não carregou ────── */
.oc-dp-pronto { display: flex; flex-direction: column; gap: 12px; }

/* ── telefone ─────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .oc-dp-rodape { flex-direction: column; align-items: stretch; }
  .oc-dp-rodape-nota { max-width: none; }
  [dir] .oc-dp-rodape > .ocb { display: flex; width: 100%; flex: 1; }
  [dir] .oc-dp-mini-corpo { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-dp-in, .oc-dp-max { transition: none; }
}

/* ── saque-status.css ── */
/* O acompanhamento do saque: um diálogo que fica de pé até o dinheiro chegar.
 *
 * Vive à parte do `saque.css` porque são duas telas com vidas diferentes. O
 * `saque.css` veste o FORMULÁRIO — quatro passos, começa do zero a cada
 * abertura e morre no envio. Esta veste o que vem DEPOIS: um estado do
 * servidor que muda sozinho por minutos ou horas, e que a pessoa reabre para
 * conferir. Misturar as duas folhas amarraria o desenho do acompanhamento ao
 * ciclo de vida do formulário.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A folha da ORIGEM reseta as direcionais num bloco à parte:
 *
 *     [dir] div, [dir] p, [dir] button … { border: 0; margin: 0; padding: 0 }
 *
 * Isso é (0,1,1) e vence classe sozinha (0,1,0) — a regra chega ao navegador
 * com METADE das declarações aplicadas: cor e fonte entram, `padding` e
 * `border` somem, sem erro nenhum. `[dir] .oc-ss-x` é (0,2,0) e ganha. Toda
 * declaração de caixa (margin/padding/border/background em elemento que o
 * reset toca) está do lado `[dir]`.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout sem erro nenhum. Tudo aqui é px. (`_tools/checa_css.py`)
 */

/* ── o véu ───────────────────────────────────────────────────────────────
 *
 * `overflow-y: auto` no VÉU, não no cartão.
 *
 * O cartão tem 4 blocos empilhados — valor, endereço, progresso com quatro
 * etapas, e um cartão de TX ou de retenção — e passa dos 800px de altura no
 * estado concluído. Num laptop de 768px com o véu em `overflow: hidden`, o
 * `align-items: center` corta o cartão dos DOIS lados: o cabeçalho sai por
 * cima e o rodapé por baixo, e não há como rolar até nenhum dos dois. O botão
 * VER NA BLOCKCHAIN e o X de fechar ficam ambos fora do alcance.
 *
 * 🔑 Centralizar por flex sem rolagem no eixo é um corte silencioso: nada
 * transborda visivelmente, o conteúdo simplesmente não existe naquela janela.
 */
.oc-ss-veu {
  position: fixed;
  inset: 0;
  /* Acima do véu do formulário de saque (`.oc-dep-veu`, 9000): o
     acompanhamento nasce por cima dele no instante do envio. */
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  /* O brilho laranja no alto é o do desenho. Quase opaco, não opaco: a
     carteira continua visível por baixo, e é ela que diz de onde o diálogo
     veio. */
  background: radial-gradient(ellipse 70% 45% at 50% -10%,
              rgba(25, 17, 6, .97) 0%, rgba(7, 7, 7, .94) 60%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

[dir] .oc-ss-veu { padding: 32px; }

.oc-ss-cartao {
  width: 430px;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8),
              0 0 0 1px rgba(255, 255, 255, .02) inset;
  /* `auto` nas margens verticais para o cartão mais alto que a janela ficar
     colado no topo em vez de ter metade cortada acima da rolagem. */
  margin: auto;
  font-family: 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

[dir] .oc-ss-cartao {
  background: #0f0f0f;
  border: 1px solid #232323;
}

.oc-ss-cartao:focus { outline: none; }

/* O filete de 2px no topo. É o único ponto de cor antes de a pessoa ler o
   valor, e por isso ele acompanha o estado: laranja andando, vermelho retido. */
.oc-ss-filete { height: 2px; }
[dir] .oc-ss-filete {
  background: linear-gradient(90deg, transparent 0%, #f7931a 50%, transparent 100%);
}
[dir] .oc-ss-cartao[data-oc-estado="falha"] .oc-ss-filete {
  background: linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%);
}

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

.oc-ss-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[dir] .oc-ss-topo {
  padding: 18px 24px;
  border-bottom: 1px solid #1c1c1c;
}

.oc-ss-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }

.oc-ss-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  display: block;
}

[dir] .oc-ss-logo { border: 1px solid #2a2a2a; background: #0a0a0a; }

.oc-ss-marca-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.oc-ss-marca-nome {
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 3px;
}

.oc-ss-marca-sub {
  color: #616161;
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}

.oc-ss-x {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  color: #7a7a7a;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}

[dir] .oc-ss-x { border: 1px solid #262626; background: transparent; padding: 0; }
.oc-ss-x:hover { color: #f7931a; }
[dir] .oc-ss-x:hover { border-color: #f7931a; }
.oc-ss-x:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }

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

.oc-ss-valor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

[dir] .oc-ss-valor { padding: 30px 24px 6px; }

.oc-ss-situacao { display: flex; align-items: center; gap: 8px; }

.oc-ss-ponto {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
}

[dir] .oc-ss-ponto { background: #f7931a; }
[dir] .oc-ss-cartao[data-oc-estado="falha"] .oc-ss-ponto { background: #ef4444; }

/* O pulso só existe enquanto há o que esperar. Num saque concluído ele seria
   um sinal de atividade sobre uma tela que acabou. */
[data-oc-estado="processando"] .oc-ss-ponto { animation: ocSsPulso 1.4s ease infinite; }
[data-oc-estado="falha"] .oc-ss-ponto { animation: ocSsPulsoVermelho 1.4s ease infinite; }

.oc-ss-situacao-txt {
  color: #8a8a8a;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.oc-ss-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }

.oc-ss-num-v {
  color: #ffffff;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.05;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -1px;
  /* Quebra por caractere: um valor de 18 dígitos (a precisão que o backend
     guarda) estoura 430px, e `overflow: hidden` no cartão o cortaria em vez
     de o quebrar. */
  word-break: break-all;
}

.oc-ss-num-t {
  color: #f7931a;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
}

.oc-ss-fiat {
  color: #7a7a7a;
  font-size: 13px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── endereço de destino ─────────────────────────────────────────────── */

.oc-ss-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}

[dir] .oc-ss-end {
  margin: 22px 24px 0;
  padding: 13px 15px;
  background: #141414;
  border: 1px solid #202020;
}

.oc-ss-end-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.oc-ss-rot {
  color: #5f5f5f;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.oc-ss-end-v {
  color: #cfcfcf;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-ss-rede {
  color: #f7931a;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}

[dir] .oc-ss-rede {
  padding: 5px 9px;
  background: rgba(247, 147, 26, .08);
  border: 1px solid rgba(247, 147, 26, .3);
}

/* ── progresso ───────────────────────────────────────────────────────── */

[dir] .oc-ss-prog { padding: 24px 24px 20px; }

.oc-ss-prog-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

[dir] .oc-ss-prog-cab { margin-bottom: 10px; }

.oc-ss-prog-nome { color: #ffffff; font-size: 13px; font-weight: 600; }

.oc-ss-prog-pct {
  color: #f7931a;
  font-size: 15px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-oc-estado="falha"] .oc-ss-prog-pct { color: #ef4444; }

.oc-ss-trilho {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

[dir] .oc-ss-trilho {
  background: #1b1b1b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}

.oc-ss-cheio {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
  position: relative;
  overflow: hidden;
}

[dir] .oc-ss-cheio { background: linear-gradient(90deg, #9d5600, #f7931a 55%, #ffbe5c); }
[dir] [data-oc-estado="falha"] .oc-ss-cheio {
  background: linear-gradient(90deg, #7f1d1d, #ef4444 60%, #f87171);
}

/* O brilho que atravessa a barra. Só enquanto ela ANDA: numa barra parada em
   40% ele vira um sinal de atividade sobre um saque que não está andando. */
.oc-ss-brilho { position: absolute; inset: 0; width: 45%; }
[dir] .oc-ss-brilho {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
}
[data-oc-estado="processando"] .oc-ss-brilho { animation: ocSsBrilho 1.8s linear infinite; }

.oc-ss-prog-pe {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

[dir] .oc-ss-prog-pe { margin-top: 8px; }

.oc-ss-prog-pe span {
  color: #616161;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── as quatro etapas ────────────────────────────────────────────────── */

.oc-ss-etapas { display: flex; flex-direction: column; }
[dir] .oc-ss-etapas { margin-top: 18px; padding: 4px 0; }

.oc-ss-etapa { display: flex; align-items: center; gap: 13px; }
[dir] .oc-ss-etapa { padding: 7px 0; }

.oc-ss-bolha {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  color: #525252;
}

[dir] .oc-ss-bolha { background: #171717; border: 1px solid #262626; }

.oc-ss-etapa[data-estado="feita"] .oc-ss-bolha { color: #0a0a0a; }
[dir] .oc-ss-etapa[data-estado="feita"] .oc-ss-bolha {
  background: #f7931a;
  border-color: #f7931a;
}

.oc-ss-etapa[data-estado="atual"] .oc-ss-bolha {
  color: #f7931a;
  animation: ocSsPulso 1.4s ease infinite;
}
[dir] .oc-ss-etapa[data-estado="atual"] .oc-ss-bolha {
  background: rgba(247, 147, 26, .1);
  border-color: rgba(247, 147, 26, .7);
}

.oc-ss-etapa[data-estado="alerta"] .oc-ss-bolha {
  color: #ef4444;
  animation: ocSsPulsoVermelho 1.4s ease infinite;
}
[dir] .oc-ss-etapa[data-estado="alerta"] .oc-ss-bolha {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .6);
}

.oc-ss-etapa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.oc-ss-etapa-nome {
  font-size: 13px;
  font-weight: 600;
  color: #6e6e6e;
  transition: color .3s ease;
}

.oc-ss-etapa[data-estado="feita"] .oc-ss-etapa-nome { color: #ffffff; }
.oc-ss-etapa[data-estado="atual"] .oc-ss-etapa-nome { color: #f7931a; }
.oc-ss-etapa[data-estado="alerta"] .oc-ss-etapa-nome { color: #ef4444; }

.oc-ss-etapa-desc { color: #5f5f5f; font-size: 11px; line-height: 1.35; }

.oc-ss-etapa-hora {
  margin-left: auto;
  color: #4a4a4a;
  font-size: 10px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

/* ── o cartão da TX ──────────────────────────────────────────────────── */

.oc-ss-tx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
}

[dir] .oc-ss-tx {
  margin: 0 24px 20px;
  padding: 12px 14px;
  background: rgba(247, 147, 26, .06);
  border: 1px solid rgba(247, 147, 26, .25);
}

.oc-ss-tx-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.oc-ss-tx-rot {
  color: #f7931a;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.oc-ss-tx-v {
  color: #e8e8e8;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-ss-copiar {
  color: #f7931a;
  border-radius: 8px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
  /* 44px de alvo no telefone (seção 4 do handoff). No desktop o botão tem
     28px de altura visual; o `min-height` só entra na consulta de mídia. */
  min-height: 28px;
}

[dir] .oc-ss-copiar {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(247, 147, 26, .4);
}

[dir] .oc-ss-copiar:hover { background: rgba(247, 147, 26, .12); }
.oc-ss-copiar:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }

/* ── o cartão de retenção ────────────────────────────────────────────── */

.oc-ss-alerta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 12px;
}

[dir] .oc-ss-alerta {
  margin: 0 24px 20px;
  padding: 13px 15px;
  background: rgba(239, 68, 68, .06);
  border: 1px solid rgba(239, 68, 68, .3);
}

.oc-ss-alerta-ic {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ocSsPulsoVermelho 1.4s ease infinite;
}

[dir] .oc-ss-alerta-ic {
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(239, 68, 68, .6);
}

.oc-ss-alerta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.oc-ss-alerta-tit { color: #ef4444; font-size: 12.5px; font-weight: 700; }
.oc-ss-alerta-cor { color: #9a9a9a; font-size: 11.5px; line-height: 1.5; }

.oc-ss-suporte {
  align-self: flex-start;
  color: #ef4444;
  border-radius: 8px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .15s ease;
  text-decoration: none;
}

[dir] .oc-ss-suporte {
  margin-top: 8px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, .5);
}

[dir] .oc-ss-suporte:hover { background: rgba(239, 68, 68, .12); }
.oc-ss-suporte:hover { color: #ef4444; }
.oc-ss-suporte:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }

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

.oc-ss-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

[dir] .oc-ss-pe {
  padding: 15px 24px;
  border-top: 1px solid #1c1c1c;
  background: #0a0a0a;
}

.oc-ss-pe-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.oc-ss-taxa {
  color: #cfcfcf;
  font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oc-ss-explorer {
  color: #0a0a0a;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

[dir] .oc-ss-explorer {
  padding: 11px 20px;
  background: #f7931a;
  border: 1px solid #f7931a;
}

.oc-ss-explorer:hover { filter: brightness(1.15); color: #0a0a0a; }
.oc-ss-explorer:focus-visible { outline: 2px solid #ffb04d; outline-offset: 2px; }

/* Uma leitura que falhou não é "0%": o número some e a frase diz o que houve.
   Ver o mesmo raciocínio no `carteira.js` (`semLeitura`). */
.oc-ss-aviso { color: #9a9a9a; font-size: 11.5px; line-height: 1.5; }
[dir] .oc-ss-aviso { margin: 0 24px 18px; }

@keyframes ocSsBrilho {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

@keyframes ocSsPulso {
  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 ocSsPulsoVermelho {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Quem pediu menos movimento não recebe brilho nem pulso. O estado continua
   legível: ele está escrito, não animado. */
@media (prefers-reduced-motion: reduce) {
  .oc-ss-brilho,
  .oc-ss-ponto,
  .oc-ss-bolha,
  .oc-ss-alerta-ic { animation: none !important; }
  .oc-ss-cheio { transition: none; }
}

/* ── telefone ────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  [dir] .oc-ss-veu { padding: 16px; }
  .oc-ss-cartao { width: 100%; }
  [dir] .oc-ss-topo { padding: 16px 18px; }
  [dir] .oc-ss-valor { padding: 24px 18px 6px; }
  .oc-ss-num-v { font-size: 32px; }
  [dir] .oc-ss-end { margin: 18px 18px 0; }
  [dir] .oc-ss-prog { padding: 20px 18px 18px; }
  [dir] .oc-ss-tx,
  [dir] .oc-ss-alerta { margin: 0 18px 18px; }
  [dir] .oc-ss-pe { padding: 14px 18px; flex-wrap: wrap; }

  /* Alvo de toque ≥ 44px (seção 4 do handoff). Vale para os três botões que
     o diálogo tem — fechar, copiar e o do explorador. */
  .oc-ss-x { width: 44px; height: 44px; flex: 0 0 44px; }
  .oc-ss-copiar,
  .oc-ss-suporte,
  .oc-ss-explorer { min-height: 44px; }
  [dir] .oc-ss-copiar { padding: 12px 14px; }
  [dir] .oc-ss-explorer { padding: 13px 20px; }
}

/* ── convert.css ── */
/* Converter: o cartão de troca.
 *
 * Sai à parte do `carteira.css` porque a tela tem endereço PRÓPRIO
 * (`/convert`, montado pelo `poe_conta_secoes.py`) além de viver como seção da
 * carteira. Regra escrita com `[data-oc-carteira]` na frente só valeria no
 * segundo caso — foi por isso que `deposito.css` e `saque.css` também moram
 * fora.
 *
 * ## Metade das regras mora em `[dir]`
 *
 * A folha da ORIGEM reseta as direcionais num bloco à parte:
 *
 *     [dir] div, [dir] p, [dir] button … { border: 0; margin: 0; padding: 0 }
 *
 * Isso é (0,1,1) e vence classe sozinha (0,1,0): a regra chega ao navegador
 * com METADE das declarações aplicadas, sem erro nenhum. `[dir] .oc-cv-x` é
 * (0,2,0) e ganha.
 *
 * ## Sem `rem`
 *
 * A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
 * mão explode o layout. Tudo aqui é px. (`_tools/checa_css.py`)
 */

/* Centrado: no endereço próprio ele é a página inteira, e encostado à
   esquerda de 1.100px o cartão parece ter caído do lugar. Dentro da carteira o
   painel é estreito e a centralização não muda nada. */
[dir] .oc-cv { margin-left: auto; margin-right: auto; }

.oc-cv {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-variant-numeric: tabular-nums;
}

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

/* Uma coluna, não uma linha de dois. O `justify-content: space-between` que
   morava aqui separava o título do botão "Atualizar"; sem ele a regra ficaria
   descrevendo um segundo elemento que não existe mais. */
.oc-cv-topo { display: block; }

.oc-cv-titulo {
  margin: 0;
  font-family: 'Geist', 'OFFCODE Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--foreground-one, #fff);
}

.oc-cv-sub { display: block; margin-top: 4px; font-size: 12.5px; color: #565656; }

/* ── os dois campos ──────────────────────────────────────────────────── */

.oc-cv-campo { display: flex; flex-direction: column; gap: 8px; }

.oc-cv-rot {
  font-size: 12.5px;
  font-weight: 500;
  color: #757575;
}

.oc-cv-caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  transition: border-color .15s ease;
}

[dir] .oc-cv-caixa {
  padding: 13px 14px;
  background: #141414;
  border: 1px solid #202020;
}

[dir] .oc-cv-caixa:focus-within { border-color: #3d3d3d; }

/* O campo do valor é o elemento que cresce; o seletor tem a largura do nome
   da moeda. Sem `min-width: 0` o input de flex não encolhe abaixo do tamanho
   do conteúdo e empurra o seletor para fora da caixa. */
.oc-cv-valor {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  color: var(--foreground-one, #fff);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 500;
  text-align: right;
  letter-spacing: -.5px;
}

[dir] .oc-cv-valor { border: 0; padding: 0; }
.oc-cv-valor:focus { outline: none; }
.oc-cv-valor::placeholder { color: #3d3d3d; }

/* O que se RECEBE não é campo: é resultado. `<output>` diz isso à árvore de
   acessibilidade, e o `aria-live` faz o leitor de tela anunciar quando o
   número muda sem ninguém ter digitado nada. */
.oc-cv-saida {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.5px;
  color: var(--foreground-one, #fff);
  word-break: break-all;
}

/* 🔑 Estimativa e cotação NÃO se parecem.
 *
 * Antes da cotação o número sai do `midPrice` do catálogo: é uma conta do
 * cliente, some no arredondamento e não vale como promessa. Ele vem apagado e
 * com `≈` na frente. Depois da cotação o número é o do SERVIDOR — branco,
 * sem til, com o relógio de validade ao lado. Um slot, dois estados, e a
 * diferença tem de ser visível sem ler. */
.oc-cv-saida[data-estimado] { color: #6e6e6e; font-weight: 400; }

.oc-cv-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
}

.oc-cv-saldo {
  font-size: 11.5px;
  color: #565656;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 30/08/2026: MAX e o botão de converter são o botão padrão do site
 * (`botao.css`, corte diagonal). Forma, cor e estado desligado vêm de lá. */
.oc-cv-max { letter-spacing: .04em; text-transform: uppercase; }

/* ── o botão de inverter ─────────────────────────────────────────────── */

/* Entre os dois campos, e sobreposto ao vão: assim ele pertence aos dois em
   vez de ser uma terceira linha entre eles. */
.oc-cv-inverter-linha {
  display: flex;
  justify-content: center;
  height: 0;
  position: relative;
  z-index: 1;
}

.oc-cv-inverter {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8a8a8;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-19px);
  transition: border-color .15s ease, color .15s ease, background .15s ease,
              rotate .25s ease;
}

[dir] .oc-cv-inverter {
  padding: 0;
  border: 1px solid #262626;
  /* Opaco: ele fica POR CIMA do vão entre as duas caixas, e translúcido
     deixaria a borda delas passando pelo meio do ícone. */
  background: #090909;
}

[dir] .oc-cv-inverter:hover { border-color: #f7931a; background: #151515; }
.oc-cv-inverter:hover { color: #f7931a; }
.oc-cv-inverter:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }
.oc-cv-inverter:active { rotate: 180deg; }

/* ── o seletor de token ──────────────────────────────────────────────── */

.oc-cv-sel { position: relative; flex: 0 0 auto; }

.oc-cv-sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  color: var(--foreground-one, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  min-height: 40px;
  transition: border-color .15s ease, background .15s ease;
}

[dir] .oc-cv-sel-btn {
  padding: 7px 11px;
  border: 1px solid #262626;
  background: #1a1a1a;
}

[dir] .oc-cv-sel-btn:hover { border-color: #3d3d3d; background: #202020; }
.oc-cv-sel-btn:focus-visible { outline: 2px solid #f7931a; outline-offset: 2px; }

.oc-cv-sel-nome {
  font-size: 12px;
  font-weight: 400;
  color: #757575;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-cv-seta { font-size: 9px; color: #565656; }

/* O balão da lista. Largura maior que a do botão: ele carrega preço e
   variação, que o botão não tem espaço para mostrar. */
.oc-cv-balao {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 320px;
  max-width: min(82vw, 320px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}

[dir] .oc-cv-balao { background: #111111; border: 1px solid #262626; }

/* 🔴 Havia aqui um `[data-lado="fim"]` que abria o balão do segundo seletor
   para a ESQUERDA. Ele ancorava pelo lado da CONVERSÃO ("para"), não pela
   posição na tela — e os dois seletores ficam encostados na borda ESQUERDA
   das suas caixas. O resultado era o balão de baixo saindo por fora do cartão
   e cobrindo as linhas de conta.

   🔑 Reposicionamento se decide pela geometria, não pelo papel do elemento no
   formulário. Aqui os dois têm a mesma geometria, então nem precisam dele. */

[dir] .oc-cv-busca-caixa { padding: 9px; border-bottom: 1px solid #1c1c1c; }

.oc-cv-busca {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9px;
  color: var(--foreground-one, #fff);
  font: inherit;
  font-size: 13px;
}

[dir] .oc-cv-busca {
  padding: 9px 11px;
  background: #0b0b0b;
  border: 1px solid #262626;
}

.oc-cv-busca:focus { outline: none; }
[dir] .oc-cv-busca:focus { border-color: #f7931a; }
.oc-cv-busca::placeholder { color: #4a4a4a; }

.oc-cv-lista { max-height: 288px; overflow-y: auto; }
[dir] .oc-cv-lista { padding: 5px; }

.oc-cv-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 9px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .12s ease;
}

[dir] .oc-cv-item { padding: 8px 9px; border: 0; background: none; }
[dir] .oc-cv-item[data-ativo] { background: #1c1c1c; }
[dir] .oc-cv-item[aria-selected="true"] { background: rgba(247, 147, 26, .12); }
.oc-cv-item:focus-visible { outline: 2px solid #f7931a; outline-offset: -2px; }

.oc-cv-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.oc-cv-item-topo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.oc-cv-item-tick { font-size: 13.5px; font-weight: 600; color: var(--foreground-one, #fff); }

.oc-cv-item-nome {
  font-size: 11.5px;
  color: #565656;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.oc-cv-item-baixo { display: flex; align-items: baseline; gap: 8px; }

.oc-cv-item-preco {
  font-size: 11.5px;
  color: #757575;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oc-cv-item-var {
  font-size: 11.5px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oc-cv-sobe { color: #4cb37b; }
.oc-cv-cai { color: #e5675f; }
.oc-cv-neutro { color: #4a4a4a; }

[dir] .oc-cv-vazio { padding: 14px 12px; }
.oc-cv-vazio { font-size: 12.5px; color: #565656; }

/* O ícone da moeda, no botão e na lista. Mesmo desenho do da carteira. */
.oc-cv-moeda {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  font-size: 8.5px;
  font-weight: 700;
  color: #757575;
}

.oc-cv-moeda img { width: 100%; height: 100%; object-fit: contain; }
.oc-cv-moeda[data-oc-sem-icone] img { display: none; }
.oc-cv-item .oc-cv-moeda { flex-basis: 26px; width: 26px; height: 26px; font-size: 9.5px; }

/* ── a cotação inversa e o relógio ───────────────────────────────────── */

.oc-cv-taxa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 12px;
  font-size: 12.5px;
  color: #a8a8a8;
}

[dir] .oc-cv-taxa { padding: 11px 14px; background: #101010; border: 1px solid #1d1d1d; }

.oc-cv-taxa-num {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--foreground-one, #fff);
}

/* O relógio da validade. Laranja enquanto corre; ao vencer vira o aviso
   vermelho — e o botão de confirmar SAI (ver convert.js). */
.oc-cv-prazo {
  font-size: 11.5px;
  color: #f7931a;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

.oc-cv-prazo[data-venceu] { color: #ef4444; }

/* ── o botão de converter ────────────────────────────────────────────── */

/* Só o respiro: o tamanho do rótulo é 0.325 × altura e vem do modelo 2
 * (`botao.css`, `.ocb__label`) — um `font-size` aqui não o alcança. */
[dir] .oc-cv-acao { margin-top: 4px; }

/* ── avisos ──────────────────────────────────────────────────────────── */

.oc-cv-msg { font-size: 12.5px; line-height: 1.5; }
.oc-cv-msg-erro { color: #e5675f; }
.oc-cv-msg-ok { color: #4cb37b; }

/* ── histórico ───────────────────────────────────────────────────────── */

[dir] .oc-cv-hist { margin-top: 10px; padding-top: 18px; border-top: 1px solid #1d1d1d; }

.oc-cv-hist-rot {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #565656;
}

[dir] .oc-cv-hist-rot { margin-bottom: 12px; }

.oc-cv-hist-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
}

[dir] .oc-cv-hist-linha { padding: 9px 0; border-bottom: 1px solid #161616; }
[dir] .oc-cv-hist-linha:last-child { border-bottom: 0; }

.oc-cv-hist-par {
  color: #d0d0d0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.oc-cv-hist-quando { color: #565656; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .oc-cv-inverter:active { rotate: none; }
}

@media (max-width: 560px) {
  .oc-cv-valor, .oc-cv-saida { font-size: 17px; }
  .oc-cv-sel-nome { display: none; }
  [dir] .oc-cv-caixa { padding: 12px; }
  .oc-cv-balao { width: min(88vw, 320px); }
  /* Alvo de toque (seção 4 do handoff da carteira, mesma regra aqui). */
  [dir] .oc-cv-max { --h: 36px; --r: 10px; --raio: 9px; }
}

/* ── medidas do esqueleto ────────────────────────────────────────────────
 *
 * Cada bloco tem a altura do que vai substituir, para que o cartão real
 * entre no lugar sem empurrar nada. A textura é do `.oc-esq`, em
 * `offcode.css`. */
.oc-esq-cv-titulo { width: 152px; height: 21px; }
.oc-esq-cv-sub    { width: 236px; height: 13px; }
/* O campo é a caixa de 13px de respiro em volta de uma linha de 46px. */
.oc-esq-cv-campo  { width: 100%; height: 74px; border-radius: 12px; }
/* A linha do inverter tem altura 0 e o botão sobe 19px por cima do vão
   entre as duas caixas. O esqueleto repete o mesmo deslocamento — sem
   ele o círculo empurraria o segundo campo para baixo. */
.oc-esq-cv-inverter {
  width: 38px; height: 38px; border-radius: 50%;
  transform: translateY(-19px);
}
.oc-esq-cv-taxa   { width: 100%; height: 44px; border-radius: 10px; }
.oc-esq-cv-acao   { width: 100%; height: 50px; border-radius: 12px; }
.oc-esq-cv-hist-linha { width: 100%; height: 34px; }

[dir] .oc-esq-cv-sub { margin-top: 7px; }

.oc-esq-cv-hist { display: flex; flex-direction: column; gap: 8px; }
[dir] .oc-esq-cv-hist { margin-top: 10px; }

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