:root{
  --tinta:#e8eaf0; --tinta-fraca:#8b93a7; --fundo:#0d1017; --caixa:#151a24;
  --borda:#242c3a; --ambar:#f0a92b; --erro:#ff7b7b;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,#182033 0%,var(--fundo) 60%);
  color:var(--tinta);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.caixa{
  width:100%;max-width:380px;background:var(--caixa);border:1px solid var(--borda);
  border-radius:14px;padding:32px 28px;box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.pino{width:10px;height:10px;border-radius:50%;background:var(--ambar);
  box-shadow:0 0 0 4px rgba(240,169,43,.15)}
h1{font-size:19px;margin:0;letter-spacing:-.2px}
p.sub{margin:6px 0 26px;color:var(--tinta-fraca);font-size:13px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta-fraca);margin:0 0 6px}
input{width:100%;padding:11px 12px;margin-bottom:16px;background:#0f131b;
  border:1px solid var(--borda);border-radius:8px;color:var(--tinta);font-size:15px}
input:focus{outline:2px solid rgba(240,169,43,.5);outline-offset:1px;border-color:var(--ambar)}
button{width:100%;padding:12px;border:0;border-radius:8px;background:var(--ambar);
  color:#1a1204;font-weight:700;font-size:15px;cursor:pointer}
button:hover{filter:brightness(1.07)}
button:disabled{opacity:.6;cursor:progress}
.aviso{margin:0 0 16px;padding:10px 12px;border-radius:8px;
  background:rgba(255,123,123,.12);border:1px solid rgba(255,123,123,.35);
  color:var(--erro);font-size:13px}
[hidden]{display:none !important}
.pe{margin:22px 0 0;color:#5b6377;font-size:11px;text-align:center}