/* ===================================================================
   Atlas App — visual completo: landing, painel com menu lateral,
   dashboard, modelos, configurações e editor (chat + celular).
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
:root{
  /* PRETO + ROXO NEON. Os fundos sao translucidos de proposito: a galaxia
     animada (canvas #galaxia) fica atras de tudo e precisa aparecer. */
  --bg:#000000; --bg2:rgba(10,10,10,.72); --card:rgba(15,15,15,.66);
  --card2:rgba(20,20,20,.70);
  --linha:rgba(209,117,255,.24); --txt:#ffffff; --txt2:#b2b2b2; --txt3:#8a8a8a;
  --acc:#d175ff; --acc2:#b058ff; --neon:#e066ff;
  --ok:#22c55e; --erro:#ef4444; --alerta:#f59e0b;
  --r:14px; --lat:236px;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --grade:rgba(209,117,255,.045);       /* grade do fundo (AtlasCode) */
  --sombra:0 14px 46px rgba(0,0,0,.6), 0 0 0 1px rgba(209,117,255,.12);
  --glow:0 0 22px rgba(209,117,255,.45);
  --scrim:rgba(0,0,0,.72);          /* veu atras do texto da hero */
  --scrim-fraco:rgba(0,0,0,.34);
  --sobre-acc:#fff;                  /* texto sobre botao roxo */
  --tela-demo:#0a0a0a;
}
/* TEMA CLARO DE VERDADE (antes era roxo escuro: mudava quase nada).
   A galaxia tem um modo claro proprio (galaxia.js le body.tema-claro), por isso
   aqui o fundo pode ser realmente claro sem o canvas brigar com o texto. */
body.tema-claro{
  --bg:#f7f3fb; --bg2:rgba(255,255,255,.82); --card:rgba(255,255,255,.86);
  --card2:rgba(243,238,253,.92);
  /* txt2/txt3 são escuros de propósito: os primeiros valores (#4a3a6b/#6f5f8d)
     deixavam a linha de provas e as legendas no limite de contraste. */
  --linha:rgba(176,88,255,.22); --txt:#150a24; --txt2:#553f6e; --txt3:#826c99;
  --acc:#b058ff; --acc2:#9a47e0; --neon:#b058ff;
  --sombra:0 12px 34px rgba(0,0,0,.14), 0 0 0 1px rgba(176,88,255,.10);
  --glow:0 0 18px rgba(176,88,255,.22);
  --scrim:rgba(247,243,251,.80);
  --scrim-fraco:rgba(247,243,251,.40);
  --tela-demo:#f1e9f8;
  --grade:rgba(176,88,255,.05);
}
html,body{height:100%}
/* overflow-x nos DOIS: com `hidden` só no html, o BODY assume o papel de
   container de rolagem (quirk de propagação de overflow) e o scrim da hero
   (.lp-hero-txt::before, inset negativo de -30%) criava rolagem lateral real de
   55px em 390px — medido com scrollLeft, não suposto. `clip` no body não cria
   caixa de rolagem nova. */
html{overflow-x:hidden}
body{overflow-x:clip}
html{scrollbar-color:rgba(209,117,255,.5) rgba(5,5,5,.9);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(5,5,5,.9)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#d175ff,#b058ff);border-radius:8px;
  border:2px solid rgba(5,5,5,.9)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#e066ff,#d175ff)}
/* A barra de rolagem é do HTML, não do BODY: declarar `body.tema-claro` não
   ganhava do `html{scrollbar-color}` e sobrava uma faixa escura à direita no
   tema claro (pego em revisão visual). Por isso a regra do claro fica em
   html:has(body.tema-claro), com as :root vars como fallback. */
html:has(body.tema-claro){scrollbar-color:rgba(176,88,255,.45) rgba(241,233,248,.95)}
html:has(body.tema-claro) ::-webkit-scrollbar-track{background:rgba(241,233,248,.95)}
html:has(body.tema-claro) ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#b058ff,#b058ff);border-color:rgba(241,233,248,.95)}

/* ===== fundo: galaxia animada ===== */
#galaxia{
  position:fixed;inset:0;z-index:-2;display:block;
  width:100%;height:100%;background:#000000;
}
body.tema-claro #galaxia{background:#f7f3fb}
/* nebulosa: manchas roxas que respiram por cima do canvas */
#nebulosa{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* Varias manchas em escalas diferentes = textura de nebulosa.
     Uma mancha grande sozinha le como "gradiente liso". */
  background:
    radial-gradient(30% 24% at 16% 6%,rgba(58,91,253,.30),transparent 64%),
    radial-gradient(26% 20% at 30% 20%,rgba(58,91,253,.18),transparent 62%),
    radial-gradient(34% 26% at 88% 86%,rgba(217,70,239,.22),transparent 66%),
    radial-gradient(28% 22% at 74% 96%,rgba(209,117,255,.16),transparent 64%),
    radial-gradient(22% 18% at 92% 30%,rgba(209,117,255,.12),transparent 60%),
    radial-gradient(20% 16% at 8% 62%,rgba(58,91,253,.12),transparent 60%);
  animation:respira 19s ease-in-out infinite alternate;
}
/* No claro a nebulosa some quase toda: manchas roxas sobre fundo claro leem
   como sujeira/borrão, não como nebulosa. */
body.tema-claro #nebulosa{
  background:
    radial-gradient(30% 24% at 16% 8%,rgba(58,91,253,.13),transparent 64%),
    radial-gradient(28% 22% at 86% 88%,rgba(217,70,239,.11),transparent 66%),
    radial-gradient(24% 18% at 90% 32%,rgba(176,88,255,.07),transparent 62%);
}
body.tema-claro #nebulosa::after{opacity:.03;mix-blend-mode:multiply}
/* grao fino: tira o aspecto "chapado" do gradiente sem pesar (SVG inline) */
#nebulosa::after{
  content:"";position:absolute;inset:0;opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23r)'/></svg>");
}
@keyframes respira{
  from{opacity:.62;transform:scale(1)}
  to{opacity:1;transform:scale(1.07)}
}
@media (prefers-reduced-motion:reduce){ #nebulosa{animation:none} }

body{
  margin:0;background:transparent;color:var(--txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
/* ===== grade fina do AtlasCode =====
   Linhas de 46px que somem de cima para baixo (mask radial). E o que tira o
   aspecto de "poster espacial" e da cara de painel. Fica atras do conteudo e
   nao intercepta clique. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(var(--grade) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grade) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 20%,transparent 75%);
}
button,input,textarea,select{font:inherit;color:inherit}
.oculto{display:none !important}
h1,h2,h3{margin:0;line-height:1.25}
a{color:var(--acc);text-decoration:none}

/* ---------------- botões e base ---------------- */
.btn-principal{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border:0;
  padding:12px 20px;border-radius:11px;font-weight:650;cursor:pointer;
  min-height:46px;transition:transform .15s,filter .15s,opacity .15s;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;
}
.btn-principal{box-shadow:0 6px 20px rgba(176,88,255,.34)}
.btn-principal:hover{filter:brightness(1.16);box-shadow:0 8px 26px rgba(209,117,255,.5)}
.btn-principal:active{transform:scale(.98)}
.btn-principal[disabled]{opacity:.5;cursor:not-allowed}
.btn-principal.grande,.btn-secundario.grande{padding:15px 26px;min-height:54px;font-size:16px}
.btn-secundario{
  background:var(--card2);color:var(--txt);border:1px solid var(--linha);
  padding:11px 17px;border-radius:11px;cursor:pointer;min-height:46px;font-weight:550;white-space:nowrap;
}
.btn-secundario:hover{background:var(--linha)}
.btn-fantasma{
  background:transparent;color:var(--txt2);border:0;padding:10px 14px;border-radius:9px;
  cursor:pointer;min-height:44px;font-weight:550;white-space:nowrap;
}
.btn-fantasma:hover{background:var(--card2);color:var(--txt)}
.btn-fantasma.perigo:hover{background:rgba(239,68,68,.14);color:#fca5a5}
/* O botão destrutivo só ficava vermelho no HOVER — no claro (e no celular, que
   não tem hover) ele lia como texto comum, sem sinal de perigo. Agora a cor de
   alerta é o estado NORMAL, com borda. */
.btn-fantasma.perigo{color:#fca5a5;border:1px solid rgba(239,68,68,.40)}
body.tema-claro .btn-fantasma.perigo{color:#b91c1c;border-color:rgba(185,28,28,.45);
  background:rgba(255,255,255,.7)}
body.tema-claro .btn-fantasma.perigo:hover{background:rgba(185,28,28,.10);color:#991b1b}

.spinner-pagina{display:flex;align-items:center;justify-content:center;height:100vh}
.spinner{
  width:34px;height:34px;border:3px solid var(--linha);border-top-color:var(--acc);
  border-radius:50%;animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* Marca OFICIAL Atlas: MESMO arquivo dos outros paineis do Lucas
   (/root/gerenciador-pro/public/atlas-lockup.png). A logo TEM a palavra ATLAS —
   NUNCA trocar por monograma/letra desenhada.

   ERRO REAL (28/09/2026): eu troquei este lockup por um "A" que eu mesmo
   desenhei em SVG, apagando este comentário no caminho. O Lucas reprovou na
   hora: "icone e logo esta errado, nao e esse". A arte da marca NAO se
   redesenha por conveniencia tecnica (nitidez em Retina, tamanho de arquivo,
   funcionar no tema claro) — se houver problema tecnico, resolve-se em volta da
   arte oficial, nunca substituindo-a. */
.lockup{height:38px;width:auto;flex:0 0 auto;display:block;object-fit:contain;object-position:left}
.lockup.grande{height:53px}
.marca-sufixo{
  font-weight:800;font-size:19px;letter-spacing:.06em;line-height:1;margin-left:2px;
  background:linear-gradient(120deg,#e9c4ff,#d175ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(209,117,255,.55);
}
/* No tema claro o gradiente lilas do sufixo fica lavado sobre fundo branco */
body.tema-claro .marca-sufixo{
  background:linear-gradient(120deg,#b058ff,#9a47e0);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;
}
.auth-marca .marca-sufixo{font-size:24px}
.marca{display:flex;align-items:center;gap:10px;font-size:16px}
.grad{background:linear-gradient(110deg,#e9c4ff,#d175ff,#e066ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.tema-claro .grad{background:linear-gradient(110deg,#b058ff,#9a47e0,#b058ff);
  -webkit-background-clip:text;background-clip:text}

/* =================== LANDING =================== */
.lp{max-width:1180px;margin:0 auto;padding:0 20px 60px;position:relative}
.lp-topo{
  display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:30;
  /* Faixa borda a borda SEM pseudo-elemento: 100vw + margin negativa, com o
     padding trazendo o conteudo de volta para a coluna de 1180px.
     Tentativas anteriores (::before absolute e ::before fixed) davam,
     respectivamente, faixa cortada pelo container e um retangulo claro visivel
     atras do logo. */
  /* dvw/svw ignoram a barra de rolagem; 100vw a inclui e empurrava o header 5px
     para fora (L=-5, R=385 medidos em 390px). O fallback em vw fica para quem
     não tem dvw. */
  width:100vw;margin-left:calc(50% - 50vw);
  width:100dvw;margin-left:calc(50% - 50dvw);
  padding:18px calc(50vw - 590px + 20px);
  padding-top:max(18px,env(safe-area-inset-top));
  background:var(--topo-fundo,rgba(0,0,0,.82));backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linha);
}
body.tema-claro .lp-topo{--topo-fundo:rgba(255,255,255,.86)}
@media (max-width:1220px){
  .lp-topo{padding-left:20px;padding-right:20px}
}
.lp-nav{display:flex;gap:6px;margin-left:auto}
.lp-nav a{color:var(--txt2);padding:9px 13px;border-radius:9px;font-size:14.5px}
.lp-nav a:hover{background:var(--card2);color:var(--txt)}
.lp-acoes{display:flex;gap:8px;align-items:center}
.lp-acoes .btn-fantasma{font-weight:600;font-size:14.5px;color:#f2ddff;
  border:1px solid rgba(224,102,255,.30)}
.lp-acoes .btn-fantasma:hover{border-color:var(--neon);background:rgba(209,117,255,.14)}
body.tema-claro .lp-acoes .btn-fantasma{color:#6a2a9e;border-color:rgba(176,88,255,.45);
  background:rgba(255,255,255,.7)}
body.tema-claro .lp-acoes .btn-fantasma:hover{background:rgba(176,88,255,.10)}

/* ---- alternador de tema (claro/escuro) ----
   Fica no topo, visível sem login: o cliente troca o tema na hora, sem abrir
   Configurações. A preferência de quem está logado continua salva no perfil. */
.btn-tema{
  width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--linha);border-radius:11px;
  cursor:pointer;color:var(--txt);font-size:18px;line-height:1;
  transition:border-color .16s,transform .16s;
}
.btn-tema:hover{border-color:var(--neon);transform:translateY(-1px)}
/* No claro o --card é quase branco: sem estas duas linhas o botão some no
   header branco e parece um ícone solto, não um controle. */
body.tema-claro .btn-tema{background:rgba(255,255,255,.9);
  border-color:rgba(176,88,255,.42);color:#58208a}
body.tema-claro .btn-tema:hover{background:rgba(176,88,255,.10)}
.btn-tema svg{width:20px;height:20px;display:block}
/* rótulo do CTA do topo: longo no desktop, curto no celular */
.cta-curto{display:none}
/* O ícone mostra o DESTINO do clique, igual ao rótulo (aria-label):
   no escuro aparece o SOL (clique → claro); no claro aparece a LUA.
   Antes era o contrário do rótulo — o botão dizia "mudar para escuro" com um
   sol desenhado. */
.btn-tema .ic-lua{display:none}
.btn-tema .ic-sol{display:block}
body.tema-claro .btn-tema .ic-lua{display:block}
body.tema-claro .btn-tema .ic-sol{display:none}

.lp-hero{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;
  align-items:center;padding:28px 0 46px}
.lp-brilho{
  /* FIXED e nao absolute: dentro do .lp (max-width 1180px) o glow parava em
     x=62/x=1200 e deixava emenda vertical visivel -- a hero parecia um painel
     encaixotado. Fixo na viewport nao cria scroll lateral nem emenda. */
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(58% 62% at 24% 26%,rgba(209,117,255,.20),transparent 70%),
             radial-gradient(50% 55% at 84% 12%,rgba(176,88,255,.17),transparent 70%);
}
.lp-hero-txt,.lp-hero-art{position:relative;z-index:1}
/* Scrim atras do texto: mascara RADIAL, nao retangulo. A versao anterior
   (linear-gradient com inset) criava costura visivel em y~178 e apagava as
   estrelas dentro de um retangulo. Aqui a opacidade cai em todas as direcoes. */
.lp-hero-txt::before{
  content:"";position:absolute;inset:-18% -22% -18% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 34% 50%,var(--scrim),var(--scrim-fraco) 58%,transparent 82%);
}
.lp-selo{
  display:inline-block;background:var(--card);border:1px solid rgba(224,102,255,.42);
  color:#f2ddff;font-size:13px;padding:7px 14px;border-radius:20px;margin-bottom:16px;
  box-shadow:0 0 18px rgba(209,117,255,.28),inset 0 0 14px rgba(209,117,255,.10);
}
body.tema-claro .lp-selo{color:#6a2a9e;border-color:rgba(176,88,255,.40);
  box-shadow:0 2px 10px rgba(176,88,255,.12)}
.lp-hero h1{font-size:clamp(30px,4.1vw,48px);letter-spacing:-.02em;margin-bottom:15px;
  text-shadow:0 0 42px rgba(209,117,255,.35)}
body.tema-claro .lp-hero h1{text-shadow:none}
.lp-sub{color:#d3c3ea;font-size:16.5px;max-width:540px;margin:0 0 22px}
body.tema-claro .lp-sub{color:var(--txt2)}
.lp-cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.lp-provas{list-style:none;display:flex;gap:20px;padding:0;margin:0;color:var(--txt2);
  font-size:14px;flex-wrap:wrap}
.lp-provas li{white-space:nowrap}

.lp-hero-art{display:flex;justify-content:center}
/* Celular da LANDING (fora do editor): tamanho PROPRIO em pixels.
   A regra base .celular calcula a altura como % do pai, o que só funciona no
   editor (.celular-palco tem altura). Aqui o pai é item de grid centralizado,
   sem altura própria -- a conta virava circular e o aparelho colapsava para
   0x0, aparecendo como uma cápsula preta de ~40x85px. (Lucas, 28/09/2026)
   Especificidade 0,2,0 vence o .celular (0,1,0) sem depender da ordem. */
.celular.estatico{
  --larg:290px; --alt:590px;
  width:var(--larg); height:var(--alt);
  max-width:100%; max-height:none;
}
.celular-tela.demo{
  width:100%;height:100%;border-radius:34px;background:var(--tela-demo);overflow:hidden;
  padding:40px 16px 18px;display:flex;flex-direction:column;gap:9px;
}
.demo-topo{display:flex;align-items:center;gap:11px;margin-bottom:6px;color:#ffffff}
body.tema-claro .demo-topo{color:#150a24}
.demo-emoji{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#d175ff,#b058ff);box-shadow:0 0 16px rgba(209,117,255,.45)}
.demo-topo b{display:block;font-size:15px}
.demo-topo small{color:#bfa8dd;font-size:12px}
body.tema-claro .demo-topo small{color:#6f5f8d}
.demo-item{display:flex;align-items:center;gap:10px;background:rgba(40,18,72,.72);border-radius:11px;
  padding:11px 12px;color:#ddd0f0;font-size:13.5px}
body.tema-claro .demo-item{background:rgba(255,255,255,.9);color:#33244f;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.demo-item i{width:17px;height:17px;border-radius:5px;border:2px solid rgba(209,117,255,.45);
  flex:0 0 auto;position:relative}
.demo-item.feito{opacity:.55}
/* No claro, opacidade .55 sobre fundo branco deixava a tarefa concluída no
   limite da legibilidade — no claro a de-ênfase é menor. */
body.tema-claro .demo-item.feito{opacity:.72}
/* concluido: mesma forma, cor da marca (o verde era o unico fora da paleta) */
.demo-item.feito i{background:linear-gradient(135deg,#d175ff,#b058ff);border-color:#d175ff}
.demo-item.feito i::after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.demo-item.feito span{text-decoration:line-through}
.demo-add{margin-top:auto;background:linear-gradient(135deg,#d175ff,#b058ff);color:#fff;
  text-align:center;padding:13px;border-radius:12px;font-weight:600;font-size:14px}

.lp-sec{padding:56px 0;border-top:1px solid var(--linha)}
.lp-sec h2{font-size:clamp(23px,2.7vw,33px);margin-bottom:10px;letter-spacing:-.01em}
.lp-sec-sub{color:var(--txt2);margin:0 0 26px}
.lp-passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;margin-top:26px}
.lp-passo{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--linha);
  border-radius:var(--r);padding:24px}
.lp-passo .num{
  display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:800;margin-bottom:14px;
  box-shadow:0 0 20px rgba(209,117,255,.45);
}
.lp-passo b{display:block;margin-bottom:7px;font-size:17px}
.lp-passo p{color:var(--txt2);margin:0;font-size:14.5px}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:26px}
.lp-card{background:var(--card);backdrop-filter:blur(12px);
  border:1px solid var(--linha);border-radius:var(--r);padding:22px;
  transition:border-color .16s,transform .16s}
.lp-card:hover{border-color:var(--neon);transform:translateY(-2px);
  box-shadow:0 0 26px rgba(209,117,255,.26)}
.lp-card .ic{font-size:26px;display:block;margin-bottom:12px}
.lp-card b{display:block;margin-bottom:6px}
.lp-card p{color:var(--txt2);margin:0;font-size:14px}
.lp-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:13px}
.lp-mod{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--linha);
  border-radius:12px;padding:16px;
  display:flex;gap:12px;align-items:center}
.lp-mod .e{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:20px;flex:0 0 auto}
.lp-mod b{display:block;font-size:14.5px}
.lp-mod small{color:var(--txt3);font-size:12px}
.lp-fechamento{text-align:center;margin-top:34px}
.lp-pe{border-top:1px solid var(--linha);padding:26px 0 0;color:var(--txt3);font-size:13.5px;text-align:center}

/* =================== LOGIN =================== */
.auth-tela{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden}
.auth-voltar{position:absolute;top:max(16px,env(safe-area-inset-top));left:16px;z-index:2}
.auth-brilho{
  position:absolute;inset:-30% -10% auto -10%;height:70vh;pointer-events:none;
  background:radial-gradient(60% 60% at 30% 20%,rgba(209,117,255,.20),transparent 70%),
             radial-gradient(50% 50% at 75% 10%,rgba(176,88,255,.16),transparent 70%);
}
.auth-caixa{
  position:relative;width:100%;max-width:430px;background:var(--card);
  backdrop-filter:blur(18px);
  border:1px solid var(--linha);border-radius:20px;padding:30px 26px;box-shadow:var(--sombra);
}
.auth-marca{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.auth-marca-txt{min-width:0}
.auth-lockup{display:flex;align-items:center;gap:2px}
.auth-marca p{margin:8px 0 0;color:var(--txt2);font-size:13.5px}
.auth-abas{display:flex;gap:6px;background:var(--bg2);padding:5px;border-radius:12px;margin-bottom:20px}
.aba{flex:1;background:transparent;border:0;padding:11px;border-radius:9px;cursor:pointer;
  color:var(--txt2);font-weight:600;min-height:44px}
.aba.ativa{background:var(--card2);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.campo{display:block;margin-bottom:15px}
.campo>span{display:block;font-size:13px;color:var(--txt2);margin-bottom:7px;font-weight:550}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--bg2);border:1px solid var(--linha);border-radius:11px;
  padding:13px 14px;min-height:48px;font-size:15px;
}
/* O select tinha o valor cortado ("Padrão da plataforma (claude") porque o texto
   ia por baixo da seta nativa. Reserva espaço à direita. */
.campo select{padding-right:34px;text-overflow:ellipsis}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(209,117,255,.28),var(--glow)}
.auth-form .btn-principal{width:100%;margin-top:6px}
.campo-dica{display:block;color:var(--txt3);font-size:12px;margin-top:6px}
.auth-erro,.aviso-erro{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fca5a5;
  padding:11px 13px;border-radius:10px;font-size:13.5px;margin:0 0 14px;
}
.aviso-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac;
  padding:11px 13px;border-radius:10px;font-size:13.5px;margin:0 0 14px}
.auth-lista{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--linha);
  color:var(--txt2);font-size:13.5px}
.auth-lista li{margin-bottom:9px}
.auth-lista b{color:var(--acc);margin-right:7px}

/* =================== APP LOGADO =================== */
.app{display:flex;min-height:100vh}
.lateral{
  width:var(--lat);flex:0 0 var(--lat);background:var(--bg2);backdrop-filter:blur(16px);
  border-right:1px solid var(--linha);
  display:flex;flex-direction:column;padding:16px 12px;position:fixed;inset:0 auto 0 0;z-index:40;
  padding-top:max(16px,env(safe-area-inset-top));
}
.lateral-marca{display:flex;align-items:center;gap:10px;padding:6px 8px 20px;font-size:16px}
.menu{display:flex;flex-direction:column;gap:3px}
.menu-item{
  display:flex;align-items:center;gap:11px;background:transparent;border:0;text-align:left;
  padding:12px 12px;border-radius:10px;cursor:pointer;color:var(--txt2);font-weight:550;min-height:46px;
}
.menu-item:hover{background:var(--card2);color:var(--txt)}
.menu-item.ativo{background:linear-gradient(135deg,rgba(209,117,255,.26),rgba(176,88,255,.18));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(224,102,255,.42),0 0 18px rgba(209,117,255,.22)}
/* No claro o fundo do item ativo é lavanda PÁLIDA, então texto branco vira
   invisível (medido ~1,2:1 em revisão). No claro o ativo usa roxo escuro sobre
   fundo um pouco mais saturado. */
body.tema-claro .menu-item.ativo{
  background:linear-gradient(135deg,rgba(176,88,255,.16),rgba(154,71,224,.12));
  color:#58208a;
  box-shadow:inset 0 0 0 1px rgba(176,88,255,.30),0 1px 4px rgba(0,0,0,.08)}
body.tema-claro .menu-item:hover{color:#3b1a75}
.menu-item .mi{font-size:17px;width:22px;text-align:center}
.lateral-pe{margin-top:auto;border-top:1px solid var(--linha);padding-top:14px}
.lateral-user{display:flex;align-items:center;gap:10px;padding:6px 8px 12px;min-width:0}
.avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:700;font-size:14px}
.lateral-user-txt{min-width:0}
.lateral-user-txt b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral-user-txt small{color:var(--txt3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
.lateral-pe .btn-fantasma{width:100%;justify-content:flex-start}

.conteudo{flex:1;min-width:0;margin-left:var(--lat)}
.barra{
  display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--linha);
  background:var(--bg2);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20;min-height:64px;
  padding-top:max(12px,env(safe-area-inset-top));
}
.barra-titulo{font-size:19px;flex:1;min-width:0}
.barra-dir{display:flex;align-items:center;gap:9px}
.btn-menu{display:none;background:transparent;border:0;font-size:21px;cursor:pointer;
  width:44px;height:44px;border-radius:10px;color:var(--txt2)}
.btn-menu:hover{background:var(--card2)}
.veu{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:35}
body.tema-claro .veu{background:rgba(26,26,26,.38)}
.painel-area{padding:24px 22px 60px;max-width:1160px}
.chip-fila{font-size:12.5px;padding:6px 11px;border-radius:20px;font-weight:600;
  background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}

/* ---- creditos ---- */
.chip-credito{
  font-size:12.5px;padding:6px 11px;border-radius:20px;font-weight:650;white-space:nowrap;
  background:rgba(34,211,238,.13);color:#67e8f9;border:1px solid rgba(34,211,238,.32);
}
/* Saldo curto vira alerta: o cliente precisa notar ANTES de nao poder mais gerar */
.chip-credito.baixo{background:rgba(245,158,11,.16);color:#fcd34d;border-color:rgba(245,158,11,.38)}
/* Admin: ilimitado, na cor da marca (nao e alerta nem saldo) */
.chip-credito.ilimitado{background:rgba(209,117,255,.16);color:#f2ddff;border-color:rgba(209,117,255,.38)}
body.tema-claro .chip-credito.ilimitado{background:rgba(176,88,255,.10);color:#6a2a9e;
  border-color:rgba(176,88,255,.30)}
.aviso-ilimitado{
  margin:0 0 14px;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;
  background:rgba(209,117,255,.12);border:1px solid rgba(209,117,255,.30);color:#f2ddff;
}
body.tema-claro .aviso-ilimitado{background:rgba(176,88,255,.08);
  border-color:rgba(176,88,255,.26);color:#6a2a9e}
body.tema-claro .chip-credito{background:rgba(8,145,178,.10);color:#0e7490;border-color:rgba(8,145,178,.30)}
body.tema-claro .chip-credito.baixo{background:rgba(180,83,9,.10);color:#92400e;border-color:rgba(180,83,9,.30)}

/* Botao de APK travado por plano: some o ar de "clicavel", mas continua visivel
   (e ele que mostra ao cliente de teste o que ele ganha ao liberar a conta). */
.btn-principal.bloqueado-plano{
  opacity:.55;cursor:not-allowed;filter:grayscale(.45);
}
/* Aviso de conta de teste embaixo da previa */
.previa-nota.aviso-plano{
  color:#fcd34d;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.34);
  border-radius:10px;padding:11px 14px;max-width:420px;line-height:1.5;font-size:13px;
}
body.tema-claro .previa-nota.aviso-plano{color:#92400e;background:rgba(180,83,9,.08);
  border-color:rgba(180,83,9,.26)}

/* ---- dashboard ---- */
.saudacao{margin-bottom:22px}
.saudacao h2{font-size:25px;margin-bottom:5px}
.saudacao p{color:var(--txt2);margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:26px}
.kpi{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--linha);border-radius:var(--r);padding:18px}
.kpi .v{font-size:29px;font-weight:750;letter-spacing:-.02em;line-height:1.1;
  text-shadow:0 0 22px rgba(209,117,255,.42)}
body.tema-claro .kpi .v{text-shadow:none;color:#58208a}
.kpi .l{color:var(--txt2);font-size:13px;margin-top:5px}
.kpi .e{font-size:19px;margin-bottom:9px;display:block}
.bloco{margin-bottom:30px}
.bloco-cabeca{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.bloco-cabeca h3{font-size:17px}
.bloco-cabeca .btn-fantasma{padding:8px 12px;min-height:44px;font-size:13.5px}

.grade-projetos{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card-projeto{
  background:var(--card);backdrop-filter:blur(12px);
  border:1px solid var(--linha);border-radius:var(--r);padding:19px;
  cursor:pointer;transition:border-color .16s,transform .16s;position:relative;
}
.card-projeto:hover{border-color:var(--neon);transform:translateY(-2px);
  box-shadow:0 0 26px rgba(209,117,255,.26)}
.card-projeto h3{font-size:16.5px;margin-bottom:5px;padding-right:34px}
.card-projeto .meta{color:var(--txt3);font-size:12.5px}
.card-projeto .selo{display:inline-block;margin-top:12px;font-size:11.5px;padding:4px 9px;
  border-radius:14px;background:var(--card2);color:var(--txt2);border:1px solid var(--linha)}
.card-projeto .selo.tem{background:rgba(34,197,94,.13);color:#86efac;border-color:rgba(34,197,94,.28)}
.card-icone{width:44px;height:44px;border-radius:12px;margin-bottom:13px;display:grid;
  place-items:center;font-size:22px}
.btn-apagar{position:absolute;top:13px;right:11px;background:transparent;border:0;color:var(--txt3);
  cursor:pointer;font-size:17px;padding:5px 8px;border-radius:8px;line-height:1}
.btn-apagar:hover{background:rgba(239,68,68,.15);color:#fca5a5}
.vazio{grid-column:1/-1;text-align:center;padding:54px 20px;color:var(--txt2);
  border:1px dashed var(--linha);border-radius:var(--r)}
.vazio .emoji{font-size:44px;display:block;margin-bottom:12px}
.vazio b{color:var(--txt);display:block;margin-bottom:6px;font-size:16px}
.vazio .btn-principal{margin-top:16px}

/* ---- lista de APKs ---- */
.lista{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.item{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--linha)}
.item:last-child{border-bottom:0}
.item-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:19px;flex:0 0 auto}
.item-txt{flex:1;min-width:0}
.item-txt b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-txt small{color:var(--txt3);font-size:12.5px}
.item-dir{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.tag{font-size:11.5px;padding:4px 9px;border-radius:13px;font-weight:600;white-space:nowrap}
.tag.ok{background:rgba(34,197,94,.14);color:#86efac}
.tag.erro{background:rgba(239,68,68,.14);color:#fca5a5}
.tag.andando{background:rgba(209,117,255,.2);color:#f2ddff}
body.tema-claro .tag.ok,body.tema-claro .chip-status.ok,
body.tema-claro .aviso-ok,body.tema-claro .card-projeto .selo.tem{color:#15803d}
body.tema-claro .tag.erro,body.tema-claro .chip-status.erro,
body.tema-claro .auth-erro,body.tema-claro .aviso-erro,
body.tema-claro .bolha.erro,body.tema-claro .build-erro,
body.tema-claro .perigo-zona h3{color:#b91c1c}
body.tema-claro .btn-fantasma.perigo:hover{color:#b91c1c}
.btn-baixar{background:var(--card2);border:1px solid var(--linha);color:var(--txt);padding:8px 13px;
  border-radius:9px;font-size:13px;font-weight:600;min-height:38px;display:inline-flex;align-items:center}
.btn-baixar:hover{border-color:var(--acc)}

/* ---- modelos ---- */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.filtro{background:var(--card);border:1px solid var(--linha);color:var(--txt2);padding:9px 15px;
  border-radius:20px;cursor:pointer;font-size:13.5px;min-height:42px}
.filtro.ativo{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;border-color:transparent}
.grade-modelos{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card-modelo{background:var(--card);backdrop-filter:blur(12px);
  border:1px solid var(--linha);border-radius:var(--r);padding:19px;
  cursor:pointer;transition:border-color .16s,transform .16s;display:flex;flex-direction:column}
.card-modelo:hover{border-color:var(--neon);transform:translateY(-2px);
  box-shadow:0 0 26px rgba(209,117,255,.26)}
.card-modelo .top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.card-modelo .e{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:22px;flex:0 0 auto}
.card-modelo h3{font-size:16px}
.card-modelo .cat{color:var(--txt3);font-size:12px}
.card-modelo p{color:var(--txt2);font-size:13.5px;margin:0 0 15px;flex:1}
.card-modelo .usar{background:var(--card2);border:1px solid var(--linha);color:var(--txt);
  padding:10px;border-radius:10px;text-align:center;font-weight:600;font-size:13.5px;min-height:42px;
  display:flex;align-items:center;justify-content:center}
.card-modelo:hover .usar{background:linear-gradient(135deg,var(--acc),var(--acc2));
  border-color:transparent;color:#fff}

/* ---- aba Clientes (admin) ---- */
.busca-clientes{
  background:var(--bg2);border:1px solid var(--linha);border-radius:11px;
  padding:11px 14px;min-height:44px;font-size:14.5px;min-width:0;width:270px;max-width:100%;
}
.busca-clientes:focus{outline:0;border-color:var(--acc)}
/* A linha de cliente empilha em 3 linhas de texto, então não centraliza vertical */
.item-cliente{align-items:flex-start}
.item-cliente .item-txt b{display:flex;align-items:center;gap:7px;flex-wrap:wrap;white-space:normal}
.item-cliente .item-txt small{display:block;white-space:normal}
.item-cliente .item-txt small.motivo{color:var(--txt2);margin-top:3px}
.item-cliente.bloqueado{background:rgba(239,68,68,.05)}
body.tema-claro .item-cliente.bloqueado{background:rgba(185,28,28,.05)}
.item-cliente .item-dir{align-self:center}
.item-cliente .btn-fantasma.perigo{padding:8px 13px;min-height:38px;font-size:13px}

/* ---- creditos: cartao em Configuracoes ---- */
.creditos-kpis{grid-template-columns:1fr 1fr;margin-bottom:16px}
.aviso-teste{
  margin:14px 0 0;padding:11px 13px;border-radius:10px;font-size:13px;line-height:1.5;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.28);color:#fcd34d;
}
body.tema-claro .aviso-teste{background:rgba(180,83,9,.08);border-color:rgba(180,83,9,.26);color:#92400e}
.extrato{margin-top:16px;border-top:1px solid var(--linha);padding-top:6px}
.extrato-linha{
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--linha);font-size:13.5px;
}
.extrato-linha:last-child{border-bottom:0}
.extrato-linha small{grid-column:1/-1;color:var(--txt3);font-size:11.5px}
.extrato-linha b.saida{color:#fca5a5}
.extrato-linha b.entrada{color:#86efac}
body.tema-claro .extrato-linha b.saida{color:#b91c1c}
body.tema-claro .extrato-linha b.entrada{color:#15803d}

/* ---- planos de credito ---- */
.planos-grade{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-bottom:18px}
.plano{
  background:var(--bg2);border:1px solid var(--linha);border-radius:14px;padding:18px 16px;
  display:flex;flex-direction:column;gap:6px;position:relative;
}
/* O destacado precisa SALTAR: e o plano que paga a conta */
.plano.destacado{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--glow)}
.plano.avulso{opacity:.92}
.plano-selo{
  position:absolute;top:-10px;left:16px;font-size:11px;font-weight:700;letter-spacing:.03em;
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  padding:3px 9px;border-radius:12px;text-transform:uppercase;
}
.plano h4{margin:0;font-size:16.5px}
.plano-preco{font-size:26px;font-weight:750;letter-spacing:-.02em;line-height:1.1}
.plano-preco small{font-size:13px;font-weight:500;color:var(--txt3);letter-spacing:0}
.plano-cred{color:var(--acc);font-weight:650;font-size:14.5px}
body.tema-claro .plano-cred{color:#9a47e0}
.plano-resumo{color:var(--txt2);font-size:13.5px;margin:2px 0 4px;min-height:2.7em}
/* Preço por milhão de token: mostra que o pacote maior sai mais barato sem o
   cliente precisar dividir de cabeça. Informação SECUNDÁRIA de propósito — sem
   regra própria herdava 15px branco e disputava com o preço principal. Mono
   porque é número de comparação, e alinha entre os cartões. (Lucas, 28/09/2026) */
.plano-pm{
  font-size:11px;color:var(--txt3);font-family:var(--mono);
  margin:0 0 10px;letter-spacing:-.2px;
}
/* ===== CHECKOUT PIX (dentro do bloco de pacotes) =====
   Ocupa a largura da grade de pacotes com grid-column:1/-1 — a grade é de
   colunas e sem isso o checkout entraria numa coluna só, estreito. */
.pix{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--linha);border-radius:var(--r);
  padding:20px 18px;box-shadow:var(--sombra);
}
.pix-voltar{
  align-self:flex-start;background:transparent;border:0;color:var(--txt2);
  font-size:13px;cursor:pointer;padding:6px 2px;min-height:auto;
}
.pix-voltar:hover{color:var(--acc)}
.pix-topo{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pix-topo b{font-size:17px}
.pix-topo span{font-size:13px;color:var(--txt2)}
/* Fundo BRANCO no QR de propósito: o PNG do Asaas é preto sobre transparente e
   num tema escuro fica ilegível para a câmera. */
.pix-qr{
  width:220px;height:220px;background:#fff;border-radius:10px;padding:8px;
  box-shadow:0 0 24px rgba(209,117,255,.22);
}
.pix-copia{display:flex;flex-direction:column;gap:6px;width:100%;max-width:420px}
.pix-copia>span{font-size:12px;color:var(--txt3)}
.pix-copia-linha{display:flex;gap:8px}
.pix-copia-linha input{
  flex:1;min-width:0;background:var(--bg2);border:1px solid var(--linha);
  border-radius:9px;padding:10px 12px;color:var(--txt2);font-size:12px;
  font-family:var(--mono);
}
.pix-copia-linha .btn-secundario{white-space:nowrap;padding:10px 14px;min-height:auto}
/* UMA linha de status, que vira confirmado sozinha enquanto o cliente olha. */
.pix-status{
  display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt2);
  background:var(--bg2);border:1px solid var(--linha);border-radius:9px;
  padding:10px 14px;width:100%;max-width:420px;justify-content:center;
}
.pix-status.ok{color:#86efac;border-color:rgba(34,197,94,.38);background:rgba(34,197,94,.10)}
.pix-status.expirado{color:#fca5a5;border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.09)}
.pix-bolinha{
  width:9px;height:9px;border-radius:50%;background:var(--acc);flex-shrink:0;
  animation:pixPulsa 1.3s ease-in-out infinite;
}
@keyframes pixPulsa{
  0%,100%{opacity:.35;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.12)}
}
@media (prefers-reduced-motion:reduce){ .pix-bolinha{animation:none;opacity:.9} }
.pix-outro{font-size:12.5px;color:var(--txt3);text-decoration:underline}
.pix-outro:hover{color:var(--acc)}
.pix-nota{
  font-size:12px;color:var(--txt3);text-align:center;margin:0;max-width:420px;
  line-height:1.5;
}
.pix-erro{
  grid-column:1/-1;background:rgba(239,68,68,.11);border:1px solid rgba(239,68,68,.3);
  color:#fca5a5;padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:10px;
}
.plano-itens{list-style:none;margin:0 0 14px;padding:0;color:var(--txt2);font-size:13px;
  display:flex;flex-direction:column;gap:5px}
.plano-itens li::before{content:"✓ ";color:var(--ok);font-weight:700}
.plano .btn-principal,.plano .btn-secundario{
  width:100%;margin-top:auto;
  /* Texto do CTA ("Falar com o suporte") encostava na borda do cartao em telas
     estreitas: padding menor e quebra permitida resolvem. */
  padding:12px 10px;white-space:normal;line-height:1.3;text-align:center;
}

/* Consumo em LISTA VERTICAL: em linha corrida o olho emparelhava o numero com o
   rotulo errado, e o numero aparecia sem unidade. */
.planos-consumo{border-top:1px solid var(--linha);padding-top:14px;font-size:13px}
.consumo-titulo{display:block;margin-bottom:10px;font-size:13.5px}
.consumo-linhas{display:grid;gap:0}
.consumo-linhas span{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--linha)}
.consumo-linhas span:last-child{border-bottom:0}
.consumo-linhas i{font-style:normal;color:var(--txt2)}
.consumo-linhas i em{font-style:normal;color:var(--txt3);font-size:11.5px}
.consumo-linhas b{color:var(--txt);white-space:nowrap;font-weight:650}
/* Nota como LISTA: em paragrafo unico o ponto principal se perdia no meio */
.consumo-nota{color:var(--txt3);font-size:12px;margin:12px 0 0;padding:0;
  list-style:none;display:flex;flex-direction:column;gap:5px;line-height:1.5}
.consumo-nota li::before{content:"•  ";color:var(--acc)}

/* ---- configurações ---- */
.conf{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));align-items:start}
.painel-card{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--linha);border-radius:var(--r);padding:22px}
.painel-card h3{font-size:16.5px;margin-bottom:5px}
.painel-card .dica{color:var(--txt3);font-size:13px;margin:0 0 18px}
.painel-card.largo{grid-column:1/-1}
.linha-info{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--linha);font-size:14px}
.linha-info:last-child{border-bottom:0}
.linha-info span{color:var(--txt2);flex:0 0 auto}
/* O e-mail longo quebrava no meio da palavra e deixava uma letra órfã. Quebra só
   onde faz sentido (@ e .) e o rótulo não encolhe mais. */
.linha-info b{text-align:right;min-width:0;overflow-wrap:anywhere;word-break:normal}
.linha-check{display:flex;gap:12px;align-items:flex-start;padding:13px;background:var(--bg2);
  border:1px solid var(--linha);border-radius:11px;cursor:pointer;margin-bottom:14px}
.linha-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--acc);flex:0 0 auto}
.linha-check b{display:block;font-size:14.5px}
.linha-check small{color:var(--txt3);font-size:12.5px;display:block}
.seg{display:flex;gap:5px;background:var(--bg2);padding:5px;border-radius:11px;border:1px solid var(--linha);
  overflow:hidden}   /* sem isto a pílula ativa transbordava o canto arredondado */
.seg button{flex:1;background:transparent;border:0;padding:11px 8px;border-radius:8px;cursor:pointer;
  color:var(--txt2);font-weight:600;font-size:13.5px;min-height:44px}
.seg button.ativo{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff}
.barra-uso{height:7px;background:var(--bg2);border-radius:4px;overflow:hidden;margin:7px 0 3px;
  border:1px solid var(--linha)}
.barra-uso i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.perigo-zona{border-color:rgba(239,68,68,.35)}
.perigo-zona h3{color:#fca5a5}


/* =================== EDITOR =================== */
.editor{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--linha);background:var(--bg2);
  backdrop-filter:blur(16px);
  position:sticky;top:0;z-index:20;min-height:62px;padding-top:max(11px,env(safe-area-inset-top));
}
.topo-marca{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.topo-dir{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.proj-icone{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-size:18px;flex:0 0 auto}
.nome-projeto{
  background:transparent;border:1px solid transparent;border-radius:9px;padding:8px 11px;
  font-weight:650;font-size:16px;min-width:0;width:100%;max-width:260px;
}
.nome-projeto:hover{border-color:var(--linha)}
.nome-projeto:focus{outline:0;border-color:var(--acc);background:var(--card)}
.chip-status{font-size:12.5px;padding:6px 11px;border-radius:20px;font-weight:600;white-space:nowrap;
  background:rgba(209,117,255,.18);color:#f2ddff;border:1px solid rgba(209,117,255,.38)}
body.tema-claro .chip-status{color:#6a2a9e;background:rgba(176,88,255,.10)}
body.tema-claro .bolha.ia{box-shadow:0 1px 3px rgba(0,0,0,.07)}
body.tema-claro .tag.andando{background:rgba(176,88,255,.12);color:#6a2a9e}
body.tema-claro .chip-fila{background:rgba(180,83,9,.10);color:#92400e;
  border-color:rgba(180,83,9,.26)}
body.tema-claro .lp-card:hover,body.tema-claro .card-projeto:hover,
body.tema-claro .card-modelo:hover{box-shadow:0 8px 22px rgba(0,0,0,.14)}
body.tema-claro .celular-moldura{
  box-shadow:0 0 0 2px rgba(176,88,255,.28),0 0 22px rgba(176,88,255,.18),
             0 18px 44px rgba(0,0,0,.22)}
body.tema-claro .codigo-area{background:#faf8ff}
.chip-status.ok{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(34,197,94,.3)}
.chip-status.erro{background:rgba(239,68,68,.14);color:#fca5a5;border-color:rgba(239,68,68,.3)}

/* Duas colunas: CHAT MAIOR que a prévia.
   Antes era 1fr / 1.05fr — o lado da prévia ficava com 51% e sobravam ~390px de
   vazio lateral, porque a moldura não pode crescer além da altura do palco.
   Medido em 1440px: prévia com 738px para um celular de 340px. */
.editor-corpo{flex:1;display:grid;grid-template-columns:minmax(360px,1.25fr) minmax(400px,1fr);min-height:0}
.lado-chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--linha)}
.chat-rolagem{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.bolha{max-width:88%;padding:12px 15px;border-radius:15px;font-size:14.5px;
  white-space:pre-wrap;word-break:break-word}
.bolha.user{align-self:flex-end;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  border-bottom-right-radius:5px}
.bolha.ia{align-self:flex-start;background:var(--card);border:1px solid var(--linha);
  border-bottom-left-radius:5px}
.bolha.erro{align-self:flex-start;background:rgba(239,68,68,.11);
  border:1px solid rgba(239,68,68,.32);color:#fca5a5}
/* Custo do pedido: informativo, discreto, alinhado com a resposta da IA */
.bolha.custo{align-self:flex-start;background:transparent;border:1px dashed var(--linha);
  color:var(--txt3);font-size:12.5px;padding:8px 12px;max-width:100%}
.bolha.pensando{display:flex;gap:6px;align-items:center;color:var(--txt2)}
.bolha.pensando i{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:pulsa 1.3s infinite}
.bolha.pensando i:nth-child(2){animation-delay:.18s}
.bolha.pensando i:nth-child(3){animation-delay:.36s}
@keyframes pulsa{0%,60%,100%{opacity:.25;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
.chat-boas{text-align:center;color:var(--txt2);padding:34px 18px;margin:auto 0}
.chat-boas .emoji{font-size:40px;display:block;margin-bottom:12px}
.chat-boas b{color:var(--txt);display:block;margin-bottom:6px;font-size:16px}

.chat-compositor{padding:0 14px 14px;background:var(--bg2);border-top:1px solid var(--linha)}
.chat-dicas-linha{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:7px;align-items:center;padding:11px 0 9px}
.chat-dicas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;min-width:0}
.chat-dicas::-webkit-scrollbar{display:none}
.chat-dicas button{flex:0 0 auto;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--card);border:1px solid var(--linha);color:var(--txt2);font-size:12.5px;
  padding:8px 13px;border-radius:999px;cursor:pointer;min-height:34px}
.chat-dicas button:hover{border-color:var(--acc);color:var(--txt)}
.chat-dicas-seta{width:32px;height:32px;border-radius:50%;border:1px solid var(--linha);background:var(--card);
  color:var(--txt2);font-size:22px;display:grid;place-items:center;cursor:pointer;line-height:1}
.chat-forma{display:flex;flex-direction:column;gap:9px;padding:13px;background:var(--card);border:1px solid var(--linha);
  border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.chat-forma:focus-within{border-color:rgba(209,117,255,.62);box-shadow:0 0 0 1px rgba(209,117,255,.15)}
.chat-entrada{width:100%;background:transparent;border:0;color:var(--txt);padding:3px 3px 1px;resize:none;
  max-height:170px;min-height:58px;font-size:15px;line-height:1.5;scrollbar-width:thin}
.chat-entrada:focus{outline:0}.chat-entrada::placeholder{color:var(--txt3)}
.chat-ferramentas{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chat-ferramentas-esq,.chat-ferramentas-dir{display:flex;align-items:center;gap:8px}
.btn-chat-circular{width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);background:var(--bg2);
  color:var(--txt);font-size:21px;display:grid;place-items:center;cursor:pointer;line-height:1}
.modo-seletor{position:relative}.modo-atual{height:36px;display:flex;align-items:center;gap:8px;border:1px solid var(--linha);
  border-radius:999px;background:var(--bg2);color:var(--txt);padding:0 13px;cursor:pointer;font-weight:650}
.modo-atual i{font-style:normal;color:var(--txt3);font-size:12px}.modo-menu{position:absolute;left:0;bottom:44px;
  width:230px;padding:7px;background:var(--card);border:1px solid var(--linha);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:25}
.modo-menu button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px;
  border:0;border-radius:9px;background:transparent;color:var(--txt2);cursor:pointer;text-align:left}
.modo-menu button small{color:var(--txt3)}.modo-menu button:hover,.modo-menu button.ativo{background:var(--bg2);color:var(--txt)}
.btn-microfone{font-size:0}.btn-microfone::before{content:'';width:10px;height:15px;border:2px solid currentColor;
  border-radius:7px}.btn-microfone::after{content:'';position:absolute;width:14px;height:8px;border:2px solid currentColor;
  border-top:0;border-radius:0 0 9px 9px;margin-top:8px}.btn-microfone{position:relative}
.btn-microfone.gravando{color:#f87171;box-shadow:0 0 0 5px rgba(248,113,113,.12)}
.btn-enviar{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;color:#190524;
  background:linear-gradient(135deg,#df71ff,#b94cff);display:grid;place-items:center;box-shadow:0 0 18px rgba(209,117,255,.32)}
.btn-enviar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-enviar[disabled]{opacity:.45;cursor:not-allowed}.anexo-status{font-size:12px;color:var(--txt2);padding:7px 9px;
  border-radius:9px;background:var(--bg2);border:1px solid var(--linha);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lado-previa{display:flex;flex-direction:column;min-height:0;
  background:radial-gradient(70% 55% at 50% 0%,rgba(209,117,255,.13),transparent 70%)}
.previa-barra{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
  border-bottom:1px solid var(--linha);color:var(--txt2);font-size:13px;min-height:52px}
.celular-palco{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:8px 16px 10px;min-height:0;overflow:auto}
.previa-nota{color:var(--txt3);font-size:12.5px;text-align:center}

/* moldura de celular
   TAMANHO ELASTICO (Lucas, 28/09/2026: "a previa esta muito pequena, nao parece
   um celular real"). Antes era fixo em 330x678 e sobravam 408px de largura numa
   tela de 1440 — o aparelho ficava perdido no meio do palco.

   Agora a altura ocupa o palco (menos a folga) e a LARGURA vem da proporcao, via
   aspect-ratio: 9/19.5. Essa e a proporcao real de iPhone 14/15 e Galaxy S2x, que
   e o que faz ler como celular; 330x678 dava 2.05 (achatado).
   Os tetos evitam o efeito oposto: num monitor grande, um "celular" de 600px de
   largura parece tablet. */
.celular{
  --larg:330px; --alt:678px;                  /* fallback: navegador sem aspect-ratio */
  width:var(--larg); height:var(--alt);
  aspect-ratio:9 / 19.5;
  /* A ALTURA manda (celular é vertical), com dois limites:
       - `calc(100% - 20px)` reserva a linha da legenda, que antes era empurrada
         para fora da tela;
       - 860px evita que num monitor alto o "celular" fique do tamanho de um
         tablet.
     A largura sai da proporção, e `max-width` protege telas estreitas. */
  height:min(860px, calc(100% - 20px));
  width:auto;
  max-width:100%;
  flex:0 0 auto;position:relative;
}
/* Raio e espessura acompanham o tamanho: moldura fina num aparelho grande parece
   monitor, e grossa num pequeno parece brinquedo. */
.celular-moldura{position:absolute;inset:0;background:#000;
  border-radius:clamp(38px,7.5%,60px);padding:clamp(9px,2.6%,14px);
  box-shadow:0 0 0 2px rgba(233,196,255,.65),0 0 16px rgba(224,102,255,.7),
             0 0 46px rgba(209,117,255,.5),0 0 100px rgba(176,88,255,.34),
             0 22px 55px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.09)}
.celular-tela{width:100%;height:100%;border:0;border-radius:clamp(30px,6%,50px);
  background:#0b0f19;display:block}
/* Ilha e barrinha em % da largura: em px elas desalinhavam quando o aparelho
   crescia (ilha pequena no meio de uma moldura grande). */
.celular-ilha{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);
  width:26%;height:3.1%;min-height:18px;background:#000;border-radius:14px;
  z-index:3;pointer-events:none}
.celular-barrinha{position:absolute;bottom:2.1%;left:50%;transform:translateX(-50%);
  width:34%;height:4px;background:rgba(255,255,255,.35);border-radius:3px;
  z-index:3;pointer-events:none}

/* =================== MODAIS =================== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(7px);
  display:grid;place-items:center;padding:18px;z-index:60;overflow:auto}
.modal-caixa{background:rgba(18,7,36,.92);backdrop-filter:blur(20px);
  border:1px solid var(--linha);border-radius:18px;padding:26px;
  width:100%;max-width:470px;box-shadow:var(--sombra);margin:auto}
body.tema-claro .modal{background:rgba(26,26,26,.42)}
body.tema-claro .modal-caixa{background:rgba(255,255,255,.97)}
.modal-caixa.larga{max-width:880px}
.modal-caixa h3{font-size:19px;margin-bottom:18px}
.modal-acoes{display:flex;gap:9px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.op-grade{display:grid;grid-template-columns:1fr 130px;gap:12px}
.icone-escolha{display:flex;gap:13px;align-items:flex-start}
.icone-previa{width:62px;height:62px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;
  font-size:30px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.icone-lista{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.icone-lista button{width:42px;height:42px;border-radius:10px;border:1px solid var(--linha);
  background:var(--bg2);cursor:pointer;font-size:19px;line-height:1}
.icone-lista button.ativo{border-color:var(--neon);box-shadow:0 0 0 2px rgba(224,102,255,.4),var(--glow)}
.cores{display:flex;gap:8px;flex-wrap:wrap}
.cores button{width:38px;height:38px;border-radius:10px;border:2px solid transparent;cursor:pointer}
.cores button.ativo{border-color:#fff;box-shadow:0 0 0 2px rgba(224,102,255,.6),var(--glow)}
.op-info{display:flex;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--linha);
  flex-wrap:wrap}
.op-info small{display:block;color:var(--txt3);font-size:11.5px;margin-bottom:3px}
.op-info code{font-size:12px;color:var(--txt2);word-break:break-all}
.passos-build{display:flex;flex-direction:column;gap:13px;margin-bottom:16px}
.passo{display:flex;align-items:center;gap:12px;color:var(--txt3);font-size:14px}
.passo i{width:19px;height:19px;border-radius:50%;border:2px solid var(--linha);flex:0 0 auto;
  display:grid;place-items:center;font-size:11px;font-style:normal}
.passo.ativo{color:var(--txt)}
.passo.ativo i{border-color:var(--acc);border-top-color:transparent;animation:gira .8s linear infinite}
.passo.feito{color:var(--ok)}
.passo.feito i{border-color:var(--ok);background:var(--ok);color:#052e12;animation:none}
.passo.feito i::after{content:"✓"}
.build-nota{color:var(--txt3);font-size:13px;margin:0}
.build-erro{background:rgba(239,68,68,.11);border:1px solid rgba(239,68,68,.3);color:#fca5a5;
  padding:12px;border-radius:10px;font-size:13px;margin-top:14px;max-height:190px;overflow:auto;
  white-space:pre-wrap;word-break:break-word}
.codigo-area{background:var(--bg);border:1px solid var(--linha);border-radius:11px;padding:15px;
  max-height:62vh;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.6;margin:0;color:var(--txt2)}

/* =================== RESPONSIVO =================== */
@media (max-width:980px){
  .lp-hero{grid-template-columns:1fr;gap:34px}
  .lp-hero-art{order:-1}
  .lp-nav{display:none}
  .celular.estatico{--larg:260px;--alt:530px;width:var(--larg);height:var(--alt)}
}
@media (max-width:920px){
  .editor-corpo{grid-template-columns:1fr}
  .lado-chat,.lado-previa{border-right:0}
  .editor-corpo.ver-chat .lado-previa{display:none}
  .editor-corpo.ver-previa .lado-chat{display:none}
  /* No celular a moldura usa a LARGURA como limite (a tela é estreita), então
     mando na largura e deixo o aspect-ratio calcular a altura. */
  .celular{width:min(330px,88vw);height:auto;max-height:100%}
  .abas-mobile{display:flex;gap:6px;padding:9px 14px;background:var(--bg2);
    border-top:1px solid var(--linha);padding-bottom:max(9px,env(safe-area-inset-bottom))}
  .abas-mobile button{flex:1;background:var(--card);border:1px solid var(--linha);color:var(--txt2);
    padding:12px;border-radius:11px;font-weight:600;min-height:48px;cursor:pointer}
  .abas-mobile button.ativa{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
    border-color:transparent}
  .nome-projeto{max-width:130px;font-size:15px}
  .topo{flex-wrap:wrap;gap:8px}
  .topo-dir .btn-secundario{padding:11px 13px}
}
@media (min-width:921px){ .abas-mobile{display:none} }

@media (max-width:860px){
  .lateral{transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--sombra)}
  .app.menu-aberto .lateral{transform:none}
  .conteudo{margin-left:0}
  .btn-menu{display:grid;place-items:center}
  .painel-area{padding:18px 15px 60px}
  .barra{padding-left:14px;padding-right:14px}
  .barra-titulo{font-size:17px}
  .barra-dir .btn-principal{padding:11px 14px;font-size:14px}
  .op-grade{grid-template-columns:1fr}
  .kpi .v{font-size:25px}
  /* Clientes no celular: cabeça do bloco e linha empilham, senão os botões de
     ação são empurrados para fora da tela. */
  .bloco-cabeca{flex-wrap:wrap}
  .busca-clientes{width:100%}
  .item-cliente{flex-wrap:wrap}
  .item-cliente .item-dir{width:100%;padding-left:53px;align-self:flex-start}
  .item-cliente .item-dir .btn-baixar,
  .item-cliente .item-dir .btn-fantasma.perigo{flex:1;justify-content:center;min-height:44px}
}
@media (max-width:560px){
  .lp-topo .lp-acoes .btn-fantasma{display:none}
  /* Em 390px o CTA "Criar conta grátis" (188px) somado à marca e ao botão de
     tema estourava a viewport: scrollWidth 435 contra 390. Medido, não
     suposto. No celular o rótulo curto ("Criar conta") entra no lugar. */
  .lp-topo .lp-acoes .btn-principal{padding:11px 14px;font-size:14px}
  .lp-topo .cta-longo{display:none}
  .lp-topo .cta-curto{display:inline}
  .lp-topo{gap:10px}
  /* lockup menor no celular: ele é a maior peça do header */
  .lp-topo .lockup{height:32px}
  .lp-topo .marca-sufixo{font-size:17px}
  .lp-hero h1{font-size:30px}
  .lp-sub{font-size:15.5px}
  .btn-principal.grande,.btn-secundario.grande{width:100%}
  .lp-cta{flex-direction:column}
  .modal-caixa{padding:20px}
  .modal-acoes{flex-direction:column-reverse}
  .modal-acoes>*{width:100%}
}