:root{--bg:#0b2545;--card:#102f52;--fg:#e8f4ff;--muted:#b2c8db;--primary:#00c2e8;--border:#1b3f65;--blue:#007acc;--deep:#0062a3}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;
  color:var(--fg);background:radial-gradient(1200px 600px at 50% -10%,#14406e 0%,var(--bg) 60%)}
.card{width:100%;max-width:26rem;padding:clamp(1.5rem,5vw,2.5rem);background:var(--card);border:1px solid var(--border);
  border-radius:1.25rem;box-shadow:0 24px 80px #0008}
.logo{display:block;width:210px;max-width:70%;height:auto;margin:-1.25rem auto -.5rem}
h1{margin:.5rem 0 .5rem;text-align:center;font-size:1.5rem;line-height:1.25}
.lead{margin:0 0 1.5rem;text-align:center;color:var(--muted);line-height:1.6;font-size:.95rem}
label{display:block;margin:1rem 0 .4rem;font-size:.875rem;font-weight:600}
input{width:100%;padding:.75rem .9rem;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:.5rem}
input:focus{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
button{width:100%;margin-top:1.5rem;padding:.8rem 1rem;font:inherit;font-weight:600;color:#fff;cursor:pointer;border:0;border-radius:.5rem;
  background:linear-gradient(90deg,var(--deep),var(--blue))}
button:hover{filter:brightness(1.12)}
button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.error{margin:0 0 .5rem;padding:.75rem 1rem;border:1px solid #fca5a5;border-radius:.5rem;background:#3b1220;color:#fecaca;font-size:.9rem}
.foot{margin:1.5rem 0 0;text-align:center;color:var(--muted);font-size:.8rem}
.foot a{color:var(--muted);text-underline-offset:3px}
.foot a:hover{color:#fff}