*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:var(--s-5);background:var(--surface-2);color:var(--text);font:500 18px/1.5 var(--font-sans)}
.card{width:min(100%,440px);padding:var(--s-7);background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-xl);box-shadow:var(--sh-md)}
.brand{color:var(--primary);font-weight:700}.brand span{display:block;color:var(--text-2);font-size:15px;font-weight:500}
h1{font-size:30px;line-height:1.2;margin:var(--s-6) 0 var(--s-3)}
p{color:var(--text-2);margin:0 0 var(--s-5)}form{display:grid;gap:var(--s-2)}
label{font-size:16px;font-weight:700}
input{width:100%;padding:13px 14px;margin-bottom:var(--s-2);border:1px solid var(--divider-2);border-radius:var(--r);font:inherit}
input:focus{outline:2px solid var(--primary);outline-offset:2px}
button{margin-top:var(--s-3);padding:14px;border:0;border-radius:var(--r);background:var(--primary);color:var(--on-primary);font:700 18px var(--font-sans);cursor:pointer}
button:hover{background:var(--primary-hover)}button:disabled{opacity:.6;cursor:wait}
#login-error{min-height:1.5em;margin:var(--s-4) 0 0;color:var(--error);font-size:16px}
@media(max-width:480px){.card{padding:var(--s-5) var(--s-4)}h1{font-size:26px}}