:root{
  --bg:#0b1220;--card:#141c2e;--muted:#9fb0d0;--ok:#22c55e;--warn:#eab308;--err:#ef4444;
  --primary:#2a62ff;--border:#263453;--panel:#0f1830;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:#e6edf7}
header{padding:12px 16px;border-bottom:1px solid #25314d;background:#0d1628;position:sticky;top:0;z-index:8}
.hflex{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.badge{display:none} /* ⇦ removido o que estava marcado com X */
.online{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfe8ff}
.online i{width:8px;height:8px;background:#22c55e;border-radius:50%}
.menu-wrap{position:relative}
.menu-btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:#0f1830;color:#cfe8ff;cursor:pointer}
.menu-list{position:absolute;right:0;top:40px;background:#0f1830;border:1px solid var(--border);border-radius:12px;min-width:220px;display:none;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:20}
.menu-list a{display:block;padding:12px;color:#cfe8ff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.06)}
.menu-list a:last-child{border-bottom:none}
.menu-wrap.open .menu-list{display:block}

.rightbar{
  display:flex; align-items:center; gap:10px; /* botão + menu lado a lado */
}
.aff-btn{
  padding:8px 12px; border-radius:10px;
  background:#c1121f; /* vermelho */
  color:#fff;         /* texto branco */
  border:1px solid var(--border);
  text-decoration:none; white-space:nowrap; font-weight:600;
}
.aff-btn:hover{ opacity:.9; }

main{max-width:1200px;margin:14px auto 90px;padding:0 12px}
.grid{display:grid;gap:14px}
@media(min-width:980px){.grid{grid-template-columns:1.05fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
input,select,button{width:100%;padding:12px;border-radius:12px;border:1px solid #2a3a5e;background:#0f1830;color:#e6edf7}
button{cursor:pointer;transition:transform .05s ease,opacity .05s ease}
button:active{transform:scale(.98);opacity:.92}
.primary{background:var(--primary);border-color:var(--primary)}
.danger{background:#9b2226;border-color:#9b2226}
.muted{color:var(--muted)} .sm{font-size:12px}

.pill{padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid #25314d;min-width:140px}
.pill b{display:block}
.kpi{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.metric{display:inline-flex;align-items:center;gap:10px;background:#0f1830;border:1px solid #2a3a5e;border-radius:12px;padding:10px 14px;font-size:14px;min-width:180px}
.metric b{font-size:18px;color:#fff}

.log{max-height:240px;overflow:auto;background:#08101b;border-radius:10px;border:1px solid #223052;padding:10px;font-family:ui-monospace,Menlo,Consolas}
.history-headers,.history-row{display:flex;gap:10px;align-items:center;padding:6px 8px}
.history-headers{border-bottom:1px solid rgba(255,255,255,.06);font-weight:700}
.h-time{width:74px}.h-strat{width:140px}.h-tick{width:72px}.h-price{width:86px;text-align:right}.h-result{width:96px;text-align:right}

.progress-wrap{margin:8px 0;padding:10px;border-radius:10px;background:rgba(255,255,255,.02)}
.prog-steps{display:flex;align-items:center;gap:12px;justify-content:space-between}
.step{flex:1;text-align:center;padding:8px;border-radius:8px;background:rgba(255,255,255,.04);color:#9fb0d0}
.connector{height:6px;flex:1;background:rgba(255,255,255,.06);border-radius:6px}
.step.active{background:linear-gradient(90deg,#6b46c1,#9f7aea);color:#fff;box-shadow:0 6px 18px rgba(103,71,179,.22)}

canvas{display:block;width:100%;height:240px;border-radius:10px;background:#0b1524;margin-top:10px}

/* botões maiores */
.btn-icon{width:58px;height:58px;border-radius:14px;border:2px solid #2a3a5e;background:#0f1830;display:flex;align-items:center;justify-content:center}
.btn-icon svg{width:26px;height:26px;fill:#cfe8ff}
.btn-icon.play{border-color:#1ea84a}
.btn-icon.stop{border-color:#d4423a}
.btn-mini{padding:8px 12px;font-size:12px}

	/* Logo no cabeçalho, ao lado do título */
.brand{ display:flex; align-items:center; gap:8px; }
.brand img{ height:22px; width:auto; display:block; } /* altura pequena, mesma linha */

/* escondidos (pedidos) */
.hide-sma{display:none!important}   /* SMA(5)/SMA(20) ocultos */

/* toolbar acima do gráfico (desktop) */
.chart-toolbar{display:flex;gap:10px;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-top:6px}
.sound-toggle{width:auto}

/* ordem desktop */
@media(min-width:980px){
  .desktop-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .progress-first{order:1}
  .history-second{order:2}
}
	
/* Botão flutuante WhatsApp */
.whatsapp-fab{
  position:fixed; right:16px;
  /* acima do rodapé fixo: ajuste se quiser */
  bottom:calc(84px + env(safe-area-inset-bottom));
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  border:1px solid #1fa855; z-index:1000;
  transition:transform .12s ease, opacity .12s ease;
}
.whatsapp-fab:hover{ transform:translateY(-1px); opacity:.95; }
.whatsapp-fab svg{ width:30px; height:30px; fill:currentColor; }
	
/* mobile */
@media(max-width:979px){
  .mobile-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
}

.footer{position:fixed;left:0;right:0;bottom:0;background:#0d1628;border-top:1px solid #25314d}
#footer-warning{display:block;max-height:0;overflow:hidden;transition:max-height .8s ease,padding .8s ease;padding:0 10px;font-size:12px;line-height:1.3}
#footer-warning.show{max-height:200px;padding:10px}

	/* Cabeçalho em 3 colunas: esquerda | centro | direita */
header{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* lados flexíveis, centro no meio real */
  align-items:center;
  gap:12px;
}

/* esquerda (título/SORA) */
.hflex{
  justify-self:start;
  display:flex; align-items:center; gap:8px;
}

/* centro (contador online) */
header .online{
  justify-self:center;                 /* <<< centraliza no grid */
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; font-size:12px; color:#cfe8ff;
}
header .online i{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e; box-shadow:0 0 6px #22c55e;
}

/* direita (botão + menu) */
header .rightbar{
  justify-self:end;                    /* <<< fica colado à direita */
  display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
}

/* garante que regras antigas de float/flex não baguncem */
header *{ float:none !important; }
	
	/* Tipografia igual aos botões padrão (Autorizar & Conectar) */
.aff-btn{
  font-family: inherit;   /* mesma família do site/botões */
  font-size: 14px;        /* mesmo tamanho usado nos botões */
  font-weight: 600;       /* peso forte como o botão */
  line-height: 1;         /* texto mais "compacto" */
  letter-spacing: .2px;   /* leve ajuste como nos botões */
}

	/* WhatsApp "encostado" no rodapé */
.whatsapp-fab{
  bottom: 16px !important;  /* ajuste fino: 12–24px conforme seu gosto */
}

/* Se no mobile quiser um pouquinho mais alto, para não colar demais: */
@media (max-width: 600px){
  .whatsapp-fab{ bottom: 22px !important; }
}

/* ======== CORREÇÃO DE RESPONSIVIDADE ======== */

/* Volta ao comportamento compacto no mobile */
@media (max-width: 979px) {
  main.grid {
    display: block;  /* em vez de 2 colunas, fica 1 só */
  }

  .card {
    margin-bottom: 14px; /* espaçamento entre cards */
  }

  /* Botões Comprar RISE/FALL ficam logo visíveis embaixo do gráfico */
  .mobile-actions {
    display: flex !important;
    gap: 10px;
    margin-top: 10px;
  }
  .mobile-actions button {
    flex: 1;
  }
}

/* Ajusta AI Tools para não "alongar" demais */
.ai-tools-panel {
  max-height: none !important;
  margin-bottom: 10px;
}

  /* Ajusta a linha "Operações" dentro da pílula de Lucro/Prejuízo */
  #operations_count {
    display: inline-block;       /* mantém lado a lado com o valor */
    font-size: 11px !important;  /* diminui só essa linha */
    color: #9fb0d0;              /* mantém estilo "muted" */
    margin-left: 6px;            /* pequeno espaço depois do valor */
    white-space: nowrap;         /* impede quebra de linha */
  }
  /* garante que Lucro/Prejuízo e Operações fiquem juntos */
  .pill span#pl_session {
    display: inline-block;
  }
	/* ===== Notificação curta de ganhos (header) ===== */
.profit-toast{
  display:none; align-items:center; gap:6px;
  background:#0f1830; border:1px solid #263453;
  padding:6px 10px; border-radius:999px; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  font-size:12px; color:#e6edf7;
  opacity:0; transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.profit-toast.show{ display:inline-flex; opacity:1; transform:translateY(0); }
.profit-toast .gain{ color:#22c55e; font-weight:700; }

	/* ===== Fix: posição da notificação no mobile (abaixo do botão) ===== */
@media (max-width: 680px){
  header .rightbar{ position: relative; }            /* referência p/ posicionar */
  .profit-toast{
    position: absolute;
    top: calc(100% + 8px);   /* 8px abaixo da .rightbar (botão) */
    right: 0;
    left: auto;
    max-width: 78vw;         /* não sair da tela */
    transform: none;         /* evita "pular" layout */
    z-index: 100;            /* sobrepõe sem cortar */
  }
  .profit-toast.show{ display: flex; }               /* sobrescreve inline-flex */
}

	
	/* ===== Downloads grid ===== */
.download-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.dl-card{background:#0b1524;border:1px solid #223052;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.dl-card h4{margin:0}
.dl-btn{display:inline-block;padding:10px 12px;border-radius:10px;background:#2a62ff;color:#fff;font-weight:700;text-decoration:none;border:1px solid #2a62ff;text-align:center}
.dl-btn:hover{opacity:.92;transform:translateY(-1px)}

  /* animação suave ao desaparecer */
  .footer.fade-out {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
  }

  /* Botão do Robô (fica ao lado do Play) */
  .btn-icon.ai-tools{ border-color:#6b21a8; }
  .btn-icon.ai-tools:hover{ opacity:.95; transform:translateY(-1px); }

  /* Painel embaixo do gráfico (logo após os botões de compra) */
  .ai-tools-panel{
    background:#0f1830;
    border:1px solid #263453;
    border-radius:14px;
    padding:12px;
    margin-top:10px;

    display:grid;
    grid-template-columns:1fr;
    gap:12px;

    /* animação de "abrir/fechar" */
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-6px);
    transition:max-height .35s ease, opacity .35s ease, transform .35s ease;
  }
  .ai-tools-panel.open{
    max-height:900px;
    opacity:1;
    transform:translateY(0);
  }
  @media(min-width:980px){
    .ai-tools-panel{ grid-template-columns:1fr 1fr 1fr; }
    .ai-tools-panel.open{ max-height:520px; }
  }

  .ai-tools-panel .tool{
    background:#0b1524;
    border:1px solid #223052;
    border-radius:12px;
    padding:12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  }
  .ai-tools-panel h4{ margin:0 0 10px; font-size:14px; letter-spacing:.2px; }

  .ai-tools-panel .kpis{ display:grid; gap:10px; }
  .ai-tools-panel .kpi{
    display:grid;
    grid-template-columns:96px 1fr 72px; /* label | barra | % */
    gap:10px; align-items:center;
  }
  .ai-tools-panel .kpi span.lbl{ color:#9fb0d0; font-size:12px; }
  .ai-tools-panel .kpi b.pct{ font-size:14px; text-align:right; }

  /* Barra animada com "brilho" */
  .barwrap{ position:relative; height:12px; }
  .bar{
    position:absolute; inset:0;
    background:#08101b;
    border:1px solid #1f2b45;
    border-radius:999px;
    overflow:hidden;
  }
  .bar i{
    display:block; height:100%; width:0%;
    transition:width .45s ease;
    background:linear-gradient(90deg,#2a62ff,#7c3aed);
    animation:shimmer 2.4s linear infinite;
    box-shadow:0 0 10px rgba(124,58,237,.35) inset;
  }
  .bar i.positive{ background:linear-gradient(90deg,#22c55e,#16a34a); box-shadow:0 0 10px rgba(34,197,94,.35) inset; }
  .bar i.negative{ background:linear-gradient(90deg,#ef4444,#dc2626); box-shadow:0 0 10px rgba(239,68,68,.35) inset; }
  @keyframes shimmer{
    0%{ filter:brightness(1); }
    50%{ filter:brightness(1.15); }
    100%{ filter:brightness(1); }
  }

  /* "confiança" na sugestão */
  .ai-suggest{ font-weight:700; }
  .ai-suggest.hot{ color:#22c55e; text-shadow:0 0 10px rgba(34,197,94,.35); }
  .ai-suggest.cold{ color:#ef4444; text-shadow:0 0 10px rgba(239,68,68,.25); }

  /* Chips Over/Under */
  .ctl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
  .chip{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border:1px solid #263453; border-radius:999px; cursor:pointer;
    background:#0b1524; color:#cfe8ff; font-size:12px;
  }
  .chip input{ accent-color:#7c3aed; }
  .ai-tools-panel input[type="number"]{ width:84px; padding:8px; border-radius:10px; }

  .mini{ font-size:12px; color:#9fb0d0; margin-top:6px; }

  /* Impede "alargar" a página e barra horizontal */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Evita que o painel e seus cartões forcem largura */
  .ai-tools-panel { width: 100%; max-width: 100%; min-width: 0; }
  .ai-tools-panel .tool { min-width: 0; }
  main, .grid, .card { min-width: 0; }

  /* Layout fluido de colunas no desktop, sem estourar */
  @media (min-width: 980px){
    .ai-tools-panel {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
  }

  /* Garante que as animações sejam visíveis onde permitido */
  @media (prefers-reduced-motion: no-preference){
    .ai-tools-panel { transition: max-height .35s ease, opacity .35s ease, transform .35s ease; }
    .ai-tools-panel .bar i { transition: width .45s ease; animation: shimmer 2.4s linear infinite; }
  }
  /* Respeita usuários com redução de movimento (evita travar layout) */
  @media (prefers-reduced-motion: reduce){
    .ai-tools-panel { transition: none; }
    .ai-tools-panel .bar i { animation: none; }
  }

/* ====== 1) Painel do Robô: sem espaço quando fechado ====== */
.ai-tools-panel{
  /* fechado = zero espaço */
  padding:0 !important;
  border-width:0 !important;
  margin-top:0 !important;
  max-height:0 !important;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
}
.ai-tools-panel.open{
  /* aberto = volta o layout bonito */
  padding:12px !important;
  border-width:1px !important;
  margin-top:10px !important;
  max-height:900px !important;
  opacity:1;
  transform:translateY(0);
}

/* ====== 2) Cabeçalho compacto no mobile (evita "cortar" o menu) ====== */
@media (max-width: 600px){
  header{
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "brand right" "online online";
  }
  header .hflex{ grid-area: brand; }
  header .rightbar{ grid-area: right; }
  header .online{ grid-area: online; justify-self:start; margin-top:6px; }
  .aff-btn{ padding:6px 8px !important; font-size:12px !important; }
  .menu-btn{ padding:6px 8px !important; font-size:12px !important; }
}
header .rightbar{ min-width:0; }
.menu-wrap{ max-width:100%; }

/* ====== 3) 3 "pills" (Tipo de Conta / Saldo / Lucro) na MESMA linha ====== */
@media (max-width: 680px){
  .kpi{ display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
  .kpi .pill{ min-width:0 !important; }
}

/* ====== 4) "Som / Último Dígito / Último Preço" na MESMA linha ====== */
@media (max-width: 680px){
  .chart-toolbar{
    display:grid !important;
    grid-template-columns: auto 1fr 1fr !important; /* ajustado p/ caber com labels */
    gap:8px;
  }
  .chart-toolbar .metric{ min-width:0; padding:8px 10px; font-size:13px; }
  .chart-toolbar .metric b{ font-size:16px; }
}
/* telas bem pequenas: botões extras quebram pra baixo */
@media (max-width: 360px){
  .chart-toolbar{ grid-template-columns: auto 1fr 1fr !important; }
  #btn_reset_history, #btn_chart_toggle{ grid-column: 1 / -1; }
}

/* ====== 5) Layout móvel mais "fechado" (sem esticar) ====== */
@media (max-width: 979px){
  main.grid{ display:block !important; }   /* 1 coluna no mobile */
  .card{ margin-bottom:14px; }
}

/* ====== 6) Gráfico um pouco mais baixo no mobile ====== */
@media (max-width: 600px){
  #main_chart{ height:200px !important; }
}

  /* ===== 0) Tipografia elástica (encolhe um pouco no mobile) ===== */
  :root{
    --fs-12: clamp(11px, 2.6vw, 12px);
    --fs-13: clamp(12px, 2.7vw, 13px);
    --fs-14: clamp(13px, 2.9vw, 14px);
    --fs-16: clamp(14px, 3.2vw, 16px);
    --fs-18: clamp(16px, 3.6vw, 18px);
  }

  /* ===== 1) PÍLULAS: "Tipo de Conta | Saldo | Lucro/Prejuízo" na MESMA linha ===== */
  /* grid de 3 colunas no mobile e desktop, evitando quebras dentro dos textos */
  .kpi{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    margin-top: 8px !important;
  }
  .kpi .pill{
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .kpi .pill b,
  .kpi .pill span{
    white-space: nowrap;          /* não quebra "Tipo de Conta", "Lucro/Prejuízo" etc */
    overflow: hidden;
    text-overflow: ellipsis;      /* se faltar espaço, põe reticências */
    font-size: var(--fs-14);
  }
  .kpi .pill b{ font-size: var(--fs-13); color:#cfe8ff; }

  /* ===== 2) Barra de métricas: Som | Último Dígito | Último Preço | botões ===== */
  .chart-toolbar{
    display: grid !important;
    grid-template-columns: auto 1fr 1fr auto auto;
    gap: 8px;
  }
  @media (max-width: 380px){
    .chart-toolbar{ grid-template-columns: auto 1fr 1fr !important; }
    #btn_reset_history, #btn_chart_toggle{ grid-column: 1 / -1; }
  }
  .chart-toolbar .metric{
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: var(--fs-13) !important;
  }
  .chart-toolbar .metric b{
    font-size: var(--fs-16) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #btn_sound_toggle, #btn_reset_history, #btn_chart_toggle{
    font-size: var(--fs-12) !important; padding: 8px 10px !important; white-space: nowrap;
  }

  /* ===== 3) Cabeçalho: não deixar o Menu "cortar" no mobile ===== */
  @media (max-width: 640px){
    header{
      grid-template-columns: 1fr auto !important;
      grid-template-areas: "brand right" "online online";
    }
    header .hflex{ grid-area: brand; }
    header .rightbar{ grid-area: right; }
    header .online{ grid-area: online; justify-self:start; margin-top: 6px; }
    .aff-btn,.menu-btn{ padding: 6px 8px !important; font-size: var(--fs-12) !important; }
  }
  header .rightbar{ min-width: 0; }
  .menu-wrap{ max-width: 100%; }

  /* ===== 4) Histórico de Transações: nunca quebrar rótulos ===== */
  .history-headers span{
    white-space: nowrap !important;    /* evita "Tick / Fina" */
    font-size: var(--fs-12);
  }
  .history-row span{
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: var(--fs-13);
  }

  /* ===== 5) Gráfico um pouco mais baixo no mobile (cabe tudo) ===== */
  @media (max-width: 600px){
    #main_chart{ height: 200px !important; }
  }

  /* ===== 6) Painel do Robô SEM espaço quando fechado (enrola de verdade) ===== */
  .ai-tools-panel{
    padding:0 !important; border-width:0 !important; margin-top:0 !important;
    max-height:0 !important; opacity:0; overflow:hidden; transform:translateY(-6px);
  }
  .ai-tools-panel.open{
    padding:12px !important; border-width:1px !important; margin-top:10px !important;
    max-height:900px !important; opacity:1; transform:translateY(0);
  }

  /* ===== 7) Cards da coluna direita empilhados no mobile ===== */
  @media (max-width: 979px){
    main.grid{ display:block !important; }
    .card{ margin-bottom: 14px; }
  }

  /* Tipografia elástica mínima para caber sem quebrar */
  :root{
    --fs-12: clamp(11px, 2.6vw, 12px);
    --fs-13: clamp(12px, 2.8vw, 13px);
    --fs-14: clamp(12.5px, 3vw, 14px);
    --fs-16: clamp(14px, 3.4vw, 16px);
    --pill-h: 66px;                  /* altura padrão das pílulas */
  }

  /* ===== 1) "Tipo de Conta | Saldo | Lucro/Prejuízo" em 3 colunas fixas ===== */
  .kpi{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap:12px !important;
    align-items:stretch;
  }
  .kpi .pill{
    min-width:0 !important;
    height: var(--pill-h);
    display:flex; flex-direction:column; justify-content:center;
    padding:8px 12px !important;
  }
  .kpi .pill b{
    font-size: var(--fs-14) !important;
    white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
    line-height:1.1;
  }
  .kpi .pill span,
  .kpi .pill div{
    font-size: var(--fs-16) !important;
    white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
    line-height:1.1;
  }

  /* ===== 2) Faixa: Som | Último Dígito | Último Preço ===== */
  .chart-toolbar{
    display:grid !important;
    grid-template-columns: auto 1fr 1fr !important;
    gap:10px !important;
    align-items:stretch;
  }
  /* "pílula" visual para Som e para os blocos de métrica */
  #btn_sound_toggle{
    background:#0f1830 !important; border:1px solid #2a3a5e !important;
    border-radius:12px !important; padding:10px 12px !important;
    font-size:var(--fs-12) !important; height: var(--pill-h);
    white-space:nowrap !important;
  }
  .chart-toolbar .metric{
    min-width:0 !important;
    background:#0f1830 !important; border:1px solid #2a3a5e !important;
    border-radius:12px !important; padding:10px 12px !important;
    font-size:var(--fs-14) !important; height: var(--pill-h);
    display:flex; align-items:center; gap:8px;
  }
  .chart-toolbar .metric b{
    font-size:var(--fs-16) !important; white-space:nowrap !important;
    overflow:hidden; text-overflow:ellipsis;
  }
  /* botões auxiliares vão para a linha de baixo somente quando MUITO estreito */
  @media (max-width: 420px){
    #btn_reset_history, #btn_chart_toggle{ grid-column: 1 / -1; }
  }

  /* ===== 3) Cabeçalhos do histórico sem quebra ===== */
  .history-headers span{
    white-space:nowrap !important;
    font-size:var(--fs-12) !important;
  }
  .history-row span{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size:var(--fs-13);
  }

  /* ===== 4) Evita "saltos" de layout em telas pequenas ===== */
  @media (max-width: 340px){
    :root{ --pill-h: 60px; }          /* aperta um pouco a altura */
  }

  /* ===== 5) Painel do Robô sem "buraco" quando fechado ===== */
  .ai-tools-panel{
    padding:0 !important; border-width:0 !important; margin-top:0 !important;
    max-height:0 !important; opacity:0; overflow:hidden; transform:translateY(-6px);
  }
  .ai-tools-panel.open{
    padding:12px !important; border-width:1px !important; margin-top:10px !important;
    max-height:900px !important; opacity:1; transform:translateY(0);
  }

  /* 1) Evitar corte nas pílulas (mostra tudo) */
  .kpi .pill b,
  .kpi .pill span,
  .kpi .pill div{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  /* valores numéricos podem ficar em 1 linha */
  #balance, #pl_session{
    white-space: nowrap !important;
  }

  /* 2) Select "Tipo de Conta" – caber sem cortar */
  #account_select{
    font-size: clamp(12px, 3vw, 14px) !important;
    padding-right: 36px !important; /* espaço da setinha */
    min-width: 0 !important; width: 100% !important;
    text-overflow: clip !important;
  }

  /* 3) Métricas "Último Dígito / Último Preço" – sem corte */
  .chart-toolbar .metric,
  .chart-toolbar .metric b{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* 4) Um respiro antes de "Operação Ativa" */
  .desktop-grid > .progress-first{ margin-top: 8px !important; }

  /* 5) Histórico – rótulos um pouquinho maiores */
  .history-headers span{
    font-size: clamp(12.5px, 2.4vw, 13.5px) !important;
    letter-spacing: .2px;
  }

  /* Corrigir labels e valores nas pílulas */
  .pill b, 
  .pill span, 
  .pill div {
    display: inline !important;     /* força lado a lado */
    white-space: nowrap !important; /* impede quebra forçada */
  }

  /* "Lucro/Prejuízo" + operações na mesma linha */
  .pill span#pl_session,
  .pill div#operations_count {
    display: inline !important;
    margin-left: 6px; /* pequeno espaço entre valor e operações */
  }

  /* "Tipo de Conta" — mantém numa linha só */
  #account_info {
    display: inline !important;
    white-space: nowrap !important;
  }