.login-page { font-size: 17px; }
.login-page header { max-width: 1140px; margin: auto; padding: 28px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.login-page a { text-underline-offset: 4px; }
.login-page header>a:last-child { color: var(--at-color-action); }
.login-page main { max-width: 520px; margin: 50px auto; padding: 36px; background: var(--at-color-surface); border: 1px solid var(--at-color-divider); border-radius: 12px; }
.login-page h1 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.login-page p { margin-bottom: 24px; color: var(--at-color-muted); }
.login-page form label { display: block; font-weight: 600; margin-top: 20px; }
.login-page input { display: block; width: 100%; min-height: 50px; border: 1px solid var(--at-color-control-border); border-radius: 6px; margin-top: 8px; padding: 10px 12px; font: inherit; color: var(--at-color-ink); }
.login-page button { width: 100%; margin-top: 28px; justify-content: center; }
.login-page button:disabled { background: var(--at-subtle-surface); color: var(--at-color-muted); cursor: default; }
.login-page .notice { font-size: 15px; background: var(--at-color-info-surface); color: var(--at-color-info); padding: 16px; border-radius: 8px; margin: 25px 0 0; }
.login-page .error { color: var(--at-color-error); background: var(--at-color-error-surface); border: 1px solid var(--at-color-error); padding: 12px; border-radius: 6px; margin: 20px 0; }
.login-page footer { text-align: center; font-size: 14px; color: var(--at-color-muted); padding: 10px 24px 35px; }
.login-page .appearance-choice { justify-content: center; }
@media(max-width:600px) { .login-page main { margin: 20px 16px; padding: 28px 22px; } .login-page header { padding: 20px; flex-wrap: wrap; gap: 8px; } .login-page h1 { font-size: 30px; } }