:root {
  --fundo: #101112; --painel: #17191b; --campo: #1d1f22; --borda: #2d3034; --borda-forte: #43474c;
  --texto: #f3f1ed; --suave: #9b9e9f; --laranja: #ff8238; --laranja-escuro: #ed712d; --erro: #ff6b5e;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(circle at 50% 28%, rgba(255, 130, 56, .10), transparent 46%), var(--fundo);
  color: var(--texto); font: 15px/1.5 Inter, 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
.login { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 8px; padding: 32px 16px 48px; }

/* Olho */
.cena { position: relative; width: min(300px, 68vw); aspect-ratio: 362 / 232; }
.brilho {
  position: absolute; inset: -30% -18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 18, .26), rgba(255, 122, 18, 0) 72%);
  animation: respirar 4.5s ease-in-out infinite;
}
.olho { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.olho-corpo { transform-box: view-box; transform-origin: 50% 53%; transition: transform .11s ease-in; }
.pupila circle:first-child { transform-box: fill-box; transform-origin: center; transition: transform .35s ease; }
.olho.piscar .olho-corpo { transform: scaleY(.07); }
.olho.espiando .olho-corpo { transform: scaleY(.42); transition-duration: .25s; }
.olho.erro { animation: tremer .42s ease; }
.olho.sucesso .pupila circle:first-child { transform: scale(1.22); }
.olho.sucesso { filter: drop-shadow(0 0 22px rgba(255, 130, 56, .55)); }
@keyframes respirar { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes tremer { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }

/* Formulário */
.cartao {
  width: min(400px, 100%); background: var(--painel); border: 1px solid var(--borda); border-radius: 16px;
  padding: 28px 28px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.logo { display: block; width: 210px; max-width: 70%; height: auto; margin: 0 auto; }
.subtitulo { margin: 8px 0 0; text-align: center; font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--suave); }
h1 { margin: 22px 0 16px; font-size: 18px; font-weight: 650; }
label { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 600; color: #d6d7d6; }
input {
  width: 100%; height: 44px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--borda); background: var(--campo);
  color: var(--texto); font: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(255, 130, 56, .18); }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 82px; }
.mostrar {
  position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--borda);
  background: transparent; color: var(--suave); font: inherit; font-size: 12px; cursor: pointer;
}
.mostrar:hover, .mostrar:focus-visible { color: var(--texto); border-color: var(--borda-forte); outline: none; }
.mensagem { min-height: 21px; margin: 12px 0 4px; font-size: 13px; color: var(--erro); }
.botao {
  width: 100%; height: 46px; border: 0; border-radius: 10px; background: var(--laranja); color: #1a0f06;
  font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s;
}
.botao:hover { background: #ff9450; }
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.botao:disabled { opacity: .65; cursor: progress; }
.rodape { margin: 16px 0 0; text-align: center; font-size: 11.5px; color: #6f7274; }

@media (prefers-reduced-motion: reduce) {
  .brilho, .olho.erro { animation: none; }
  .olho-corpo, .pupila circle:first-child { transition: none; }
}