:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #f1f5f9; color: #172033; }
.login-card { width: 100%; max-width: 420px; padding: 36px; border: 1px solid #dbe3ee; border-radius: 18px; background: white; box-shadow: 0 12px 40px #1427460d; }
.brand { color: #2563eb; font-weight: 750; font-size: 22px; letter-spacing: -.6px; }
h1 { font-size: 25px; margin: 24px 0 10px; }
.intro { color: #58657a; line-height: 1.55; }
label { display: block; font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
input { width: 100%; padding: 12px; border: 1px solid #bcc8da; border-radius: 8px; background: white; color: inherit; font: inherit; }
input:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
button { width: 100%; padding: 13px; margin-top: 24px; border: 0; border-radius: 8px; color: white; background: #2563eb; cursor: pointer; font: inherit; font-weight: 650; }
button:hover { background: #1d4ed8; }
.error { color: #b91c1c; font-size: 14px; line-height: 1.5; }
.error:empty { display: none; }
@media (prefers-color-scheme: dark) {
    body { background: #0d1524; color: #e2e8f0; }
    .login-card { background: #172033; border-color: #334155; }
    .intro { color: #adb9cb; }
    .brand { color: #7aaaff; }
    input { background: #0d1524; border-color: #52637d; }
    .error { color: #fca5a5; }
}