.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); padding: 38px; border: 1px solid #e9eaee; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px rgba(27, 31, 45, .06); }
.login-brand { margin-bottom: 38px; }
.login-card .eyebrow { margin-bottom: 9px; }
.login-card h1 { margin: 0; font-size: 27px; letter-spacing: -.8px; }
.login-subtitle { margin: 9px 0 24px; color: #858a95; font-size: 12px; line-height: 1.6; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 9px; color: #30343e; font-size: 11px; font-weight: 600; }
.login-form input { height: 42px; padding: 0 11px; border: 1px solid #e4e6eb; border-radius: 8px; outline: none; background: #fff; color: #20232c; font-size: 12px; }
.login-form input:focus { border-color: #9d8bf3; box-shadow: 0 0 0 3px rgba(112, 88, 232, .1); }
.login-form button { height: 42px; margin-top: 15px; border: 0; border-radius: 8px; background: #7058e8; color: #fff; font-size: 12px; font-weight: 600; }
.login-form button:hover { background: #5d46d2; }
.login-error { margin: 0 0 15px; padding: 10px 12px; border: 1px solid #f1d7db; border-radius: 7px; background: #fff8f9; color: #c94c5a; font-size: 11px; }
.login-footnote { margin: 19px 0 0; color: #a0a4ae; text-align: center; font-size: 10px; }
@media (max-width: 480px) { .login-card { padding: 29px 23px; } }