/* Tela de login com a cara da CORA: escuro e tecnológico, nas cores do NEXgo (as mesmas do painel da CORA):
   petróleo #176B67, teal #2FA39B, água #7FD1C7 e pêssego #E8B69A de acento, sobre grafite quase preto.
   O fundo vivo (aurora + rede de pontos) é desenhado em js/login.js; aqui ficam a grade, a CORA e o cartão de vidro. */
:root{--bg:#050d0c;--vidro:rgba(9,22,21,.62);--campo:rgba(4,13,12,.72);--linha:rgba(127,179,174,.18);--txt:#e7f1f0;--mt:#8fa6a3;
  --pet:#176b67;--teal:#2fa39b;--agua:#7fd1c7;--pes:#e8b69a;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--titulo:Lexend,Inter,sans-serif}
*{box-sizing:border-box}
html,body{height:100%}
body.lg{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lg svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* fundo */
.lg-fundo{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.lg-grade{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(rgba(127,179,174,.055) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(127,179,174,.055) 1px,transparent 1px) 0 0/34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 20%,transparent 78%)}
.lg-grade::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 85% at 50% 45%,transparent 55%,rgba(2,7,7,.75))}

/* página */
.lg-pg{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:center;gap:clamp(32px,5vw,80px);
  width:min(1120px,100%);margin:0 auto;padding:48px clamp(16px,5vw,56px) 72px}

/* CORA */
.lg-cora{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lg-bolha{position:relative;width:168px;height:168px;margin:22px 0 34px 22px}
.lg-aneis{position:absolute;inset:-58px;border-radius:50%;border:1.5px dotted rgba(127,209,199,.22);animation:lg-gira 60s linear infinite}
.lg-aneis::before{content:"";position:absolute;inset:-26px;border-radius:50%;border:1px solid rgba(127,209,199,.07)}
.lg-aneis::after{content:"";position:absolute;inset:18px;border-radius:50%;border:2px solid transparent;border-top-color:rgba(47,163,155,.55);border-right-color:rgba(232,182,154,.35);animation:lg-gira 7s linear infinite reverse}
.lg-brilho{position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle,rgba(47,163,155,.42),rgba(47,163,155,0) 68%);animation:lg-pulsa 3.2s ease-in-out infinite}
.lg-orbita{position:absolute;inset:-14px;border-radius:50%;border:2px dotted rgba(127,209,199,.6);animation:lg-gira 16s linear infinite reverse}
.lg-anel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#081110 0deg,#176b67 90deg,#2fa39b 200deg,#7fd1c7 300deg,#e8b69a 340deg,#081110 360deg);animation:lg-gira 3.6s linear infinite;
  box-shadow:0 0 34px rgba(47,163,155,.35)}
.lg-foto{position:absolute;inset:5px;border-radius:50%;overflow:hidden;background:#081110;box-shadow:inset 0 0 0 3px #081110}
.lg-foto img{display:block;width:100%;height:100%;object-fit:cover;filter:contrast(1.06)}
.lg-foto::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(180deg,rgba(127,209,199,0),rgba(127,209,199,.35),rgba(127,209,199,0));mix-blend-mode:screen;animation:lg-varre 3.8s ease-in-out infinite}
.lg-status{position:absolute;right:10px;bottom:12px;width:20px;height:20px;border-radius:50%;background:#4bce97;border:4px solid #081110;box-shadow:0 0 14px rgba(75,206,151,.85)}
.lg-tag{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mt)}
.lg-tag i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:lg-pisca 1.6s ease-in-out infinite}
.lg-fala{margin:0;max-width:20ch;font:600 clamp(32px,3.8vw,48px)/1.08 var(--titulo);letter-spacing:-.02em;color:#f2faf9;text-wrap:balance}
.lg-fala em{font-style:normal;background:linear-gradient(90deg,var(--agua),var(--pes));-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-sub{display:flex;align-items:center;min-height:1.6em;margin:18px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.5;color:#b9cfcc}
.lg-cursor{flex:none;width:2px;height:1.15em;margin-left:3px;background:var(--agua);animation:lg-pisca 1s steps(1) infinite}

/* CORA reage: digitando (ouvindo) e entrando (pensando) */
.lg[data-estado="ouvindo"] .lg-orbita{animation-duration:4s}
.lg[data-estado="ouvindo"] .lg-tag i{background:var(--agua);box-shadow:0 0 12px var(--agua)}
.lg[data-estado="pensando"] .lg-anel{animation-duration:.9s}
.lg[data-estado="pensando"] .lg-orbita{animation-duration:2s}
.lg[data-estado="pensando"] .lg-tag i{background:var(--pes);box-shadow:0 0 12px var(--pes)}

/* cartão de vidro */
.lg-card{position:relative;padding:34px 32px 30px;border-radius:22px;background:var(--vidro);border:1px solid var(--linha);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.lg-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(127,209,199,.55),rgba(47,163,155,0) 34%,rgba(47,163,155,0) 66%,rgba(232,182,154,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:26px;color:inherit;text-decoration:none;width:max-content}
.brand-simbolo{width:40px;height:40px;flex:none;display:block;border-radius:11px;box-shadow:0 0 0 1px rgba(127,209,199,.3),0 0 22px rgba(47,163,155,.35)}
.brand-name{font:700 22px/1.1 var(--titulo);letter-spacing:-.01em;color:#fff}
.brand-name span{color:var(--pes);font-weight:600}
.brand-sub{font-size:11.5px;color:var(--mt)}
.lg-card h1{margin:0;font:600 26px/1.2 var(--titulo);letter-spacing:-.01em}
.lg-dica{margin:6px 0 24px;font-size:14px;color:var(--mt)}
.lg-aviso{margin:-8px 0 18px;padding:11px 14px 11px 16px;border-radius:12px;font-size:13.5px;line-height:1.45;border:1px solid rgba(232,182,154,.55);background:linear-gradient(90deg,rgba(232,182,154,.22),rgba(232,182,154,.08));box-shadow:inset 3px 0 0 var(--pes);color:#fbe4d6}
.lg-aviso.ok{border-color:rgba(75,206,151,.45);background:rgba(75,206,151,.1);color:#cdf3e1}
.lg-campo{margin-bottom:16px}
.lg-campo label{display:block;margin-bottom:8px;font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mt)}
.lg-entrada{position:relative;display:flex;align-items:center;border-radius:13px;background:var(--campo);border:1px solid var(--linha);transition:border-color .2s,box-shadow .2s}
.lg-entrada::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--agua),transparent);transform:scaleX(0);transition:transform .35s}
.lg-entrada:focus-within{border-color:rgba(47,163,155,.75);box-shadow:0 0 0 4px rgba(47,163,155,.16),0 0 26px rgba(47,163,155,.18)}
.lg-entrada:focus-within::after{transform:scaleX(1)}
.lg-entrada>svg{flex:none;width:18px;height:18px;margin-left:14px;color:#6f8d89;transition:color .2s}
.lg-entrada:focus-within>svg{color:var(--agua)}
.lg-entrada input{flex:1;min-width:0;height:50px;padding:0 14px 0 11px;border:0;outline:0;background:none;color:var(--txt);font:500 15px Inter,system-ui,sans-serif}
.lg-entrada input:-webkit-autofill{-webkit-text-fill-color:var(--txt);-webkit-box-shadow:0 0 0 40px #0a1716 inset;caret-color:var(--txt);transition:background-color 9999s}
.lg-olho{flex:none;display:grid;place-items:center;width:40px;height:40px;margin-right:5px;border:0;border-radius:10px;background:none;color:#6f8d89;cursor:pointer}
.lg-olho:hover,.lg-olho[aria-pressed="true"]{color:var(--agua);background:rgba(127,209,199,.08)}
.lg-olho svg{width:18px;height:18px}
.lg-btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:10px;border:0;border-radius:13px;cursor:pointer;
  font:600 15.5px var(--titulo);letter-spacing:.01em;color:#fff;background:linear-gradient(100deg,#176b67,#2fa39b);
  box-shadow:0 10px 30px rgba(23,107,103,.45),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .15s,box-shadow .2s}
.lg-btn svg{width:18px;height:18px;transition:transform .25s}
.lg-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:lg-brilho-btn 4.5s ease-in-out infinite}
.lg-btn:hover{box-shadow:0 14px 38px rgba(47,163,155,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.lg-btn:hover svg{transform:translateX(4px)}
.lg-btn:active{transform:translateY(1px)}
.lg-btn:focus-visible,.lg-olho:focus-visible{outline:2px solid var(--agua);outline-offset:3px}
.lg-btn[disabled]{cursor:progress;opacity:.92}
.lg-rodape{position:fixed;left:0;right:0;bottom:18px;z-index:2;margin:0;text-align:center;font:500 10.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(143,166,163,.6);pointer-events:none}

@keyframes lg-gira{to{transform:rotate(360deg)}}
@keyframes lg-pulsa{50%{transform:scale(1.08);opacity:.7}}
@keyframes lg-varre{0%{top:-40%}60%,100%{top:110%}}
@keyframes lg-pisca{50%{opacity:.2}}
@keyframes lg-brilho-btn{0%,70%{left:-60%}100%{left:130%}}

/* celular e tela estreita: a CORA em cima, menor, e o cartão embaixo */
@media (max-width:860px){
  .lg-pg{grid-template-columns:minmax(0,1fr);gap:30px;align-content:start;padding-top:64px;padding-bottom:64px}
  .lg-cora{align-items:center;text-align:center}
  .lg-bolha{width:112px;height:112px;margin:18px 0 26px}
  .lg-aneis{inset:-40px}
  .lg-status{width:16px;height:16px;border-width:3px;right:5px;bottom:7px}
  .lg-tag{justify-content:center;font-size:10px;margin-bottom:12px}
  .lg-fala{max-width:none;font-size:clamp(26px,7vw,34px)}
  .lg-sub{justify-content:center;margin-top:10px}
  .lg-card{width:100%;max-width:440px;justify-self:center;padding:28px 22px 24px}
  .lg-rodape{position:static;padding:0 16px 22px}
}
@media (max-height:640px) and (min-width:861px){ .lg-bolha{width:130px;height:130px} }
@media (prefers-reduced-motion:reduce){
  .lg-aneis,.lg-aneis::after,.lg-brilho,.lg-orbita,.lg-anel,.lg-foto::after,.lg-tag i,.lg-cursor,.lg-btn::after{animation:none}
}