/* ══ DASHBOARD ═══════════════════════════════════════════════════════════════
   Trazido do automaCYBER, mas vestido com a paleta azul daqui — mesma ideia de
   painel de operação: quanto tem, o que aconteceu hoje e como está o desempenho.

   O que ele NÃO faz: repetir a Planilha. Lá é o histórico (dia a dia, sessões
   salvas); aqui é o AGORA — banca, o dia corrente e as operações ao vivo. */

.dash { display: flex; flex-direction: column; gap: 22px; }

/* título de seção com o fio ao lado, igual ao resto do app */
.dash-sec {
  display: flex; align-items: center; gap: 12px;
  /* O -6px de baixo existia porque os cartões vinham com `margin-top: 12px` e as duas
     coisas se anulavam. Sem aquele margin-top, o negativo passou a puxar o cartão POR
     CIMA do título. Agora o espaço é dado pelo `gap` do contêiner, e a margem é zero. */
  margin: 0;
  font-size: 11px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--txt-fraco);
}
.dash-sec::after { content: ""; flex: 1; height: 1px; background: rgba(58, 164, 255, 0.16); }

.dash-cartao {
  position: relative;
  background: linear-gradient(160deg, rgba(10, 20, 34, 0.9), rgba(4, 9, 16, 0.9));
  border: 1px solid rgba(58, 164, 255, 0.18);
  border-radius: 16px; padding: 18px;
}

/* A banca ("Banca na Inovabet") saiu daqui — já mora fixa na pílula do topo, visível em
   toda tela. Era a mesma informação duas vezes; o dono apontou a duplicação e o cartão
   e as classes que só ele usava (.dash-banca, .dash-banca-rotulo, .dash-banca-valor,
   .dash-selo) foram embora junto. */
.dash-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.dash-chip {
  min-width: 0; padding: 11px 8px; text-align: center;
  background: rgba(3, 7, 13, 0.6);
  border: 1px solid rgba(58, 164, 255, 0.14); border-radius: 12px;
}
.dash-chip-k {
  font-size: 9.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--txt-fraco);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-chip-v {
  margin-top: 5px; font-size: 16px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dash-pos { color: #2ee06a; } .dash-neg { color: #ff6b63; } .dash-zero { color: var(--txt-suave); }

/* ── operações ao vivo ────────────────────────────────────────────────────── */
.dash-vazio {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 13px; row-gap: 3px; padding: 16px;
}
.dash-vazio-ico {
  grid-row: span 2; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(43, 149, 255, 0.1); border: 1px solid rgba(43, 149, 255, 0.26);
  color: var(--azul-claro);
}
.dash-vazio-ico svg { width: 22px; height: 22px; }
.dash-vazio-tit { font-size: 13.5px; font-weight: 700; }
.dash-vazio-sub { font-size: 11.5px; line-height: 1.45; color: var(--txt-suave); }

.dash-op {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid rgba(58, 164, 255, 0.1);
}
.dash-op:last-child { border-bottom: none; }
.dash-op-ponto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #55657c; }
.dash-op-info { flex: 1; min-width: 0; }
.dash-op-jogo { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-op-quando { margin-top: 2px; font-size: 11px; color: var(--txt-fraco); }
.dash-op-valor { flex: none; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── desempenho ───────────────────────────────────────────────────────────── */
.dash-graficos { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .dash-graficos { grid-template-columns: 1fr 1fr; } }
.dash-graf-tit { margin-bottom: 12px; font-size: 12px; color: var(--txt-suave); }
.dash-rosca { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dash-rosca svg { display: block; max-width: 100%; height: auto; }
.dash-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--txt-suave); flex-wrap: wrap; justify-content: center; }
.dash-legenda span { display: flex; align-items: center; gap: 6px; }
.dash-legenda i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dash-linha svg {
  display: block; width: 100%;
  /* ALTURA FIXA, de propósito. O viewBox é quadrado (100x100) e o desenho usa
     preserveAspectRatio="none" — com `height: auto` o SVG ficava tão ALTO quanto LARGO.
     Num cartão de 950px isso virava um gráfico de 950px de altura tomando a tela. */
  height: 160px;
}
.dash-eixo {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 9px;
  font-size: 10.5px; color: var(--txt-fraco); font-variant-numeric: tabular-nums;
}
.dash-sem-dado { padding: 26px 12px; text-align: center; font-size: 12.5px; color: var(--txt-fraco); }

/* ── faixa "Hoje" ─────────────────────────────────────────────────────────────
   Sem banca (já está na pílula do topo): lucro do dia (linha inteira, porque o
   valor é COMPRIDO — testei com + R$ 12.345,67 numa coluna de 76px e ele quebrava
   em 3 linhas, inchando o cartão de 61px pra 132px) e, dividindo a linha de baixo,
   o placar W · E · L e o aproveitamento do dia. */
.dash-numeros { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.dash-num-lucro { grid-column: 1 / -1; }
.dash-num { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.dash-num-v {
  font-size: 22px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
/* legenda pequena embaixo do placar do dia ("12 · 3 · 1"), pra lembrar a ordem
   sem repetir "Wins/Empates/Losses" por extenso e sem estourar a coluna estreita */
.dash-placar-legenda {
  font-size: 10px; letter-spacing: .4px; color: var(--txt-fraco); margin-top: 2px;
}
/* telas bem estreitas (320-375px): 2 colunas sobram ~150px cada — menos padding
   e fonte menor no número pra não estourar a caixa. */
@media (max-width: 699px) {
  .dash-cartao.dash-num { padding: 12px 8px; }
  .dash-chip-k { font-size: 9px; }
  .dash-num-v { font-size: 18px; }
}
@media (min-width: 1100px) { .dash-num-lucro .dash-num-v { font-size: 26px; } }

/* ══ CARD "ROBÔ OPERANDO" ═════════════════════════════════════════════════════
   Mesmo desenho do automaCYBER (é o card que o dono já reconhece), vestido com a
   paleta daqui. Verde = está vivo e operando; cinza = parado.

   Substitui a faixa `.dash-vivo` — as regras dela ficaram sem uso e saíram. */
.dash-robo {
  position: relative; overflow: hidden;
  padding: 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(46, 224, 106, 0.06), rgba(10, 18, 30, 0.9));
  border: 1.5px solid rgba(46, 224, 106, 0.40);
  box-shadow: 0 0 0 1px rgba(46, 224, 106, 0.12), 0 12px 30px rgba(46, 224, 106, 0.10);
}
.dash-robo-off {
  background: rgba(120, 140, 165, 0.06);
  border-color: rgba(120, 140, 165, 0.24);
  box-shadow: none;
}

.dash-robohead { display: flex; align-items: center; gap: 12px; }
.dash-roboav {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-size: 24px;
  background: radial-gradient(circle, rgba(46, 224, 106, 0.22), rgba(46, 224, 106, 0.04));
  border: 1.5px solid rgba(46, 224, 106, 0.5);
  animation: dash-robopulso 1.8s ease-in-out infinite;
}
.dash-robo-off .dash-roboav {
  background: rgba(120, 140, 165, 0.10); border-color: rgba(120, 140, 165, 0.3);
  animation: none; filter: grayscale(1) opacity(.7);
}
@keyframes dash-robopulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 224, 106, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(46, 224, 106, 0); }
}

.dash-roboinfo { flex: 1; min-width: 0; }
.dash-robotit { font-size: 13.5px; font-weight: 800; letter-spacing: .6px; color: #2ee06a; }
.dash-robo-off .dash-robotit { color: var(--txt-suave); }
.dash-robosub {
  margin-top: 2px; font-size: 12px; color: var(--txt-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dash-robostop {
  flex: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: 11px; font-weight: 700;
  background: rgba(255, 91, 91, 0.12); border: 1px solid rgba(255, 91, 91, 0.4); color: #ff6b6b;
}
.dash-robostop:hover:not(:disabled) { background: rgba(255, 91, 91, 0.2); }
.dash-robostop:disabled { opacity: .55; cursor: default; }

.dash-robostatus { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.dash-ro-fase {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(58, 164, 255, 0.22); color: var(--txt-suave);
}
/* MODIFICADOR COM NOME PRÓPRIO. Isto já se chamou '.op' — e o style.css tem um '.op'
   (o botão grande da tela inicial: width 100%, min-height 112px). As duas regras casavam no
   mesmo elemento e o chip virava uma caixa gigante no meio do card. */
.dash-ro-fase.ro-op {
  color: #2ee06a; background: rgba(46, 224, 106, 0.08); border-color: rgba(46, 224, 106, 0.45);
  animation: dash-piscar 1.4s ease-in-out infinite;
}
@keyframes dash-piscar { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.dash-ro-last { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.dash-ro-tag {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(58, 164, 255, 0.10); border: 1px solid rgba(58, 164, 255, 0.2);
}
.dash-ro-tag.win { color: #2ee06a; background: rgba(46, 224, 106, 0.10); border-color: rgba(46, 224, 106, 0.28); }
.dash-ro-tag.loss { color: #ff6b63; background: rgba(255, 107, 99, 0.10); border-color: rgba(255, 107, 99, 0.28); }

/* a frase do motor, do jeito que ele escreve */
.dash-ro-frase {
  margin-top: 9px; font-size: 12.5px; color: var(--txt-suave);
  line-height: 1.45; overflow-wrap: anywhere;
}

.dash-robostats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
/* rótulo "Nesta sessão": SÓ TEXTO, sem caixa, ocupando a linha inteira do grid — não é um
   filho novo do .dash-robo (isso quebraria o grid-template-areas do computador, que só
   posiciona .dash-robohead/.dash-robostatus/.dash-ro-frase/.dash-robostats/.dash-robotrail/
   .dash-roboscanwrap). Fica DENTRO do .dash-robostats de sempre. */
.dash-rst-rot {
  grid-column: 1 / -1; font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--txt-fraco);
}
/* Lucro ocupa a linha inteira embaixo do rótulo — mesmo motivo do "Lucro hoje" lá em cima:
   valor comprido ("+ R$ 12.345,67") quebrando em 3 colunas estreitas inchava o cartão. */
.dash-rst-full { grid-column: 1 / -1; }
.dash-rst {
  padding: 9px 6px; border-radius: 10px; text-align: center;
  background: rgba(6, 14, 26, 0.6); border: 1px solid rgba(58, 164, 255, 0.16);
}
.dash-rsl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--txt-fraco); }
.dash-rsv { margin-top: 3px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dash-rst-full .dash-rsv { font-size: 18px; }
/* empate: nem verde (não é ganho pro caixa) nem vermelho (não é perda) — âmbar, a mesma
   cor da fatia dele na rosca de aproveitamento. */
.dash-emp { color: #f5a623; }

/* varredura: a prova visual de que ele está vigiando a mesa */
.dash-roboscanwrap {
  position: relative; margin-top: 14px; height: 4px; border-radius: 4px;
  background: rgba(6, 14, 26, 0.75); overflow: hidden;
}
.dash-roboscan {
  position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #2ee06a, transparent);
  animation: dash-scan 1.6s linear infinite;
}
@keyframes dash-scan { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* mini-trilho: o padrão que está saindo na mesa AGORA */
.dash-robotrail { margin-top: 12px; }
.dash-rt-t {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-fraco);
}
.dash-rt-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #2ee06a;
  box-shadow: 0 0 6px #2ee06a; animation: dash-piscar 1.4s ease-in-out infinite;
}
.dash-rt-beads { display: flex; gap: 4px; align-items: center; overflow-x: auto; padding-bottom: 2px; }
.dash-rt-bead {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 8.5px; font-weight: 900;
}
/* a última é a rodada que acabou de sair — é ela que o cliente procura */
.dash-rt-bead:last-child { outline: 2px solid rgba(46, 224, 106, .9); outline-offset: 1px; }
.dash-rt-vazio { font-size: 10.5px; color: var(--txt-fraco); }

/* quem pediu menos movimento no sistema não leva animação nenhuma */
@media (prefers-reduced-motion: reduce) {
  .dash-roboav, .dash-ro-fase.ro-op, .dash-roboscan, .dash-rt-dot { animation: none !important; }
}
@media (max-width: 520px) {
  .dash-robo { padding: 14px; }
  .dash-robostats { gap: 6px; }
}

/* selo de modo (hoje sempre MODO REAL) e o nome da VPS, dentro do card */
.dash-selo-real, .dash-selo-vps {
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  white-space: nowrap;
}
.dash-selo-real { background: rgba(46, 224, 106, 0.14); color: #2ee06a; border: 1px solid rgba(46, 224, 106, 0.32); }
.dash-selo-vps  { background: rgba(58, 164, 255, 0.12); color: var(--txt-suave); border: 1px solid rgba(58, 164, 255, 0.22); }

/* ══ COMPUTADOR ═══════════════════════════════════════════════════════════════
   O `.wrap` do app abre até 1560px. Nessa largura o desenho de celular (tudo
   empilhado) fica esticado e vazio: o card do robô com o conteúdo amontoado à
   esquerda e um vão enorme à direita, caixas grandes com número pequeno dentro,
   e a rosca de aproveitamento perdida no meio de 770px.

   Aqui o mesmo conteúdo passa a OCUPAR a largura, em vez de ser esticado por ela. */
@media (min-width: 1100px) {
  /* O card vira duas colunas: à esquerda o que ele está fazendo e o placar,
     à direita o trilho do jogo — que é justamente o vão que sobrava. */
  .dash-robo:not(.dash-robo-off) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "cab  cab"
      "st   trilho"
      "frase trilho"
      "numeros trilho"
      "scan scan";
    align-content: start;
    column-gap: 28px;
    padding: 20px 22px;
  }
  .dash-robo:not(.dash-robo-off) > .dash-robohead     { grid-area: cab; }
  .dash-robo:not(.dash-robo-off) > .dash-robostatus   { grid-area: st; }
  .dash-robo:not(.dash-robo-off) > .dash-ro-frase     { grid-area: frase; }
  .dash-robo:not(.dash-robo-off) > .dash-robostats    { grid-area: numeros; }
  .dash-robo:not(.dash-robo-off) > .dash-robotrail    { grid-area: trilho; align-self: center; margin-top: 0; }
  .dash-robo:not(.dash-robo-off) > .dash-roboscanwrap { grid-area: scan; }

  /* números do card: menos caixa, mais número */
  .dash-robostats { gap: 10px; }
  .dash-rst { padding: 11px 10px; }
  .dash-rsl { font-size: 10px; }
  .dash-rsv { font-size: 19px; }

  /* trilho com folga: as bolinhas ficam legíveis e quebram em duas linhas se precisar */
  .dash-rt-beads { flex-wrap: wrap; gap: 6px; }
  .dash-rt-bead { width: 24px; height: 24px; font-size: 11px; }
  .dash-rt-t { font-size: 10.5px; }

  /* A rosca não precisa de metade da tela; o gráfico de 14 dias, sim. */
  .dash-graficos { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

  /* a lista de operações não fica boa com 1500px de largura por linha */
  .dash-op { padding-inline: 22px; }
  .dash-op-jogo { font-size: 14px; }
}

/* Telas muito largas: o conteúdo para de esticar e passa a respirar. Sem isto, uma
   linha de operação com 1500px de largura tem 40px de conteúdo e o resto é vazio. */
@media (min-width: 1500px) {
  .dash { max-width: 1440px; }
}

/* ── espaçamento das duas metades ─────────────────────────────────────────────
   `.dash` tem só dois filhos agora (o card do robô e o resto). Dentro do resto os
   blocos ficavam em fluxo normal, sem espaço nenhum entre eles — era isso, somado à
   margem negativa dos títulos, que fazia tudo se atropelar. */
#dash-resto { display: flex; flex-direction: column; gap: 14px; }
/* Vale pro PRIMEIRO título também: o card do robô tem uma sombra de 30px que avança
   por baixo dele, e sem esse respiro a sombra come a palavra "VISÃO GERAL". */
#dash-resto .dash-sec { margin-top: 12px; }

/* ── cabeçalho da lista de operações + botão Limpar ──────────────────────────
   O botão fica em cima da lista, junto do título — NUNCA embaixo: essa lista é o
   último bloco da tela, e um botão no rodapé obrigaria a rolar a tela inteira pra
   enxergar. Sem `.dash-sec` aqui de propósito: aquela classe desenha um fio que
   preenche o espaço todo (bom quando é só texto), e com um botão do lado o fio
   sobraria por cima dele — por isso o título é escrito solto, do mesmo jeito. */
.dash-op-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-op-tit {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--txt-fraco);
}
.dash-op-limpar {
  flex: none; cursor: pointer;
  /* 40px de altura: um alvo de 29px (o que era antes) e dificil de acertar com o
     polegar. Fica um pouco abaixo dos 44px do resto do app de proposito: e acao
     destrutiva, nao interessa que seja o botao mais facil da tela. */
  min-height: 40px; display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700;
  background: rgba(58, 164, 255, 0.12); border: 1px solid rgba(58, 164, 255, 0.4);
  color: var(--azul-claro);
}
.dash-op-limpar:hover:not(:disabled) { background: rgba(58, 164, 255, 0.2); }
.dash-op-limpar:disabled { opacity: .55; cursor: default; }

/* seta pra carregar mais 20 — só some quando não há o que carregar (JS não desenha) */
.dash-op-mais {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; background: transparent; border: none; border-top: 1px solid rgba(58, 164, 255, 0.14);
  font: inherit; font-size: 12px; font-weight: 700; color: var(--txt-suave); cursor: pointer;
}
.dash-op-mais:hover:not(:disabled) { color: var(--azul-claro); }
.dash-op-mais:disabled { opacity: .55; cursor: default; }
.dash-op-mais svg { width: 14px; height: 14px; }

/* ══ RESULTADO DA ÚLTIMA JOGADA ══════════════════════════════════════════════
   Substituiu o placar "Nesta sessão" (lucro/wins/empates/losses). O lucro do dia
   não se perdeu: continua na faixa "Hoje" logo abaixo, que vem do BANCO — fonte
   mais confiável que o espelho em memória que ficava aqui. */
.dash-res {
  margin-top: 14px; padding: 14px 16px;
  background: rgba(3, 7, 13, 0.55);
  border: 1px solid rgba(58, 164, 255, 0.16);
  border-radius: 14px;
}
.dash-res[hidden] { display: none; }
.dash-res-rot {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-fraco, #61748f); margin-bottom: 10px;
}
.dash-res-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-res-tag {
  font-size: 15px; font-weight: 900; letter-spacing: 0.06em;
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid transparent; white-space: nowrap;
}
.dash-res-tag.win  { color: #2ee06a; background: rgba(46, 224, 106, 0.12); border-color: rgba(46, 224, 106, 0.30); }
.dash-res-tag.loss { color: #ff6b63; background: rgba(255, 107, 99, 0.12); border-color: rgba(255, 107, 99, 0.30); }
.dash-res-valor { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }

@media (max-width: 420px) {
  .dash-res-valor { font-size: 19px; }
  .dash-res-tag { font-size: 14px; padding: 6px 12px; }
}

/* ══ LIGAR NOTIFICAÇÃO ═══════════════════════════════════════════════════════ */
.nt-card {
  margin-bottom: 14px; padding: 16px;
  background: rgba(3, 7, 13, 0.55);
  border: 1px solid rgba(58, 164, 255, 0.18); border-radius: 14px;
}
.nt-card.nt-on { border-color: rgba(46, 224, 106, 0.28); }
.nt-tit { font-size: 14.5px; font-weight: 800; color: var(--txt, #eaf2ff); margin-bottom: 6px; }
.nt-txt { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--txt-suave, #9fb4cf); }
.nt-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.nt-btn {
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  padding: 11px 18px; min-height: 44px; border-radius: 11px;
  border: 1px solid transparent; background: var(--azul, #2b95ff); color: #04121f;
}
.nt-btn.nt-ghost { background: transparent; border-color: rgba(58, 164, 255, 0.3); color: var(--txt-suave, #9fb4cf); }
.nt-btn.nt-ghost:hover { border-color: var(--azul, #2b95ff); color: var(--txt, #eaf2ff); }
.nt-msg { margin-top: 10px; font-size: 12.5px; color: var(--txt-suave, #9fb4cf); min-height: 1em; }
/* o aviso do iPhone: importante, mas nao pode gritar mais que o botao */
.nt-aviso {
  margin: 12px 0 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  color: #ffcf70; background: rgba(255, 190, 70, 0.08);
  border: 1px solid rgba(255, 190, 70, 0.22); border-radius: 10px;
}
@media (max-width: 420px) { .nt-botoes .nt-btn { flex: 1 1 100%; } }

/* ══ AVISO DE FIM DE SESSÃO (meta batida / stop loss) ════════════════════════
   Fixo na tela até o cliente tocar em FECHAR. Clicar fora NÃO fecha: um toque
   errado apagaria o resultado da sessão antes de ele ler. */
.dash-fim {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center; padding: 22px;
  background: rgba(3, 7, 13, 0.86);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  animation: dash-fim-entra .18s ease-out;
}
body.dash-fim-on { overflow: hidden; }
.dash-fim-card {
  width: min(380px, 100%); text-align: center; padding: 28px 24px 22px;
  background: linear-gradient(180deg, rgba(12, 22, 38, 0.99), rgba(6, 13, 24, 0.99));
  border: 1px solid rgba(58, 164, 255, 0.34); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.dash-fim.fim-meta .dash-fim-card { border-color: rgba(46, 224, 106, 0.45); }
.dash-fim.fim-stop .dash-fim-card { border-color: rgba(255, 107, 99, 0.45); }
.dash-fim-tit { font-size: 20px; font-weight: 900; color: var(--txt, #eaf2ff); margin-bottom: 18px; }
.dash-fim-rot {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-fraco, #61748f); margin-bottom: 4px;
}
.dash-fim-valor { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; }
.dash-fim-placar { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--txt-suave, #9fb4cf); }
.dash-fim-motivo {
  margin-top: 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
  color: var(--txt-suave, #9fb4cf); background: rgba(3, 7, 13, 0.6);
  border-radius: 10px;
}
.dash-fim-nota { margin-top: 10px; font-size: 12px; color: #2ee06a; }
.dash-fim-btn {
  margin-top: 20px; width: 100%; min-height: 50px;
  font: inherit; font-size: 14px; font-weight: 900; letter-spacing: 0.06em; cursor: pointer;
  border: 0; border-radius: 13px; background: var(--azul, #2b95ff); color: #04121f;
}
@keyframes dash-fim-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dash-fim { animation: none; } }