* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: light; font: 15px/1.5 system-ui, sans-serif; color: #283041; background: #eef0f7; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 420px; padding: 32px 24px; border: 1px solid #e1e5ef; border-radius: 18px; background: #fff; box-shadow: 0 16px 60px #2730440d; }
.brand-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: #edf0ff; color: #5562d4; margin-bottom: 18px; }
.brand { color: #5562d4; font-size: 13px; font-weight: 650; margin: 0 0 6px; }
h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 10px; }
#login-description { color: #737b8b; font-size: 14px; margin: 0 0 24px; }
label { display: block; font-size: 13px; font-weight: 550; margin-bottom: 6px; }
input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d6dbe7; border-radius: 8px; font: inherit; margin-bottom: 16px; }
input:focus { outline: 2px solid #9ba7ed; outline-offset: 1px; }
button, .login-action { display: block; text-align: center; text-decoration: none; min-height: 44px; width: 100%; border: 0; border-radius: 8px; padding: 10px 14px; font: 600 14px system-ui, sans-serif; color: #fff; background: #5562d4; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
#login-error { color: #b33434; font-size: 13px; margin: 0 0 12px; overflow-wrap: anywhere; }
#login-error:empty { display: none; }
@media (min-width: 640px) { .login-card { padding: 40px 32px; } }