/* ===== Tela de login: cartão de vidro sobre fundo escuro com brilho roxo (js/auth.js › authShowLogin) ===== */
.lg-tela{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(120% 70% at 50% 115%,rgba(109,77,255,.42) 0%,rgba(60,38,160,.22) 38%,rgba(8,8,14,0) 70%),#07070b;
  font-family:Inter,system-ui,sans-serif;color:#f4f3fa}
.lg-card{position:relative;width:min(460px,100%);padding:46px 32px 32px;border-radius:30px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 26%,rgba(255,255,255,.01) 100%),rgba(18,18,24,.92);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px)}
/* brilho no topo do cartão e nas bordas laterais */
.lg-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(55% 32% at 22% 0%,rgba(255,255,255,.10),transparent 70%),radial-gradient(55% 32% at 78% 0%,rgba(255,255,255,.08),transparent 70%)}
/* borda correndo ao redor do cartão: faixa de luz roxa girando (conic-gradient animado) */
@property --lg-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.lg-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;
  background:conic-gradient(from var(--lg-ang),transparent 0deg,transparent 250deg,rgba(124,92,255,.25) 285deg,#a48bff 330deg,#fff 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lg-borda 9s linear infinite;filter:drop-shadow(0 0 6px rgba(124,92,255,.7))}
@keyframes lg-borda{to{--lg-ang:360deg}}
@media (prefers-reduced-motion:reduce){.lg-card::after{animation:none}}
.lg-marca{display:flex;justify-content:center;margin-bottom:22px}
.lg-marca img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 30px -10px rgba(124,92,255,.55)}
.lg-marca .auth-logo{gap:10px}
.lg-card h1{margin:0;font-size:44px;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#fff}
.lg-sub{margin:12px auto 34px;max-width:340px;font-size:14px;line-height:1.55;color:rgba(235,233,248,.72)}
.lg-form{display:flex;flex-direction:column;gap:12px;text-align:left}
.lg-campo{position:relative;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:999px;cursor:text;
  background:rgba(8,8,12,.75);border:1px solid rgba(255,255,255,.08);
  box-shadow:inset -1px 0 0 rgba(124,92,255,.55),inset 1px 0 0 rgba(124,92,255,.35);transition:border-color .15s,box-shadow .15s}
.lg-campo:focus-within{border-color:rgba(124,92,255,.75);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
.lg-ic{display:grid;place-items:center;color:rgba(235,233,248,.45)}
.lg-tela svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-campo input{flex:1;min-width:0;height:100%;border:0;background:transparent;box-shadow:none;outline:none;padding:0;
  font:inherit;font-size:14.5px;color:#fff}
.lg-campo input::placeholder{color:rgba(235,233,248,.42)}
.lg-campo input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.lg-olho{all:unset;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;cursor:pointer;color:#8f74ff}
.lg-olho:hover{background:rgba(124,92,255,.14)}
.lg-olho .risco{display:none}
.lg-olho.oculto .risco{display:block}
.lg-msg{min-height:18px;margin:2px 4px 0;font-size:12.5px;text-align:center}
.lg-entrar{height:54px;margin-top:10px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-size:16px;font-weight:500;color:#fff;
  background:linear-gradient(180deg,#2a2a33,#1d1d24);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -14px rgba(0,0,0,.9);transition:background .15s,transform .05s}
.lg-entrar:hover{background:linear-gradient(180deg,#7c5cff,#5b3fe0)}
.lg-entrar:active{transform:translateY(1px)}
.lg-rodape{margin:22px 0 0;font-size:13px;color:rgba(235,233,248,.6)}
.lg-card .auth-first-access{margin-top:16px;text-align:left}
@media(max-width:480px){.lg-card{padding:36px 20px 24px;border-radius:24px}.lg-card h1{font-size:36px}}

/* ---- entrada: foguete pequeno + barra de progresso fina ---- */
.lg-card{transition:opacity .4s ease,transform .4s ease,filter .4s ease}
.lg-card.lg-saindo{opacity:0;transform:scale(.97);filter:blur(4px);pointer-events:none}
.lg-foguete{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none;z-index:2;
  animation:lg-fog-entra .45s .15s ease both}
@keyframes lg-fog-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lg-fog-emoji{font-size:34px;line-height:1;display:inline-block;transform:rotate(-45deg);filter:drop-shadow(0 6px 14px rgba(124,92,255,.45));
  animation:lg-fog-flutua 2.4s ease-in-out infinite}
@keyframes lg-fog-flutua{50%{transform:rotate(-45deg) translate(2px,-2px)}}
.lg-prog{position:relative;width:min(240px,60vw);height:2px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.lg-prog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,#5b3fe0,#a48bff);box-shadow:0 0 10px rgba(164,139,255,.8);transition:width .12s linear}
.lg-prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);animation:lg-brilho 1.1s ease-in-out infinite}
@keyframes lg-brilho{to{transform:translateX(100%)}}
.lg-foguete.completo .lg-prog i{transition:width .3s ease-out}
.lg-fog-txt{display:flex;gap:10px;margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,233,248,.55)}
.lg-fog-txt b{font-weight:500;color:rgba(235,233,248,.85);font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* decolagem elegante: sobe, afina e some */
.lg-foguete.decolando .lg-fog-emoji{animation:lg-fog-decola .85s cubic-bezier(.5,0,.85,.3) forwards}
.lg-foguete.decolando .lg-prog,.lg-foguete.decolando .lg-fog-txt{transition:opacity .35s ease;opacity:0}
@keyframes lg-fog-decola{0%{transform:rotate(-45deg) translate(0,0);opacity:1;filter:drop-shadow(0 6px 14px rgba(124,92,255,.45))}
  100%{transform:rotate(-45deg) translate(260px,-260px) scale(.6);opacity:0;filter:blur(2px)}}
.lg-tela.lg-final{animation:lg-tela-some .4s .55s ease-in forwards}
@keyframes lg-tela-some{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.lg-fog-emoji,.lg-prog i::after{animation:none}.lg-foguete.decolando .lg-fog-emoji{animation:none;opacity:0}}