/* ==========================================================
   MOBILE PREMIUM — JOSE TRADER OS
   Ativa apenas em telas <= 768px. Desktop NAO e afetado.
   ========================================================== */

@media (max-width: 768px) {

  /* ---------- 1. RESET DE BASE PRA MOBILE ---------- */
  html, body {
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    background: #000;
    color: #f2f2f7;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ---------- 2. SAFE AREA (notch / Dynamic Island) ---------- */
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* ---------- 3. TIPOGRAFIA ESTILO iOS ---------- */
  h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
  h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; }
  h3 { font-size: 18px; font-weight: 600; }
  p, span, div { font-size: 15px; line-height: 1.4; }
  small { font-size: 12px; color: #8e8e93; }

  /* ---------- 4. BOTOES ESTILO iOS ---------- */
  button, .btn, a.action, input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    font-size: 17px;
    background: #0a84ff;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    -webkit-appearance: none;
  }

  button:active, .btn:active, a.action:active {
    transform: scale(0.97);
    opacity: 0.85;
  }

  button.secondary, .btn.secondary {
    background: rgba(120, 120, 128, 0.24);
    color: #0a84ff;
  }

  button.danger, .btn.danger {
    background: #ff453a;
  }

  /* ---------- 5. CARDS COM GLASSMORPHISM ---------- */
  .card, .signal-card, .signal-main-card, .sig-card-body, .panel, .box {
    background: rgba(28, 28, 30, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    margin: 8px 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }

  /* ---------- 6. HAMBURGER TOGGLE PREMIUM iOS ---------- */
  /* Botao id="sidebarToggle" tem atributo HTML hidden no desktop (UA display:none).
     No mobile aparece em estilo iOS premium: gradient violeta-azul + glow + icone grosso.
     Especificidade .classe == [hidden] UA; source-order (nosso CSS depois) vence o empate. */
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.32) 0%, rgba(139, 92, 246, 0.32) 100%);
    border: 1px solid rgba(167, 139, 250, 0.55);
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      0 0 14px rgba(10, 132, 255, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.2s ease,
                background 0.18s ease;
  }
  .sidebar-toggle:active {
    transform: scale(0.92);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.55) 0%, rgba(139, 92, 246, 0.55) 100%);
    box-shadow:
      0 0 22px rgba(10, 132, 255, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  /* Quando drawer aberto: estado "on" com borda/sombra violeta saturada */
  .sidebar-toggle.is-open {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.55) 0%, rgba(167, 139, 250, 0.55) 100%);
    border-color: rgba(192, 132, 252, 0.8);
    box-shadow:
      0 0 20px rgba(167, 139, 250, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .sidebar-toggle svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.4;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sidebar-toggle.is-open svg {
    transform: rotate(90deg);
  }

  /* ---------- 6.1. HEADER STICKY COM BLUR (usa <header class="header"> real) ---------- */
  header, .header {
    position: sticky;
    top: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    z-index: 50;
  }

  /* ---------- 7. SIDEBAR PREMIUM EM MODO MOBILE (drawer) ---------- */
  .sidebar {
    background: rgba(15, 15, 20, 0.92);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: calc(env(safe-area-inset-top) + 12px);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sidebar .nav-item {
    min-height: 44px;
    border-radius: 10px;
    margin: 2px 8px;
    padding: 10px 14px;
    font-size: 16px;
    transition: background 0.15s, transform 0.12s;
  }
  .sidebar .nav-item:active {
    transform: scale(0.97);
    background: rgba(120, 120, 128, 0.24);
  }
  .sidebar .nav-item.active {
    background: rgba(10, 132, 255, 0.18);
    color: #0a84ff;
  }
  .sidebar-backdrop, .drawer-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* ---------- 8. INPUTS ESTILO iOS ---------- */
  input[type="text"], input[type="number"], input[type="search"],
  textarea, select {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    background: rgba(118, 118, 128, 0.24);
    border: none;
    border-radius: 10px;
    color: #f2f2f7;
    font-size: 16px;
    -webkit-appearance: none;
    box-sizing: border-box;
  }

  input:focus, textarea:focus, select:focus {
    outline: 2px solid #0a84ff;
    outline-offset: -2px;
  }

  /* ---------- 9. TABELAS RESPONSIVAS ---------- */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  table th, table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  /* ---------- 10. CORES SISTEMA iOS ---------- */
  .text-success, .win   { color: #30d158; }
  .text-danger, .loss   { color: #ff453a; }
  .text-warning         { color: #ff9f0a; }
  .text-info            { color: #0a84ff; }
  .text-muted           { color: #8e8e93; }

  /* ---------- 11. ANIMACAO SUAVE NOS CARDS NOVOS ---------- */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .signal-card, .card {
    animation: fadeInUp 0.3s ease;
  }

  /* ---------- 12. ESCONDER ELEMENTOS QUE SO FAZEM SENTIDO NO PC ---------- */
  /* (Adicionar aqui so se houver algo claramente desktop-only.
     Por padrao, NAO esconder nada. Usuario pediu pra nao esconder menus.) */

  /* ---------- 13. SIGNAL CARD PROTAGONISTA ---------- */
  /* Confidence em destaque (>=24px/700), direcao LONG/SHORT em cores iOS,
     tap-area clicavel com feedback scale. Usa classes reais do DOM. */
  .sig-card-body, .signal-main-card {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
  }
  .sig-card-body:active, .signal-main-card:active {
    transform: scale(0.98);
  }
  /* Confidence em destaque */
  .sig-conf-pct, .conf-pct, .dcv3-prob-label, #confidencePct,
  .sig-big-conf, .signal-conf-big {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.4px;
  }
  /* Cores direcionais sistema iOS (LONG/SHORT/CALL/PUT aliases) */
  .dir-long, .dir-call, .direction-long, .direction-call,
  .signal-main-card.call-state .dcv3-label {
    color: #30d158;
  }
  .dir-short, .dir-put, .direction-short, .direction-put,
  .signal-main-card.put-state .dcv3-label {
    color: #ff453a;
  }

  /* ---------- 14. CHART CONTAINER (lightweight-charts) ---------- */
  /* Container do TradingView/lightweight: full-width, min 280px, max 50vh.
     Sem padding lateral (encosta nas bordas). */
  #chartTVContainer {
    width: 100%;
    min-height: 280px;
    max-height: 50vh;
    margin: 0;
    border-radius: 8px;
  }
  /* Remove padding lateral do pai imediato do chart quando em mobile */
  #chartTVContainer {
    box-sizing: border-box;
  }
  /* Toolbar/TF buttons se existirem: garante scroll horizontal em vez de esconder */
  .chart-toolbar, .chart-tf-bar, .tf-buttons {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .chart-toolbar::-webkit-scrollbar,
  .chart-tf-bar::-webkit-scrollbar,
  .tf-buttons::-webkit-scrollbar { display: none; }

  /* ---------- 15. CRYPTO SIGNALS PAGE — OTIMIZA MOBILE (NAO mexe PC) ---------- */
  /* Escopo: apenas .cb-premium-page (a pagina /crypto-signals).
     Estrategia NAO muda (so CSS). Stage encolhe, grid vira 1 coluna,
     filtros rolam horizontal, KPIs compactos. Nada escondido. */

  /* Stage: encolhe de 458px pra 260px — libera a dobra pra ver sinais */
  .cb-premium-page .cb-stage {
    height: 260px;
    margin: 4px auto 10px;
  }
  .cb-premium-page .cb-brain-wrap {
    width: 200px;
    height: 200px;
  }
  .cb-premium-page .cb-brain-wrap .cb-sphere-canvas {
    width: 200px;
    height: 200px;
  }
  .cb-premium-page .cb-sphere-info-float {
    top: calc(42% + 115px);
    font-size: 0.52rem;
  }
  .cb-premium-page .cb-sphere-info-float .cb-sphere-label {
    font-size: 0.56rem;
    letter-spacing: 2px;
  }
  .cb-premium-page .cb-stage-label,
  .cb-premium-page .cb-stage-right {
    font-size: 0.5rem;
    top: 8px;
  }
  .cb-premium-page .cb-stage-label {
    left: 10px;
    letter-spacing: 1.5px;
  }
  .cb-premium-page .cb-stage-right {
    right: 10px;
    gap: 3px;
  }
  .cb-premium-page .cb-stage-right .r {
    padding: 3px 7px;
    font-size: 0.5rem;
  }
  .cb-premium-page .cb-stage-hud {
    flex-wrap: wrap;
    gap: 4px;
    bottom: 8px;
  }
  .cb-premium-page .cb-sh-pill {
    font-size: 0.52rem;
    padding: 3px 7px;
  }

  /* KPI bar: 2 cols (ja vem do inline <1100px), so compacta valores */
  .cb-premium-page .cb-kpi {
    padding: 10px 12px;
  }
  .cb-premium-page .cb-kpi .val {
    font-size: 1.05rem;
  }
  .cb-premium-page .cb-kpi .lab {
    font-size: 0.5rem;
    letter-spacing: 1.2px;
  }
  .cb-premium-page .cb-kpi .sub {
    font-size: 0.5rem;
  }

  /* Filtros: nao esconder — scroll horizontal, chips e selects permanecem */
  .cb-premium-page .cb-sp-head {
    gap: 8px;
    flex-wrap: wrap;
  }
  .cb-premium-page .cb-sp-head h3 {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
  }
  .cb-premium-page .cb-sp-filters {
    margin-left: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cb-premium-page .cb-sp-filters::-webkit-scrollbar { display: none; }
  .cb-premium-page .cb-sp-filters .cb-chip,
  .cb-premium-page .cb-sp-filters select.cb-flt {
    flex-shrink: 0;
  }
  .cb-premium-page .cb-chip {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.68rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
  }
  .cb-premium-page select.cb-flt {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.7rem;
    border-radius: 8px;
  }

  /* Grid de sinais: 1 coluna limpa (override do minmax(300px,1fr) do inline) */
  .cb-premium-page #cbSignalsGrid {
    grid-template-columns: 1fr;
  }

  /* Sidebar do /crypto-signals (tracking + history): padding compacto */
  .cb-premium-page .cb-side {
    gap: 10px;
  }
  .cb-premium-page .cb-card {
    padding: 12px;
  }
  .cb-premium-page .cb-wr-big {
    font-size: 1.8rem;
  }

  /* Footer info (Fonte/Pares/Timeframes/Indicadores): invisivel SOMENTE no mobile (pedido explicito) */
  .cb-premium-page .cb-footer {
    display: none !important;
  }

  /* ── Bloco 15.2: ANIMAÇÃO LIMPA NO MOBILE ──
     Problema reportado: "malha branca estranha distorcendo a animação" no /crypto-signals mobile.
     Causa: no mobile o stage fica 260px mas as camadas decorativas são dimensionadas pro desktop:
       - .cb-stage-grid-bg (grid 56px com mask radial)
       - .cb-pedestal .cb-ring (3 anéis conic-gradient, outer a 130% do pedestal 520px)
       - #cbHashRain + #cbArcs (canvas mix-blend-mode:screen — branqueiam a imagem)
     Tudo isso se sobrepondo + mask radial + filtros drop-shadow gera ruído tipo malha branca.
     Fix: desliga as camadas decorativas, mantém esfera wireframe + halo suave + HUD pills.
     Desktop 100% preservado (regras dentro do @media 768px). */

  .cb-premium-page .cb-stage-grid-bg {
    display: none !important;
  }

  /* ────── PEDESTAL + RINGS ──────
     O pedestal desktop é 520×520 (cabe na stage de 458px).
     No mobile a stage é 260px — pedestal 520 estoura por 260px pra cada lado,
     fica clipado pelo overflow:hidden gerando "meia-lua branca" no canto.
     Fix: resizar pedestal pra 220×220 (cabe folgado), esconder ring outer,
     suavizar glow dos dois anéis restantes. */
  .cb-premium-page .cb-pedestal {
    width: 220px !important;
    height: 220px !important;
  }
  .cb-premium-page .cb-pedestal .cb-ring.outer {
    display: none !important;
  }
  .cb-premium-page .cb-pedestal .cb-ring {
    opacity: 0.5 !important;
    filter: drop-shadow(0 0 8px rgba(139,92,246,0.55)) !important;
  }
  .cb-premium-page .cb-pedestal .cb-ring.inner {
    opacity: 0.35 !important;
  }

  /* Canvas decorativos — todos desligados no mobile
     #cbHashRain + #cbArcs usam mix-blend-mode:screen (somam luz = clareiam tudo)
     #cbParticles pode desenhar linhas/conexões que acumulam frame a frame se o clear falhar */
  .cb-premium-page #cbHashRain,
  .cb-premium-page #cbArcs,
  .cb-premium-page #cbParticles {
    display: none !important;
  }

  /* Halo: sem animação pulse no mobile (evita glow branco pulsante) */
  .cb-premium-page .cb-halo {
    width: 160px !important;
    height: 160px !important;
    opacity: 0.35 !important;
    filter: blur(20px) !important;
    animation: none !important;
  }

  /* Sphere canvas: drop-shadow mais suave no mobile (evita blur branco ao redor) */
  .cb-premium-page .cb-brain-wrap .cb-sphere-canvas {
    filter: drop-shadow(0 0 8px rgba(34,211,238,0.3)) !important;
  }

  /* Vignette: sem as 2 bolhas laterais de luz (ficam atrás do sphere no mobile) */
  .cb-premium-page .cb-stage-vignette {
    background: radial-gradient(ellipse at center,transparent 40%,rgba(7,5,16,0.88) 100%) !important;
  }

  /* Orbit coins — reduz chips (eram 6, com 200px sphere ficam apertados) */
  .cb-premium-page .cb-coin-chip {
    font-size: 0.44rem !important;
    padding: 3px 6px 3px 4px !important;
  }
  .cb-premium-page .cb-coin-chip .sym {
    font-size: 0.52rem !important;
  }
  /* ── fim bloco 15.2 ── */

  /* ---------- 16. DASHBOARD PAGE — MOBILE POLISH (NAO mexe PC) ---------- */
  /* Escopo: apenas .dashboard-grid e filhos. Estrategia/JS intactos.
     Inline ja tem algumas regras <768px/<640px; aqui so refinamos. */

  /* Respiro inferior: evita que o ultimo card fique atras do FAB/dock fixos (~96px) */
  .dashboard-grid {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  /* ── KPI stats-row: valor mais compacto sem esconder ── */
  .stats-row .stat-card .kpi-value { font-size: 1.15rem; }
  .stats-row .stat-card .kpi-label { font-size: 0.54rem; }
  .stats-row .stat-card .kpi-trend { font-size: 0.52rem; padding: 2px 6px; }

  /* ── Signal main card: orb e timer sem overflow, button tocavel ── */
  .signal-main-card {
    padding: 12px 10px;
    border-radius: 16px;
  }
  .signal-main-card .direction-core-v3 {
    transform: scale(0.82);
    transform-origin: center center;
    margin: -16px 0;
  }
  .signal-main-card .indicators-row {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .signal-main-card .ind-chip {
    padding: 4px 8px;
    font-size: 0.6rem;
  }
  .signal-main-card .conf-pct {
    font-size: 1.25rem;
  }
  .signal-main-card .conf-section { padding: 10px 4px; }
  .signal-main-card .hud-timer-v3 {
    padding: 10px 10px;
    gap: 8px;
  }
  .signal-main-card .htv3-digits .htv3-d { font-size: 1.35rem; }
  .signal-main-card .htv3-ring { width: 54px; height: 54px; }
  .signal-main-card .enter-btn-v3 {
    padding: 12px;
  }
  .signal-main-card .enter-btn-v3 .ebv3-main { font-size: 0.82rem; }
  .signal-main-card .enter-btn-v3 .ebv3-sub { font-size: 0.58rem; }
  .signal-main-card .signal-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .signal-main-card .signal-topbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Market card tabs (6 mercados): scroll horizontal em vez de wrap ── */
  .market-card .card-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .market-card .card-tabs::-webkit-scrollbar { display: none; }
  .market-card .card-tabs .tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 9px;
    font-size: 0.62rem;
  }

  /* ── Live chart card: altura trabalhavel no mobile ── */
  .live-chart-card {
    border-radius: 14px;
  }
  .lc-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .lc-controls {
    flex-wrap: wrap;
    gap: 6px;
  }
  .lc-select {
    min-height: 34px;
    font-size: 0.7rem;
    padding: 0 8px;
  }
  .lc-analyzing {
    font-size: 0.58rem;
  }
  .lc-sync-btn {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.62rem;
  }
  .lc-body, #lcChartBody {
    min-height: 260px;
    height: 46vh;
    max-height: 380px;
  }

  /* ── Heatmap: celulas com tamanho touch-friendly ── */
  .heatmap-card .heatmap-grid {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 6px;
  }
  .heatmap-card .hm-category-label {
    font-size: 0.52rem;
    padding: 4px 0 2px;
  }

  /* ── History card: rows mais tocaveis ── */
  .history-card .history-header-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
  .history-card .hist-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .history-card .hist-filter-bar::-webkit-scrollbar { display: none; }
  .history-card .hist-filter-chip {
    flex-shrink: 0;
    min-height: 32px;
    padding: 5px 10px;
  }
  .history-card .history-item {
    padding: 10px 12px;
    min-height: 48px;
  }

  /* ── STAKE + WIN/LOSS buttons touch area ── */
  .dashboard-grid input#dashStakeInput {
    min-height: 40px;
    font-size: 0.82rem;
  }
  .dashboard-grid button[data-bank-action] {
    min-height: 52px;
    font-size: 0.88rem;
    letter-spacing: 1.5px;
  }

  /* ── Radar widget compacto (quando visivel) ── */
  #dashRadarWidget {
    padding: 10px 12px;
  }

  /* ── Mini charts: em celulares bem estreitos (<420px), 1 coluna ── */
  .mini-charts-row .mini-chart-card {
    min-height: 88px;
  }

  /* ---------- 17. TREINO PAGE — COLAPSA GRID 1fr+320px PRA STACK MOBILE ---------- */
  /* Bug: pageTreino injeta <style> em runtime com:
       .train-shell { grid-template-columns: 1fr 320px; height: calc(100vh-90px) }
     Em mobile 375px a coluna esquerda (1fr=chart) fica esmagada e a direita
     (config 320px) cobre a tela. Aqui forcamos stack vertical.
     !important justificado: o <style> do pageTreino eh injetado APOS mobile.css
     (source order perde sem !important). */

  .train-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }
  /* .train-center é flex column com strip + tf-bar + chart-area + indBar.
     NAO fixar altura nele: strips podem variar e esmagariam o chart (flex:1 → 0).
     Deixar auto + altura explicita direto no chart-area. */
  .train-center {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  /* Chart area com altura explicita — nao depende de flex:1 do pai.
     Garante que LightweightCharts (trainChartInit) receba clientWidth/Height reais. */
  .train-chart-area {
    flex: 0 0 auto !important;
    height: 50vh !important;
    min-height: 320px !important;
    max-height: 480px !important;
    position: relative !important;
  }
  /* trainChartContainer herda width/height 100% via inline style.
     Garante que ResizeObserver do trainChartInit veja dimensoes validas. */
  #trainChartContainer {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px;
  }
  .train-right {
    border-left: none !important;
    border-top: 1px solid rgba(168, 85, 247, 0.25);
    max-height: none;
    overflow-y: visible;
    padding: 12px;
  }
  /* Strip de ativos: ja tem overflow-x:auto; so aumenta tap-area */
  .train-strip {
    padding: 8px 10px;
  }
  .train-asset {
    min-width: 110px;
    padding: 6px 10px;
  }
  /* Modo/TF buttons: wrap em grid em vez de overflow horizontal desconfortavel */
  .train-mode {
    padding: 8px 12px;
    font-size: 0.72rem;
  }
  /* Botoes de expiracao (M1/M5/.../D1): grid 3 colunas mobile */
  .train-exp {
    padding: 10px;
    font-size: 0.78rem;
  }
  /* TF selector buttons */
  .train-tf-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
    min-height: 32px;
  }
  /* Espaco no bottom pro FAB/dock nao cobrir ultimo botao */
  .train-right {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  /* ---------- 18. VISION PAGE — MOBILE PREMIUM (NAO mexe PC) ---------- */
  /* Bug do inline: @media(max-width:1100px) oculta .vision-side-panel.
     Aqui TRAZEMOS de volta e empilhamos vertical com chart no topo.
     !important justificado: inline usa display:none no mesmo media. */

  /* Layout: 1 coluna, ordem customizada (chart > left panel > right panel) */
  .vision-3col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
  .vision-side-panel {
    display: flex !important;          /* override inline display:none */
    flex-direction: column;
    gap: 8px;
  }
  /* Reordem: [left, center, right] DOM -> [center, left, right] visual */
  .vision-3col > div:nth-child(1) { order: 2; }   /* VISION AI panel abaixo */
  .vision-3col > div:nth-child(2) { order: 1; }   /* chart primeiro (protagonista) */
  .vision-3col > div:nth-child(3) { order: 3; }   /* COPILOT por ultimo */

  /* Panel cards: padding touch-friendly */
  .vision-panel-card {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .vision-panel-title {
    font-size: 0.66rem;
    letter-spacing: 1.2px;
  }
  .vision-row {
    padding: 4px 0;
  }
  .vision-row-label { font-size: 0.58rem; }
  .vision-row-value { font-size: 0.64rem; }

  /* Chart wrap + canvas */
  .vision-chart-wrap {
    border-radius: 12px;
    overflow: hidden;
  }
  .vision-chart-wrap canvas#mainChart {
    width: 100% !important;
    height: 360px !important;
    max-height: 46vh;
  }

  /* HUD (pair/tf/trend/conf/status): flex-wrap, tags menores */
  .vision-hud {
    padding: 6px 10px;
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
  }
  .vision-hud-left,
  .vision-hud-right {
    flex-wrap: wrap;
    gap: 4px;
  }
  .vision-hud-tag {
    font-size: 0.56rem;
    padding: 3px 7px;
    letter-spacing: 0.8px;
  }

  /* Barra de sinal HUD (ANALISANDO/CALL/PUT + %) */
  .hud-signal-bar {
    flex-wrap: wrap;
    padding: 5px 10px;
    gap: 6px;
  }
  .hud-signal-dir { font-size: 0.68rem; }
  .hud-signal-prob { font-size: 0.6rem; }

  /* Nav bar (◂ LIVE ▸): tap-friendly */
  .vision-nav-bar {
    padding: 6px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .vision-nav-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.66rem;
    border-radius: 8px;
  }
  .vision-nav-badge {
    font-size: 0.58rem;
    padding: 4px 8px;
  }

  /* Action badge COPILOT (ANALISANDO/ENTRAR/OBSERVAR) */
  .vision-action-badge {
    font-size: 0.82rem;
    padding: 8px 12px;
    letter-spacing: 1.5px;
  }

  /* Botoes primarios/secundarios do copilot */
  .vision-side-panel .action-btn {
    min-height: 44px;
    font-size: 0.8rem !important;
    padding: 10px 14px !important;
    border-radius: 10px;
  }

  /* Indicators chips no left panel (RSI/EMA/ADX/Vol) */
  #vLeftIndicators { gap: 5px !important; }
  #vLeftIndicators .vision-chip {
    font-size: 0.58rem !important;
    padding: 3px 8px;
    min-height: 22px;
  }

  /* Reasons list (motivos) */
  .vision-reason-item {
    font-size: 0.62rem;
    padding: 4px 0;
    line-height: 1.4;
  }

  /* ---------- 19. COPILOT FOREX PAGE — MOBILE PREMIUM (NAO mexe PC) ---------- */
  /* Bug conhecido: grid "1fr 360px" da secao principal nao esta na lista
     de padroes do inline (line 2051-2058 cobre 280/300/320/340) — fica quebrado.
     Varios sub-grids (sessions 4col, strength 8col, heatmap 5col, pipeline 6col,
     KPIs auto-fit, alerts bar) esmagam em 375px. */

  /* Respiro inferior pro FAB/dock */
  .cfx-page {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  /* Hero FX stage: encolhe de 300px pra 220px */
  .cfx-page #cfx-fx-stage {
    height: 220px !important;
    margin-bottom: 12px;
    border-radius: 14px;
  }
  .cfx-page #cfx-fx-log {
    width: 150px !important;
    max-width: 50% !important;
    font-size: 0.5rem !important;
    padding: 5px 7px !important;
    bottom: 10px !important;
    left: 10px !important;
  }
  /* Top-right info bar (ENGINE/PARES/CICLO/PROX): compacta */
  .cfx-page #cfx-fx-stage > div[style*="top:14px"][style*="right:18px"] {
    top: 8px !important;
    right: 10px !important;
    font-size: 0.5rem !important;
    letter-spacing: 1px !important;
  }
  /* Bottom pill "ANALISE EM TEMPO REAL" */
  .cfx-page #cfx-fx-stage > div[style*="bottom:14px"][style*="left:50%"] {
    bottom: 10px !important;
    padding: 4px 10px !important;
    font-size: 0.52rem !important;
    letter-spacing: 1.8px !important;
  }

  /* Sessions pills: 2 cols em vez de 4 */
  .cfx-page #cfx-fx-sessions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .cfx-page .cfx-fx-session-pill {
    padding: 6px 10px !important;
  }

  /* Ticker: altura compacta */
  .cfx-page #cfx-fx-ticker {
    height: 30px !important;
  }
  .cfx-page .cfx-fx-ticker-track {
    font-size: 0.6rem !important;
  }

  /* Strength + Heatmap: stack vertical */
  .cfx-page > div[style*="grid-template-columns:1.4fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* HEATMAP 20 PARES: invisivel SOMENTE no mobile (pedido explicito) */
  .cfx-page #cfx-fx-heatmap {
    display: none !important;
  }

  /* Pipeline flow (Sessao/Evento/ATR/Spread/H4/Corr): 3x2 wrap */
  .cfx-page #cfx-fx-pipeline-flow {
    height: auto !important;
    min-height: 70px;
  }
  .cfx-page #cfx-fx-pipeline-flow > div[style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 34px;
  }

  /* FXP dashboard KPIs: 2 cols */
  .cfx-page #fxp-dashboard > div[style*="grid-template-columns:repeat(auto-fit,minmax(180px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .cfx-page #fxp-dashboard > div > div[style*="background:var(--bg-glass)"] {
    padding: 10px 12px !important;
  }

  /* FXP alerts bar: wrap + tap-friendly — DESTRAVA BOTOES ESCONDIDOS */
  .cfx-page #fxp-alerts-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  .cfx-page #fxp-alert-toggle {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 0.78rem !important;
    flex: 1 1 100% !important;
    letter-spacing: 0.5px !important;
  }
  /* Os 3 canais (Push/Voz/Telegram) em linha propria, grid 3 colunas */
  .cfx-page #fxp-alerts-bar > div[style*="display:flex"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .cfx-page .fxp-ch-btn {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 0.7rem !important;
  }
  .cfx-page #fxp-test-btn {
    margin-left: 0 !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 0.7rem !important;
    flex: 1 1 100% !important;
  }

  /* FXP signals grid: 1 coluna em phones estreitos */
  .cfx-page #fxp-signals-grid {
    grid-template-columns: 1fr !important;
  }

  /* ═══ MAIN GRID (1fr 360px) — NAO ESTAVA NO COVERED LIST DO INLINE ═══ */
  /* A secao final com Radar + (Best/Contexto/MTF/Assert/Calendar) estava
     esmagando em 375px. Forca stack vertical. */
  .cfx-page > div[style*="grid-template-columns:1fr 360px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Radar list: altura mais tocavel */
  .cfx-page #cfx-radar {
    max-height: none !important;
    gap: 8px !important;
  }
  .cfx-page .cfx-radar-row {
    padding: 10px 12px;
    min-height: 48px;
  }

  /* Status bar direcao CALL/PUT */
  .cfx-page .cfx-status-bar { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .cfx-page .cfx-dir-buy,
  .cfx-page .cfx-dir-sell {
    min-height: 42px;
    font-size: 0.82rem;
    padding: 10px 14px;
    flex: 1 1 140px;
  }

  /* Entry/SL/TP boxes — full width stacked */
  .cfx-page .cfx-sl-box,
  .cfx-page .cfx-tp-box,
  .cfx-page .cfx-entry-zone,
  .cfx-page .cfx-invalid-zone {
    padding: 10px 12px;
  }

  /* MTF rows */
  .cfx-page .cfx-mtf-row {
    padding: 8px 10px;
    font-size: 0.68rem;
  }

  /* ---------- 20. TRADER GUARDIAN PAGE — MOBILE PREMIUM (NAO mexe PC) ---------- */
  /* Bug: grid "1fr 360px" (L26656) nao esta no covered list do inline.
     Main column vira ~10px, botoes BLOQUEAR SESSAO / PROTECAO / MENTOR ATIVO
     ficam invisiveis. Fix: colapsa stack vertical + tap-areas iOS. */

  /* Respiro pro FAB/dock */
  .tg-page {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  /* Grid main 1fr 360px -> 1 coluna stack */
  .tg-page > div[style*="grid-template-columns:1fr 360px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* KPIs container (injetado dinamico): respira */
  .tg-page #tg-kpis { gap: 8px; }

  /* Status card (ESTAVEL/ALERTA/RISCO/BLOQUEADO) */
  .tg-page #tg-main > div[style*="padding:18px"],
  .tg-page #tg-main > div[style*="padding:14px"] {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Card da MENSAGEM do mentor */
  .tg-page #tg-main > div[style*="padding:20px 24px"] {
    padding: 14px 16px !important;
  }

  /* Action buttons: BLOQUEAR SESSAO + PROTECAO — tap-friendly full-visible */
  .tg-page .tg-btn {
    min-height: 48px !important;
    padding: 12px 14px !important;
    font-size: 0.74rem !important;
    letter-spacing: 1.2px !important;
    border-radius: 12px !important;
  }
  /* Container dos botoes (flex) — se injetado com display:flex, wrap em mobile */
  .tg-page #tg-main > div[style*="display:flex"]:has(> .tg-btn) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .tg-page #tg-main .tg-btn {
    flex: 1 1 100% !important;  /* cada botao em linha propria mobile */
  }

  /* Audio button (MENTOR ATIVO / ATIVAR VOZ) — tap-area iOS */
  .tg-page #tg-audio-btn,
  .tg-page .tg-voice-btn {
    min-height: 42px !important;
    padding: 10px 18px !important;
    font-size: 0.7rem !important;
    letter-spacing: 1px !important;
    border-radius: 22px !important;
  }

  /* Pattern rows (lista de padroes) */
  .tg-page .tg-pattern-row {
    padding: 12px 14px !important;
    min-height: 44px;
    font-size: 0.7rem;
  }

  /* Timeline bars (historico) */
  .tg-page .tg-timeline-bar {
    min-width: 18px;
  }

  /* Sidebar side */
  .tg-page #tg-side > div {
    padding: 14px 16px !important;
  }

  /* Tips card */
  .tg-page .tg-card-entry[style*="border-left:3px solid"] {
    padding: 12px 14px !important;
  }

  /* ---------- 21. BANK PAGE — MOBILE PREMIUM (NAO mexe PC) ---------- */
  /* /bank renderiza via pageBank() -> <div class="page"> (nao tem classe .bank-page).
     Escopo via seletores especificos dos ids/classes presentes apenas no /bank:
     #bankAiHero, #healthScoreCanvas, #bankChart, .stake-calc, .stake-input-row,
     #bankCopilotMsgs, #bankBalanceInput, .risk-meter. */

  /* Respiro pro FAB/dock na pagina /bank (detecta pela presenca de #bankAiHero) */
  .page:has(#bankAiHero) {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  /* ═══ AI HERO PANEL: stack health circle + advice ═══ */
  /* Grid "200px 1fr" NAO esta coberto pelo inline. */
  #bankAiHero {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  #bankAiHero > div:first-child {
    /* wrapper do health circle: centraliza */
    align-items: center !important;
  }
  /* Circle compacto */
  #bankAiHero #healthScoreCanvas {
    width: 110px;
    height: 110px;
  }
  #bankAiHero #healthScoreValue {
    font-size: 1.7rem !important;
  }
  #bankAiHero #healthGrade {
    font-size: 0.6rem !important;
    padding: 2px 10px !important;
  }

  /* Session advice */
  #bankAiHero #sessionAdvice {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  #bankAiHero #adviceAction {
    font-size: 0.76rem !important;
    letter-spacing: 1.5px !important;
  }
  #bankAiHero #adviceReason {
    font-size: 0.68rem !important;
  }

  /* Risk of Ruin + Weekly Projection: mantem 2 cols mas compactando */
  #bankAiHero > div:last-child > div[style*="grid-template-columns:1fr 1fr"] {
    gap: 8px !important;
  }
  #bankAiHero #ruinPercent,
  #bankAiHero #weeklyProjection {
    font-size: 1.05rem !important;
  }

  /* LLM Insight box */
  #bankAiHero #llmInsightBox {
    padding: 10px 12px !important;
  }
  #bankAiHero #llmInsightText {
    font-size: 0.72rem !important;
  }

  /* ═══ QUICK TRADE BUTTONS (WIN / LOSS) — tap-friendly ═══ */
  /* Seletor pela combinacao: flex gap:10px, 2 botoes com action-btn WIN/LOSS */
  .page:has(#bankAiHero) > div[style*="display:flex;gap:10px"] > button.action-btn {
    min-height: 52px !important;
    font-size: 0.84rem !important;
    padding: 12px !important;
    letter-spacing: 1.5px !important;
  }

  /* ═══ STAKE CALC (Configuracao da Banca) ═══ */
  .stake-calc {
    padding: 14px !important;
  }
  .stake-input-row {
    gap: 8px !important;
    margin-bottom: 8px !important;
    flex-wrap: wrap;
  }
  .stake-label {
    font-size: 0.56rem !important;
    letter-spacing: 1.2px !important;
    min-width: 110px;
  }
  .stake-input {
    min-height: 38px !important;
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
    flex: 1 1 120px;
  }
  .stake-result-row {
    padding: 8px 0 !important;
  }
  .stake-result-label { font-size: 0.6rem !important; }
  .stake-result-value { font-size: 0.85rem !important; }

  /* Botao SALVAR CONFIGURACAO */
  .stake-calc button.action-btn.primary {
    min-height: 48px !important;
    font-size: 0.84rem !important;
    padding: 12px !important;
    letter-spacing: 1.5px !important;
    border-radius: 12px !important;
  }

  /* ═══ BANK CHART (Performance Diaria canvas) ═══ */
  #bankChart {
    height: 180px !important;
    width: 100% !important;
  }
  .chart-canvas-wrap {
    min-height: 180px;
  }

  /* ═══ COPILOT DE BANCA (mensagens da IA) ═══ */
  #bankCopilotMsgs > div {
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }

  /* ═══ GESTAO DE RISCO (drawdown meter + reset) ═══ */
  .risk-meter {
    height: 12px;
    border-radius: 6px;
  }
  .page:has(#bankAiHero) button.action-btn.ghost {
    min-height: 44px !important;
    font-size: 0.74rem !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }

  /* ═══ PROGRESS BAR (PROGRESSO DA META) ═══ */
  .page:has(#bankAiHero) > div[style*="PROGRESSO"],
  .page:has(#bankAiHero) > div[style*="rgba(139,92,246,0.03)"]:not(.stake-calc):not(#bankAiHero) {
    padding: 10px 12px !important;
  }

  /* ═══ STATUS BADGE (ESTAVEL/ATENCAO/CRITICA) ═══ */
  .page:has(#bankAiHero) .page-header > span[style*="display:inline-flex"] {
    font-size: 0.58rem !important;
    padding: 4px 12px !important;
    min-height: 26px;
  }

  /* ---------- 22. ANALYSIS PRO PAGE — MOBILE PREMIUM (NAO mexe PC) ---------- */
  /* Bugs: config row 5 cols (MERCADO/ATIVO/TF/ESTILO + botao ANALISAR) vira
     ~70px por coluna em 375px; grids 1fr 380px dos tabs (resumo/tecnica)
     nao estao no covered list; stats-panel + verdict apertam. */

  /* Respiro pro FAB/dock */
  .apro-page {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  /* ═══ CONFIG ROW (5 cols: MERCADO/ATIVO/TF/ESTILO/ANALISAR) ═══ */
  /* Grid 1fr 1fr 1fr 1fr auto → 2 cols mobile, botao full width abaixo */
  .apro-page > div[style*="grid-template-columns:1fr 1fr 1fr 1fr auto"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  /* Botao ANALISAR em linha propria, full-width */
  .apro-page #aproBtnAnalyze {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    font-size: 0.9rem !important;
    padding: 12px 16px !important;
    letter-spacing: 1.5px !important;
    margin-top: 4px;
  }
  /* Selects config: tap-friendly iOS, font 16px evita zoom */
  .apro-page #aproMarket,
  .apro-page #aproAsset,
  .apro-page #aproTf,
  .apro-page #aproType,
  .apro-page .select-dark {
    min-height: 42px !important;
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
  .apro-page .text-label {
    font-size: 0.56rem !important;
    letter-spacing: 1.2px !important;
  }

  /* ═══ LOADING STATS PANEL (DATA POINTS/CANDLES/INDICADORES/MC/CONFIANCA) ═══ */
  /* Ja vira flex-row wrap (L5043) mas em 375px cada card fica pequeno. */
  .apro-page .apro-stats-panel {
    gap: 6px !important;
  }
  .apro-page .apro-stat-card {
    flex: 1 1 calc(50% - 4px);
    padding: 10px 12px;
    min-width: 140px;
  }
  .apro-page .apro-stat-value {
    font-size: 1rem;
  }
  .apro-page .apro-stat-label {
    font-size: 0.52rem;
    letter-spacing: 1px;
  }
  .apro-page .apro-stat-sub {
    font-size: 0.5rem;
  }
  /* Scan terminal */
  .apro-page .apro-scan-term {
    font-size: 0.58rem;
    padding: 10px 12px;
    max-height: 160px;
  }

  /* ═══ VERDICT (decisao COMPRA/VENDA + probabilidade + R:R/FORCA/PROTECAO) ═══ */
  .apro-page .apro-verdict {
    padding: 22px 14px !important;
  }
  .apro-page .apro-verdict-dir {
    font-size: 2.2rem !important;
    letter-spacing: 3px;
  }
  .apro-page .apro-action-rec {
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
    letter-spacing: 1.5px;
  }
  .apro-page .apro-verdict-prob {
    font-size: 3rem !important;
  }
  .apro-page .apro-conf-label {
    font-size: 0.7rem;
    letter-spacing: 1.2px;
  }
  /* Row de confirmacoes (RISCO/RETORNO · FORCA · PROTECAO): gap menor, wrap */
  .apro-page .apro-verdict > div[style*="display:flex"][style*="justify-content:center"][style*="gap:28px"] {
    gap: 14px !important;
    flex-wrap: wrap;
  }
  .apro-page .text-impact-lg {
    font-size: 1.2rem !important;
  }
  /* Market status bar (trend/vol/regime) */
  .apro-page .apro-market-status {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    font-size: 0.6rem !important;
  }
  .apro-page .apro-market-status > div[style*="width:1px"] {
    display: none; /* remove os separadores verticais (cosmeticos) no mobile */
  }

  /* ═══ TAB BAR (Resumo/Tecnica/Cenarios/etc) ═══ */
  .apro-page .apro-tabbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .apro-page .apro-tabbar::-webkit-scrollbar { display: none; }
  .apro-page .apro-tab {
    flex-shrink: 0;
    min-height: 38px;
    padding: 8px 14px;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  /* ═══ TABPANEL GRIDS (1fr 380px / 1fr 360px / aninhados) — stack vertical ═══ */
  .apro-page .apro-tabpanel > div[style*="grid-template-columns:1fr 380px"],
  .apro-page .apro-tabpanel > div[style*="grid-template-columns:1fr 360px"],
  .apro-page .apro-tabpanel div[style*="grid-template-columns:1fr 360px"],
  .apro-page .apro-tabpanel div[style*="grid-template-columns:1fr 380px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* ═══ CHART BLOCK dentro do resultado (GRAFICO · BTC/USD · ANALISE VISUAL) ═══ */
  /* #aproChartHost tem height:360px inline. Garante largura full + responsivo. */
  .apro-page #aproChartHost {
    height: 300px !important;
    width: 100% !important;
    min-width: 0;
  }
  .apro-page #aproChartCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;
    display: block;
  }
  /* Label do chart (GRAFICO · BTC/USD + ANALISE VISUAL) */
  .apro-page #aproChartLabel {
    font-size: 0.58rem !important;
  }

  /* ═══ PAINEIS DE RESULTADO (PLANO OPERACIONAL/FATORES DE RISCO/etc) ═══ */
  /* _block() renders: <div style="..."><div class="apro-block-head">...</div>...</div> */
  .apro-page .apro-tabpanel ._block,
  .apro-page .apro-tabpanel [class*="apro-block"] {
    padding: 12px;
    border-radius: 12px;
  }
  /* Rows de TP1/TP2/TP3/R:R (_row helper) */
  .apro-page .apro-tabpanel div[style*="padding:6px 0"],
  .apro-page .apro-tabpanel div[style*="padding:8px 0"] {
    padding: 10px 4px !important;
    min-height: 40px;
  }

  /* Invalidation box */
  .apro-page [id*="aproInval"],
  .apro-page [class*="invalidation"],
  .apro-page div[style*="rgba(248,113,113,0.08)"][style*="border"] {
    padding: 10px 12px !important;
  }

  /* Risk gauge SVG block */
  .apro-page #aproRiskGauge {
    padding: 14px 12px !important;
  }
  .apro-page #aproGaugeSvg {
    max-width: 240px !important;
  }

  /* Conclusion card (CONCLUSAO DA ANALISE) */
  .apro-page [id*="aproConclus"],
  .apro-page .apro-tabpanel div[style*="linear-gradient"][style*="font-family"] {
    padding: 12px 14px;
  }

  /* Targets TP1/TP2/TP3 + SL — linhas tocaveis */
  .apro-page [class*="apro-target"],
  .apro-page [class*="apro-sl"] {
    padding: 10px 12px;
    min-height: 44px;
  }

  /* Context items (session/volatility/trend/dominance/volume) */
  .apro-page [class*="apro-context"] > div {
    padding: 8px 10px;
    font-size: 0.7rem;
  }

  /* Report sections (h + t) */
  .apro-page [class*="apro-report"] h4,
  .apro-page [class*="apro-report"] h3 {
    font-size: 0.82rem;
  }
  .apro-page [class*="apro-report"] p {
    font-size: 0.76rem;
    line-height: 1.55;
  }

  /* Insights list */
  .apro-page [class*="apro-insight"] {
    padding: 8px 10px;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* Fear & Greed box */
  .apro-page [id*="fearGreed"],
  .apro-page [id*="FearGreed"] {
    padding: 12px;
  }

  /* Scenario cards (principal + alternativo) */
  .apro-page [class*="apro-scenario"] {
    padding: 12px 14px;
    border-radius: 12px;
  }

  /* Section cards padding */
  .apro-page .section-card {
    border-radius: 14px;
  }
  .apro-page .section-card-body {
    padding: 12px;
  }

  /* ---------- 23. GAMIFICATION + COPY + SOCIAL + CHALLENGES (MOBILE PREMIUM) ---------- */
  /* 4 paginas em 1 bloco. Escopo via classes/ids especificos pra nao vazar. */

  /* Respiro pro FAB/dock */
  .page:has(.ch-hero),
  .page:has(.ch-card),
  .page:has(.soc-feed),
  .page:has([id*="copyTraders"]),
  .page:has([id*="chList"]) {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }

  /* ═══ GAMIFICATION — XP Hero (1fr auto) stack vertical ═══ */
  .ch-hero > div[style*="grid-template-columns:1fr auto"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  /* Profile avatar box: centraliza ACIMA da info XP */
  .ch-hero > div[style*="grid-template-columns:1fr auto"] > div:last-child {
    order: -1;
    text-align: center;
  }
  /* Stats grid (RANK/STREAK/PONTOS/WINRATE) */
  .ch-hero .ch-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ch-hero .ch-hero-stat {
    padding: 10px 12px;
    text-align: center;
  }
  .ch-hero .ch-hero-stat-val { font-size: 1.1rem; }
  .ch-hero .ch-hero-stat-lbl { font-size: 0.52rem; letter-spacing: 1.2px; }
  #gamLevelTitle { font-size: 0.9rem !important; }
  #gamXpLabel { font-size: 0.7rem !important; }

  /* Quick nav (Social + Challenges) */
  .page:has(.ch-hero) a[href="#/social"],
  .page:has(.ch-hero) a[href="#/challenges"] {
    min-height: 56px;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  /* ═══ CHALLENGES — cards + actions ═══ */
  .ch-card {
    padding: 14px !important;
    border-radius: 14px !important;
    min-width: 0;
    overflow: hidden;
  }
  .ch-card-head {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .ch-card-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.3rem !important;
    flex-shrink: 0;
  }
  .ch-card-info {
    min-width: 0;
    flex: 1 1 120px;
  }
  .ch-card-name {
    font-size: 0.88rem !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .ch-card-desc {
    font-size: 0.72rem !important;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .ch-card-reward {
    flex-shrink: 0;
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
    white-space: nowrap;
  }
  /* Timer row (6h restantes + 👥 87 participantes) — wrap sem cortar texto */
  .ch-card-timer {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 0.7rem !important;
    overflow-wrap: break-word;
  }
  .ch-card-timer > span {
    white-space: normal !important;
  }
  .ch-card-timer > span[style*="margin-left:auto"] {
    margin-left: 0 !important;
    flex: 1 1 auto;
    text-align: right;
  }
  /* Progress labels */
  .ch-progress-label { font-size: 0.68rem !important; }
  .ch-progress-pct { font-size: 0.76rem !important; }
  /* Actions — PARTICIPAR + Compartilhar tap-friendly */
  .ch-card-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .ch-card-actions > button,
  .ch-card-actions > a,
  .ch-card-share,
  .ch-card-join {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 0.76rem !important;
    border-radius: 12px !important;
    flex: 1 1 48%;
    letter-spacing: 0.8px;
  }
  /* Card type badge (WEEKLY/DAILY/TOURNAMENT) */
  .ch-card-type {
    font-size: 0.56rem !important;
    padding: 3px 8px !important;
    letter-spacing: 1.2px !important;
  }
  /* Completed badge */
  .ch-completed-badge {
    font-size: 0.6rem !important;
    padding: 4px 10px !important;
  }

  /* ═══ SOCIAL — feed + posts + share ═══ */
  /* Grid 1fr 300px JA coberto pelo inline. Refinar internos. */

  .feed-post-actions,
  .soc-post-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .soc-share-btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
  }

  /* Share modal (plataformas whatsapp/telegram/fb/ig/tw/copy) */
  .soc-share-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .soc-share-option {
    padding: 12px 8px !important;
    min-height: 72px;
  }
  .soc-share-icon {
    width: 36px;
    height: 36px;
  }
  .soc-share-modal {
    width: 92vw !important;
    max-width: 400px !important;
    padding: 16px !important;
  }
  .soc-share-modal-title { font-size: 0.82rem !important; }

  .soc-share-copy-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .soc-share-copy-btn {
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    flex: 1 1 100%;
  }

  .soc-profile-drawer {
    width: 92vw !important;
    max-width: 360px !important;
  }

  /* ═══ SOCIAL FEED — reforco de layout (forcar stack + wrap de texto) ═══ */
  /* A regra inline <768px [style*="1fr 300px"] deveria colapsar, mas em
     algumas configuracoes o right sidebar aparece cortado. Aqui reforcamos
     com escopo .social-page especifico + anti-overflow de conteudo. */

  .social-page > div[style*="grid-template-columns:1fr 300px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  /* Right sidebar (topSignal + sentimento) — remove sticky em mobile */
  .social-page > div[style*="grid-template-columns:1fr 300px"] > div[style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* Feed post cards — preve overflow horizontal + wrap de texto longo */
  .social-page .feed-post,
  .social-page .soc-post,
  .social-page [class*="soc-post-"]:not(.soc-post-type) {
    max-width: 100% !important;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
  }
  .social-page .feed-post-body,
  .social-page .soc-post-body,
  .social-page .soc-post-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }
  .social-page .feed-post-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .social-page .feed-post-name,
  .social-page .soc-post-name {
    font-size: 0.78rem !important;
  }

  /* Reactions row (heart/fire/rocket/diamond/comment) */
  .social-page .feed-post-actions,
  .social-page .soc-reactions,
  .social-page [class*="soc-reactions-"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 6px 0;
  }
  .social-page .feed-post-actions > *,
  .social-page [class*="soc-react"] > * {
    min-height: 32px;
  }

  /* Stories bar — scroll horizontal touch (sem esconder) */
  .social-page .soc-stories-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }
  .social-page .soc-stories-bar::-webkit-scrollbar { display: none; }
  .social-page .soc-story {
    flex-shrink: 0;
  }

  /* Filter bar (Todos/Calls/Puts/Análises/Conquistas) — scroll horizontal */
  .social-page .filter-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  .social-page .filter-bar::-webkit-scrollbar { display: none; }
  .social-page .filter-chip {
    flex-shrink: 0;
    min-height: 34px;
    padding: 7px 14px;
  }

  /* Composer (post creation area) */
  .social-page .soc-composer,
  .social-page .soc-composer-locked {
    padding: 12px 14px;
  }
  .social-page .soc-tmpl-selector {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .social-page .soc-tmpl-btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  /* Signal embed dentro de post (BTC/USD 94% confiança WIN) */
  .social-page [class*="soc-signal-embed"],
  .social-page [class*="soc-post-signal"] {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  /* Comments section */
  .social-page .soc-comments-section {
    padding-top: 8px;
  }
  .social-page .soc-comment-item {
    padding: 6px 0;
    font-size: 0.74rem;
  }
  .social-page .soc-comment-input {
    min-height: 38px;
    font-size: 0.82rem;
  }
  .social-page .soc-comment-send {
    min-height: 38px;
    padding: 8px 14px;
  }

  /* Respiro pro FAB/dock */
  .social-page {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  /* ═══ COPY — KPI row + traders list ═══ */
  .page:has([id*="copyTraders"]) .stat-card,
  .page:has([id*="copyTraders"]) .kpi-box {
    padding: 10px 12px !important;
  }
  .page:has([id*="copyTraders"]) .kpi-value,
  .page:has([id*="copyTraders"]) .kpi-box-value {
    font-size: 1.1rem !important;
  }
  [id*="copyTraders"] > div,
  [id*="copy-traders"] > div {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .page:has([id*="copyTraders"]) button.action-btn,
  .page:has([id*="copy-traders"]) button.action-btn {
    min-height: 40px !important;
    font-size: 0.74rem !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  /* ---------- 24. BACKTEST PRO — MOBILE PREMIUM (NAO mexe PC) ---------- */
  /* Bugs: config grid 6 cols (MERCADO/ATIVO/TF/PERIODO/WF/EXECUTAR) + hero
     metrics 6 cols + WF validation 2 cols com 3 mini-stats cada. */

  /* Respiro pro FAB/dock */
  .page:has(#btpRunBtn) {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  }

  /* ═══ CONFIG GRID — 6 cols → 2 cols + botao full-width ═══ */
  .page:has(#btpRunBtn) > .glass-card:first-of-type > div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr auto"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  /* Botao EXECUTAR BACKTEST em linha propria, full-width, tap iOS */
  #btpRunBtn {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 20px !important;
    font-size: 0.86rem !important;
    letter-spacing: 1.2px !important;
    margin-top: 4px;
    white-space: nowrap;
  }

  /* Selects do config (MERCADO/ATIVO/TF/PERIODO/WF) */
  #btpMarket,
  #btpAsset,
  #btpTf,
  #btpDays,
  #btpWF {
    min-height: 42px !important;
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }

  /* Checkboxes row (12 Gates + Apenas ENTRAR) */
  .page:has(#btpRunBtn) .glass-card:first-of-type > div[style*="display:flex"][style*="gap:16px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .page:has(#btpRunBtn) label[for*="btp"] {
    min-height: 32px;
  }

  /* ═══ HERO METRICS (6 cols: WR/SHARPE/SORTINO/MAX DD/PF/EXPECTANCY) ═══ */
  .page:has(#btpRunBtn) div[style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Hero header (simbolo + date + elapsed): wrap */
  .page:has(#btpRunBtn) .glass-card[style*="linear-gradient(145deg"] > div[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ═══ WALK-FORWARD VALIDATION (2 cols IS/OOS) ═══ */
  .page:has(#btpRunBtn) div[style*="grid-template-columns:1fr 1fr"]:has(> div[style*="IN-SAMPLE"]),
  .page:has(#btpRunBtn) .glass-card > div[style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Inner mini-stats 3 cols (WR/Sharpe/Trades) — manter compacto */
  .page:has(#btpRunBtn) div[style*="grid-template-columns:1fr 1fr 1fr"] {
    gap: 6px !important;
  }

  /* ═══ EQUITY CANVAS ═══ */
  #btpEqCanvas {
    width: 100% !important;
    height: 220px !important;
    max-height: 260px !important;
  }

  /* ═══ BACKTESTS ANTERIORES (history) ═══ */
  #btpHistoryList > div {
    padding: 10px 12px !important;
  }

  /* Section titles internos */
  .page:has(#btpRunBtn) .glass-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* Progress overlay durante execução */
  #btpProgress {
    padding: 24px 16px !important;
  }
  #btpProgressBar {
    max-width: 280px;
  }

  /* ═══════════════════════════════════════════════════════════
   * BLOCO 25 — /backtest (Performance Comprovada)
   * Detect: .page:has(#btContent)
   * Foco: comprimir KPI grids, gauge, tables, evitar dock cobrir
   * ═══════════════════════════════════════════════════════════ */

  /* Padding bottom pra iosDock/iosFab não cobrir conteúdo */
  .page:has(#btContent) {
    padding-bottom: 110px !important;
  }

  /* Share button compacto */
  .page:has(#btContent) .bt-share-btn {
    font-size: 0.66rem !important;
    padding: 7px 12px !important;
  }

  /* KPIs Hero (auto-fit minmax 180px → 2 cols compactos) */
  .page:has(#btContent) div[style*="minmax(180px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* KPI cards individuais — padding e fonte menores */
  .page:has(#btContent) .bt-card-glow {
    padding: 11px 12px !important;
  }
  .page:has(#btContent) .bt-kpi-val {
    font-size: 1.25rem !important;
  }

  /* Win Rate Gauge hero (card centralizado, padding 24px 40px no inline) */
  .page:has(#btContent) div[style*="padding:24px 40px"] {
    padding: 18px 16px !important;
  }
  .page:has(#btContent) div[style*="padding:24px 40px"] .bt-kpi-val {
    font-size: 2.4rem !important;
  }
  /* Wins/Losses/Draws inline mini-cards do gauge */
  .page:has(#btContent) div[style*="padding:24px 40px"] div[style*="font-size:1.1rem"] {
    font-size: 0.95rem !important;
  }

  /* Direction CALL/PUT cards — gap menor pra caber lado a lado */
  .page:has(#btContent) .bt-anim[style*="display:flex"][style*="gap:12px"] {
    gap: 8px !important;
  }
  .page:has(#btContent) .bt-anim[style*="display:flex"][style*="gap:12px"] > div {
    padding: 10px !important;
  }
  .page:has(#btContent) .bt-anim[style*="display:flex"][style*="gap:12px"] div[style*="font-size:1.6rem"] {
    font-size: 1.3rem !important;
  }

  /* By Market (auto-fit minmax 200px → 2 cols) */
  .page:has(#btContent) div[style*="minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Top 5 Melhores / 5 Para Melhorar (1fr 1fr → stack) */
  .page:has(#btContent) .bt-anim[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* By Timeframe (auto-fit minmax 140px → 3 cols compactos) */
  .page:has(#btContent) div[style*="minmax(140px"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .page:has(#btContent) div[style*="minmax(140px"] > div {
    padding: 9px 6px !important;
  }
  .page:has(#btContent) div[style*="minmax(140px"] div[style*="font-size:1.3rem"] {
    font-size: 1.05rem !important;
  }

  /* Evolution canvas — altura controlada */
  #btEvoCanvas {
    height: 200px !important;
    max-height: 220px !important;
  }
  /* Container do evolution — padding menor */
  #btEvoCanvas:not(:defined),
  .page:has(#btContent) div:has(> #btEvoCanvas) {
    padding: 10px !important;
  }

  /* Heatmap canvas — scroll horizontal já existe, só garante altura mínima */
  #btHeatCanvas {
    min-height: 180px;
  }

  /* Tabela todos os ativos — fonte e padding menores */
  .page:has(#btContent) table {
    font-size: 0.62rem !important;
  }
  .page:has(#btContent) table th,
  .page:has(#btContent) table td {
    padding: 6px 6px !important;
    font-size: 0.6rem !important;
  }

  /* Recent trades cards — wrap + padding compacto */
  .page:has(#btContent) div[style*="border-left:3px solid"] {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .page:has(#btContent) div[style*="border-left:3px solid"] > span {
    min-width: auto !important;
  }

  /* By Hour barras — min-width menor pra caber mais barras */
  .page:has(#btContent) div[style*="align-items:flex-end"] > div {
    min-width: 24px !important;
  }

  /* Loading spinner padding reduzido */
  #btLoading {
    padding: 40px 0 !important;
  }

} /* fim do @media (max-width: 768px) — FECHAMENTO QUE FALTAVA */

/* ==========================================================
   BLOCO MOBILE-ONLY — OVERFLOW FIX + iOS FAB REPOSITION
   Adicionado em 2026-04-22.
   Escopo:
     1) Mata scroll horizontal indevido em 7 paginas no mobile
        (/crypto-signals, /social, /chart, /auto-binance,
         /neural-core, /deriv-exec, /challenges) — e em qualquer
        outra pagina, sem risco, porque so aplica em <=768px.
     2) Move o #iosFab (botão menu iOS, canto inf. direito) pro
        centro inferior pra nao colidir com o .ja-fab (IA) que
        ocupa bottom:20px right:20px no mesmo canto.
   Tudo AQUI dentro de @media (max-width: 768px). ZERO impacto
   em desktop (>=769px). Seguro por dupla trava: a media query
   e o #iosFab ja tem display:none em min-width:769px.
   ========================================================== */
@media (max-width: 768px) {

  /* 1. OVERFLOW HORIZONTAL — trava em html/body e containers */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  #app, .page, .container, .screen, main, .main-content,
  #pageContent, .page-content,
  .cb-premium-page, .social-page, .cfx-page, .tg-page, .apro-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  /* /crypto-signals: painel admin (.cb-card) com sliders + botao Salvar
     estava clipando no mobile porque a soma flex das .cb-cfg-row
     (label flex:1 + input[type=range] width:100%) ultrapassava a
     largura da card. Travar cards e linhas no tamanho do container. */
  .cb-premium-page .cb-card,
  .cb-premium-page .cb-cfg-row,
  .cb-premium-page .cb-main,
  .cb-premium-page .cb-side {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Range/select/button: nunca ultrapassam o pai flex */
  .cb-premium-page .cb-cfg-row input[type="range"],
  .cb-premium-page .cb-cfg-row select,
  .cb-premium-page .cb-cfg-btn {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Label da linha (flex:1) pode encolher em vez de empurrar */
  .cb-premium-page .cb-cfg-row label {
    min-width: 0 !important;
  }
  /* Midia nunca estoura a largura do container */
  img, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* Pre/code quebram em vez de empurrar largura */
  pre, code {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* 2. iOS FAB — centraliza na base no mobile.
     Override com !important porque <style id="iosFabStyles">
     aparece depois deste arquivo na DOM (source order).
     Desktop (>=769px) nao eh afetado: a regra existente
     #iosFab{display:none !important} ja cobre isso. */
  #iosFab {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }
}
/* ==== FIM BLOCO MOBILE-ONLY OVERFLOW + FAB ==== */

/* Mini charts 1-col em celulares muito estreitos — @media separado */
@media (max-width: 420px) {
  .mini-charts-row {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================
   MOBILE PERF KILL-SWITCH — 2026-04-22 (rev 2026-04-22)
   Desativa efeitos caros no mobile pra destravar /analysis-pro
   e outras paginas pesadas. Desktop (>=769px) NAO afetado.

   Rev 2: removido override universal de animation-duration /
   transition-duration (*). Estava comprimindo pulses legitimos
   (iosFabPulse, jaFabPulse, LIVE badges, breathing do menu)
   pra 0.2s e causava flash epileptico. Substituido por
   desativacao cirurgica de animacoes DECORATIVAS apenas.
   NUNCA tocar em .pulse, .glow, .live, .breathing, .status-*,
   .btn-admin, .ios-menu-btn, .ai-btn — o pulse deles e
   legitimo e o usuario quer manter suave.

   Rollback: deletar o @media inteiro abaixo.
   ========================================================== */
@media (max-width: 768px) {
  /* Blur/glass sai fora — e o maior custo de GPU em iOS. */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Glow/neon/shadow decorativos saem — mantem shadow-sm. */
  .glow, .neon, [class*="shadow"]:not(.shadow-sm) {
    box-shadow: none !important;
    filter: none !important;
  }

  /* Desabilita animacoes puramente DECORATIVAS (gradientes
     animados, shimmers, rotacoes de fundo, particulas).
     NAO toca em pulse/glow/blink de indicadores de estado. */
  .bg-animated,
  .shimmer,
  .gradient-flow,
  .rotating-bg,
  .particle-bg,
  [class*="animated-bg"],
  [class*="shimmer"] {
    animation: none !important;
  }

  /* Reduz blur pesado em cards especificos — mantem visual,
     melhora FPS. Redundante com o * acima, mas explicito
     pra quando o * for removido no futuro. */
  .glass-card,
  .backdrop-blur,
  [class*="blur-"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* ==== FIM MOBILE PERF KILL-SWITCH ==== */

/* ==========================================================
   iOS FAB LAYOUT 2+FAB+2 — 2026-04-22
   Quando o #iosFab abre no mobile, os 4 .fab-item viram uma
   linha horizontal centrada no FAB: 2 esquerda (Home/Radar),
   espaco pro FAB (~66px), 2 direita (Cripto/Sinais).

   Seletores reais confirmados no PASSO 1:
     container FAB      = #iosFab
     classe aberto      = #iosFab.is-open
     wrapper do menu    = #iosFab .fab-menu
     itens              = #iosFab .fab-menu .fab-item  (4 <a>)
     botao IA (canto)   = .ja-fab

   IMPORTANTE: .fab-menu no mobile vira position:fixed (sai do
   #iosFab em termos de layout); o JS que toggla .is-open nao
   quebra porque continua DOM-filho.

   Rollback: deletar o @media inteiro abaixo.
   ========================================================== */
@media (max-width: 768px) {
  /* Container do menu: linha horizontal, centrada na base */
  #iosFab.is-open .fab-menu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 140px); /* 70px folga cada lado */
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 9997 !important;
    /* FIX 2026-04-23: container NAO captura toque (so os itens).
       Sem isso, o gap de 66px no meio (onde o FAB sentam) fica
       coberto pelo flex container e o 2o tap no FAB nao fecha
       o menu — toque cai na .fab-menu em vez da .fab-btn. Os
       .fab-item ja tem pointer-events:auto explicito em
       #iosFabStyles (index.html ~36198), entao continuam
       clicaveis. Mesmo pattern do #iosFab original. */
    pointer-events: none !important;
  }

  /* Itens pequenos, circulares */
  #iosFab.is-open .fab-menu .fab-item {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* Reforco explicito — mesmo com .fab-menu pointer-events:none,
       os items captam toque normalmente. */
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    font-size: 11px !important;
  }

  /* Reordenacao via 'order' + espaco central pro FAB (~60px + gap).
     Ordem visual final da esquerda pra direita:
       [Home] [Radar]  ((FAB))  [Cripto] [Sinais] */
  #iosFab.is-open .fab-menu .fab-item[href*="dashboard"]      { order: 1; }  /* Home   esq */
  #iosFab.is-open .fab-menu .fab-item[href*="radar"]          { order: 2; }  /* Radar  esq */
  #iosFab.is-open .fab-menu .fab-item[href*="crypto-signals"] { order: 3;    /* Cripto dir */
    margin-left: 66px !important; }
  #iosFab.is-open .fab-menu .fab-item[href*="signals"]:not([href*="crypto"]) { order: 4; } /* Sinais dir */

  /* Garante que o botao IA (.ja-fab) fica acima de tudo
     e nunca eh coberto pelos itens do menu aberto. */
  .ja-fab {
    z-index: 9999 !important;
  }
}
/* ==== FIM iOS FAB LAYOUT 2+FAB+2 ==== */

/* ==========================================================
   MOBILE SAFE MODE CSS — 2026-04-23
   Versao ajustada do PASSO 7 do MODO MOBILE AUTOMATICO.
   NAO usa seletor '*' universal (o literal da spec quebraria
   pulses legitimos: iosFabPulse, jaFabPulse, sysPulse,
   upgradePulse, breathing do menu).

   Escopo: classes nomeadas apenas. Ataca os 3 maiores culpados
   de aquecimento em mobile:
     1. backdrop-filter (GPU expensive)
     2. box-shadow pesada em cards grandes
     3. loops de animacao decorativos de fundo

   Redundancias com blocos anteriores (MOBILE PERF KILL-SWITCH)
   sao intencionais — este bloco e auto-suficiente pra rollback
   isolado entre os marcadores BEGIN/END abaixo.

   Rollback: deletar tudo entre MOBILE_SAFE_MODE_CSS BEGIN/END.
   ========================================================== */
/* MOBILE_SAFE_MODE_CSS BEGIN */
@media (max-width: 768px) {
  /* 1. Backdrop-filter: vilao #1 do aquecimento GPU em mobile */
  .glass, .glass-card, .backdrop-blur,
  [class*="backdrop-blur"], [class*="glass-"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 2. Sombra heavy reduzida (classes nomeadas, nao geral) */
  .shadow-heavy, .shadow-xl, .drop-shadow-heavy {
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
    filter: none !important;
  }

  /* 3. Pausar SO animacoes decorativas de fundo (pulses ficam intactos) */
  .bg-animated, .animated-gradient, .gradient-flow,
  .shimmer, .particle-bg, .bg-particles, .ambient-glow {
    animation: none !important;
    background-image: none !important;
  }

  /* 4. Transitions mais curtas em containers visuais */
  .glass, .glass-card, .card-heavy {
    transition-duration: 0.15s !important;
  }
}
/* MOBILE_SAFE_MODE_CSS END */