.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(ellipse at 25% 15%, #21483d65, transparent 50%), radial-gradient(ellipse at 90% 85%, #1e354966, transparent 45%), var(--canvas); }
.login-card { width: min(450px, 100%); margin: 0; padding: 38px; border: 1px solid #36504d; border-radius: 20px; background: linear-gradient(145deg, #1b2e2f, #142226 65%); box-shadow: 0 28px 90px #030b115c; }
.login-brand { padding: 0; margin-bottom: 44px; color: var(--ink); }
.login-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
.login-card .eyebrow { color: #a6cec0; margin-bottom: 10px; }
.login-card h1 { max-width: 320px; font-size: 29px; letter-spacing: -.045em; }
.login-intro { margin: 12px 0 28px; color: #aec3c0; font-size: 13px; line-height: 1.65; }
.login-card form { display: grid; gap: 18px; }
.login-card label { display: grid; gap: 8px; color: #d2e4de; font-size: 12px; font-weight: 600; }
.login-card input { width: 100%; min-height: 48px; border: 1px solid #3c5957; border-radius: 9px; padding: 12px 14px; color: var(--ink); background: #0f2023; font-size: 16px; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #83e2c41a; }
.login-card input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px #18302e inset; caret-color: var(--ink); }
.login-card .form-error:empty { display: none; }
.login-submit { width: 100%; min-height: 48px; margin-top: 4px; font-size: 14px; }
.login-footnote { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: #a1b8b6; font-size: 11px; line-height: 1.6; text-align: center; }
@media (max-width: 600px) {
  .login-page { padding: 28px 16px; }
  .login-card { padding: 30px 24px; border-radius: 16px; }
  .login-brand { margin-bottom: 34px; }
  .login-card h1 { font-size: 27px; }
}
@media (max-width: 360px) {
  .login-card { padding: 26px 20px; }
}