:root{color-scheme:light;font-family:Arial,"Segoe UI",sans-serif;color:#262b33;background:#f5f6f8}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:360px;padding:32px;background:#fff;border:1px solid #e1e4e8;border-radius:8px}
h1{font-size:28px;line-height:1.2;font-weight:600;text-align:center;margin:0 0 30px}
label{display:block;font-size:14px;margin:0 0 8px}
input{width:100%;height:44px;padding:0 12px;margin:0 0 20px;border:1px solid #cbd0d7;border-radius:5px;background:#fff;color:#262b33;font:16px Arial,sans-serif;outline:none}
input:focus{border-color:#4177bd;box-shadow:0 0 0 2px #4177bd20}
input[aria-invalid=true]{border-color:#bf5555}
button{width:100%;height:44px;border:0;border-radius:5px;background:#3e70b4;color:#fff;font:15px Arial,sans-serif;cursor:pointer}
button:hover{background:#345f9b}
button:focus-visible{outline:2px solid #3e70b4;outline-offset:3px}
button:disabled{opacity:.7;cursor:wait}
#form-message{margin:0 0 18px;color:#b33c3c;font-size:14px;line-height:1.4}
[hidden]{display:none!important}
noscript p{font-size:13px;color:#b33c3c}
@media(max-width:400px){body{padding:18px}.login{padding:28px 24px}}