:root{color-scheme:dark;--accent:#8fb8c9}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:grid;place-items:center;font:15px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#e8eaed;overflow:hidden;
  background:radial-gradient(800px 500px at 50% 35%,#0f2238,transparent),radial-gradient(900px 600px at 85% 110%,#0b1d33,transparent),#0a0c0f}
.card{width:min(92vw,380px);padding:32px 30px 28px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(20,23,28,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.logo{color:var(--accent);margin-bottom:14px;display:block}
h1{margin:0;font-size:21px;font-weight:650;letter-spacing:.005em}
.sub{margin:5px 0 24px;color:#9aa1ab;font-size:13px}
label{display:block;margin:0 0 15px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9aa1ab}
input{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e8eaed;font-size:16px;outline:none}
input:focus{border-color:rgba(143,184,201,.5);box-shadow:0 0 0 3px rgba(143,184,201,.14)}
button{width:100%;margin-top:6px;padding:11px;border:1px solid rgba(143,184,201,.55);border-radius:9px;font:600 14px inherit;color:#04121c;cursor:pointer;background:linear-gradient(180deg,#7bd5ff,#4fbdf5)}
button:hover{filter:brightness(1.07)}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.msg{min-height:1.2em;margin:12px 0 0;color:#d77a74;font-size:13px}