/* Nuvem Bot — tela de acesso.
   Layout da referência do dono: marca sobre um fundo de gráfico à esquerda, formulário à
   direita; no celular a marca vira a faixa de cima e o formulário desce. A cor segue a
   LOGO (azul sobre quase-preto) — o verde da referência brigaria com ela. */

:root {
  --fundo: #03070d;
  --fundo-2: #060c16;
  --linha: rgba(58, 164, 255, 0.20);
  --azul: #2b95ff;
  --azul-claro: #6fc0ff;
  --azul-forte: #0a6ff0;
  --txt: #eaf2ff;
  --txt-suave: #9fb4cf;
  --txt-fraco: #61748f;
  --erro: #ff6b63;
  --sombra: 0 26px 70px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--txt);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--azul-claro); }

/* ══ ACESSO ══════════════════════════════════════════════════════════════════ */
.acesso {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

/* ── lado da marca ─────────────────────────────────────────────────────────── */
.palco {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px clamp(24px, 5vw, 70px);
  background:
    radial-gradient(900px 620px at 18% 42%, rgba(20, 90, 190, 0.22) 0%, transparent 68%),
    var(--fundo);
}
/* grade técnica ao fundo — dá a leitura de "painel de operação" sem pesar imagem */
.palco-grade {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(58, 164, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 164, 255, 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 70% at 40% 45%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 40% 45%, #000 30%, transparent 100%);
}
.palco-brilho {
  position: absolute; left: -12%; top: 8%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 149, 255, 0.16), transparent 62%);
  filter: blur(20px);
}
.palco-cena {
  position: absolute; right: -14%; bottom: -24%;
  width: min(78%, 760px); height: auto; aspect-ratio: 1;
  opacity: .55;
  animation: girar 28s linear infinite;   /* 90s era tão lento que parecia parado */
}
.palco-cena .aro { filter: drop-shadow(0 0 10px rgba(43, 149, 255, .2)); }
@keyframes girar { to { transform: rotate(360deg); } }

/* A BOLINHA CORRE AO CONTRÁRIO DA RODA. É o que faz a cena parecer viva: dois ritmos
   diferentes na mesma imagem. `transform-box: view-box` faz o eixo do giro cair no
   centro do desenho (310,310 no viewBox) e não no centro da própria bolinha. */
.pc-orb {
  transform-box: view-box;
  transform-origin: 310px 310px;
  animation: orbita 9s linear infinite;
}
@keyframes orbita { to { transform: rotate(-360deg); } }

/* brilho respirando e fagulhas piscando — movimento pequeno, mas tira o ar de tela parada */
.palco-brilho { animation: respira 7s ease-in-out infinite; }
@keyframes respira { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .72; transform: scale(1.06); } }
.fagulha { animation: brilha 3.4s ease-in-out infinite; }
.f2 { animation-delay: 1.7s; }
@keyframes brilha {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .palco-cena, .pc-orb, .palco-brilho, .fagulha { animation: none; }
}

.cifrao {
  position: absolute; color: rgba(43, 149, 255, .10);
  font-weight: 800; line-height: 1; user-select: none;
}
.c1 { top: 12%; left: 46%; font-size: 120px; }
.c2 { bottom: 28%; right: 12%; font-size: 84px; }
.fagulha {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #6fc0ff; box-shadow: 0 0 14px 4px rgba(43, 149, 255, .6);
}
.f1 { top: 26%; left: 27%; }
.f2 { bottom: 22%; left: 12%; }

.marca { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.marca-emblema { width: clamp(96px, 11vw, 150px); height: auto; display: block; margin-bottom: 10px; }
.marca-nome {
  font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: 0.04em; line-height: 1;
  color: #f2f7ff;
}
.marca-nome b {
  font-weight: 800; margin-left: .28em;
  background: linear-gradient(100deg, #0a6ff0, #4fb2ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca-tracos {
  display: block; width: 100%; max-width: 300px; height: 2px; margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(43, 149, 255, .85), transparent);
}
.marca-tag {
  margin: 0; font-size: clamp(11px, 1vw, 13px); font-weight: 600;
  letter-spacing: 0.34em; color: var(--txt-suave);
}

/* ── lado do formulário ────────────────────────────────────────────────────── */
.painel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px clamp(20px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(6, 12, 22, 0.6), rgba(3, 7, 13, 0.9));
  border-left: 1px solid rgba(58, 164, 255, 0.10);
}
.painel-inner { width: 100%; max-width: 380px; }

.painel-titulo {
  margin: 0; font-size: 15px; font-weight: 800;
  letter-spacing: 0.42em; color: var(--azul-claro);
}
.painel-risco {
  display: block; width: 42px; height: 2px; margin: 10px 0 26px;
  background: var(--azul); border-radius: 2px;
}

.form { display: grid; gap: 13px; }

.campo { position: relative; display: block; }
.campo-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--azul); pointer-events: none;
}
.campo-ico svg { width: 100%; height: 100%; }
.campo input {
  width: 100%; height: 54px;
  padding: 0 46px 0 48px;
  border-radius: 14px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(8, 16, 28, 0.75);
  color: var(--txt);
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.campo input::placeholder { color: #526a89; letter-spacing: 0.16em; }
.campo input:focus {
  outline: none;
  border-color: rgba(79, 178, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(43, 149, 255, 0.14);
  background: rgba(10, 20, 34, 0.9);
}
.ver {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 7px;
  border: none; border-radius: 9px; background: transparent;
  color: #55708f; cursor: pointer;
}
.ver svg { width: 100%; height: 100%; }
.ver:hover { color: var(--azul-claro); }

.linha-esqueci { display: flex; justify-content: flex-end; margin-top: -2px; }
.link {
  border: none; background: none; cursor: pointer; padding: 2px;
  color: var(--txt-fraco); font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
}
.link:hover { color: var(--azul-claro); }

.btn-acessar {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 58px; margin-top: 4px;
  border-radius: 16px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.55);
  background: linear-gradient(180deg, rgba(13, 44, 78, 0.9), rgba(7, 22, 40, 0.9));
  color: #eaf4ff; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.2em;
  box-shadow: 0 0 0 1px rgba(43, 149, 255, 0.10) inset, 0 16px 40px rgba(10, 111, 240, 0.22);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.btn-acessar:hover { transform: translateY(-1px); border-color: rgba(111, 192, 255, 0.9); box-shadow: 0 20px 46px rgba(10, 111, 240, 0.3); }
.btn-acessar:disabled { opacity: .6; cursor: default; transform: none; }
.btn-seta {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(111, 192, 255, 0.75); color: var(--azul-claro);
  font-size: 14px; letter-spacing: 0;
}

.caixa-cadastro {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding: 14px 14px 14px 18px;
  border: 1px solid rgba(58, 164, 255, 0.20); border-radius: 16px;
  background: rgba(8, 16, 28, 0.5);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--txt-suave);
  line-height: 1.5; text-transform: uppercase;
}
.caixa-cadastro b { color: var(--azul-claro); }
.btn-cadastro {
  flex-shrink: 0;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.55);
  background: rgba(13, 44, 78, 0.6); color: #dcecff;
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  transition: background .16s, border-color .16s;
}
.btn-cadastro:hover { background: rgba(20, 66, 116, 0.75); border-color: rgba(111, 192, 255, 0.9); }

.erro {
  padding: 11px 14px; border-radius: 12px;
  background: rgba(255, 107, 99, 0.10); border: 1px solid rgba(255, 107, 99, 0.42);
  color: #ffada7; font-size: 12.5px; line-height: 1.45; letter-spacing: 0;
}
.nota { margin: 2px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--txt-fraco); }

.legal { margin-top: 26px; text-align: center; }
.legal p {
  margin: 0 0 12px; font-size: 10px; line-height: 1.7; color: #40536e;
}

/* ══ HOME ════════════════════════════════════════════════════════════════════ */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(14px, 4vw, 34px);
  border-bottom: 1px solid rgba(58, 164, 255, 0.14);
  background: rgba(3, 7, 13, 0.9); backdrop-filter: blur(10px);
}
.marca-sm { flex-direction: row; align-items: center; gap: 10px; }
.marca-sm .marca-emblema { width: 40px; margin: 0; }
.marca-sm .marca-nome { font-size: 17px; letter-spacing: 0.06em; }
.topo-dir { display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 12px;
  background: rgba(8, 16, 28, 0.9); border: 1px solid rgba(58, 164, 255, 0.28);
}
.pill-ico { color: var(--azul); font-size: 12px; }
.pill strong { font-size: 14px; font-weight: 800; }
.btn-sair {
  padding: 9px 14px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid rgba(58, 164, 255, 0.22); color: var(--txt-suave);
  font: inherit; font-size: 12px; font-weight: 700;
}
.btn-sair:hover { color: var(--txt); border-color: rgba(111, 192, 255, 0.6); }

/* No monitor a página usava só 1180px e sobrava tela dos dois lados. O conteúdo aqui é
   painel de operação (histórico longo, tabelas, carteiras lado a lado): quanto mais largura,
   menos rolagem. O teto de 94vw evita a linha de texto virar uma faixa larga demais. */
.wrap { width: 100%; max-width: min(1180px, 100%); margin: 0 auto; padding: 30px clamp(14px, 4vw, 34px) 60px; }
@media (min-width: 1100px) { .wrap { max-width: min(1560px, 94vw); } }
/* a barra de baixo é flutuante: o conteúdo precisa de chão pra não terminar embaixo dela */
.home .wrap { padding-bottom: 128px; }
.ola-cima { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--azul); }
.ola-nome { margin: 6px 0 0; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; }
.ola-barra { display: block; width: 54px; height: 4px; margin: 12px 0 14px; border-radius: 100px; background: linear-gradient(90deg, var(--azul), transparent); }
.selo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(13, 44, 78, 0.6); border: 1px solid rgba(79, 178, 255, 0.42); color: var(--azul-claro);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.cartao-vazio {
  margin-top: 26px; padding: 34px 22px; text-align: center;
  border: 1px dashed rgba(58, 164, 255, 0.22); border-radius: 16px; background: rgba(8, 16, 28, 0.5);
}
.cartao-vazio b { display: block; font-size: 15px; margin-bottom: 6px; }
.cartao-vazio em { font-style: normal; font-size: 13px; color: var(--txt-fraco); }

/* ══ TOAST ═══════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 9999; max-width: min(92vw, 420px);
  padding: 13px 18px; border-radius: 13px;
  background: rgba(8, 16, 28, 0.97); border: 1px solid rgba(58, 164, 255, 0.28);
  color: var(--txt); font-size: 13.5px; box-shadow: var(--sombra);
}

/* ══ TOPO DA HOME NO CELULAR ═════════════════════════════════════════════════
   A soma marca(157px) + topo-dir(270px = selo + saldo + Sair) + paddings + gap
   passava de 470px — num aparelho de 375px o "Sair" saía da tela e o saldo
   quebrava linha. Abaixo de 430px a marca vira só o ícone (fica com ~40px);
   o Sair continua visível porque no celular é a ÚNICA saída (a barra lateral
   com "Sair" só existe a partir de 1100px). */
@media (max-width: 430px) {
  .home .topo .marca-sm .marca-nome { display: none; }
}

/* ══ CELULAR ═════════════════════════════════════════════════════════════════
   Empilhado: a marca vira uma faixa curta no topo (com o gráfico atrás dela) e o
   formulário ocupa o resto. É o mesmo desenho, virado de lado. */
@media (max-width: 900px) {
  .acesso { grid-template-columns: 1fr; }
  .palco {
    min-height: 46vh;
    align-items: center; justify-content: flex-start;
    padding: 30px 20px 34px;
    text-align: center;
  }
  .marca { align-items: center; }
  .marca-emblema { width: 108px; }
  .marca-nome { font-size: 30px; }
  .marca-tracos { max-width: 220px; margin: 12px auto 10px; }
  .marca-tag { font-size: 10.5px; letter-spacing: 0.28em; }
  .palco-cena { right: -30%; bottom: -30%; width: 108%; opacity: .38; }
  .c1 { font-size: 84px; top: 8%; left: 62%; }
  .c2 { display: none; }
  .painel {
    border-left: none;
    border-top: 1px solid rgba(58, 164, 255, 0.10);
    padding: 26px 18px 40px;
    align-items: flex-start;
  }
  .painel-inner { max-width: 440px; margin: 0 auto; }
  .painel-titulo { font-size: 14px; }
}
@media (max-width: 420px) {
  .campo input { height: 50px; font-size: 12px; }
  .btn-acessar { height: 54px; font-size: 12px; letter-spacing: 0.16em; }
  .caixa-cadastro { font-size: 10.5px; padding: 12px; }
  .btn-cadastro { padding: 11px 13px; font-size: 10px; }
}

/* ══ CONVITE DE INSTALAÇÃO (PWA) ═══════════════════════════════════════════
   Desce do topo, ocupa pouco e sai fácil: é convite, não anúncio. */
.pwa-caixa {
  position: fixed; left: 50%; top: 0; z-index: 9998;
  transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 12px;
  width: min(94vw, 460px); margin-top: 12px; padding: 12px 14px;
  border-radius: 16px;
  background: rgba(8, 16, 28, 0.96); border: 1px solid rgba(58, 164, 255, 0.28);
  box-shadow: var(--sombra); backdrop-filter: blur(10px);
  transition: transform .38s cubic-bezier(.2, .9, .3, 1.1);
}
.pwa-caixa.aberta { transform: translate(-50%, 0); }
.pwa-ico { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; }
.pwa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-txt b { font-size: 13.5px; }
.pwa-txt em { font-style: normal; font-size: 11.5px; color: var(--txt-fraco); }
.pwa-passos { font-size: 11px; color: var(--txt-suave); text-align: right; line-height: 1.5; }
.pwa-passos b { color: var(--azul-claro); }
.pwa-btn {
  flex-shrink: 0; padding: 10px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.55); background: rgba(13, 44, 78, 0.7);
  color: #dcecff; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
}
.pwa-fechar {
  flex-shrink: 0; width: 28px; height: 28px; padding: 0; cursor: pointer;
  border: none; border-radius: 8px; background: transparent; color: var(--txt-fraco); font-size: 20px; line-height: 1;
}
.pwa-fechar:hover { color: var(--txt); }

/* ══ HOME: ESCOLHA SUA OPERAÇÃO ══════════════════════════════════════════════
   Três portas grandes, no lugar de um painel jogado na cara de quem acabou de
   entrar. Cada cartão é um botão inteiro: no celular, alvo pequeno é erro de clique. */
.ops-titulo {
  margin: 4px 0 6px; font-size: clamp(24px, 5vw, 34px); font-weight: 800; letter-spacing: -0.02em;
}
.ops-titulo b { color: var(--azul-claro); font-weight: 800; }
.ops-titulo i { font-style: normal; color: var(--azul-claro); }
.ops-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--txt-suave); max-width: 46ch; }

.ops { display: grid; gap: 14px; }
.op {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 112px; padding: 16px 18px;
  border-radius: 18px; cursor: pointer; text-align: left;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: linear-gradient(120deg, rgba(10, 20, 34, 0.96) 0%, rgba(8, 24, 46, 0.9) 58%, rgba(13, 44, 78, 0.75) 100%);
  color: var(--txt); font: inherit;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.op:hover { transform: translateY(-2px); border-color: rgba(111, 192, 255, 0.6); box-shadow: 0 18px 40px rgba(10, 111, 240, 0.18); }
.op:active { transform: translateY(0); }
/* brilho no canto — dá profundidade sem precisar de foto */
.op::after {
  content: ''; position: absolute; right: -40px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 149, 255, 0.20), transparent 66%);
  pointer-events: none;
}
.op-arte {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex-shrink: 0;
  width: 84px; height: 84px; border-radius: 16px;
  background: rgba(6, 14, 26, 0.7);
  border: 1px solid rgba(79, 178, 255, 0.28);
  color: var(--azul-claro);
}
.op-arte img { width: 74%; height: auto; }
.op-arte svg { width: 40px; height: 40px; }
.op-arte-aulas { color: #7ee0b0; border-color: rgba(126, 224, 176, 0.32); }
.op-arte-suporte { color: #ffd27a; border-color: rgba(255, 210, 122, 0.32); }
.op-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.op-txt b { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.op-txt em { font-style: normal; font-size: 13px; color: var(--txt-suave); }

/* No celular com só 2 portas (Bot Automático / Meus Padrões), a tela de Início
   sobrava ~250px de vazio entre os cartões e a barra — nada de errado com a
   página, só faltava esticar os dois cartões pra ocupar o espaço livre. O
   `min-height` é uma conta aproximada (topo + respiro de cima/baixo da .wrap);
   o `max-height` no cartão evita que ele vire uma caixa gigante numa tela alta. */
@media (max-width: 1099px) {
  #tela-menu { display: flex; flex-direction: column; min-height: calc(100dvh - 262px); }
  #tela-menu .ops { flex: 1; grid-template-rows: repeat(2, minmax(112px, 1fr)); }
  #tela-menu .op { max-height: 230px; }
}

.tela-interna { padding-top: 4px; }

.vazio-bloco {
  padding: 34px 20px; text-align: center; font-size: 13.5px; color: var(--txt-fraco);
  border: 1px dashed rgba(58, 164, 255, 0.22); border-radius: 16px; background: rgba(8, 16, 28, 0.4);
}
.btn-suporte { text-decoration: none; max-width: 380px; }

/* ══ BARRA DE BAIXO ══════════════════════════════════════════════════════════
   Pílula flutuante: os mesmos destinos do menu, alcançáveis de qualquer tela. */
.barra {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 3000;
  width: min(calc(100% - 32px), 430px);   /* era 520 e ficava larga demais */
  display: flex; justify-content: space-around; align-items: stretch;
  /* Altura pelo conteúdo, com um teto: fixar em 52px cortava os ícones. O `max-height`
     impede que algo estique a barra sem esconder o que é legítimo. */
  box-sizing: border-box; max-height: 60px;
  padding: 4px 6px; border-radius: 22px;
  background: rgba(8, 16, 28, 0.9); backdrop-filter: blur(14px);
  border: 1px solid rgba(58, 164, 255, 0.2); box-shadow: var(--sombra);
}
.barra-item {
  /* `stretch` + `justify-content:center` fazem TODOS os itens terem a mesma altura e
     centrarem o conteúdo. Sem isso, um item com estado diferente (o "Bot" quando o robô
     liga) podia se alinhar por outra regra e ficar mais alto que a fileira. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-self: stretch; gap: 1px;
  flex: 1 1 0; min-width: 0; padding: 3px 1px; cursor: pointer;
  background: transparent; border: none; color: rgba(234, 242, 255, 0.5);
  font: inherit; font-size: 9.5px; font-weight: 700; line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
}
.barra-item svg { width: 18px; height: 18px; flex: none; }
/* rótulo numa linha só: se quebrasse em duas, aquele item ficaria mais alto que os outros */
.barra-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.barra-item.ativo { color: var(--azul-claro); }
/* "Bot" e "Padrões" ficam FORA da barra em qualquer tela. São atalhos que já existem
   como cartão dentro do Início, e repetidos aqui só apertavam a barra: a 375px eram 7
   botões de 46px dividindo 351px, com "Padrões" e "Dashboard" quase se encostando.
   Com 5, cada um fica com ~70px e volta a dar pra ler e acertar o toque.
   Escondidos, não apagados — voltam apagando esta regra, sem mexer no HTML. */
.barra-item.barra-extra { display: none; }
/* espaço pra barra não cobrir o fim do conteúdo */
/* tons próprios dos cartões novos: cada porta tem a sua cor, pra dar pra achar de relance */
.op-arte-padroes { color: #a89bff; border-color: rgba(168, 155, 255, 0.32); }
.op-arte-grupos  { color: #62d0ff; border-color: rgba(98, 208, 255, 0.32); }

/* ══ FUNDO DA HOME ═══════════════════════════════════════════════════════════
   O mesmo cenário da entrada, agora atrás do app inteiro: quem entra não sente
   que trocou de site. É `fixed` de propósito — a arte fica parada e só o
   conteúdo rola por cima dela. */
.home { position: relative; min-height: 100%; }
.fundo-cassino { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fundo-cassino .palco-grade { position: absolute; inset: 0; display: block; }
.fundo-cassino .palco-brilho { position: absolute; left: -18%; top: -6%; display: block; }
.palco-cena-home { right: -22%; bottom: -18%; width: min(86%, 720px); opacity: .32; }
@media (max-width: 900px) {
  .palco-cena-home { right: -34%; bottom: -8%; width: 118%; opacity: .26; }
  .fundo-cassino .palco-brilho { left: -40%; top: -14%; }
}
/* conteúdo por cima do cenário */
.home .topo, .home .wrap, .barra { position: relative; z-index: 2; }
.home .topo { position: sticky; z-index: 6; }
.barra { position: fixed; z-index: 3000; }

/* numerozinho de não lidas na barra de baixo */
.barra-item { position: relative; }
.barra-selo {
  position: absolute; top: 0; right: 22%;
  min-width: 17px; height: 17px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 100px;
  background: #ff5f57; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px rgba(8, 16, 28, 0.95);
}

/* ══ MODAL DE SAIR ═══════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(2, 5, 10, 0.72); backdrop-filter: blur(4px);
}
.modal-cx {
  width: min(94vw, 380px); padding: 24px 22px 20px;
  border-radius: 20px; text-align: center;
  background: rgba(8, 16, 28, 0.98);
  border: 1px solid rgba(58, 164, 255, 0.28);
  box-shadow: var(--sombra);
}
.modal-tit { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.modal-txt { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--txt-suave); }
.modal-btns { display: flex; gap: 10px; }
.modal-b {
  flex: 1; padding: 14px 12px; border-radius: 13px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  border: 1px solid rgba(58, 164, 255, 0.28); background: rgba(13, 26, 44, 0.7); color: var(--txt-suave);
}
.modal-b-cancel:hover { color: var(--txt); border-color: rgba(111, 192, 255, 0.6); }
.modal-b-sair { border-color: rgba(255, 107, 99, 0.5); color: #ffada7; background: rgba(60, 16, 16, 0.5); }
.modal-b-sair:hover { background: rgba(90, 22, 22, 0.6); }
.modal-b-admin {
  width: 100%; margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-color: rgba(79, 178, 255, 0.55); color: #dcecff;
  background: linear-gradient(180deg, rgba(13, 44, 78, 0.9), rgba(7, 22, 40, 0.9));
}
.modal-b-admin:hover { border-color: rgba(111, 192, 255, 0.9); }

/* ══ PAINEL DO ADMIN ═════════════════════════════════════════════════════════ */
.adm-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 640px) { .adm-grade { grid-template-columns: 1fr; } }
.adm-cartao {
  padding: 16px; border-radius: 16px;
  background: rgba(8, 16, 28, 0.7); border: 1px solid rgba(58, 164, 255, 0.22);
}
.adm-rot { font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-fraco); }
.adm-val { margin-top: 6px; font-size: 28px; font-weight: 800; color: var(--azul-claro); }
.adm-sub { margin-top: 4px; font-size: 12px; color: var(--txt-suave); }
.adm-bloco {
  margin-bottom: 16px; padding: 16px; border-radius: 16px;
  background: rgba(8, 16, 28, 0.55); border: 1px solid rgba(58, 164, 255, 0.18);
}
.adm-bloco-tit { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--azul-claro); margin-bottom: 12px; }
.adm-lista { display: grid; gap: 8px; }
.adm-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0;
  padding: 11px 13px; border-radius: 12px; background: rgba(6, 12, 22, 0.6);
  border: 1px solid rgba(58, 164, 255, 0.14);
}
.adm-linha-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-linha-info b { font-size: 13.5px; }
.adm-linha-info em { font-style: normal; font-size: 11.5px; color: var(--txt-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-linha-data { font-size: 11.5px; color: var(--txt-fraco); flex-shrink: 0; }
.adm-atalhos { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-atalho {
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.4); background: rgba(13, 44, 78, 0.5); color: #dcecff;
  font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em;
}
.adm-rodape { margin-top: 14px; font-size: 11px; color: var(--txt-fraco); }
.adm-carregando, .adm-vazio, .adm-erro {
  padding: 26px 16px; text-align: center; font-size: 13px; color: var(--txt-fraco);
  border: 1px dashed rgba(58, 164, 255, 0.22); border-radius: 16px;
}
.adm-erro { color: #ffada7; border-color: rgba(255, 107, 99, 0.4); }

/* ── saldo manual (painel do dono) ── */
.adm-nota { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--txt-fraco); }
.adm-nota b { color: var(--txt-suave); }
.adm-form { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-form input,
.adm-form select {
  flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(6, 12, 22, 0.7); color: var(--txt); font: inherit; font-size: 14px;
}
.adm-form input:focus,
.adm-form select:focus { outline: none; border-color: rgba(111, 192, 255, 0.6); }
.adm-form .adm-atalho { flex: 0 0 auto; height: 48px; }
.adm-msg { margin-top: 10px; font-size: 13px; color: var(--verde, #2ee06a); }
.adm-msg-erro { color: #ff8b85; }
.adm-vazio-min { margin-top: 12px; font-size: 12.5px; color: var(--txt-fraco); }
#sm-lista { margin-top: 12px; }

/* ══ COMPUTADOR: MENU LATERAL ════════════════════════════════════════════════
   Tudo daqui pra baixo só vale de 1100px pra cima — no celular a barra continua
   sendo aquela pílula flutuante de baixo, sem uma linha de diferença.
   Cor, fundo e a roleta de traço fino ficam como estão: muda só onde o menu mora. */
@media (min-width: 1100px) {
  /* a MESMA barra de baixo, de pé na lateral. Nenhum botão novo, nenhuma rota nova:
     são os quatro botões que já existiam, só que empilhados. */
  .barra {
    left: 0; top: 0; bottom: 0; transform: none;
    width: 244px; height: 100%;
    flex-direction: column; justify-content: flex-start; gap: 3px;
    padding: 28px 16px calc(20px + env(safe-area-inset-bottom));
    border: 0; border-right: 1px solid rgba(58, 164, 255, 0.16); border-radius: 0;
    background: linear-gradient(180deg, rgba(8, 16, 28, 0.97), rgba(3, 7, 13, 0.97));
    box-shadow: none;
  }
  /* a marca fica no TOPO (emblema + nome, igual ao celular). A lateral não repete o logo —
     antes o ::before mostrava só o emblema (svg sem o nome), o que virava uma nuvem solta feia. */
  .barra::before { content: ""; display: block; flex: none; height: 8px; }
  .barra-item {
    flex: none; width: 100%;
    flex-direction: row; justify-content: flex-start; gap: 13px;
    padding: 12px 14px; border-radius: 13px;
    font-size: 14px; letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .barra-item svg { width: 19px; height: 19px; flex: none; }
  .barra-item:hover { background: rgba(58, 164, 255, 0.09); color: var(--txt); }
  .barra-item.ativo {
    background: linear-gradient(120deg, rgba(43, 149, 255, 0.18), rgba(43, 149, 255, 0.04));
    color: var(--azul-claro);
    box-shadow: inset 3px 0 0 var(--azul);
  }
  /* o selo de não lidas era posicionado pro botão deitado; de pé ele vai pro fim da linha */
  .barra-selo { top: 50%; right: 12px; transform: translateY(-50%); }

  /* o conteúdo anda pra direita do menu; a marca (emblema + nome) fica à esquerda do topo e
     os selos (plano/saldo/sair) à direita — mesmo layout do celular, que o Gustavo curtiu. */
  .home .topo { margin-left: 244px; padding-left: 26px; justify-content: space-between; }
  /* O TETO DE LARGURA TEM QUE DESCONTAR O MENU. A regra geral é `max-width: 94vw`, mas
     aqui a wrap ainda leva 244px de margem pro menu lateral: 94vw + 244px passa de 100vw
     e o conteúdo avançava além da borda direita. Não aparecia barra de rolagem porque
     `body{overflow-x:hidden}` escondia — só cortava uma faixa do conteúdo, calada.
     A 1440px eram 1598px de conteúdo em 1440px de tela. */
  .home .wrap { margin-left: 244px; padding-bottom: 60px; max-width: min(1560px, calc(94vw - 244px)); }

  /* A ORDEM AGORA VEM DO HTML, e é a mesma no celular e no computador. As regras de
     `order` que existiam aqui apontavam pra uma tela que não existe mais (`data-ir=menu`)
     e, pior, deixavam todo item sem `order` com o valor 0 — ou seja, na frente de tudo. */

  /* SAIR no rodapé da lateral. O `margin-top:auto` empurra ele pro fim da coluna,
     e o `order` alto garante que fique depois de todos mesmo com a reordenação acima. */
  .barra-sair {
    order: 9; margin-top: auto; width: 100%;
    display: flex; flex-direction: row; align-items: center; gap: 13px;
    padding: 14px 14px 12px; border: 0; border-top: 1px solid rgba(58, 164, 255, 0.12);
    border-radius: 0 0 13px 13px;
    background: transparent; color: rgba(234, 242, 255, 0.5);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .barra-sair svg { width: 19px; height: 19px; flex: none; }
  .barra-sair:hover { background: rgba(255, 107, 99, 0.08); color: #ff8b85; }
  .barra-sair:active { background: rgba(255, 107, 99, 0.14); }

  /* com o Sair na lateral, o do topo vira repetição — some e sobra só o saldo */
  .home .topo .btn-sair { display: none; }

  /* a roleta do fundo estava calculada pra tela cheia: com o menu ocupando 244px
     ela encostava no conteúdo, então recua um pouco */
  .palco-cena-home { right: -14%; }
}

/* O Sair do menu lateral só existe no computador. Escondo por FAIXA DE LARGURA em vez
   de uma regra solta: solta, ela empatava em força com a que mostra e, por vir depois no
   arquivo, vencia sempre — o botão não aparecia nunca. Assim as duas nem se cruzam. */
@media (max-width: 1099px) { .barra-sair { display: none; } }

/* ══ BOLINHA DO SUPORTE ══════════════════════════════════════════════════════
   O Suporte saiu da barra e virou o botão redondo de canto — o gesto que todo
   mundo já conhece de chat de site. A barra ficou com os quatro atalhos de
   operação, que é o que a pessoa usa o tempo todo. */
.bolha-suporte {
  position: fixed; z-index: 2900;
  right: 16px; bottom: calc(88px + env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(58, 164, 255, 0.42); border-radius: 50%;
  background: linear-gradient(150deg, rgba(20, 44, 78, 0.96), rgba(6, 12, 22, 0.96));
  backdrop-filter: blur(10px);
  color: var(--azul-claro); cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(43, 149, 255, 0.12);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bolha-suporte svg { width: 23px; height: 23px; }
.bolha-suporte:hover { border-color: rgba(111, 192, 255, 0.75); background: linear-gradient(150deg, rgba(26, 58, 100, 0.96), rgba(8, 16, 28, 0.96)); }
.bolha-suporte:active { transform: scale(0.92); }
.bolha-suporte:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* o contador de não lidas era posicionado pro botão da barra; na bolinha ele vai pro canto */
.bolha-suporte .barra-selo { top: -3px; right: -3px; }

/* No celular ela tampava o gráfico da Planilha e a lista do Planos: subiu mais
   longe da barra (mais gap = menos gente confundindo os dois) e recuou/encolheu
   um pouco pra sobrar menos canto por cima do conteúdo. O `.home .wrap` ganha
   fôlego extra embaixo pra nenhum conteúdo terminar debaixo dela. */
@media (max-width: 1099px) {
  .bolha-suporte {
    right: 12px; bottom: calc(100px + env(safe-area-inset-bottom));
    width: 46px; height: 46px;
  }
  .bolha-suporte svg { width: 20px; height: 20px; }
  .home .wrap { padding-bottom: 168px; }
}

@media (min-width: 1100px) {
  /* no computador não há barra embaixo: a bolinha encosta no canto */
  .bolha-suporte { bottom: 22px; right: 22px; width: 56px; height: 56px; }
  .bolha-suporte svg { width: 25px; height: 25px; }
}

/* ══ ANIMAÇÃO DA SENHA ═══════════════════════════════════════════════════════
   Três estados na caixa da senha, todos com um trabalho a fazer:

   CONFERINDO — uma luz corre pela borda enquanto a Inovabet responde. Esse login
   depende da casa e pode demorar; sem sinal nenhum a pessoa não sabe se o toque pegou.
   DEU CERTO  — borda verde e um visto, meio segundo antes de trocar de tela.
   ERROU      — a caixa treme. É o gesto que a pessoa já entende sem ler nada. */

.campo.conferindo input { border-color: rgba(58, 164, 255, 0.55); }
.campo.conferindo::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 14px; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(111, 192, 255, 0.5) 50%, transparent 80%);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1.5px;
  animation: senhaCorre 1.1s linear infinite;
}
@keyframes senhaCorre { from { background-position: 130% 0; } to { background-position: -130% 0; } }

.campo.deu-certo input { border-color: rgba(46, 224, 106, 0.75); box-shadow: 0 0 0 3px rgba(46, 224, 106, 0.12); }
.campo.deu-certo .campo-ico { color: #2ee06a; }
.campo.deu-certo::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 11px; height: 6px; margin-top: -5px;
  border-left: 2.5px solid #2ee06a; border-bottom: 2.5px solid #2ee06a;
  transform: rotate(-45deg); transform-origin: center;
  animation: senhaVisto 0.32s ease-out both;
  pointer-events: none;
}
@keyframes senhaVisto {
  from { opacity: 0; transform: rotate(-45deg) scale(0.4); }
  to   { opacity: 1; transform: rotate(-45deg) scale(1); }
}
/* o olho de "mostrar senha" sai da frente do visto */
.campo.deu-certo .ver { opacity: 0; }

.campo.errou input { border-color: rgba(255, 107, 99, 0.8); }
.campo.errou { animation: senhaTreme 0.42s ease-in-out; }
@keyframes senhaTreme {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* quem pediu menos movimento recebe o resultado sem o balanço */
@media (prefers-reduced-motion: reduce) {
  .campo.conferindo::after, .campo.deu-certo::after { animation: none; }
  .campo.errou { animation: none; }
}

/* ══ ETAPAS DO ACESSO ════════════════════════════════════════════════════════
   O cadeado pulsando e as três etapas que acendem durante o login. Elas marcam
   momentos REAIS do fluxo, então quando trava, trava na etapa verdadeira — e isso
   já conta pra pessoa onde está o problema. */
.passos {
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px; padding: 15px 16px;
  border: 1px solid rgba(58, 164, 255, 0.2); border-radius: 14px;
  background: rgba(8, 16, 28, 0.6);
  animation: passosEntra 0.24s ease-out;
}
@keyframes passosEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.passos-cadeado {
  position: relative; flex: none;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; color: var(--azul-claro);
  border: 1px solid rgba(58, 164, 255, 0.3);
  background: radial-gradient(circle, rgba(43, 149, 255, 0.16), transparent 70%);
}
.passos-cadeado svg { width: 23px; height: 23px; }
/* o anel que gira enquanto a casa não responde */
.passos-cadeado::before {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--azul);
  animation: passosGira 1s linear infinite;
}
@keyframes passosGira { to { transform: rotate(360deg); } }

.passos-lista { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.passo {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--txt-fraco);
  transition: color 0.2s;
}
.passo-bola {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid rgba(58, 164, 255, 0.3);
  display: grid; place-items: center;
  transition: border-color 0.2s, background 0.2s;
}
.passo.agora { color: var(--txt); }
.passo.agora .passo-bola { border-color: var(--azul); animation: passoPulsa 1s ease-in-out infinite; }
@keyframes passoPulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 149, 255, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(43, 149, 255, 0); } }
.passo.pronto { color: #9fe8bb; }
.passo.pronto .passo-bola { border-color: #2ee06a; background: #2ee06a; }
.passo.pronto .passo-bola::after {
  content: ""; width: 7px; height: 4px;
  border-left: 2px solid #04120a; border-bottom: 2px solid #04120a;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.passo.falhou { color: #ff8b85; }
.passo.falhou .passo-bola { border-color: #ff6b63; background: rgba(255, 107, 99, 0.2); }
.passo.falhou .passo-bola::after { content: "!"; font-size: 10px; font-weight: 800; color: #ff8b85; line-height: 1; }

/* terminou: o anel para de girar e o cadeado fica verde */
.passos.deu-certo .passos-cadeado { color: #2ee06a; border-color: rgba(46, 224, 106, 0.5); background: radial-gradient(circle, rgba(46, 224, 106, 0.18), transparent 70%); }
.passos.deu-certo .passos-cadeado::before { border-top-color: #2ee06a; animation: none; transform: rotate(0deg); opacity: 0.5; }
.passos.falhou .passos-cadeado { color: #ff6b63; border-color: rgba(255, 107, 99, 0.45); background: radial-gradient(circle, rgba(255, 107, 99, 0.14), transparent 70%); }
.passos.falhou .passos-cadeado::before { border-top-color: #ff6b63; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .passos, .passos-cadeado::before, .passo.agora .passo-bola { animation: none; }
}
@media (max-width: 420px) {
  .passos { gap: 13px; padding: 13px; }
  .passos-cadeado { width: 46px; height: 46px; }
  .passo { font-size: 12px; }
}

/* ══ MÁQUINAS E VAGAS (painel do dono) ═══════════════════════════════════════ */
.vps-resumo {
  display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px;
  font-size: 13px; color: var(--txt-suave);
}
.vps-resumo b { font-size: 18px; font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.vps-resumo b.vps-livre { color: #2ee06a; }

.vps-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vps-card {
  padding: 14px 15px; border-radius: 13px;
  border: 1px solid rgba(58, 164, 255, 0.2);
  background: rgba(8, 16, 28, 0.6);
}
.vps-click { cursor: pointer; transition: border-color .12s, background .12s, transform .06s; }
.vps-click:hover { border-color: rgba(58, 164, 255, 0.55); background: rgba(12, 24, 42, 0.75); }
.vps-click:active { transform: scale(.995); }
.vps-click.sel { border-color: var(--azul, #3aa4ff); background: rgba(58, 164, 255, 0.1); box-shadow: 0 0 0 1px rgba(58,164,255,.4); }
.vps-verquem { margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--azul, #3aa4ff); opacity: .0; transition: opacity .12s; }
.vps-click:hover .vps-verquem, .vps-click.sel .vps-verquem { opacity: 1; }
.vps-gente-tit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.vps-verall { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--azul, #3aa4ff);
  background: rgba(58,164,255,.1); border: 1px solid rgba(58,164,255,.35); border-radius: 8px; padding: 5px 11px; }
.vps-verall:hover { background: rgba(58,164,255,.18); }
/* máquina fora do ar não pode passar despercebida no meio das que estão bem */
.vps-card.caiu { border-color: rgba(255, 107, 99, 0.45); background: rgba(255, 107, 99, 0.05); }
.vps-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vps-topo b { font-size: 14px; font-weight: 800; letter-spacing: 0.4px; }
.vps-selo {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: #2ee06a; background: rgba(46, 224, 106, 0.12); border: 1px solid rgba(46, 224, 106, 0.3);
}
.vps-card.caiu .vps-selo { color: #ff8b85; background: rgba(255, 107, 99, 0.12); border-color: rgba(255, 107, 99, 0.35); }
.vps-num { margin: 9px 0 8px; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.vps-num i { font-style: normal; font-size: 15px; font-weight: 700; color: var(--txt-fraco); }
.vps-barra { height: 6px; border-radius: 4px; background: rgba(3, 7, 13, 0.8); overflow: hidden; }
.vps-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); transition: width 0.3s; }
.vps-card.caiu .vps-fill { background: linear-gradient(90deg, #ff6b63, #ff8b85); }
.vps-livres { margin-top: 8px; font-size: 11.5px; color: var(--txt-fraco); }

.vps-tag {
  flex: none; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--txt-suave); background: rgba(58, 164, 255, 0.08); border: 1px solid rgba(58, 164, 255, 0.2);
}
.vps-tag.on { color: #2ee06a; background: rgba(46, 224, 106, 0.1); border-color: rgba(46, 224, 106, 0.3); }
.vps-tag.off { color: #ff8b85; background: rgba(255, 107, 99, 0.1); border-color: rgba(255, 107, 99, 0.32); }

/* ══ AVISO DE PADRÃO JÁ EXISTENTE EM OUTRA CARTEIRA ══════════════════════════
   Não é erro nem sucesso: é uma escolha. Por isso âmbar, e com os dois caminhos
   à vista em vez de só um "ok". */
.pd-msg-aviso {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 15px; border-radius: 12px;
  border: 1px solid rgba(245, 166, 35, 0.42);
  background: rgba(245, 166, 35, 0.08);
  color: #ffd79a; font-size: 13px; line-height: 1.5;
}
.pd-msg-aviso b { color: #ffe7c2; font-weight: 800; }
.pd-msg-aviso span { color: #e2c79f; }
.pd-msg-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 3px; }
.pd-msg-b {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.14); color: #ffd79a;
}
.pd-msg-b.sim { background: #f5a623; border-color: #f5a623; color: #1a1206; }
.pd-msg-b:hover { filter: brightness(1.12); }

/* ══ ESCOLHER VÁRIAS CARTEIRAS NO ROBÔ ═══════════════════════════════════════ */
.pr-carteiras { display: flex; flex-direction: column; gap: 8px; }
.pr-cart {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; cursor: pointer;
  border: 1.5px solid rgba(58, 164, 255, 0.18); border-radius: 12px;
  background: rgba(8, 16, 28, 0.6);
  transition: border-color 0.15s, background 0.15s;
}
.pr-cart:hover { border-color: rgba(111, 192, 255, 0.45); }
.pr-cart.marcada { border-color: rgba(43, 149, 255, 0.65); background: rgba(43, 149, 255, 0.09); }
.pr-cart input { position: absolute; opacity: 0; width: 0; height: 0; }
.pr-cart-box {
  flex: none; width: 19px; height: 19px; border-radius: 6px;
  border: 1.5px solid rgba(58, 164, 255, 0.4); background: rgba(3, 7, 13, 0.7);
  display: grid; place-items: center; transition: background 0.15s, border-color 0.15s;
}
.pr-cart-box::after {
  content: ""; width: 10px; height: 5px;
  border-left: 2.5px solid #04101d; border-bottom: 2.5px solid #04101d;
  transform: rotate(-45deg) translateY(-1px); opacity: 0; transition: opacity 0.12s;
}
.pr-cart.marcada .pr-cart-box { background: var(--azul, #2b95ff); border-color: var(--azul, #2b95ff); }
.pr-cart.marcada .pr-cart-box::after { opacity: 1; }
.pr-cart input:disabled ~ .pr-cart-box { opacity: 0.5; }
.pr-cart-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-cart-txt b { font-size: 13.5px; font-weight: 700; }
.pr-cart-txt i { font-style: normal; font-size: 11.5px; color: var(--txt-fraco, #61748f); }
/* quantas marcadas e quantos padrões no conjunto — é isso que descreve o que o robô segue */
.pr-cart-conta { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--azul-claro, #6fc0ff); text-transform: none; letter-spacing: 0; }

/* ── CAIXA E DIVISÃO (página de Admin) ────────────────────────────────────────
   Prefixo cx- conferido contra TODAS as folhas antes de escrever: neste projeto
   já colidi três vezes (.op, .pl-, .dash-) e o estrago só aparece na tela. */
.cx-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cx-num {
  padding: 12px 14px; border-radius: 14px;
  background: rgba(8, 16, 28, 0.6); border: 1px solid rgba(58, 164, 255, 0.18);
}
.cx-num span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-fraco); }
.cx-num b { display: block; margin-top: 5px; font-size: 21px; font-weight: 800; color: var(--azul-claro); }
.cx-num i { display: block; margin-top: 2px; font-size: 11.5px; font-style: normal; color: var(--txt-suave); }

.cx-metades { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cx-metade {
  padding: 14px; border-radius: 14px;
  background: rgba(20, 12, 40, 0.55); border: 1px solid rgba(168, 120, 255, 0.28);
}
.cx-metade.cx-casa { background: rgba(8, 26, 20, 0.55); border-color: rgba(60, 214, 152, 0.28); }
.cx-metade span { display: block; font-size: 11px; font-weight: 700; color: var(--txt-suave); }
.cx-metade b { display: block; margin-top: 5px; font-size: 24px; font-weight: 800; color: #e7dcff; }
.cx-metade.cx-casa b { color: #b9f5da; }
.cx-metade i { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; color: var(--txt-fraco); word-break: break-all; }

/* O saldo devedor é o número que o dono procura ao abrir a tela — então ele tem
   que gritar mais alto que o resto, e só quando existe dívida. */
.cx-devendo {
  padding: 14px 16px; border-radius: 14px; text-align: center;
  background: rgba(8, 16, 28, 0.6); border: 1px solid rgba(58, 164, 255, 0.18);
}
.cx-devendo.cx-aberto { background: rgba(46, 24, 8, 0.6); border-color: rgba(255, 168, 60, 0.42); }
.cx-devendo span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--txt-suave); }
.cx-devendo b { display: block; margin-top: 4px; font-size: 30px; font-weight: 800; color: var(--azul-claro); }
.cx-devendo.cx-aberto b { color: #ffc477; }
.cx-devendo i { display: block; margin-top: 4px; font-size: 11.5px; font-style: normal; color: var(--txt-fraco); }

.cx-lista { margin-top: 10px; }
.cx-apagar {
  flex: none; padding: 6px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 120, 120, 0.32); background: rgba(48, 14, 14, 0.5); color: #ffb4b4;
  font: inherit; font-size: 10.5px; font-weight: 700;
}
.cx-apagar:disabled { opacity: 0.5; cursor: default; }
.cx-valor-venda { flex: none; font-size: 14px; font-weight: 800; color: #b9f5da; }

/* A escada do bruto até o líquido. Cada linha é conferível: sócio nenhum aceita um
   número que apareceu do nada. */
.cx-escada {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(8, 16, 28, 0.6); border: 1px solid rgba(58, 164, 255, 0.18);
}
.cx-passo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.cx-passo + .cx-passo { border-top: 1px solid rgba(120, 160, 210, 0.12); }
.cx-passo span { font-size: 12px; color: var(--txt-suave); }
.cx-passo span i { font-style: normal; font-size: 10.5px; color: var(--txt-fraco); }
.cx-passo b { flex: none; font-size: 15px; font-weight: 800; color: #dcecff; font-variant-numeric: tabular-nums; }
.cx-passo.cx-menos b { color: #ffb4b4; }
.cx-passo.cx-liquido { margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(60, 214, 152, 0.32); }
.cx-passo.cx-liquido span { font-weight: 800; color: #b9f5da; }
.cx-passo.cx-liquido b { font-size: 20px; color: #b9f5da; }

/* Saque: o botão que move dinheiro. Verde só quando dá pra usar — cinza apagado
   quando não há saldo, pra não convidar o clique. */
.cx-saque-form { margin-bottom: 6px; }
.cx-btn-sacar { border-color: rgba(60, 214, 152, 0.45); background: rgba(8, 46, 33, 0.6); color: #b9f5da; }
.cx-btn-sacar:disabled { opacity: 0.45; cursor: not-allowed; border-color: rgba(120, 160, 210, 0.25); background: rgba(8, 16, 28, 0.5); color: var(--txt-fraco); }
.cx-selo {
  flex: none; padding: 5px 9px; border-radius: 8px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  border: 1px solid rgba(120, 160, 210, 0.28); background: rgba(8, 16, 28, 0.6); color: var(--txt-suave);
}
.cx-selo.ok { border-color: rgba(60, 214, 152, 0.4); color: #b9f5da; }
.cx-selo.ruim { border-color: rgba(255, 120, 120, 0.4); color: #ffb4b4; }
.adm-linha-info b small { font-size: 10.5px; font-weight: 600; color: var(--txt-fraco); }

/* SELO DO PLANO, ao lado do saldo. Estava sem CSS nenhum em folha alguma e caía no botão
   cinza padrão do navegador — o único elemento do app fora da identidade visual.
   FREE fica discreto (é um convite, não um alarme); plano ativo acende em verde. */
.selo-plano {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linha);
  background: linear-gradient(180deg, rgba(12, 24, 40, 0.9), rgba(7, 14, 25, 0.9));
  color: var(--txt-suave);
  font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
  line-height: 1; white-space: nowrap;
  transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.selo-plano:hover {
  border-color: rgba(111, 192, 255, 0.55);
  color: var(--azul-claro);
  box-shadow: 0 0 0 1px rgba(58, 164, 255, 0.14), 0 6px 18px rgba(10, 60, 120, 0.34);
}
.selo-plano.ativo {
  border-color: rgba(60, 214, 152, 0.45);
  background: linear-gradient(180deg, rgba(10, 38, 28, 0.9), rgba(6, 22, 17, 0.9));
  color: #b9f5da;
}
.selo-plano.ativo:hover { border-color: rgba(60, 214, 152, 0.7); color: #d6ffee; box-shadow: 0 6px 18px rgba(20, 120, 80, 0.34); }

/* ── CONTA DO SAQUE ─────────────────────────────────────────────────────────
   Mostra, enquanto a pessoa digita, que o valor digitado é o que CAI NO PIX e
   que a taxa sai POR CIMA, da parte dela. Eram dois números diferentes que a
   tela juntava num só, e é aí que dava erro de digitação na hora de sacar. */
.cx-conta {
  margin: 10px 0 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(58, 164, 255, 0.22); background: rgba(6, 12, 22, 0.6);
  font-size: 13px;
}
.cx-conta > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.cx-conta span { color: var(--sub, rgba(234, 242, 255, 0.55)); }
.cx-conta b { font-variant-numeric: tabular-nums; }
.cx-conta-tot {
  margin-top: 6px; padding-top: 8px !important;
  border-top: 1px solid rgba(58, 164, 255, 0.18);
}
.cx-conta-tot b { color: var(--azul-claro); }
.cx-conta-ruim { border-color: rgba(255, 107, 99, 0.45); }
.cx-conta-erro {
  display: block !important; margin-top: 8px; color: #ff8b85; font-size: 12px; font-weight: 700;
}
/* botão "máximo": preenche o maior valor que o servidor aceita, matando o erro de digitação */
.cx-btn-max { flex: none; opacity: .9; }
.cx-btn-max:disabled { opacity: .4; }

/* ── ATALHOS DO PAINEL DO ADMIN ─────────────────────────────────────────────
   Barra de entradas pra sub-telas do painel (hoje: Afiliados). Nasce como lista
   e não como botão solto, pra o segundo atalho não virar remendo ao lado. */
.adm-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.adm-atalho-card {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 16px; border-radius: 14px; cursor: pointer;
  background: rgba(58, 164, 255, 0.1); border: 1px solid rgba(58, 164, 255, 0.34);
  color: var(--azul-claro); font: inherit; font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s;
}
.adm-atalho-card svg { width: 19px; height: 19px; flex: none; }
.adm-atalho-card:hover { background: rgba(58, 164, 255, 0.18); border-color: rgba(58, 164, 255, 0.55); }

/* voltar da sub-tela pro painel */
.adm-voltar-linha { margin: 0 0 12px; }
.adm-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 14px 8px 10px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(58, 164, 255, 0.28);
  color: var(--txt-suave, rgba(234, 242, 255, 0.7)); font: inherit; font-size: 13px; font-weight: 700;
}
.adm-voltar svg { width: 17px; height: 17px; flex: none; }
.adm-voltar:hover { color: var(--txt); border-color: rgba(58, 164, 255, 0.5); }

/* ── AFILIADOS ──────────────────────────────────────────────────────────────
   Cartão empilhado (nunca lado a lado): o link nuvembot.com/<slug> é texto
   comprido e no celular precisa de linha só pra ele, sem estourar a largura. */
.af-preview { margin: 8px 0 12px; font-size: 12.5px; color: var(--txt-suave); overflow-wrap: anywhere; }
.af-preview b { color: var(--azul-claro); }
.af-linha { flex-direction: column; align-items: stretch; gap: 12px; }
.af-info { gap: 7px; }
.af-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-link-texto {
  flex: 1 1 160px; min-width: 0; font-size: 12.5px; color: var(--azul-claro);
  overflow-wrap: anywhere; word-break: break-word;
}
.af-copiar {
  flex: none; min-height: 44px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(58, 164, 255, 0.3); background: rgba(58, 164, 255, 0.08);
  color: var(--azul-claro); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
}
.af-copiar:hover { background: rgba(58, 164, 255, 0.16); }
.af-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.af-tag {
  padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  border: 1px solid rgba(120, 160, 210, 0.28); color: var(--txt-suave); white-space: nowrap;
}
.af-tag.on { border-color: rgba(60, 214, 152, 0.4); color: #b9f5da; }
.af-tag.off { border-color: rgba(255, 107, 99, 0.4); color: #ffada7; }
.af-nums { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--txt-suave); }
.af-nums b { color: var(--txt); font-variant-numeric: tabular-nums; }
.af-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.af-acoes .adm-atalho { flex: 1 1 120px; min-height: 44px; font-size: 11px; padding: 10px 12px; }
.af-linha-edicao .adm-form { margin-top: 4px; }
.af-linha-edicao select {
  flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 14px;
  border-radius: 12px; border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(6, 12, 22, 0.7); color: var(--txt); font: inherit; font-size: 14px;
}

/* botão de excluir afiliado — vermelho, e de propósito o menos convidativo dos três */
.af-excluir {
  border-color: rgba(255, 107, 99, 0.45) !important;
  color: #ff8b85 !important;
  background: rgba(255, 107, 99, 0.08) !important;
}
.af-excluir:hover { background: rgba(255, 107, 99, 0.16) !important; }

/* ── AULAS (tela do cliente) ────────────────────────────────────────────────
   Cartão por aula, empilhados. O vídeo usa `aspect-ratio` em vez de altura fixa:
   é o que garante 16:9 sem estourar em 320px e sem precisar medir nada em JS. */
.aula-item {
  margin-bottom: 16px; padding: 16px; border-radius: 16px;
  background: rgba(8, 16, 28, 0.55); border: 1px solid rgba(58, 164, 255, 0.18);
}
.aula-tit { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.aula-desc { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--txt-suave); overflow-wrap: anywhere; }
.aula-video {
  position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9;
  margin: 0 auto; border-radius: 12px; overflow: hidden; background: #000;
}
.aula-video iframe,
.aula-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.aula-assistir {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 12px; cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(79, 178, 255, 0.4); background: rgba(13, 44, 78, 0.5); color: #dcecff;
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
}
.aula-assistir svg { width: 16px; height: 16px; flex: none; }
.aula-assistir:hover { background: rgba(13, 44, 78, 0.8); }
.aula-fonte-nota { margin-bottom: 14px; }

/* ── AULAS (gerenciamento no admin) ─────────────────────────────────────────
   Mesmo padrão de linha do Afiliados; o endereço do vídeo é o campo comprido que
   quebra em qualquer lugar (`overflow-wrap: anywhere`) pra nunca abrir rolagem lateral. */
.aa-info { gap: 6px; }
.aa-info b { font-size: 13.5px; }
.aa-info em { font-style: normal; font-size: 12px; color: var(--txt-suave); overflow-wrap: anywhere; }
.aa-url { font-size: 11.5px; color: var(--azul-claro); overflow-wrap: anywhere; word-break: break-word; }
.aa-nao-youtube {
  display: inline-block; max-width: 100%; padding: 4px 9px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; white-space: normal; overflow-wrap: anywhere;
  border: 1px solid rgba(255, 107, 99, 0.4); color: #ffada7;
}
.aa-linha { flex-direction: column; align-items: stretch; gap: 12px; }
.aa-acoes .adm-atalho { flex: 1 1 100px; min-height: 44px; font-size: 11px; padding: 10px 12px; }
.aula-aviso-original { color: #ffb4b4; }
.aula-aviso-original b { color: #ff8b85; }

/* ── CAIXA DE CONFIRMAÇÃO DO SAQUE ──────────────────────────────────────────
   Modal próprio em vez do confirm() do navegador: aqui cabe a conta do dinheiro
   E os dados de quem recebe. Rola por dentro (`overflow:auto`) porque em tela de
   320px com teclado aberto o conteúdo não cabe de uma vez. */
.sq-fundo {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(2, 6, 12, 0.78); backdrop-filter: blur(3px);
}
.sq-caixa {
  width: 100%; max-width: 420px; max-height: 90vh; overflow: auto;
  padding: 20px; border-radius: 18px;
  background: var(--card, #0b1220); border: 1px solid rgba(58, 164, 255, 0.3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.sq-tit { font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.sq-conta {
  padding: 12px 14px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(6, 12, 22, 0.6); border: 1px solid rgba(58, 164, 255, 0.2);
  font-size: 13px;
}
.sq-conta > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.sq-conta span { color: var(--sub, rgba(234, 242, 255, 0.55)); }
.sq-conta b { font-variant-numeric: tabular-nums; }
.sq-conta-tot { margin-top: 6px; padding-top: 8px !important; border-top: 1px solid rgba(58, 164, 255, 0.18); }
.sq-conta-tot b { color: var(--azul-claro); }
.sq-campos { display: flex; flex-direction: column; gap: 11px; }
.sq-campos label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-suave, rgba(234, 242, 255, 0.7));
}
.sq-campos label small { text-transform: none; letter-spacing: 0; font-weight: 600; opacity: .75; }
.sq-campos input {
  min-height: 44px; padding: 10px 12px; border-radius: 11px;
  background: rgba(6, 12, 22, 0.7); border: 1px solid rgba(58, 164, 255, 0.26);
  color: var(--txt); font: inherit; font-size: 15px;
}
.sq-campos input:disabled { opacity: .55; }
.sq-msg { margin-top: 12px; font-size: 13px; color: var(--txt-suave); }
.sq-msg-erro { color: #ff8b85; font-weight: 700; }
.sq-bts { display: flex; gap: 10px; margin-top: 18px; }
.sq-b {
  flex: 1; min-height: 46px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
}
.sq-cancelar { background: transparent; border: 1px solid rgba(58, 164, 255, 0.28); color: var(--txt-suave); }
.sq-ok { background: rgba(46, 224, 106, 0.16); border: 1px solid rgba(46, 224, 106, 0.5); color: #2ee06a; }
.sq-ok:disabled { opacity: .5; cursor: default; }


/* ── SELECT NO TEMA ESCURO ──────────────────────────────────────────────────
   Sem isto o select cai no visual padrão do sistema (caixa branca, fonte miúda)
   e destoa de todo o resto do painel — os inputs ao lado já eram escuros.
   `appearance:none` apaga a seta nativa, então desenho uma em background-image.
   O padding da direita abre espaço pra ela não encostar no texto. */
.adm-form select,
.af-linha-edicao select,
.sq-campos select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fc0ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px 15px;
}
/* a lista aberta é desenhada pelo sistema; no Chrome dá pra pintar as opções, e sem
   isto elas saem brancas dentro de um campo escuro. */
.adm-form select option,
.af-linha-edicao select option,
.sq-campos select option { background: #0b1220; color: #eaf2ff; }
.adm-form select:hover,
.af-linha-edicao select:hover { border-color: rgba(58, 164, 255, 0.42); }

/* AVISO DO SAQUE — último texto antes do botão de confirmar. Âmbar e não vermelho:
   vermelho o olho aprende a ignorar como "erro que já vi", e isto não é erro, é o
   momento de conferir. Borda à esquerda pra destacar sem virar caixa de erro. */
.sq-aviso {
  margin-top: 16px; padding: 12px 14px;
  border-radius: 10px; border-left: 3px solid #f5a623;
  background: rgba(245, 166, 35, 0.1);
  font-size: 12.5px; line-height: 1.5; color: #ffd9a0;
}
.sq-aviso b { color: #ffc46b; }

/* ── LISTA DE INDICADOS (só no painel do dono) ──────────────────────────────
   Quem entrou por cada link, com e-mail. Verde na borda = já comprou; é o que o
   dono procura de relance, então a diferença tem que ser visível sem ler. */
.af-indicados { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.af-ind-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(6, 12, 22, 0.55); border: 1px solid rgba(58, 164, 255, 0.16);
  border-left: 3px solid rgba(58, 164, 255, 0.28);
}
.af-ind-pagou { border-left-color: #2ee06a; }
.af-ind-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.af-ind-quem b { font-size: 13px; overflow-wrap: anywhere; }
.af-ind-quem em { font-style: normal; font-size: 12px; color: var(--txt-suave); }
.af-ind-quem span { font-size: 11px; color: var(--txt-fraco); }
.af-ind-status { flex: none; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.af-ind-status b { color: #2ee06a; font-size: 13px; font-variant-numeric: tabular-nums; }
.af-ind-status span { font-size: 11px; color: var(--txt-fraco); }
.af-ind-nao { color: var(--txt-fraco); }

/* bloco de ação destrutiva no painel — vermelho, e some quando o trabalho acabar */
.adm-bloco-perigo {
  border-color: rgba(255, 107, 99, 0.4) !important;
  background: rgba(46, 12, 12, 0.35) !important;
}
.adm-bloco-perigo .adm-bloco-tit { color: #ff8b85; }

/* Link de cadastro na casa. Usa a mesma pílula do .btn-cadastro, mas como <a>: sem
   display/inline-block o padding vertical não vale, e sem text-decoration vem sublinhado. */
.btn-cadastro-casa {
  display: block; width: 100%; margin-top: 10px;
  text-align: center; text-decoration: none;
}

/* ══ SALA DE SINAIS (conta do Telegram) ══════════════════════════════════
   Mesma linguagem do resto do app: bloco escuro, borda azul discreta, uma
   ação em destaque por vez. */
.sn-bloco {
  background: rgba(10, 22, 38, .55); border: 1px solid rgba(79, 178, 255, .22);
  border-radius: 16px; padding: 18px; margin-bottom: 14px;
}
.sn-bloco h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .04em; color: #eaf4ff; }
.sn-bloco h4 { margin: 0 0 6px; font-size: 14px; color: #eaf4ff; }
.sn-bloco p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #9fb6d2; }
.sn-nota { font-size: 12px !important; color: #7e97b5 !important; }
.sn-rot {
  display: block; margin: 12px 0 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .16em; color: #7e97b5;
}
.sn-input {
  width: 100%; padding: 13px 14px; border-radius: 12px; font: inherit; font-size: 14px;
  color: #eaf4ff; background: rgba(4, 12, 22, .75);
  border: 1px solid rgba(79, 178, 255, .35);
}
.sn-input:focus { outline: none; border-color: rgba(111, 192, 255, .9); }
.sn-btn {
  width: 100%; margin-top: 14px; padding: 14px; border-radius: 12px; cursor: pointer;
  border: none; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  color: #06121f; background: linear-gradient(135deg, #ff9a3c, #ffb347);
}
.sn-btn:disabled { opacity: .6; cursor: default; }
.sn-btn-fraco {
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: #ffd0cc; background: rgba(90, 20, 20, .5); border: 1px solid rgba(255, 107, 99, .5);
}
.sn-link {
  display: block; width: 100%; margin-top: 10px; padding: 6px; cursor: pointer;
  background: none; border: none; font: inherit; font-size: 12px; color: #79a6d8;
  text-decoration: underline;
}
.sn-msg {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(20, 60, 40, .5); border: 1px solid rgba(46, 224, 106, .4); color: #c8f5da;
}
.sn-msg-erro { background: rgba(70, 20, 20, .5); border-color: rgba(255, 107, 99, .45); color: #ffd0cc; }
.sn-teste { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(58, 164, 255, .2); }
.sn-teste-ta { min-height: 92px; resize: vertical; font: inherit; line-height: 1.45; white-space: pre-wrap; }
.sn-conta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sn-conta div { display: flex; flex-direction: column; gap: 2px; }
.sn-conta span { font-size: 13px; color: #9fb6d2; }
.sn-ativo { border-color: rgba(46, 224, 106, .4); }
.sn-grupos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sn-grupo {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 12px; font: inherit;
  background: rgba(4, 12, 22, .6); border: 1px solid rgba(79, 178, 255, .2);
}
.sn-grupo:hover { border-color: rgba(111, 192, 255, .75); }
.sn-grupo-tit { font-size: 14px; font-weight: 700; color: #eaf4ff; }
.sn-grupo-sub { font-size: 11px; color: #7e97b5; }
.sn-vazio { margin-top: 12px; font-size: 13px; color: #7e97b5; }
.sn-frases { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(79, 178, 255, .2); }
.sn-bloco-pro { border-color: rgba(255, 154, 60, .45); }

/* ══ BOTÃO "LIGAR BOT" ═══════════════════════════════════════════════════
   Ação principal, separada dos destinos do menu. No celular a barra é uma
   pílula horizontal apertada, então ali ele vira só o ícone; no computador,
   onde a barra é a coluna lateral, ele ocupa a largura toda com o texto. */
.barra-ligar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: none; cursor: pointer; font: inherit;
  padding: 9px 12px; border-radius: 999px; border: none;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  color: #04121f; background: linear-gradient(135deg, #4fb2ff, #7ad0ff);
  box-shadow: 0 4px 14px rgba(79, 178, 255, .3);
}
.barra-ligar svg { width: 18px; height: 18px; flex: none; }
.barra-ligar span { display: none; }          /* no celular, só o ícone */
.barra-ligar:hover { filter: brightness(1.08); }

@media (min-width: 1100px) {
  .barra-ligar {
    width: 100%; justify-content: flex-start; gap: 13px;
    padding: 15px 16px; border-radius: 15px; margin-bottom: 16px;
    font-size: 11px; letter-spacing: .12em;
  }
  .barra-ligar span { display: inline; }      /* na lateral, cabe o texto */
}

/* ══ TELA DE ACESSO NO CELULAR: caber sem rolagem ════════════════════════
   A marca ocupava 46vh e o formulário (2 campos + 3 botões + a nota) não
   cabia no que sobrava — quem abria no celular tinha que rolar pra achar o
   "criar minha conta". Aqui a marca cede espaço e o formulário se aperta,
   mantendo o alvo de toque dos botões. */
@media (max-width: 900px) {
  .acesso { min-height: 100svh; }          /* svh: desconta a barra do navegador */
  .palco {
    min-height: 30vh;
    padding: 18px 20px 16px;
  }
  .marca-tag { font-size: 10px; letter-spacing: .18em; }
  .painel { padding: 16px 18px 22px; }
  .painel-titulo { margin-bottom: 2px; }
  .form .campo { margin-bottom: 10px; }
  .btn-acessar { margin-top: 12px; padding: 14px; }
  .caixa-cadastro { margin-top: 12px; padding: 10px 12px; }
  .form .nota { margin: 10px 0 6px; font-size: 11px; line-height: 1.4; }
  .btn-cadastro-casa { margin-top: 6px; padding: 12px; }
  .linha-esqueci { margin: 6px 0 0; }
}

/* Celular de tela baixa (ou com o teclado aberto): a marca encolhe mais ainda.
   O formulário é o que importa aqui — a marca já cumpriu o papel dela. */
@media (max-width: 900px) and (max-height: 780px) {
  .palco { min-height: 22vh; padding: 12px 18px 10px; }
  .palco-cena { opacity: .22; }
  .marca-tag { display: none; }
  .form .campo { margin-bottom: 8px; }
  .btn-acessar { margin-top: 10px; }
}

/* No CELULAR o botão de ligar sai da barra. Com 7 destinos + a ação, tudo virava
   ícone espremido e o menu ficava difícil de acertar com o dedo. No computador ele
   continua: lá a barra é a coluna lateral e sobra espaço. Quem liga o robô pelo
   celular usa o item "Bot", que leva ao mesmo lugar. */
@media (max-width: 1099px) {
  .barra-ligar { display: none; }
}

/* A logo do topo virou BOTAO (leva pro Dashboard). Precisa zerar o visual que o
   navegador da de graca pra button, senao aparece borda, fundo e fonte trocada. */
.marca-btn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.marca-btn:hover .marca-emblema { transform: scale(1.05); }
.marca-btn .marca-emblema { transition: transform .15s ease; }
.marca-btn:focus-visible { outline: 2px solid var(--azul, #2b95ff); outline-offset: 4px; border-radius: 10px; }

/* NOME DA CLASSE: `operando`, NÃO `op`. Existe um `.op` neste mesmo arquivo (o card
   grande de operação) com `width:100%`, `min-height` e um `::after` de 220px. Usar `op`
   aqui fazia o item da barra herdar tudo isso: ele ocupava a largura toda, ficava alto e
   empurrava os vizinhos pra outra linha. */
/* ══ BOTÃO "OPERANDO" — o robô está rodando ══════════════════════════════════
   Este botão aparece em TODAS as telas, então é o único lugar onde o cliente vê
   que o robô está trabalhando sem abrir nada. Vira verde e ganha vida própria. */
.barra-ligar.operando {
  background: linear-gradient(135deg, #17c964, #0e9f4f);
  color: #04170c;
  animation: bl-respira 2.4s ease-in-out infinite;
  position: relative; overflow: hidden;
}
/* a luz que atravessa o botão: dá a sensação de "processando" sem girar nada */
.barra-ligar.operando::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: bl-varre 2.6s ease-in-out infinite;
}
.barra-ligar.operando svg { animation: bl-pulsa 1.3s ease-in-out infinite; }

@keyframes bl-respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 201, 100, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(23, 201, 100, 0); }
}
@keyframes bl-varre { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }
@keyframes bl-pulsa { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.9); } }

/* Quem pediu menos animação leva só a cor, sem nada se mexendo. */
@media (prefers-reduced-motion: reduce) {
  .barra-ligar.operando, .barra-ligar.operando::after, .barra-ligar.operando svg { animation: none; }
  .barra-ligar.operando::after { display: none; }
}

/* ══ PLANOS EM DESTAQUE NO MENU ══════════════════════════════════════════════
   É por onde entra dinheiro: fica dourado e discretamente aceso, mas SEM animação
   — se ele piscasse junto com o "OPERANDO", os dois competiriam e o cliente não
   olharia nenhum. */
.barra-item.barra-planos { color: #ffc94d; }
.barra-item.barra-planos svg { filter: drop-shadow(0 0 6px rgba(255, 201, 77, .55)); }
.barra-item.barra-planos:hover { color: #ffd970; background: rgba(255, 201, 77, .10); }
.barra-item.barra-planos.ativo { color: #ffd970; }

/* ══ SEÇÕES DO MENU (só no computador) ═══════════════════════════════════════
   No celular a barra é horizontal e um título no meio dos ícones não faria sentido —
   por isso o `display:none` aqui e a exibição só na faixa da lateral. */
.barra-sec { display: none; }

@media (min-width: 1100px) {
  .barra-sec {
    display: block; width: 100%; flex: none;
    margin: 20px 0 7px; padding: 0 14px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(234, 242, 255, 0.32);
  }
  .barra-sec:first-of-type { margin-top: 2px; }

  /* ITEM ATIVO no estilo do painel: moldura acesa + fundo tingido, em vez da barrinha
     lateral de antes. É o que dá o "está aqui" de longe. */
  .barra-item.ativo {
    background: linear-gradient(120deg, rgba(43, 149, 255, 0.20), rgba(43, 149, 255, 0.06));
    color: var(--azul-claro);
    border: 1px solid rgba(58, 164, 255, 0.45);
    box-shadow: inset 3px 0 0 var(--azul), 0 0 14px rgba(43, 149, 255, 0.12);
  }
  /* a borda do ativo aumenta a altura em 2px; os inativos compensam com borda invisível
     pra a lista não "pular" quando você troca de tela */
  .barra-item { border: 1px solid transparent; }

  /* O Planos ativo mantém o dourado, senão ele perderia a identidade ao ser aberto. */
  .barra-item.barra-planos.ativo {
    background: linear-gradient(120deg, rgba(255, 201, 77, 0.18), rgba(255, 201, 77, 0.05));
    border-color: rgba(255, 201, 77, 0.45);
    box-shadow: inset 3px 0 0 #ffc94d, 0 0 14px rgba(255, 201, 77, 0.12);
  }
}

/* ══ "Bot" ACESO NA BARRA DE BAIXO ═══════════════════════════════════════════
   O botão LIGAR BOT não existe abaixo de 1100px, então no celular é este item que
   avisa que o robô está operando.
   
   NADA AQUI PODE MEXER NO LAYOUT. A primeira versão punha um ponto solto com
   `position:absolute` e um `scale` no ícone — o item saía da fileira e ficava mais alto
   que os vizinhos. Agora é só COR e BRILHO: `color` e `filter` não ocupam espaço, então
   a barra continua alinhada e nada treme. */
.barra-item.operando { color: #17c964; }
/* O brilho volta: ele nunca foi o problema. Quem desalinhava o item era a colisão de
   nome com o `.op` do card grande (width:100% + min-height). `drop-shadow` não ocupa
   espaço nem cria caixa, então é seguro na barra. */
.barra-item.operando svg { animation: bot-brilha 2s ease-in-out infinite; }

@keyframes bot-brilha {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(23, 201, 100, 0)); }
  50%      { filter: drop-shadow(0 0 7px rgba(23, 201, 100, 0.9)); }
}

@media (prefers-reduced-motion: reduce) {
  .barra-item.operando svg { animation: none; filter: drop-shadow(0 0 5px rgba(23, 201, 100, 0.7)); }
}

/* Botões de cor (Banker/Player/Tie) do Meus Padrões em forma de BOLINHA */
.pd-cbtn.pd-bola { background: transparent !important; padding: 2px 4px; flex-direction: column; gap: 6px; color: var(--txt, #eaf2ff); }
.pd-cbtn.pd-bola:hover { transform: translateY(-2px); }
.pd-bola-c {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: #0a0a0b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.pd-bola-n { font-size: 12px; font-weight: 800; letter-spacing: .2px; }