vazio tem zero, e a
* biblioteca desenharia num retângulo de 0px sem reclamar de nada.
* - COR. O corpo da captura computa preto; texto herdado nasce invisível
* sobre o tema escuro.
*/
.oc-grafico {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
/* `min-height` e não `height`: onde o container pai já dá altura (o
vue-grid do terminal), o gráfico cresce junto; onde não dá, ele ainda
assim existe. */
min-height: 340px;
height: 100%;
color: var(--text-1, #f4f4f5);
}
.oc-graf-tela {
flex: 1 1 auto;
min-height: 260px;
}
/* ── período ─────────────────────────────────────────────────────────── */
.oc-graf-periodos {
display: flex;
gap: 2px;
flex: none;
padding: 4px 2px;
}
.oc-graf-periodos button {
padding: 4px 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: inherit;
font: inherit;
font-size: 12px;
opacity: 0.55;
cursor: pointer;
}
.oc-graf-periodos button[aria-pressed='true'] {
background: rgba(128, 128, 128, 0.18);
opacity: 1;
}
.oc-graf-periodos button:focus-visible {
outline: 2px solid #f7931a;
outline-offset: -2px;
}
/* ── legenda ─────────────────────────────────────────────────────────── */
/* Sobreposta ao canvas, sem capturar o ponteiro: se ela recebesse o clique,
arrastar o gráfico pararia justamente onde a legenda está — no topo, que
é onde o cursor passa mais. */
.oc-graf-legenda {
position: absolute;
top: 34px;
left: 10px;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 10px;
pointer-events: none;
font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
opacity: 0.9;
}
.oc-graf-legenda strong {
font-weight: 600;
font-family: inherit;
}
/* A cor repete o que a vela já diz; quem não a distingue continua lendo os
números, que são a informação. */
/* Mesmo par de sinal do resto da plataforma — ver `cores()` no grafico.js. */
.oc-graf-legenda .sobe { color: #00e08f; }
.oc-graf-legenda .desce { color: #ff4d4f; }
@media (max-width: 720px) {
.oc-grafico { min-height: 260px; }
.oc-graf-tela { min-height: 200px; }
/* No telefone a legenda de 5 campos ocupa a tela toda; fica só o par e o
fechamento, que é o que se lê de relance. */
/* Só o cabeçalho (par + fechamento) encolhe no telefone; as linhas dos
indicadores ("MA7: …") ficam inteiras — a moldura da Bybit vive delas. */
.oc-leg-cab > span:not(:last-child):not(:nth-child(5)) { display: none; }
/* 🔴 O gráfico ocupa 270px do meio da tela e ENGOLIA o gesto de rolar: a
* lightweight-charts registra `touchmove` e chama `preventDefault` para
* arrastar as velas, então o dedo que começava sobre ele não movia a
* página. Medido em 29/08/2026 (440×956): gesto vertical em y=250, 350 e
* 450 → `scrollY` zero nas três; o mesmo gesto 100px abaixo do gráfico
* rolava 440px. Num terminal, o meio da tela é onde o dedo cai primeiro.
*
* 🔑 `pan-y` e não `auto`: com `pan-y` o NAVEGADOR fica dono do eixo
* vertical — e um `preventDefault` do script não tem como tomá-lo de volta,
* que é justamente o que uma regra de CSS resolve e um patch no JS da
* biblioteca não resolveria. O eixo horizontal segue com a biblioteca, e é
* nele que o gráfico anda no tempo. */
.oc-graf-tela { touch-action: pan-y; }
}
/* A barra de período da captura, que ficou sem o Vue que a ligava.
*
* `!important` não é atalho: o reset desta captura prefixa cada regra com
* `[dir]` — elemento + atributo, especificidade (0,1,1) — e ganha de
* qualquer classe única. Sem isto a regra existiria e não valeria. */
.oc-graf-morto {
display: none !important;
}
/* ── a barra da captura, agora viva ──────────────────────────────────── */
/* Controle que passou a funcionar ganha a aparência de quem funciona: sem
isto ele continua parecendo enfeite, e ninguém tenta clicar. */
.oc-barra-viva .oc-barra-clicavel {
cursor: pointer;
}
.oc-barra-viva .oc-barra-clicavel:hover {
opacity: 1;
filter: brightness(1.35);
}
.oc-barra-viva .oc-barra-clicavel:focus-visible {
outline: 2px solid #f7931a;
outline-offset: 2px;
border-radius: 4px;
}
.oc-barra-viva .oc-barra-ativo {
filter: brightness(1.5);
}
/* Controle SEM fonte de dado sai da tela.
*
* 🔑 Não é esconder problema: é o contrário. `1s` não existe na fonte (a
* menor vela é de 1 minuto) e sobrepor ordens precisa de API que esta tela
* ainda não tem. Deixá-los visíveis prometeria função que não há — e quem
* clica e não vê nada conclui que a plataforma travou.
*
* `!important` porque o reset desta captura prefixa cada regra com `[dir]`,
* o que dá (0,1,1) e ganha de classe única. */
/* O popup de intervalos do telefone trouxe da captura um "Edit" no título e
* um bloco "Customize intervals" com um "+" — controles do Vue da origem,
* sem nenhum código atrás aqui. Controle que não faz nada sai da tela. */
/* Com dez períodos fora, sobram seis células num flex `space-between` de
* quatro colunas: a última linha ficava `4h ………… 1d`, um em cada ponta.
* Três por linha: 1m 5m 15m / 1h 4h 1d. `!important` pelo mesmo motivo das
* regras acima: o CSS da captura é escopado e ganha de classe nossa. */
[dir] .all-intervals .content { justify-content: flex-start !important; gap: 10px !important; }
[dir] .all-intervals .content > div { flex: 0 0 calc((100% - 20px) / 3) !important; }
[dir] .all-intervals .header-edit-wrap,
[dir] .all-intervals .custom-interval { display: none !important; }
.oc-barra-sem-fonte {
display: none !important;
}
.oc-barra-recado {
margin-left: 10px;
font-size: 11px;
opacity: 0.75;
}
/* O menu suspenso da captura, quando aberto.
*
* O `display:none` dele vem de um `style=""` inline, e atributo de estilo
* ganha de qualquer folha — por isso `!important`, que aqui é a única forma
* de sobrepor. */
.oc-pop-aberto {
display: block !important;
z-index: 60 !important;
}
/* A caixinha do alerta de preço. Vai no e não dentro da barra: a
barra tem `overflow` recortando, e um popover dentro dela nasce cortado. */
.oc-alerta-caixa {
position: fixed;
z-index: 80;
display: flex;
gap: 8px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
border-radius: 10px;
background: var(--bx-bg-one, #16171b);
color: var(--text-1, #f4f4f5);
font-size: 13px;
}
.oc-alerta-caixa .oc-input {
width: 130px;
padding: 7px 10px;
border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-variant-numeric: tabular-nums;
}
.oc-alerta-caixa .oc-botao {
margin: 0;
padding: 7px 14px;
border: 0;
border-radius: 999px;
background: #f7931a;
color: #101114;
font: inherit;
font-weight: 600;
cursor: pointer;
}
/* ── menu de indicadores e ajustes (06/09/2026) ─────────────────────────
* Ancorado ao ícone da barra por `abrePop` (fixed, no body). */
.oc-ind-menu {
position: fixed;
top: 0;
left: 0;
z-index: 1200;
min-width: 232px;
padding: 8px 6px;
border-radius: 10px;
background: #141416;
border: 1px solid #2a2a2e;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
color: #e8e8ec;
font-size: 12.5px;
}
[dir] .oc-ind-menu { margin: 0; }
.oc-ind-titulo {
padding: 6px 10px 4px;
color: #7d7f8a;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.oc-ind-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px;
border-radius: 7px;
cursor: pointer;
user-select: none;
}
.oc-ind-item:hover { background: rgba(255, 255, 255, 0.05); }
[dir] .oc-ind-item input { margin: 0; width: 14px; height: 14px; accent-color: #f7931a; }
.oc-ind-cor { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
/* ── barra de desenhos (grafico-desenhos.js, 06/09/2026) ────────────────
* Coluna de ferramentas colada à esquerda do painel, como no TradingView.
* O host do gráfico vira referência de posição; a barra fica sobre o canvas
* e some no celular (o próprio script não a monta em `body.oc-mv`). */
[data-oc-grafico] { position: relative; }
/* 07/09/2026 ("quero igual 100 %"): a coluna de ferramentas do TradingView —
à esquerda do painel, da altura dele, ícones em cinza, o ativo em laranja
da marca (lá é azul), separadores finos, o "‹" no pé. O gráfico começa
depois dela (`margin-left` no painel), como lá. */
.oc-des-barra {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
width: 52px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: #0b0b0d;
border-right: 1px solid #1f2027;
overflow: hidden;
}
[dir] .oc-des-barra { margin: 0; padding: 10px 0 6px; }
.oc-des-barra.oc-recolhida { display: none; }
/* Submenu do grupo "previsão": posição longa / curta. */
.oc-des-sub { position: absolute; left: 56px; z-index: 7; display: flex; flex-direction: column; min-width: 180px; background: #141416; border: 1px solid #2a2a2e; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
[dir] .oc-des-sub { padding: 6px; margin: 0; }
.oc-des-sub-item { height: 32px; border: 0; background: transparent; color: #d1d4dc; font: 13px/1 -apple-system, "Inter", "Segoe UI", sans-serif; text-align: left; border-radius: 6px; cursor: pointer; }
[dir] .oc-des-sub-item { padding: 0 10px; }
.oc-des-sub-item:hover { background: #1f2027; color: #fff; }
[data-oc-grafico]:not(.oc-sem-barra) .oc-graf-tela,
[data-oc-grafico]:not(.oc-sem-barra) .oc-graf-pe { margin-left: 52px; }
[data-oc-grafico].oc-sem-barra .oc-graf-legenda { left: 12px; }
.oc-des-bt {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 34px;
border: 0;
border-radius: 6px;
background: transparent;
color: #b2b5be;
cursor: pointer;
}
.oc-des-bt svg { width: 22px; height: 22px; }
[dir] .oc-des-bt { padding: 0; }
.oc-des-bt:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.oc-des-bt.oc-on { color: #f7931a; background: rgba(247, 147, 26, 0.12); }
.oc-des-bt.oc-armado { color: #ff4d4f; }
.oc-des-bt.oc-apagado, .oc-des-bt:disabled { color: #4a4c55; cursor: default; }
.oc-des-bt.oc-des-recolhe { margin-top: auto; width: 28px; height: 24px; color: #6b6d75; }
.oc-des-sep { display: block; width: 26px; height: 1px; margin: 3px 0; background: #2a2a2e; flex: 0 0 auto; }
.oc-des-barra.oc-desenhando ~ .oc-graf-tela,
[data-oc-grafico]:has(.oc-des-barra.oc-desenhando) .oc-graf-tela { cursor: crosshair; }
/* ── o cabeçalho do TradingView (grafico-barra.js `montaTopoTV`) ─────── */
.oc-capt-oculto { display: none !important; }
.oc-tv-viva { display: flex !important; align-items: center; min-height: 44px; }
.oc-tv-topo {
display: flex; align-items: center; gap: 2px;
width: 100%;
font: 14px/1 -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
color: #b2b5be;
}
[dir] .oc-tv-topo { padding: 0 8px 0 12px; margin: 0; }
.oc-tv-rot { color: #b2b5be; }
[dir] .oc-tv-rot { margin-right: 10px; }
.oc-tv-int {
height: 30px; border: 0; border-radius: 6px; background: transparent;
color: #b2b5be; font: inherit; cursor: pointer;
}
[dir] .oc-tv-int { padding: 0 10px; }
.oc-tv-int:hover { color: #fff; background: rgba(255,255,255,.06); }
.oc-tv-int.oc-on { color: #fff; background: #2a2e39; }
.oc-tv-int:disabled { color: #4a4c55; cursor: default; }
.oc-tv-bt {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 30px; border: 0; border-radius: 6px;
background: transparent; color: #b2b5be; cursor: pointer;
}
[dir] .oc-tv-bt { padding: 0; margin: 0 1px; }
.oc-tv-bt:hover { color: #fff; background: rgba(255,255,255,.06); }
.oc-tv-bt.oc-on { color: #f7931a; }
.oc-tv-bt.oc-apagado, .oc-tv-bt:disabled { color: #4a4c55; cursor: default; }
.oc-tv-bt.oc-tv-seta { width: 24px; }
.oc-tv-sep { display: inline-block; width: 1px; height: 22px; background: #2a2e39; }
[dir] .oc-tv-sep { margin: 0 8px; }
.oc-tv-dir { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.oc-tv-dir .oc-fonte { position: static; transform: none; color: #b2b5be; font: inherit; }
[dir] .oc-tv-dir .oc-fonte { padding: 4px 4px; margin: 0; }
.oc-tv-pop {
position: fixed; top: 0; left: 0; z-index: 1200;
display: flex; flex-direction: column; min-width: 150px;
background: #141416; border: 1px solid #2a2a2e; border-radius: 8px;
box-shadow: 0 12px 32px rgba(0,0,0,.55);
}
[dir] .oc-tv-pop { padding: 6px; margin: 0; }
.oc-tv-pop-item {
display: flex; align-items: center; gap: 10px; height: 32px;
border: 0; border-radius: 6px; background: transparent; color: #d1d4dc;
font: 13px/1 -apple-system, "Inter", "Segoe UI", sans-serif; text-align: left; cursor: pointer;
}
[dir] .oc-tv-pop-item { padding: 0 10px; }
.oc-tv-pop-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.oc-tv-pop-item.oc-on { color: #f7931a; }
/* legenda e rodapé no tamanho de lá */
.oc-graf-legenda { font-size: 14px; top: 12px; gap: 6px; }
.oc-leg-cab strong { font-size: 15px; }
.oc-leg-linha { font-size: 14px; color: #b2b5be; }
.oc-leg-nome { color: #b2b5be; }
.oc-leg-alt { width: 46px; height: 28px; font-size: 12px; }
.oc-leg-volume { position: absolute; left: 62px; z-index: 3; display: flex; gap: 8px; pointer-events: none; font: 14px/1.2 -apple-system, "Inter", "Segoe UI", sans-serif; }
[data-oc-grafico].oc-sem-barra .oc-leg-volume { left: 12px; }
.oc-graf-pe { flex: 0 0 34px; font-size: 14px; font-family: -apple-system, "Inter", "Segoe UI", sans-serif; }
.oc-pe-bt { height: 26px; font-size: 14px; }
[dir] .oc-pe-bt { padding: 0 9px; }
.oc-pe-esq { display: inline-flex; align-items: center; gap: 12px; }
.oc-pe-cal { display: inline-flex; align-items: center; color: #8b8d95; cursor: pointer; position: relative; }
.oc-pe-cal:hover { color: #fff; }
.oc-pe-data { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
/* ── legenda no desenho do TradingView (06/09/2026) ─────────────────── */
.oc-graf-legenda { flex-direction: column; gap: 3px; left: 56px; font-size: 12px; opacity: 1; }
.oc-leg-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.oc-leg-cab strong { font-size: 13px; color: #fff; }
.oc-leg-meta { color: #8b8d95; }
.oc-leg-rot { color: #8b8d95; margin-right: 1px; }
.oc-leg-vol { color: #a8a8a8; }
.oc-leg-ind { display: flex; flex-direction: column; gap: 2px; }
.oc-leg-linha { display: flex; align-items: center; gap: 7px; color: #c9c9cf; }
.oc-leg-linha i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.oc-leg-nome { color: #8b8d95; min-width: 44px; }
.oc-leg-val { font-variant-numeric: tabular-nums; }
.oc-graf-legenda.oc-recolhida .oc-leg-ind { display: none; }
.oc-leg-alt {
align-self: flex-start;
pointer-events: auto;
width: 22px; height: 16px;
border: 1px solid #2a2a2e; border-radius: 4px;
background: rgba(20,20,22,.8); color: #8b8d95;
font: 10px/1 ui-monospace, monospace; cursor: pointer;
}
[dir] .oc-leg-alt { padding: 0; margin: 2px 0 0; }
.oc-leg-alt:hover { color: #fff; }
/* Comparar: a linha do comparado na legenda e a caixa de busca do pop. */
.oc-leg-comp { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9c9cf; pointer-events: auto; }
.oc-leg-comp i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.oc-leg-comp-nome { color: #d1d4dc; font-weight: 600; }
.oc-leg-comp-x { border: 0; background: transparent; color: #8b8d95; font-size: 14px; line-height: 1; cursor: pointer; }
[dir] .oc-leg-comp-x { padding: 0 2px; margin: 0; }
.oc-leg-comp-x:hover { color: #fff; }
.oc-tv-pop-comp { min-width: 250px; }
.oc-tv-comp-caixa { width: 100%; height: 30px; border: 1px solid #2a2a2e; border-radius: 6px; background: #0b0b0d; color: #fff; font: 13px -apple-system, "Inter", "Segoe UI", sans-serif; box-sizing: border-box; outline: none; }
[dir] .oc-tv-comp-caixa { padding: 0 8px; margin: 0 0 6px; }
.oc-tv-comp-caixa:focus { border-color: #f7931a; }
.oc-tv-comp-lista { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
/* ── o pé: hora · % · log · auto ─────────────────────────────────────── */
.oc-graf-pe {
flex: 0 0 22px;
display: flex; align-items: center; justify-content: space-between;
border-top: 1px solid #1f2027;
color: #8b8d95;
font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
[dir] .oc-graf-pe { padding: 0 8px 0 12px; margin: 0; }
.oc-pe-hora { font-variant-numeric: tabular-nums; }
.oc-pe-dir { display: flex; gap: 2px; }
.oc-pe-bt {
border: 0; border-radius: 4px; background: transparent; color: #8b8d95;
font: inherit; cursor: pointer; height: 18px;
}
[dir] .oc-pe-bt { padding: 0 7px; }
.oc-pe-bt:hover { color: #fff; background: rgba(255,255,255,.06); }
.oc-pe-bt.oc-on { color: #fff; background: rgba(255,255,255,.12); }
/* ── "Mark price ˅" na barra ─────────────────────────────────────────── */
/* Ancorado à direita do cabeçalho: como filho do flex ele caía numa segunda
linha (medido no ar, 06/09 23:5x). */
.oc-barra-viva { position: relative; }
.oc-fonte {
position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
border: 0; border-radius: 6px;
background: transparent; color: #c9c9cf;
font: 12px/1 inherit; cursor: pointer;
appearance: auto;
}
[dir] .oc-fonte { padding: 4px 6px; margin-right: 6px; }
.oc-fonte:hover { background: rgba(255,255,255,.06); }
.oc-fonte option { background: #141416; color: #e8e8ec; }
@media (max-width: 720px) {
.oc-graf-legenda { left: 10px; }
.oc-graf-pe { display: none; }
}
.oc-des-texto {
position: absolute; z-index: 6;
width: 180px; height: 24px;
border: 1px solid #f7931a; border-radius: 5px;
background: #141416; color: #fff;
font: 12px/1 -apple-system, "Inter", "Segoe UI", sans-serif;
}
[dir] .oc-des-texto { padding: 0 8px; margin: 0; }
.oc-leg-moeda { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
[dir] .oc-leg-moeda { margin: 0 4px 0 0; }
.oc-leg-nome { min-width: 0; white-space: nowrap; }
/* ── o celular no desenho da Bybit (grafico-movel.js, 07/09/2026) ───────── */
body.oc-by .oc-tv-topo, body.oc-by .oc-leg-cab, body.oc-by .oc-leg-alt, body.oc-by .oc-graf-pe { display: none !important; }
/* Medidas da captura da Bybit (07/09/2026, 430pt): legenda ~10px proporcional
* com 12px de linha, a 16px da borda; nome e valor na cor da linha. */
body.oc-by .oc-graf-legenda { left: 16px; top: 4px; gap: 0; font: 400 10px/12px -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; letter-spacing: 0; }
body.oc-by .oc-leg-ind { flex-direction: row; flex-wrap: wrap; gap: 0 7px; }
body.oc-by .oc-leg-linha { gap: 3px; font-size: 10px; line-height: 12px; }
body.oc-by .oc-leg-linha i { display: none; }
body.oc-by .oc-leg-nome { min-width: 0; }
body.oc-by .oc-leg-quebra { flex-basis: 100%; height: 0; }
.oc-leg-quebra { display: none; }
body.oc-by .oc-leg-quebra { display: block; }
.oc-leg-paineis { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 3; }
.oc-leg-painel { position: absolute; left: 62px; display: flex; flex-wrap: wrap; gap: 2px 8px; font: 13px/1.2 -apple-system, "Inter", "Segoe UI", sans-serif; color: #b2b5be; }
[data-oc-grafico].oc-sem-barra .oc-leg-painel, body.oc-by .oc-leg-painel { left: 10px; }
body.oc-by .oc-leg-painel { left: 16px; gap: 0 7px; font-size: 10px; line-height: 12px; }
.oc-leg-painel .oc-leg-nome { color: #8b8d95; }
body.oc-by .oc-by-viva { display: flex !important; align-items: center; min-height: 32px; }
.oc-by-topo { display: flex; align-items: center; gap: 0; width: 100%; font: 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; color: #8b8d95; }
[dir] .oc-by-topo { padding: 0 6px 0 8px; margin: 0; }
.oc-by-int { height: 28px; border: 0; background: transparent; color: #8b8d95; font: inherit; cursor: pointer; white-space: nowrap; }
[dir] .oc-by-int { padding: 0 7px; }
.oc-by-int.oc-on { color: #fff; font-weight: 600; }
.oc-by-int.oc-apagado, .oc-by-int:disabled { color: #4a4c55; }
.oc-by-depth-bt { margin-left: auto; }
.oc-by-depth-bt.oc-on { color: #fff; font-weight: 600; }
[dir] .oc-by-depth-bt { border-left: 1px solid #2a2a2e; margin-left: auto; padding-left: 10px; }
.oc-by-icones { display: inline-flex; align-items: center; gap: 2px; }
[dir] .oc-by-icones { border-left: 1px solid #2a2a2e; margin-left: 6px; padding-left: 6px; }
.oc-by-ico { width: 28px; height: 28px; border: 0; background: transparent; color: #b2b5be; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
[dir] .oc-by-ico { padding: 0; }
.oc-by-ico.oc-apagado, .oc-by-ico:disabled { color: #4a4c55; }
.oc-by-pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; min-width: 120px; background: #141416; border: 1px solid #2a2a2e; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
[dir] .oc-by-pop { padding: 6px; margin: 0; }
.oc-by-pop-item { height: 32px; border: 0; background: transparent; color: #d1d4dc; font: 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; text-align: left; cursor: pointer; border-radius: 6px; }
[dir] .oc-by-pop-item { padding: 0 10px; }
.oc-by-abas { flex: 0 0 34px; display: flex; align-items: center; border-top: 1px solid #1f2027; background: #0b0b0d; }
.oc-by-abas-rolo { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.oc-by-abas-rolo::-webkit-scrollbar { display: none; }
[dir] .oc-by-abas-rolo { padding: 0 6px; }
.oc-by-aba { flex: 0 0 auto; height: 28px; border: 0; background: transparent; color: #6b6d75; font: 600 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; cursor: pointer; }
[dir] .oc-by-aba { padding: 0 8px; }
.oc-by-aba.oc-on { color: #fff; }
.oc-by-sep { flex: 0 0 1px; height: 18px; background: #2a2a2e; }
[dir] .oc-by-sep { margin: 0 4px; }
.oc-by-cheia { flex: 0 0 34px; height: 34px; border: 0; background: transparent; color: #b2b5be; display: inline-flex; align-items: center; justify-content: center; }
[dir] .oc-by-cheia { padding: 0; border-left: 1px solid #1f2027; }
.oc-by-caixa { position: absolute; right: 2px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 0; background: #0b0b0d; border: 1px solid #e4e6eb; border-radius: 5px; font: 500 11px/13px -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; text-align: right; }
[dir] .oc-by-caixa { padding: 3px 5px; margin: 0; }
.oc-by-caixa-ult { color: #fff; }
.oc-by-caixa-marca { color: #f7931a; }
.oc-by-caixa-cont { color: #fff; font-weight: 500; }
body.oc-by [data-oc-grafico]:not(.oc-sem-barra) .oc-graf-tela { margin-left: 0; }
/* O ⤢ da captura fica no canto do `.kline-view`, por cima dos ícones da Bybit; a tela cheia vive na barra de baixo. */
body.oc-by .kline-view > .full-screen { display: none !important; }
/* A barra lateral de desenhos é do desktop; no celular o lápis abre a barra da Bybit embaixo. */
body.oc-by .oc-des-barra { display: none !important; }
body.oc-by [data-oc-grafico] .oc-graf-legenda { left: 16px; }
body.oc-by [data-oc-grafico] .oc-leg-painel { left: 16px; }
/* Tela cheia por CSS (o Safari do iPhone não tem requestFullscreen para elementos): host fixo
* cobrindo a tela sob a barra de períodos, que fica fixa no topo. */
/* Tranca a rolagem do documento (regra da captura vence sem o !important; no WebKit de
* desktop a barra clássica de 5px ainda comeria a largura da camada). */
html:has(body.oc-by-cheia-ativa), body.oc-by-cheia-ativa { overflow: hidden !important; }
/* 🔴 Não é `fixed` no host: o item do grid tem `transform` e prende o fixed. É uma camada no body. */
.oc-by-cheia-camada { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; background: #0b0b0d; }
[dir] .oc-by-cheia-camada { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); margin: 0; }
.oc-by-cheia-camada .oc-by-viva { flex: 0 0 auto; width: 100%; }
[data-oc-grafico].oc-cheia { flex: 1 1 auto; height: auto !important; min-height: 0; width: 100%; }
/* Depth: o canvas cobre a área do K-line (que segue vivo, só escondido) até a barra MA…RSI. */
/* 🔴 `canvas` é substituído: com `top`/`bottom` e altura auto a altura sai da PROPORÇÃO 300×150 e o `bottom` é ignorado — a altura tem de ser explícita. */
.oc-by-depth { display: none; position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: calc(100% - 34px); background: #0b0b0d; }
[data-oc-grafico].oc-by-profundidade .oc-by-depth { display: block; }
[data-oc-grafico].oc-by-profundidade :is(.oc-graf-legenda, .oc-leg-paineis, .oc-by-caixa) { visibility: hidden; }
/* ── barra de desenho: coluna à ESQUERDA do gráfico (dono, 07/09/2026 01:15,
* "coloque na vertical do lado esquerdo"), do topo até a barra MA…RSI, que
* continua visível. Rola quando os 13 botões não cabem; o ✕ fica preso no pé.
* O gráfico e as legendas se afastam 36px enquanto se desenha. ──────────── */
.oc-by-des { display: none; position: absolute; left: 0; top: 0; bottom: 34px; z-index: 5; width: 36px; flex-direction: column; align-items: center; background: rgba(11,11,13,.94); border-right: 1px solid #1f2027; }
[data-oc-grafico].oc-by-desenhando .oc-by-des { display: flex; }
[data-oc-grafico].oc-by-desenhando .oc-graf-tela { cursor: crosshair; }
body.oc-by [data-oc-grafico].oc-by-desenhando .oc-graf-tela { margin-left: 36px; }
body.oc-by [data-oc-grafico].oc-by-desenhando .oc-graf-legenda,
body.oc-by [data-oc-grafico].oc-by-desenhando .oc-leg-painel { left: 50px; }
.oc-by-des-rolo { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
/* Quando os botões não cabem, o pé da coluna esmaece para avisar que rola; some no fim. */
.oc-by-des.oc-rola:not(.oc-no-fim) .oc-by-des-rolo { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.oc-by-des-rolo::-webkit-scrollbar { display: none; }
[dir] .oc-by-des-rolo { padding: 4px 0; }
.oc-by-des .oc-by-ico { flex: 0 0 30px; width: 32px; height: 30px; color: #8b8d95; border-radius: 6px; }
.oc-by-des .oc-by-ico.oc-on { color: #fff; background: #1f2027; }
.oc-by-des .oc-by-ico.oc-armado { color: #ef454a; }
.oc-by-des .oc-by-sep { flex: 0 0 1px; width: 18px; height: 1px; }
[dir] .oc-by-des .oc-by-sep { margin: 3px 0; }
.oc-by-des-x { flex: 0 0 34px; width: 36px; height: 34px; color: #b2b5be; }
[dir] .oc-by-des-x { border-left: 0; border-top: 1px solid #1f2027; }
/* ── folhas (indicadores · ajustes): sobem do pé da tela ─────────────────── */
.oc-by-folha-fundo { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.oc-by-folha { width: 100%; max-height: 72vh; overflow-y: auto; background: #141416; border-radius: 14px 14px 0 0; color: #d1d4dc; font: 14px/1.3 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
[dir] .oc-by-folha { padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; }
.oc-by-folha-cab { display: flex; align-items: center; justify-content: space-between; height: 46px; border-bottom: 1px solid #1f2027; }
[dir] .oc-by-folha-cab { padding: 0 8px 0 16px; }
.oc-by-folha-cab strong { font-size: 15px; color: #fff; }
.oc-by-folha-x { width: 34px; height: 34px; border: 0; background: transparent; color: #b2b5be; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
[dir] .oc-by-folha-x { padding: 0; }
[dir] .oc-by-folha-corpo { padding: 4px 16px 0; }
.oc-by-folha-secao { font-size: 12px; color: #8b8d95; text-transform: uppercase; letter-spacing: .04em; }
[dir] .oc-by-folha-secao { margin: 12px 0 4px; }
.oc-by-folha-linha { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-bottom: 1px solid #1a1b1f; }
.oc-by-folha-tx { display: flex; flex-direction: column; gap: 1px; }
.oc-by-folha-nome { color: #fff; }
.oc-by-folha-dica { font-size: 11px; color: #8b8d95; }
.oc-by-sw { flex: 0 0 40px; width: 40px; height: 22px; border: 0; border-radius: 11px; background: #2a2a2e; position: relative; cursor: pointer; }
[dir] .oc-by-sw { padding: 0; margin: 0; }
.oc-by-sw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.oc-by-sw.oc-on { background: #f7931a; }
.oc-by-sw.oc-on i { transform: translateX(18px); }
.oc-by-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[dir] .oc-by-chips { margin: 2px 0 6px; }
.oc-by-chip { height: 30px; border: 1px solid #2a2a2e; border-radius: 15px; background: transparent; color: #d1d4dc; font: 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; }
[dir] .oc-by-chip { padding: 0 12px; }
.oc-by-chip.oc-on { border-color: #f7931a; color: #f7931a; }
.oc-by-folha-bt { width: 100%; height: 40px; border: 1px solid #2a2a2e; border-radius: 8px; background: transparent; color: #fff; font: 14px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; }
[dir] .oc-by-folha-bt { margin: 12px 0 0; padding: 0; }
/* ── codebot-plano.css ── */
/* CODEBOT AI — página de investimento (handoff design_handoff_codebot, 31/08).
*
* Fidelidade ALTA ao protótipo do dono: fundo #070707 com radial, cards
* #0f0f0f raio 18 borda #232323, filete laranja no topo, labels de seção com
* tick diagonal, e o padrão de botão OFFCODE em skewX(-26.6deg) — peça
* principal + vão + bloco escuro com a seta ↗.
*
* Fontes: Space Grotesk (UI) + JetBrains Mono (números) — variable 400-700,
* servidas de /_local/fonts (lição das webfontes 404: nada de host externo).
*
* ⚠️ Sem `rem` (raiz da captura = 13.33vw). Reset `[dir] *` (0,1,0): margens
* e paddings nascem com `[dir]` (0,2,0). */
@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;
}
.oc-cbp {
display: block;
min-height: 100vh;
background: radial-gradient(ellipse 70% 40% at 50% -12%, #191106 0%, #070707 55%) #070707;
font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
color: #fff;
font-variant-numeric: tabular-nums;
}
[dir] .oc-cbp { padding: 0 0 96px; }
[dir] body.oc-com-abas .oc-cbp { padding-top: 65px; }
.oc-cbp-inner { max-width: 1240px; }
[dir] .oc-cbp-inner { margin: 0 auto; padding: 48px 32px 0; }
@media (max-width: 640px) { [dir] .oc-cbp-inner { padding: 28px 16px 0; } }
.oc-cbp .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* ── peças do botão diagonal (construção por spans absolutos) ───────────── */
.oc-dg { position: relative; display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; }
.oc-dg:hover { filter: brightness(1.1); }
.oc-dg:disabled { cursor: default; opacity: .45; filter: none; }
.oc-dg-a { position: absolute; top: 0; bottom: 0; }
.oc-dg-rot { position: relative; display: flex; align-items: center; justify-content: center; }
/* ── cabeçalho ──────────────────────────────────────────────────────────── */
.oc-cbp-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.oc-cbp-topo-esq { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.oc-cbp-titulo { font-size: 34px; font-weight: 700; letter-spacing: -.5px; color: #fff; }
[dir] .oc-cbp-titulo { margin: 0; }
@media (max-width: 640px) { .oc-cbp-titulo { font-size: 26px; } }
.oc-cbp-chip-taxa { position: relative; display: inline-flex; align-items: center; height: 34px; }
.oc-cbp-chip-taxa .p1 { position: absolute; top: 0; bottom: 0; left: 0; right: 22px; background: #f7931a; border-radius: 10px 0 0 10px; }
.oc-cbp-chip-taxa .p2 { position: absolute; top: 0; bottom: 0; right: 8px; width: 26px; background: #f7931a; transform: skewX(-26.6deg); }
.oc-cbp-chip-taxa .rot { position: relative; color: #0a0a0a; font-size: 14px; font-weight: 700; }
[dir] .oc-cbp-chip-taxa .rot { padding: 0 26px 0 13px; }
.oc-cbp-volta { height: 40px; color: #e4e4e4; font-size: 13px; font-weight: 600; text-decoration: none; }
.oc-cbp-volta:hover { color: #f7931a; }
.oc-cbp-volta .p1 { left: 0; right: 20px; background: #1c1c1c; border-radius: 12px 0 0 12px; }
.oc-cbp-volta .p2 { right: 9px; width: 24px; background: #1c1c1c; transform: skewX(-26.6deg); }
[dir] .oc-cbp-volta .oc-dg-rot { padding: 0 26px 0 15px; }
/* ── grade principal ────────────────────────────────────────────────────── */
.oc-cbp-grade { display: grid; grid-template-columns: 1.9fr 1fr; gap: 24px; align-items: start; }
[dir] .oc-cbp-grade { margin-top: 24px; }
.oc-cbp-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.oc-cbp-lado { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
@media (max-width: 900px) {
.oc-cbp-grade { grid-template-columns: 1fr; }
.oc-cbp-lado { position: static; order: -1; }
}
.oc-cbp-card { background: #0f0f0f; border: 1px solid #232323; border-radius: 18px; overflow: hidden; position: relative; }
.oc-cbp-filete { height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(247, 147, 26, .5) 50%, transparent 100%); }
.oc-cbp-filete--forte { background: linear-gradient(90deg, transparent 0%, #f7931a 50%, transparent 100%); }
.oc-cbp-filete--rubro { background: linear-gradient(90deg, transparent 0%, #e5675f 50%, transparent 100%); }
.oc-cbp-rotulo { display: flex; align-items: center; gap: 10px; }
.oc-cbp-tick { width: 9px; height: 9px; background: #f7931a; transform: skewX(-26.6deg); border-radius: 1px; flex: 0 0 auto; }
.oc-cbp-tick--rubro { background: #e5675f; }
.oc-cbp-rotulo span:last-child { color: #8a8a8a; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; }
/* ── card do gráfico ────────────────────────────────────────────────────── */
.oc-cbp-graf-cab { display: flex; align-items: center; justify-content: space-between; }
[dir] .oc-cbp-graf-cab { padding: 16px 22px 0; }
.oc-cbp-graf-par { font-size: 12px; color: #565656; }
.oc-cbp-graf { height: 400px; position: relative; }
[dir] .oc-cbp-graf { margin: 12px 12px 14px; }
@media (max-width: 640px) { .oc-cbp-graf { height: 300px; } }
/* ── card das abas ──────────────────────────────────────────────────────── */
.oc-cbp-abas { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #1a1a1a; background: #0b0b0b; }
[dir] .oc-cbp-abas { padding: 12px 16px; }
.oc-cbp-dot { width: 7px; height: 7px; border-radius: 50%; background: #f7931a; animation: ocCbpPulsa 2s ease infinite; }
[dir] .oc-cbp-dot { margin: 0 10px 0 6px; }
@keyframes ocCbpPulsa {
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); }
}
@media (prefers-reduced-motion: reduce) { .oc-cbp-dot { animation: none; } }
.oc-cbp-aba { height: 32px; }
.oc-cbp-aba .p1 { left: 0; right: 16px; border-radius: 9px 0 0 9px; }
.oc-cbp-aba .p2 { right: 7px; width: 18px; transform: skewX(-26.6deg); }
.oc-cbp-aba .p1, .oc-cbp-aba .p2 { background: transparent; }
.oc-cbp-aba.oc-on .p1, .oc-cbp-aba.oc-on .p2 { background: #1c1c1c; }
.oc-cbp-aba .oc-dg-rot { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #565656; }
[dir] .oc-cbp-aba .oc-dg-rot { padding: 0 24px 0 14px; }
.oc-cbp-aba.oc-on .oc-dg-rot { color: #f7931a; }
/* feed de operações */
.oc-cbp-op { display: grid; grid-template-columns: 66px 92px 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid #161616; opacity: 1; transition: opacity .5s ease, background .15s ease; }
[dir] .oc-cbp-op { padding: 13px 22px; }
.oc-cbp-op:hover { background: #131313; }
.oc-cbp-op.oc-cbp-nova { opacity: 0; }
.oc-cbp-op-hora { color: #4a4a4a; font-size: 12px; }
.oc-cbp-op-par { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: #fff; }
.oc-cbp-op-lado { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
.oc-cbp-op-lado.oc-longo { color: #4cb37b; }
.oc-cbp-op-lado.oc-curto { color: #e5675f; }
.oc-cbp-op-preco { color: #a8a8a8; font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-cbp-op-pnl { text-align: right; font-size: 13px; font-weight: 600; white-space: nowrap; }
.oc-cbp-op-pnl.oc-ganho { color: #4cb37b; }
.oc-cbp-op-pnl.oc-perda { color: #e5675f; }
@media (max-width: 560px) {
.oc-cbp-op { grid-template-columns: 56px 80px 1fr auto; }
.oc-cbp-op-preco { display: none; }
}
/* faixa do sacável + linhas de posição */
.oc-cbp-sacavel { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #0b0b0b; border-bottom: 1px solid #1a1a1a; }
[dir] .oc-cbp-sacavel { padding: 14px 22px; }
.oc-cbp-sacavel-num { font-size: 15px; font-weight: 600; color: #4cb37b; }
.oc-cbp-sacavel-sub { color: #545454; font-size: 11px; }
.oc-cbp-vazio { text-align: center; color: #4a4a4a; font-size: 13px; border: 1px dashed #232323; border-radius: 12px; }
[dir] .oc-cbp-vazio { margin: 18px 22px; padding: 26px 22px; }
.oc-cbp-pos { display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid #161616; transition: background .15s ease; }
[dir] .oc-cbp-pos { padding: 15px 22px; }
.oc-cbp-pos:hover { background: #131313; }
.oc-cbp-pos-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oc-cbp-pos-nome { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #fff; }
.oc-cbp-pos-tick { width: 8px; height: 8px; transform: skewX(-26.6deg); border-radius: 1px; }
.oc-cbp-pos-data { color: #4a4a4a; font-size: 11px; }
.oc-cbp-pos-status { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; }
.oc-cbp-link-claim { background: none; border: 0; padding: 0; color: #f7931a; font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.oc-cbp-link-claim:hover { color: #ffb04d; }
.oc-cbp-pos-linhas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.oc-cbp-pos-col { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.oc-cbp-pos-col .v { font-size: 13px; font-weight: 600; color: #fff; }
.oc-cbp-pos-col .v.oc-verde { color: #4cb37b; }
.oc-cbp-pos-col .k { color: #545454; font-size: 11px; }
.oc-cbp-pos-prog { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 130px; }
.oc-cbp-barra-trilho { height: 4px; background: #1d1d1d; border-radius: 999px; overflow: hidden; }
.oc-cbp-barra { height: 100%; background: linear-gradient(90deg, #9d5600, #f7931a); border-radius: 999px; }
.oc-cbp-pos-prog-l { display: flex; justify-content: space-between; gap: 10px; color: #4a4a4a; font-size: 10.5px; }
.oc-cbp-link-encerrar { background: none; border: 0; padding: 0; color: #4a4a4a; font-size: 11.5px; font-weight: 500; cursor: pointer; align-self: flex-end; }
.oc-cbp-link-encerrar:hover { color: #e5675f; }
/* histórico */
.oc-cbp-hist { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #161616; }
[dir] .oc-cbp-hist { padding: 14px 22px; }
.oc-cbp-hist:hover { background: #131313; }
.oc-cbp-hist-status { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: #8a8a8a; }
/* ── painel de aporte ───────────────────────────────────────────────────── */
[dir] .oc-cbp-painel { padding: 24px 26px; }
[dir] .oc-cbp-painel .oc-cbp-rotulo { padding: 4px 0 16px; }
.oc-cbp-painel-k { color: #8a8a8a; font-size: 13.5px; }
[dir] .oc-cbp-seg-wrap { padding: 9px 0 18px; display: flex; flex-direction: column; gap: 9px; }
.oc-cbp-seg { display: flex; align-items: stretch; height: 40px; }
.oc-cbp-seg .oc-dg { flex: 1; }
.oc-cbp-seg .oc-dg:first-child, .oc-cbp-seg .oc-dg:last-child { flex: 1.15; }
.oc-cbp-seg .oc-dg .oc-dg-rot { flex: 1; font-size: 12px; font-weight: 700; color: #8a8a8a; }
.oc-cbp-seg .oc-dg.oc-on .oc-dg-rot { color: #0a0a0a; }
.oc-cbp-seg .s-esq .p1 { left: 0; right: 12px; border-radius: 12px 0 0 12px; }
.oc-cbp-seg .s-esq .p2 { right: 3px; width: 19px; transform: skewX(-26.6deg); }
[dir] .oc-cbp-seg .s-esq .oc-dg-rot { padding-right: 8px; }
.oc-cbp-seg .s-meio .p1 { left: 1.5px; right: 1.5px; transform: skewX(-26.6deg); }
.oc-cbp-seg .s-dir .p2 { left: 3px; width: 19px; transform: skewX(-26.6deg); }
.oc-cbp-seg .s-dir .p1 { left: 12px; right: 0; border-radius: 0 12px 12px 0; }
[dir] .oc-cbp-seg .s-dir .oc-dg-rot { padding-left: 8px; }
.oc-cbp-seg .p1, .oc-cbp-seg .p2 { background: #1c1c1c; }
.oc-cbp-seg .oc-on .p1, .oc-cbp-seg .oc-on .p2 { background: #f7931a; }
.oc-cbp-seg-nota { color: #545454; font-size: 12px; }
.oc-cbp-valor-cab { display: flex; justify-content: space-between; align-items: baseline; }
[dir] .oc-cbp-valor-cab { margin-bottom: 8px; }
.oc-cbp-valor-cab .k { color: #8a8a8a; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; }
.oc-cbp-valor-cab .v { color: #545454; font-size: 12px; }
.oc-cbp-campo { display: flex; align-items: center; gap: 10px; background: #141414; border: 1px solid #232323; border-radius: 12px; }
[dir] .oc-cbp-campo { padding: 4px 6px 4px 16px; margin-bottom: 20px; }
.oc-cbp-campo:focus-within { border-color: #f7931a; }
.oc-cbp-campo input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 20px; font-weight: 600; }
[dir] .oc-cbp-campo input { padding: 10px 0; }
.oc-cbp-campo .moeda { color: #8a8a8a; font-size: 13px; font-weight: 600; }
.oc-cbp-max { height: 34px; }
.oc-cbp-max .p1 { left: 0; right: 14px; background: #1c1c1c; border-radius: 8px 0 0 8px; }
.oc-cbp-max .p2 { right: 6px; width: 16px; background: #1c1c1c; transform: skewX(-26.6deg); }
.oc-cbp-max .oc-dg-rot { color: #f7931a; font-size: 11.5px; font-weight: 700; letter-spacing: 1px; }
[dir] .oc-cbp-max .oc-dg-rot { padding: 0 20px 0 12px; }
.oc-cbp-linha { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #161616; }
[dir] .oc-cbp-linha { padding: 9px 0; }
.oc-cbp-linha .k { color: #8a8a8a; font-size: 13px; }
.oc-cbp-linha .v { font-size: 13.5px; font-weight: 600; color: #fff; }
.oc-cbp-linha .v.oc-verde { color: #4cb37b; }
.oc-cbp-linha .v.oc-laranja { color: #f7931a; }
.oc-cbp-cta-wrap { display: flex; align-items: stretch; }
[dir] .oc-cbp-cta-wrap { margin-top: 24px; }
.oc-cbp-cta { flex: 1; height: 52px; transition: filter .18s ease; }
.oc-cbp-cta .p1 { left: 0; right: 38px; background: #f7931a; border-radius: 14px 0 0 14px; }
.oc-cbp-cta .p2 { right: 14px; width: 48px; background: #f7931a; transform: skewX(-26.6deg); }
.oc-cbp-cta .oc-dg-rot { flex: 1; color: #0a0a0a; font-size: 15px; font-weight: 700; }
[dir] .oc-cbp-cta .oc-dg-rot { padding-right: 24px; }
.oc-cbp-cta-seta { width: 64px; height: 52px; }
[dir] .oc-cbp-cta-seta { margin-left: -16px; }
.oc-cbp-cta-seta .p1 { left: 12px; width: 36px; background: #171717; transform: skewX(-26.6deg); }
.oc-cbp-cta-seta .p2 { left: 28px; right: 0; background: #171717; border-radius: 0 14px 14px 0; box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06); }
.oc-cbp-cta-seta .oc-dg-rot { flex: 1; color: #f7931a; font-size: 19px; }
[dir] .oc-cbp-cta-seta .oc-dg-rot { padding-left: 15px; }
.oc-cbp-ok { border-radius: 11px; background: rgba(63, 166, 106, .11); color: #4cb37b; font-size: 12.5px; font-weight: 500; }
[dir] .oc-cbp-ok { margin-top: 14px; padding: 11px 14px; }
.oc-cbp-erro-caixa { border-radius: 11px; background: rgba(229, 83, 75, .1); color: #e5675f; font-size: 12.5px; line-height: 1.5; }
[dir] .oc-cbp-erro-caixa { margin-top: 14px; padding: 11px 14px; }
.oc-cbp-nota { color: #545454; font-size: 12.5px; line-height: 1.55; }
[dir] .oc-cbp-nota { margin: 18px 0 0; }
/* botão "sacar lucros" (faixa do sacável) */
.oc-cbp-sacar { height: 38px; min-width: 150px; }
.oc-cbp-sacar .p1 { left: 0; right: 28px; background: #f7931a; border-radius: 11px 0 0 11px; }
.oc-cbp-sacar .p2 { right: 10px; width: 36px; background: #f7931a; transform: skewX(-26.6deg); }
.oc-cbp-sacar .oc-dg-rot { color: #0a0a0a; font-size: 12.5px; font-weight: 700; }
[dir] .oc-cbp-sacar .oc-dg-rot { padding: 0 24px 0 14px; }
.oc-cbp-sacar-seta { width: 46px; height: 38px; }
[dir] .oc-cbp-sacar-seta { margin-left: -12px; }
.oc-cbp-sacar-seta .p1 { left: 9px; width: 26px; background: #171717; transform: skewX(-26.6deg); }
.oc-cbp-sacar-seta .p2 { left: 20px; right: 0; background: #171717; border-radius: 0 11px 11px 0; box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06); }
.oc-cbp-sacar-seta .oc-dg-rot { flex: 1; color: #f7931a; font-size: 15px; }
[dir] .oc-cbp-sacar-seta .oc-dg-rot { padding-left: 10px; }
/* ── modal encerrar ─────────────────────────────────────────────────────── */
.oc-cbp-veu { position: fixed; inset: 0; z-index: 1200; background: rgba(4, 4, 4, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; }
[dir] .oc-cbp-veu { padding: 24px; }
.oc-cbp-veu.oc-aberto { display: flex; }
.oc-cbp-modal { width: 420px; max-width: 100%; background: #0f0f0f; border: 1px solid #232323; border-radius: 18px; position: relative; overflow: hidden; }
[dir] .oc-cbp-modal { padding: 24px 26px; }
.oc-cbp-modal .oc-cbp-filete--rubro { position: absolute; top: 0; left: 0; right: 0; }
[dir] .oc-cbp-modal .oc-cbp-rotulo { margin-bottom: 18px; }
.oc-cbp-modal-acoes { display: flex; gap: 10px; }
[dir] .oc-cbp-modal-acoes { margin-top: 20px; }
.oc-cbp-voltar { flex: 1; height: 46px; border: 1px solid #2b2b2b; border-radius: 12px; background: #1c1c1c; color: #e4e4e4; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.oc-cbp-voltar:hover { background: #242424; }
.oc-cbp-enc-wrap { display: flex; align-items: stretch; flex: 1.3; }
.oc-cbp-enc { flex: 1; height: 46px; }
.oc-cbp-enc .p1 { left: 0; right: 30px; background: #e5675f; border-radius: 12px 0 0 12px; }
.oc-cbp-enc .p2 { right: 11px; width: 38px; background: #e5675f; transform: skewX(-26.6deg); }
.oc-cbp-enc .oc-dg-rot { flex: 1; color: #0a0a0a; font-size: 13.5px; font-weight: 700; }
[dir] .oc-cbp-enc .oc-dg-rot { padding-right: 18px; }
.oc-cbp-enc-seta { width: 48px; height: 46px; }
[dir] .oc-cbp-enc-seta { margin-left: -13px; }
.oc-cbp-enc-seta .p1 { left: 10px; width: 28px; background: #171717; transform: skewX(-26.6deg); }
.oc-cbp-enc-seta .p2 { left: 22px; right: 0; background: #171717; border-radius: 0 12px 12px 0; box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06); }
.oc-cbp-enc-seta .oc-dg-rot { flex: 1; color: #e5675f; font-size: 15px; }
[dir] .oc-cbp-enc-seta .oc-dg-rot { padding-left: 11px; }
/* ── OC-07 · o painel do plano cortado no celular ────────────────────────
*
* Auditoria de 04/09/2026: em 390 px o seletor de prazo chega a x=424,84 e o
* MAX a 418,84; em 360 px somem o CTA e os valores da direita. Medido de novo
* aqui: 66 elementos passando da janela em 390 px e 82 em 360 px, o pior
* terminando em 450 px — e a página NÃO rola de lado, então o que passa some.
*
* 🔴 A causa não é largura fixa nossa: é um descendente largo (a tabela do
* widget do gráfico, 410 px de min-content) estourando a célula da grade. O
* `.oc-cbp-col` já tinha `min-width: 0`, mas os cartões entre ele e a tabela
* não — e um item de grade/flex sem `min-width: 0` não encolhe abaixo do
* conteúdo, empurrando o pai junto.
*
* 🔑 `overflow: hidden` no cartão não resolvia porque a CAIXA já nascia
* larga: cortar o conteúdo de uma caixa de 434 px numa tela de 390 corta na
* borda errada. O que faz a caixa caber é `min-width: 0` em cada elo, e
* rolagem própria onde o conteúdo realmente não cabe (a tabela de operações).
*/
.oc-cbp-card,
.oc-cbp-filete,
.oc-cbp-graf,
.oc-cbp-graf-cab,
.oc-cbp-abas,
.oc-cbp-lado {
min-width: 0;
max-width: 100%;
}
/* A tabela de operações tem colunas com largura mínima real (hora, par, lado,
* preço). Onde ela não cabe, rola dentro do próprio cartão — em vez de
* empurrar a página e ser cortada sem aviso. */
.oc-cbp-abas-corpo,
.oc-cbp-ops {
overflow-x: auto;
overscroll-behavior-x: contain;
}
/* As abas (Operações · Posições · Histórico) são pastilhas com chanfro e
* largura própria: em 390 px elas passam 4 px da tela. Rolam na horizontal em
* vez de serem cortadas — o chanfro da última aba é o que se perderia. */
.oc-cbp-abas {
overflow-x: auto;
overscroll-behavior-x: contain;
}
[dir] .oc-cbp-abas { overflow-y: hidden; }
.oc-cbp-abas::-webkit-scrollbar { display: none; }
/* 🔑 `overflow-x: auto` sozinho cria a faixa em que o dedo não rola a PÁGINA
* (lição de 29/08/2026). O eixo vertical fica explícito para o gesto seguir
* sendo da página. */
[dir] .oc-cbp-abas-corpo,
[dir] .oc-cbp-ops {
overflow-y: hidden;
}
/* Selo SIMULAÇÃO ao lado das abas de operações (OC-08 da auditoria de
* 04/09/2026). Laranja da marca, texto pequeno e maiúsculo: classifica sem
* competir com os números do plano ao lado. */
[dir] .oc-cbp-selo-sim {
flex: 0 0 auto;
align-self: center;
margin-left: auto;
padding: 3px 8px;
border: 1px solid rgba(247, 147, 26, 0.45);
border-radius: 5px;
background: rgba(247, 147, 26, 0.12);
color: var(--offcode-brand, #f7931a);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.6px;
white-space: nowrap;
}
/* ── operações por dia + paginação (dono, 05/09/2026) ─────────────────────
*
* A aba Operações lê `/codebot/operacoes?dia=hoje` (10 por página) e a aba
* Histórico lista os dias (`/codebot/operacoes/dias`) e abre o dia paginado.
* Posições saíram do menu de abas e viraram card próprio abaixo. Tudo em px
* (raiz 13.33vw) e espaço em `[dir]` (reset da origem, ver acima). */
.oc-cbp-pos-titulo { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #f7931a; }
.oc-cbp-ops-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #161616; background: #0b0b0b; }
[dir] .oc-cbp-ops-cab { padding: 11px 22px; }
.oc-cbp-ops-cab .k { color: #8a8a8a; font-size: 12px; letter-spacing: .4px; }
.oc-cbp-ops-cab .v { color: #fff; font-size: 13px; font-weight: 600; }
.oc-cbp-ops-cab .oc-verde { color: #4cb37b; }
.oc-cbp-ops-cab .oc-perda { color: #e5675f; }
.oc-cbp-dia { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 1fr 1fr; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #161616; color: #fff; cursor: pointer; font: inherit; transition: background .15s ease; }
[dir] .oc-cbp-dia { padding: 13px 22px; }
.oc-cbp-dia:hover { background: #131313; }
.oc-cbp-dia .d { font-size: 13.5px; font-weight: 600; }
.oc-cbp-dia .n { color: #8a8a8a; font-size: 12px; }
.oc-cbp-dia .u { text-align: right; font-size: 13px; font-weight: 600; }
.oc-cbp-dia .p { text-align: right; font-size: 12px; font-weight: 600; }
.oc-cbp-dia .oc-verde { color: #4cb37b; }
.oc-cbp-dia .oc-perda { color: #e5675f; }
.oc-cbp-dia-seta { color: #565656; font-size: 12px; }
.oc-cbp-volta-dias { background: none; border: 0; color: #f7931a; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .6px; cursor: pointer; }
[dir] .oc-cbp-volta-dias { padding: 0; }
.oc-cbp-volta-dias:hover { color: #ffb04d; }
.oc-cbp-pag { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0b0b0b; }
[dir] .oc-cbp-pag { padding: 12px 22px; }
.oc-cbp-pag-n { color: #8a8a8a; font-size: 12px; }
.oc-cbp-pag-btn { background: #161616; border: 1px solid #262626; border-radius: 8px; color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
[dir] .oc-cbp-pag-btn { padding: 7px 14px; }
.oc-cbp-pag-btn:disabled { opacity: .35; cursor: default; }
.oc-cbp-pag-btn:not(:disabled):hover { border-color: #f7931a; }
@media (max-width: 560px) {
.oc-cbp-dia { grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; }
.oc-cbp-dia .n { display: none; }
}
/* ── histórico de saques de rendimento (dono, 08/09/2026) ──────────────────
* 🔑 Toda regra com padding/margin/border leva `[dir]` na frente: o reset da
* captura (`[dir] div,… { border:0; margin:0; padding:0 }`, peso 0,1,1) ganha
* de classe simples (0,1,0) e a caixa desenharia colada, sem erro nenhum. */
.oc-cbp-hist-barra { display: flex; }
[dir] .oc-cbp-hist-barra { margin-top: 8px; }
.oc-cbp-hist-btn { display: inline-flex; align-items: center; gap: 6px; background: none; color: #f7931a; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
[dir] .oc-cbp-hist-btn { border: 0; padding: 0; }
.oc-cbp-hist-btn::after { content: '\25BE'; font-size: 9px; transition: transform .15s ease; }
.oc-cbp-hist-btn:hover { color: #ffa94d; }
.oc-cbp-hist-btn.oc-aberto { color: #f7931a; }
.oc-cbp-hist-btn.oc-aberto::after { transform: rotate(180deg); }
.oc-cbp-hist-saq { background: #0d0d0d; }
[dir] .oc-cbp-hist-saq { border-top: 1px solid #161616; border-bottom: 1px solid #161616; padding: 0 0 6px; }
.oc-cbp-hist-saq-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
[dir] .oc-cbp-hist-saq-topo { padding: 12px 22px 8px; }
.oc-cbp-hist-saq-tit { color: #8a8a8a; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.oc-cbp-hist-saq-soma { color: #4cb37b; font-size: 11.5px; font-weight: 600; }
.oc-cbp-hist-saq-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[dir] .oc-cbp-hist-saq-linha { border-bottom: 1px solid #141414; padding: 9px 22px; }
.oc-cbp-hist-saq-quando { display: flex; align-items: baseline; gap: 9px; color: #8a8a8a; font-size: 11.5px; }
.oc-cbp-hist-saq-plano { color: #4a4a4a; font-size: 10.5px; }
.oc-cbp-hist-saq-val { font-size: 12.5px; font-weight: 600; }
.oc-cbp-hist-saq-val.oc-verde { color: #4cb37b; }
@media (max-width: 560px) {
/* 🔴 Em 390px o `space-between` do cabeçalho não cabe: "SAQUES DE RENDIMENTO"
* quebrava em duas linhas e o total largava o "USDT" sozinho na linha de
* baixo (medido em prova_codebot_movel.py). Empilhado, cada um fica inteiro
* na sua linha. Os dois não colidiam — por isso um teste que só checa
* sobreposição passa aqui; o que pega é contar as caixas de linha. */
.oc-cbp-hist-saq-topo { flex-direction: column; align-items: flex-start; gap: 2px; }
[dir] .oc-cbp-hist-saq-topo { padding: 12px 16px 8px; }
[dir] .oc-cbp-hist-saq-linha { padding: 9px 16px; }
.oc-cbp-hist-saq-quando { gap: 7px; font-size: 11px; }
.oc-cbp-hist-saq-val { font-size: 12px; }
}
/* ── abas-movel.css ── */
/* A barra de ABAS do rodapé, no móvel.
*
* A mecânica está em `_local/abas-movel.js`; aqui só o desenho. As medidas
* saem da barra que a captura trazia — 70px de altura, cinco colunas iguais,
* pastilha laranja atrás do ícone da aba ativa —, que é o que quem já usava o
* site reconhece.
*
* ## Sem `rem`
*
* A raiz deste site é `13.33vw` (~240px numa janela de 1800): `rem` escrito à
* mão explode o layout sem erro nenhum — `_tools/checa_css.py` reprova o build
* por isso. Tudo aqui é px.
*
* ## Metade das regras mora em `[dir]`
*
* A origem reseta margin/padding/border num bloco `[dir] div…` de
* especificidade (0,1,1), que vence classe sozinha (0,1,0).
*/
.oc-abas-raiz {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
}
.oc-abas {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
background: var(--background-one, #0a0a0a);
}
/* A faixa de gestos do iPhone come os últimos ~34px da tela. Sem o
* `safe-area`, o rótulo da aba fica embaixo dela e o toque não chega.
*
* 🔴 Esta declaração morava na regra de cima, em classe sozinha (0,1,0) — e
* o reset `[dir] nav, …` da origem (0,1,1) a zerava. Medido em 30/08/2026:
* `padding-bottom: 34px` casava e o computado era 0px. A barra existia com
* a altura de um navegador de mesa e o telefone a punha atrás do indicador
* de home — ou atrás da barra flutuante do Safari, que no iOS 26 entra nesse
* mesmo inset. É a quarta vez que este espelho registra o mesmo golpe: regra
* de classe única nasce perdendo para o reset. */
[dir] .oc-abas {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
[dir] .oc-abas {
border-top: 1px solid var(--line-mango, #2a2a2a);
}
.oc-aba {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
min-width: 0;
height: 62px;
justify-content: center;
color: var(--foreground-three, rgba(255, 255, 255, .55));
text-decoration: none;
/* O toque não pinta um retângulo cinza por cima do ícone. */
-webkit-tap-highlight-color: transparent;
}
.oc-aba--on { color: var(--offcode-brand, #f7931a); }
/* A pastilha atrás do ícone da aba ativa. `::before` em vez de fundo no
* próprio ícone: o ícone é uma máscara, e máscara não tem fundo — o que se
* pinta ali é o recorte, não a caixa. */
.oc-aba-icone {
position: relative;
display: block;
width: 22px;
height: 22px;
flex-shrink: 0;
background: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.oc-aba::before {
content: '';
position: absolute;
width: 56px;
height: 26px;
margin-top: -19px;
border-radius: 999px;
background: transparent;
transition: background .2s ease;
pointer-events: none;
}
[dir] .oc-aba--on::before { background: rgba(247, 147, 26, .14); }
.oc-aba-rotulo {
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: .01em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.oc-aba:focus-visible {
outline: 2px solid var(--offcode-brand, #f7931a);
outline-offset: -3px;
border-radius: 8px;
}
/* A barra é fixa e cobre os últimos ~70px da página. Sem esta folga, o fim de
* toda tela fica atrás dela — no terminal é a última linha de posições, na
* carteira é o botão de saque.
*
* 🔑 Barra fixa não ocupa espaço no fluxo: quem a põe tem de devolver o
* espaço, e o lugar certo é o container que ROLA — nesta árvore a página rola
* numa `
`, não no `window`. */
[dir] body.oc-com-abas .dl-page,
[dir] body.oc-com-abas .page-adaptive-layout,
[dir] body.oc-com-abas .layout-container {
padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
/* 🔴 Reserva DOBRADA (foto do dono, 06/09/2026: "tem uma barra preta embaixo
* na wallet"). Na carteira o `.page-adaptive-layout` mora DENTRO do `.dl-page`
* e os dois casavam a lista acima — 2 × (70 + 34) de reserva, mais os 34px que
* o pacote dá ao `#__nuxt` no iOS: 242px de nada no fim da página, e o
* `#__nuxt` (que também rola) ganhava 301px de curso além do painel. No iPhone
* o gesto encadeia do scroller de dentro para o de fora: um arrasto a mais e o
* painel da carteira subia, deixando 145px de faixa preta acima das abas — com
* o cartão de ativos cortado na borda do painel. Medido no WebKit vestido de
* iPhone (430×932, insets 59/34, `@supports` do iOS ligado; `repro-ios.mjs`).
*
* 🔑 Reserva tem UM dono: o elemento de fora. Em `/bot-trading` o
* `.page-adaptive-layout` É a raiz (sem `.dl-page`), por isso ele continua na
* lista acima e só perde a reserva quando está aninhado. */
[dir] body.oc-com-abas .dl-page .page-adaptive-layout { padding-bottom: 0; }
/* O `#__nuxt` é o scroller de FORA; o pacote lhe dá `padding-bottom:
* env(safe-area-inset-bottom) !important` no iOS (ver `barra.css`: o de cima
* saiu, o de baixo ficou para a árvore de desktop num telefone). Com a barra de
* abas, quem cobre o inset é a própria barra — o padding do `#__nuxt` só vira
* curso de rolagem além do conteúdo. */
[dir] body.oc-com-abas #__nuxt { padding-bottom: 0 !important; }
/* A carteira: o `.asset-panel` da origem mede `calc(100vh − 65px)` — sem o
* inset de cima (59px no iPhone) nem a barra de abas (70 + 34). O painel
* passava 59px do fim da tela e o `#__nuxt` rolava por ele. Aqui o painel
* ocupa EXATAMENTE o que há entre o cabeçalho e as abas; o scroller de dentro
* (`[data-oc-carteira]`) faz toda a rolagem, e o `.dl-page` não reserva nada
* nem estica até `100vh` (o painel já termina em cima das abas). `dvh` (iOS
* 15.4+) acompanha a barra do Safari; `vh` fica de reserva para quem não o lê. */
@media (max-width: 1024px) {
[dir] body.oc-com-abas .dl-page:has(.asset-panel) { padding-bottom: 0; min-height: 0; }
[dir] body.oc-com-abas .asset-panel {
height: calc(100vh - var(--navigation-height, 65px) - env(safe-area-inset-top, 0px) - 70px - env(safe-area-inset-bottom, 0px));
height: calc(100dvh - var(--navigation-height, 65px) - env(safe-area-inset-top, 0px) - 70px - env(safe-area-inset-bottom, 0px));
}
/* Os 64px de fim do scroller (`carteira.css`, ≤720px) eram para a árvore de
* desktop num telefone, onde nada separa o conteúdo do indicador de home.
* Aqui a barra de abas já é o respiro. (0,5,1): vence o `[data-oc-carteira]`
* repetido quatro vezes da folha da carteira.) */
[dir] body.oc-com-abas .asset-panel [data-oc-carteira][data-oc-carteira] { padding-bottom: 24px; }
}
/* Numa janela larga a árvore móvel continua sendo o que a captura é: uma
* página de app esticada. A barra de abas ali seria uma faixa de 70px com
* cinco ícones no meio de 1.400px de nada. */
@media (min-width: 1025px) {
.oc-abas-raiz { display: none; }
[dir] body.oc-com-abas .dl-page,
[dir] body.oc-com-abas .page-adaptive-layout,
[dir] body.oc-com-abas .layout-container { padding-bottom: 0; }
}
/* ── o caminho de volta ──────────────────────────────────────────────────
*
* Desenhado pelo `movel-desvio.js` como uma célula do PÉ DA GAVETA, ao lado de
* tema e idioma. Herda `.oc-barra-cel` da barra — uma célula com desenho
* próprio no meio de seis iguais seria a variação que a barra única existe
* para acabar. Só a cor é mais fraca: é uma saída, não uma oferta.
*/
.oc-ver-desktop { color: var(--foreground-three, rgba(255, 255, 255, .55)); }
[dir] .oc-ver-desktop:hover { color: var(--foreground-one, #fff); }
/* ── a mesma barra na árvore de DESKTOP, só em tela estreita ──────────────
*
* A captura trazia a `bottom-tabbar` também nas páginas de desktop (403
* delas), com o mesmo defeito da móvel — estado de outra página gravado — e
* ainda em INGLÊS nas sete árvores: `Home / Markets / Futures / Spot /
* Assets`, com o `Spot` da home apontando para o perpétuo de SUI (QA de
* 06/09/2026). O `poe_abas_movel.py` a troca pela nossa, marcada `--mesa`.
*
* A origem só a mostrava abaixo de 750px (`@media (max-width:749px)` no
* pacote), e é o que se mantém: numa janela larga a página de desktop tem a
* barra de cima. A folga do pé já vem da própria captura
* (`.dl-page.has-bottom-tab-bar`, no mesmo corte de 750px) — por isso o
* `` de desktop NÃO recebe `oc-com-abas`, e nada aqui mexe nele. */
.oc-abas-raiz--mesa { display: none; }
@media (max-width: 749px) {
.oc-abas-raiz--mesa { display: block; }
}