:root {
  --bg: #04080d; --fg: #cfe9f5; --muted: #6f8d9c; --accent: #35d0ff; --rec: #ff4d5e; --ok: #4dffa6;
  --tone: 53, 208, 255; /* cor da tela: azul (pronto), verde (liberado), vermelho (negado) */
  --mx: 0; --my: 0;     /* posição do mouse, de -1 a 1 */
}
body[data-state="ok"] { --tone: 77, 255, 166; }
body[data-state="denied"] { --tone: 255, 77, 94; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: "Segoe UI", system-ui, sans-serif; overflow: hidden; }
#sky { position: fixed; inset: 0; z-index: 0; display: block; opacity: 0.95; transform: translate(calc(var(--mx) * -10px), calc(var(--my) * -10px)) scale(1.03); }

/* céu estrelado extra (desenhado uma vez; as duas camadas piscam alternadas) */
.stars { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
         transform: translate(calc(var(--mx) * -6px), calc(var(--my) * -6px)); }
#starsA { animation: twinkle 3.2s ease-in-out infinite; }
#starsB { animation: twinkle 4.1s ease-in-out infinite reverse; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.login {
  position: relative; z-index: 1; height: 100%; padding: 24px 40px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px); align-items: center; gap: 48px;
  max-width: 1320px; margin: 0 auto;
}

/* ------------------------------------------------------------------ a lente */
.hero { position: relative; height: min(78vh, 720px); display: grid; place-items: center; }
.lens {
  position: relative; width: min(100%, 72vh, 640px); aspect-ratio: 1;
  /* a lente fica parada; só o cartão de login acompanha o mouse */
}
#lensCanvas { position: absolute; inset: -12%; width: 124%; height: 124%; display: block; pointer-events: none;
             } /* o brilho extra vem do próprio desenho (filtro de CSS numa tela grande é caro) */

/* clarão no resultado */
.flash { position: absolute; inset: 15%; border-radius: 50%; pointer-events: none; opacity: 0;
         background: radial-gradient(circle, rgba(var(--tone), 0.55), transparent 65%); mix-blend-mode: screen; }
.flash.on { animation: flash 0.9s ease-out; }
@keyframes flash { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }

/* textos de HUD nos cantos */
.hud { position: absolute; display: flex; flex-direction: column; gap: 2px; font: 11px/1.3 Consolas, "Cascadia Mono", monospace;
       color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
.hud b { color: rgba(var(--tone), 0.95); font-weight: 600; text-shadow: 0 0 8px rgba(var(--tone), 0.6); transition: color 0.3s; }
.hud.tl { top: 2%; left: 2%; } .hud.tr { top: 2%; right: 2%; text-align: right; }
.hud.bl { bottom: 2%; left: 2%; } .hud.br { bottom: 2%; right: 2%; text-align: right; }
.hud::before { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid rgba(var(--tone), 0.6); }
.hud.tl::before { left: -10px; top: -8px; border-top-width: 1px; border-left-width: 1px; }
.hud.tr::before { right: -10px; top: -8px; border-top-width: 1px; border-right-width: 1px; }
.hud.bl::before { left: -10px; bottom: -8px; border-bottom-width: 1px; border-left-width: 1px; }
.hud.br::before { right: -10px; bottom: -8px; border-bottom-width: 1px; border-right-width: 1px; }
body[data-state="checking"] #status::after { content: "▍"; animation: blink 0.6s steps(1) infinite; margin-left: 3px; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------------ o cartão */
.card {
  position: relative; width: 100%; padding: 28px 30px 20px; text-align: center;
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, rgba(var(--tone), 0.65), rgba(var(--tone), 0.25) 60%, rgba(var(--tone), 0.08)) 1;
  background:
    linear-gradient(rgba(var(--tone), 0.03) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(var(--tone), 0.03) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(8, 24, 38, 0.9), rgba(3, 11, 19, 0.88));
  /* sem desfoque do fundo: com a lente animada atrás, o navegador refazia o borrado a cada quadro */
  box-shadow: 0 0 40px rgba(var(--tone), 0.14), inset 0 0 40px rgba(var(--tone), 0.05);
  transform: perspective(1000px) rotateY(calc(var(--mx) * -3deg)) rotateX(calc(var(--my) * 3deg));
  transition: transform 0.25s ease-out, box-shadow 0.3s;
}
.hc { position: absolute; width: 18px; height: 18px; border-color: rgba(var(--tone), 1); border-style: solid; border-width: 0;
      filter: drop-shadow(0 0 4px rgba(var(--tone), 0.9)); }
.hc.tl { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; }
.hc.tr { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; }
.hc.bl { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; opacity: 0.3; }
.hc.br { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; opacity: 0.3; }

.logo { width: 78px; height: 78px; margin: 0 auto 8px; display: block; mix-blend-mode: screen; object-fit: contain;
        filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 0 10px rgba(var(--tone), 0.55)); animation: logo 6s ease-in-out infinite;
        will-change: opacity; }
body[data-state="ok"] .logo { --hue: -60deg; }
body[data-state="denied"] .logo { --hue: 140deg; }
/* só a luminosidade pulsa: crescer com o brilho em volta obrigava o navegador a redesenhar tudo a cada quadro */
@keyframes logo { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

.name { margin: 0; font-size: 22px; font-weight: 300; letter-spacing: 0.5em; padding-left: 0.5em; color: #dff7ff;
        text-shadow: 0 0 10px rgba(var(--tone), 0.9), 0 0 26px rgba(var(--tone), 0.45); }
.lema { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.4em; padding-left: 0.4em; text-transform: uppercase;
        color: rgba(var(--tone), 0.95); text-shadow: 0 0 8px rgba(var(--tone), 0.5); }
/* "Identificação" é o título do formulário, não parte da marca: fica afastado e entre dois fios */
.subtitle { margin: 30px 0 18px; color: var(--muted); font: 11px Consolas, "Cascadia Mono", monospace; letter-spacing: 0.3em; text-transform: uppercase;
            display: flex; align-items: center; gap: 12px; }
.subtitle::before, .subtitle::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--tone), 0.35), transparent); }
.error { margin: 0 0 14px; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255, 77, 94, 0.5); background: rgba(255, 77, 94, 0.1);
         color: #ffb3bb; font-size: 13px; text-align: left; }
.error[hidden], .form[hidden], .social[hidden] { display: none; }

.form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.form input {
  border: 1px solid rgba(var(--tone), 0.3); border-radius: 8px; background: rgba(4, 10, 16, 0.65); color: var(--fg);
  font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; padding: 10px 12px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
/* preenchido automaticamente pelo navegador: mantém o visual escuro (sem o fundo branco/azul padrão) */
.form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg);
  -webkit-box-shadow: 0 0 0 40px #07131d inset; transition: background-color 9999s;
}
.form input:focus { border-color: rgba(var(--tone), 1); box-shadow: 0 0 0 1px rgba(var(--tone), 0.25), 0 0 16px rgba(var(--tone), 0.18); }
.hint { margin: 0 0 2px; font-size: 12.5px; color: #a9c6d4; line-height: 1.5; }
.hint b { color: #dff7ff; }
.primary {
  position: relative; overflow: hidden; margin-top: 4px; border: 1px solid rgba(var(--tone), 0.7);
  background: linear-gradient(180deg, rgba(var(--tone), 0.28), rgba(var(--tone), 0.1)); color: #e6fbff; border-radius: 8px;
  font: inherit; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; padding: 11px; cursor: pointer;
  text-shadow: 0 0 8px rgba(var(--tone), 0.7); transition: box-shadow 0.2s;
}
.primary::before { /* brilho que atravessa o botão */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; transform: translateX(-150%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: sweep 3.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes sweep { 0%, 60% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(450%) skewX(-20deg); } }
.primary:hover { box-shadow: 0 0 18px rgba(var(--tone), 0.4); }
.primary:disabled { opacity: 0.7; cursor: default; }
.primary span { position: relative; }

.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--tone), 0.35), transparent); }
.social { display: flex; flex-direction: column; gap: 8px; }
.soc { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 8px;
       border: 1px solid rgba(93, 122, 137, 0.45); background: rgba(4, 10, 16, 0.55); color: var(--fg); text-decoration: none; font-size: 14px; }
.soc svg { width: 18px; height: 18px; }
.soc:hover { border-color: var(--accent); background: rgba(53, 208, 255, 0.08); }
.soc.facebook svg { background: #1877f2; border-radius: 50%; padding: 1px; }
.soc.off { opacity: 0.4; pointer-events: none; }
.soc-note { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.foot { margin: 16px 0 0; font: 10px Consolas, "Cascadia Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #3e5866; }

/* ------------------------------------------------------------------ celular: a lente por trás do cartão */
@media (max-width: 860px) {
  html, body { overflow: auto; }
  .login { grid-template-columns: 1fr; padding: 16px; gap: 0; min-height: 100%; }
  .hero { position: fixed; inset: 0; height: auto; opacity: 0.45; z-index: -1; }
  .lens { width: min(120vw, 90vh); }
  .hud { display: none; }
  .card { width: min(420px, 100%); margin: 0 auto; transform: none; }
}
/* modo leve (?leve=1) */
html.leve .stars, html.leve .logo, html.leve .primary::before { animation: none !important; }
html.leve .logo { filter: hue-rotate(var(--hue, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  .logo, .primary::before { animation: none !important; }
}

/* "Voltar" da etapa do código */
.form .link { background: none; border: 0; color: #7fb6cf; font: inherit; font-size: 13px; cursor: pointer; padding: 6px 0 0; text-decoration: underline; }
.form .link:hover { color: #cfefff; }