/* dBrixXFX4u — dark cockpit theme, layered on top of industry.css.
   Tokens and component base classes (.blueprint/.corner/.btn/.tag/.card/.table/.input/.seg/.dialog)
   come from industry.css unmodified. This file adds the dark "authorized field"
   variant described in the handoff README (--color-accent-900 as full background,
   type reversed to paper) plus the cockpit shell layout and screen-specific helpers. */

html, body { margin: 0; background: #0d141b; height: 100%; }
body { font-size: 15px; }

@keyframes dbxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dbxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes dbxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dbxSpin { to { transform: rotate(360deg); } }
@keyframes dbxSpinRev { to { transform: rotate(-360deg); } }
@keyframes dbxCore { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes dbxScanBand { 0% { transform: translateY(-100%); } 100% { transform: translateY(420%); } }
@keyframes dbxTrace { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }

/* ---------- widget de tradução (js/i18n.js) ---------- */
/* Esconde a UI padrão feia do Google Translate (barra no topo que empurra
   o layout inteiro pra baixo, ícone flutuante, tooltip de hover, o
   sublinhado amarelo em cada palavra traduzida) — o site usa o seletor
   próprio (renderLanguageSwitcher) por cima do <select> escondido do
   Google, então nada da UI original dele deveria aparecer. */
.goog-te-banner-frame, .goog-te-gadget-icon, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#google_translate_element { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(148, 188, 227, .22); }
::-webkit-scrollbar-track { background: transparent; }
a { color: #94bce3; }
a:hover { color: #b5d9fd; }
button { font-family: var(--font-body); }

/* ---------- shared dark tokens (mirrors README "Cores do tema escuro") ---------- */
.dark-field {
  --color-text: #e8eef4;
  --color-divider: rgba(180, 210, 240, .16);
}
.dark-field .corner { color: rgba(232, 238, 244, .55); }

.grid-overlay {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(148, 188, 227, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 188, 227, .045) 1px, transparent 1px);
  background-size: 56px 56px;
}
.grid-overlay.steel { background-size: 44px 44px; }

/* ---------- pre-auth (login/signup/planos/pagamento) ---------- */
/* Pedido do usuário (09/08/2026): a página de login (e as demais telas
   pré-login que reaproveitam este wrapper — signup/pagamento/recuperação de
   senha/2FA/seletor de área) esticava as 2 colunas até preencher a largura
   inteira do navegador numa tela larga, diferente do resto do site — todas
   as páginas internas já ficam contidas num `max-width` central (ver
   BUILD_NOTES 45/46). `.preauth` agora só centraliza `.preauth-inner`
   (que é quem carrega o grid de 2 colunas de verdade), travado no mesmo
   1260px já usado em todas as outras telas. */
.preauth {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: center; align-items: stretch;
  background: #0d141b; color: #e8eef4; font-family: var(--font-body);
  overflow: auto;
}
.preauth-inner {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
  width: 100%; max-width: 1260px;
}
.preauth-steel {
  position: relative; background: #1d2d3d; display: flex; flex-direction: column;
  justify-content: space-between; padding: 40px 40px 32px; overflow: hidden;
}
.preauth-form {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 26px; letter-spacing: -.01em; }
.wordmark .xfx { color: #94bce3; }
.wordmark-sub {
  margin-top: 6px; font: 400 9.5px/1.6 ui-monospace, Menlo, monospace;
  letter-spacing: .2em; color: rgba(232, 238, 244, .45);
}
.diamond { width: 14px; height: 14px; border: 1px solid #94bce3; transform: rotate(45deg); }

/* ---------- cockpit shell ---------- */
.cockpit {
  position: relative; display: grid; grid-template-columns: 224px 1fr;
  height: 100vh; width: 100%; min-width: 1180px;
  background: #0d141b; color: #e8eef4; font-family: var(--font-body);
  overflow: hidden;
}
.cockpit-glow {
  position: absolute; top: -30%; left: 12%; width: 60%; height: 80%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(89, 128, 166, .22), transparent 62%);
  filter: blur(20px);
}
.sidebar {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  border-right: 1px solid var(--color-divider);
  background: rgba(8, 13, 18, .72); backdrop-filter: blur(6px);
  overflow: hidden;
}
.sidebar-head { padding: 20px 18px 16px; border-bottom: 1px solid var(--color-divider); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0;
  background: transparent; color: rgba(232, 238, 244, .55); cursor: pointer; text-align: left;
  font: 500 12.5px/1 var(--font-body); border-left: 2px solid transparent; width: 100%;
}
.nav-item:hover { background: rgba(148, 188, 227, .06); }
.nav-item.active { background: rgba(148, 188, 227, .09); color: #e8eef4; border-left-color: #94bce3; }
.nav-item .ico { flex: none; width: 15px; height: 15px; opacity: .85; }
.sidebar-foot { padding: 14px 16px 16px; border-top: 1px solid var(--color-divider); }
.broker-ping { display: flex; align-items: center; gap: 8px; padding: 5px 0; font: 400 11px/1 ui-monospace, monospace; color: rgba(232, 238, 244, .5); }
.broker-dot { width: 6px; height: 6px; flex: none; background: #7fd4b0; animation: dbxPulse 2s infinite; }

.main-col { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.ticker-tape {
  height: 34px; overflow: hidden; border-bottom: 1px solid var(--color-divider);
  background: rgba(8, 13, 18, .55); display: flex; align-items: center; flex: none;
}
.ticker-track { display: flex; gap: 26px; white-space: nowrap; animation: dbxMarquee 46s linear infinite; padding-left: 20px; }
.ticker-item { display: flex; align-items: center; gap: 7px; font: 400 11.5px/1 ui-monospace, monospace; color: rgba(232, 238, 244, .6); }
.content { flex: 1; overflow-y: auto; padding: 22px 26px 40px; }

/* Botão hambúrguer da área cliente (fica na fita de mercado, ver
   renderTicker() em js/app.js) e o X de fechar dentro da própria sidebar —
   só aparecem visualmente abaixo de 860px (ver media query mais abaixo),
   mesmo padrão já usado em .admin-hamburger/.admin-sidebar-close
   (css/admin.css). Ficam sempre no HTML, esse display:none de base garante
   que não aparecem no desktop. */
.sidebar-hamburger, .sidebar-close {
  display: none; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center;
  border: 1px solid rgba(180, 210, 240, .25); background: transparent; color: #e8eef4; font-size: 15px; cursor: pointer;
}
.sidebar-backdrop { display: none; }

/* Rodapé de navegação mobile (ver bloco @media abaixo pra estilo completo
   — aqui só a base "escondida no desktop", mesmo padrão do hambúrguer
   acima: fica sempre no HTML, `display:none` de base garante que não
   aparece fora do celular). */
.mobile-tabbar { display: none; }

/* ---------- reusable bits ---------- */
.section-label { font: 400 9px/1 ui-monospace, monospace; letter-spacing: .24em; color: rgba(232, 238, 244, .42); margin-bottom: 7px; text-transform: uppercase; }
.kicker { font: 400 9px/1 ui-monospace, monospace; letter-spacing: .18em; color: rgba(232, 238, 244, .42); text-transform: uppercase; }
.text-dim { color: rgba(232, 238, 244, .55); }
.text-dim2 { color: rgba(232, 238, 244, .42); }
.text-dim3 { color: rgba(232, 238, 244, .35); }
.text-up { color: #7fd4b0; }
.text-down { color: #e0705f; }
.text-acc { color: #94bce3; }
.mono { font-family: ui-monospace, Menlo, monospace; }

.kpi { padding: 15px 16px; background: rgba(148, 188, 227, .03); }
.kpi .k { font: 400 9px/1.4 ui-monospace, monospace; letter-spacing: .16em; color: rgba(232, 238, 244, .42); text-transform: uppercase; }
.kpi .v { margin-top: 9px; font-family: var(--font-heading); font-size: 28px; line-height: 1; }
.kpi-grid { display: grid; gap: 14px; margin-bottom: 16px; }

.pulse-dot { width: 7px; height: 7px; border-radius: 0; animation: dbxPulse 2s infinite; }

.dark-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-divider);
  background: rgba(255, 255, 255, .03); color: #e8eef4; font: 400 13px/1.2 var(--font-body);
}
.dark-input.mono-input { font-family: ui-monospace, Menlo, monospace; }
.dark-input::placeholder { color: rgba(232, 238, 244, .3); }
.dark-label { display: block; font: 400 9px/1 ui-monospace, monospace; letter-spacing: .16em; color: rgba(232, 238, 244, .42); text-transform: uppercase; margin-bottom: 8px; }

.seg-row { display: inline-flex; gap: 1px; border: 1px solid var(--color-divider); }
.seg-btn { padding: 8px 16px; border: 0; background: transparent; color: rgba(232, 238, 244, .6); font: 500 11.5px/1 var(--font-body); cursor: pointer; }
.seg-btn.on { background: #5980a6; color: #f2f2f3; }
.seg-btn:not(.on):hover { background: rgba(148, 188, 227, .08); }

.chip { padding: 9px 14px; border: 1px solid rgba(180, 210, 240, .18); background: transparent; color: rgba(232, 238, 244, .55); font: 400 12px/1 ui-monospace, monospace; cursor: pointer; }
.chip.on { border-color: #94bce3; background: rgba(148, 188, 227, .14); color: #e8eef4; }

.btn-dark-primary { padding: 11px 20px; border: 1px solid #5980a6; background: #5980a6; color: #f2f2f3; font: 600 12px/1 var(--font-body); letter-spacing: .06em; cursor: pointer; }
.btn-dark-primary:hover { background: #416180; }
.btn-dark-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-dark-ghost { padding: 10px 16px; border: 1px solid rgba(148, 188, 227, .3); background: transparent; color: #94bce3; font: 500 11.5px/1 var(--font-body); letter-spacing: .04em; cursor: pointer; }
.btn-dark-ghost:hover { background: rgba(148, 188, 227, .1); }
.btn-dark-danger { padding: 10px 16px; border: 1px solid rgba(224, 112, 95, .4); background: transparent; color: #e0705f; font: 500 11.5px/1 var(--font-body); letter-spacing: .04em; cursor: pointer; }
.btn-dark-danger:hover { background: rgba(224, 112, 95, .09); }
.btn-dark-outline { padding: 9px 14px; border: 1px solid rgba(180, 210, 240, .22); background: transparent; color: rgba(232, 238, 244, .6); font: 500 11px/1 var(--font-body); cursor: pointer; }
.btn-dark-outline:hover { border-color: #94bce3; color: #94bce3; }

.dark-table { width: 100%; border-collapse: collapse; font: 400 12.5px/1.3 ui-monospace, Menlo, monospace; }
.dark-table th { text-align: left; font: 400 9px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 238, 244, .4); padding: 8px 8px; border-bottom: 1px solid var(--color-divider); }
.dark-table td { padding: 9px 8px; border-bottom: 1px solid rgba(180, 210, 240, .07); }
.dark-table tbody tr:hover { background: rgba(148, 188, 227, .03); }
.num { text-align: right; }

.toggle { width: 44px; height: 22px; padding: 0; border: 1px solid rgba(180, 210, 240, .22); background: transparent; cursor: pointer; position: relative; }
.toggle .dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: rgba(232, 238, 244, .35); transition: left .18s; }
.toggle.on { border-color: #94bce3; background: rgba(148, 188, 227, .2); }
.toggle.on .dot { left: 24px; background: #94bce3; }

.dialog-backdrop-dark {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(6, 10, 14, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: #e8eef4; font-family: var(--font-body);
}
.dialog-dark {
  background: #0d141b; border: 1px solid var(--color-divider); padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  color: #e8eef4;
}
.dialog-progress { display: flex; gap: 4px; }
.dialog-progress span { flex: 1; height: 2px; background: rgba(180, 210, 240, .14); }
.dialog-progress span.on { background: #94bce3; }

.enter-anim { animation: dbxIn .35s ease; }

.card-clickable { cursor: pointer; }
.card-clickable:hover { border-color: rgba(148, 188, 227, .45) !important; }

.placeholder-cell {
  border: 1px dashed rgba(180, 210, 240, .22); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; font: 400 10.5px/1.5 ui-monospace, monospace; letter-spacing: .1em;
  color: rgba(232, 238, 244, .35); text-transform: uppercase;
}

/* ---------- public landing / pricing page (stage: 'planos') ---------- */
.landing { position: fixed; inset: 0; z-index: 45; background: #0d141b; color: #e8eef4; font-family: var(--font-body); overflow-y: auto; overflow-x: auto; }
.landing-inner { position: relative; min-height: 100%; min-width: 980px; }
.landing-header { position: relative; display: flex; align-items: center; gap: 20px; padding: 20px 46px; border-bottom: 1px solid var(--color-divider); }
.landing-section { position: relative; padding: 56px 46px; border-bottom: 1px solid var(--color-divider); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE (celular — referência: iPhone 14 Pro Max, 430×932 CSS px)
   Pedido do usuário (2026-08-09): "tão mega esquisitas quando se abre no
   celular, corrija aí para mobile todo site e admin". A área admin já
   tinha esse tratamento (ver css/admin.css, feito numa entrada anterior) —
   a área do CLIENTE (este arquivo) nunca teve nenhuma regra responsiva:
   `.cockpit` tinha min-width:1180px fixo, então em qualquer tela de
   celular o navegador só encolhia o layout inteiro (zoom out), deixando
   tudo minúsculo — exatamente o mesmo bug que a área admin tinha antes de
   ser corrigida, e a causa raiz do "mega esquisito" relatado. Estrutura
   abaixo espelha de propósito o mesmo padrão já usado em css/admin.css,
   pra manter os dois consistentes: sidebar vira uma gaveta (hambúrguer +
   backdrop), grids de conteúdo (a imensa maioria em style inline, ver
   README) colapsam pra 1 coluna via seletor de atributo — funciona sem
   precisar tocar em cada view individualmente — e listas densas tipo
   tabela (linhas de operações com muitas colunas de largura fixa em px)
   ganham rolagem horizontal dentro do próprio conteúdo, já que não dá pra
   empilhar uma linha de tabela em cards sem reescrever cada lista.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Trava de segurança (2026-08-09, bug real relatado pelo usuário: "lado
     direito infinito", página impossível de navegar no celular — pior na
     página Robôs de cada área, que tem as tabelas mais largas/densas).
     Nenhuma página deveria PRECISAR de rolagem horizontal na tela inteira
     — só tabelas específicas de operações (várias colunas em px fixo, ver
     mais abaixo) rolam dentro de si mesmas. Esta trava garante isso mesmo
     se algum elemento escapar sem eu ter previsto: html/body nunca rolam
     na horizontal — o que não couber fica cortado (não vira um vazio
     infinito arrastável), e cada tabela densa tem sua própria rolagem
     interna (ver `.hscroll` logo abaixo). */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* ---- shell da área cliente (Início/Painel/Robôs/Console/etc.) ---- */
  .cockpit { grid-template-columns: 1fr; min-width: 0; height: 100dvh; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; max-width: 82vw;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60;
    box-shadow: 2px 0 24px rgba(0, 0, 0, .5);
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-hamburger, .sidebar-close { display: inline-flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(4, 7, 10, .6);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-backdrop.sidebar-backdrop-open { opacity: 1; pointer-events: auto; }
  .main-col { width: 100%; height: 100dvh; }
  .ticker-tape { padding: 0 12px; gap: 10px; }
  .ticker-track { padding-left: 0; }
  /* padding-bottom maior que no desktop pra sobrar espaço pro rodapé fixo
     (`.mobile-tabbar` abaixo) não cobrir o fim do conteúdo rolável. */
  .content { padding: 14px 14px 96px; overflow-x: auto; }

  /* Rodapé de navegação mobile (2026-08-09, pedido do usuário: ícones fixos
     embaixo pra navegar sem precisar abrir o menu lateral — Início /
     Carteira / Robôs (rótulo "time frame" do pedido = a tela do robô
     TIMEFRAME, único item com ícone destacado/maior, flutuando acima da
     barra) / Extrato / Mais. "Mais" reaproveita o MESMO menu lateral que
     já existe — não é um menu novo, só abre a gaveta via `toggleSidebar`,
     igual ao hambúrguer da fita de mercado.) Só existe no lado cliente —
     Carteira/Extrato são conceitos só do cliente, admin continua sem
     rodapé. O badge central flutuante/circular foge do resto do site (que
     é todo quadrado, ver `.card,.btn,.input{border-radius:0}` em
     industry.css) DE PROPÓSITO — é o mesmo estilo dos exemplos que o
     usuário anexou como referência pra esse item específico. */
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    align-items: flex-end; justify-content: space-around;
    height: 60px; padding: 0 2px calc(4px + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 13, 18, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-divider);
  }
  .mobile-tabbar-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; background: transparent; color: rgba(232, 238, 244, .45); cursor: pointer;
    padding: 8px 2px 6px; font: 500 8.5px/1 var(--font-body); letter-spacing: .01em; min-width: 0;
  }
  .mobile-tabbar-item .ico { width: 19px; height: 19px; }
  .mobile-tabbar-item.active { color: #94bce3; }
  .mobile-tabbar-center {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    border: 0; background: transparent; color: #94bce3; cursor: pointer; padding: 0; margin-top: -22px;
    font: 600 8.5px/1 var(--font-body); letter-spacing: .01em; gap: 5px;
  }
  .mobile-tabbar-center .ico-wrap {
    width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #16222d; border: 2px solid #94bce3;
    box-shadow: 0 0 0 5px rgba(8, 13, 18, .94), 0 0 16px rgba(148, 188, 227, .5);
  }
  .mobile-tabbar-center.active .ico-wrap { background: #1c2f3f; box-shadow: 0 0 0 5px rgba(8, 13, 18, .94), 0 0 22px rgba(148, 188, 227, .75); }
  .mobile-tabbar-center .ico { width: 22px; height: 22px; }

  /* ---- pré-login (login/signup/pagamento/2FA/seletor de área) ---- */
  .preauth { position: fixed; inset: 0; display: block; overflow-y: auto; overflow-x: hidden; }
  .preauth-inner { display: block; max-width: none; }
  .preauth-steel { padding: 26px 22px 22px; }
  .preauth-steel > div:nth-child(3) { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
  .preauth-form { padding: 28px 18px 40px; }

  /* ---- landing / preços (stage: 'planos') ---- */
  .landing-inner { min-width: 0; }
  .landing-header { padding: 16px 18px; flex-wrap: wrap; gap: 12px; }
  .landing-section { padding: 34px 18px; }

  /* Cards de autenticação (login/signup/2FA/seletor de área) têm largura
     fixa em px (396/440) — cabe raspando num iPhone 14 Pro Max (430px) sem
     nenhuma margem sobrando; em aparelhos menores (iPhone SE, 375px)
     estoura. Vira 100% do espaço disponível dentro de `.preauth-form`. */
  [style*="width:396px"], [style*="width:440px"] { width: 100% !important; }

  /* ---- diálogos (ativar robô / guia de início) ---- */
  .dialog-backdrop-dark { padding: 16px; }
  .dialog-dark { width: min(100%, 480px) !important; max-height: 88vh; overflow-y: auto; }

  /* Tabelas "densas" (linhas de operações com várias colunas estreitas em
     px fixo, ex. "70px 62px 76px...") continuam com as mesmas colunas —
     empilhar verticalmente quebraria o alinhamento de cada linha da
     lista. Elas ficam dentro de um wrapper próprio com a classe
     `.hscroll` (ver views: console.js, admin/robos.js, admin/bot.js) —
     SÓ esse wrapper rola na horizontal, isolado do resto da página, em
     vez de deixar a tabela empurrar a tela inteira pro lado (era essa a
     causa raiz do bug "lado direito infinito" relatado pelo usuário —
     sem esse wrapper, um filho mais largo que o viewport podia arrastar
     `.content` inteiro junto). */
  .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Trava defensiva pro `.seg-row` (grupo de botões tipo abas — exchange/
     período/token, ver carteira.js, config.js, integracoes.js etc.):
     `display:inline-flex` sem quebra de linha, do jeito que essas listas
     são hoje (2-3 botões curtos) cabem tranquilo, mas o texto passa pelo
     Google Translate (ver js/i18n.js) — um rótulo curto em PT pode virar
     bem mais longo em alemão/francês, ou a lista pode crescer (catálogo
     de robôs é data-driven, ver js/robots.js). Em vez de confiar que
     nunca vai estourar, mesma solução: rola por dentro de si mesmo em
     vez de arrastar a página. */
  .seg-row { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Colapso genérico de grids de conteúdo pra 1 coluna — a esmagadora
     maioria das telas usa style inline (não classe) pros grids de KPI/
     formulário/duas-colunas, então um seletor de atributo cobre todas de
     uma vez sem precisar editar view por view. */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 336px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 520px"],
  [style*="grid-template-columns:168px 1fr 260px"],
  [style*="grid-template-columns:minmax(0,420px)"],
  /* Barra de controles do Backtest (ROBÔ/ATIVO/PERÍODO/CAPITAL/TIMEFRAME/
     botão, 2026-08-09) — larga demais em px fixo pra caber numa tela de
     celular lado a lado; empilha em 1 coluna igual aos outros formulários. */
  [style*="grid-template-columns:1fr 130px 140px 120px 120px auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Cabeçalhos de página (título + badges/botões à direita) — sem isso o
     grupo de botões estoura a borda direita da tela em vez de quebrar
     linha (mesmo ajuste já usado em css/admin.css). */
  [style*="align-items:flex-end;justify-content:space-between"],
  [style*="align-items:center;justify-content:space-between"] {
    flex-wrap: wrap !important;
    row-gap: 10px;
  }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  .content, .landing-section, .preauth-form { padding-left: 12px; padding-right: 12px; }
  .kpi .v { font-size: 22px; }
  .wordmark { font-size: 20px; }
  .ticker-item { font-size: 10.5px; }
  .dialog-dark { padding: 18px; }
  h1 { font-size: 26px; }
  h4 { font-size: 17px; }

  /* Grades de 2 colunas que sobrevivem ao breakpoint de 860px (ex.: pares
     de estatística curtos, "valor / rótulo") ainda ficam apertadas demais
     num aparelho de ~390-430px de largura — reduz mais uma vez aqui. */
  [style*="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))"] {
    grid-template-columns: 1fr !important;
  }
}