.login-page { width: 100%; min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; box-sizing: border-box; }
.login-card { width: 100%; max-width: 420px; color: #203047; font-family: Poppins, Arial, sans-serif; }
.account-container.login-card { margin: 0; padding: 0; overflow: visible; }
.login-card [hidden] { display: none !important; }
.login-card .account-image { width: 185px; max-width: 100%; margin: 0 auto 32px; padding: 0; display: block; }
.login-card .account-header { font-size: 1.7rem; margin: 0 0 8px; font-weight: 600; }
.login-intro, .login-help { color: #596579; font-size: .9rem; line-height: 1.6; }
.login-intro { margin-bottom: 24px; }
.login-methods { display: flex; gap: 6px; padding: 5px; margin: 24px 0 20px; background: #edf1f6; border: 1px solid #d3dbe7; border-radius: 12px; }
.login-method { flex: 1; min-height: 46px; border: 0; border-radius: 8px; background: transparent; color: #48566a; font: inherit; font-size: .95rem; cursor: pointer; }
.login-method[aria-pressed="true"] { background: #12365b; color: white; font-weight: 600; box-shadow: 0 2px 4px #102d4e20; }
.login-method:focus-visible, .login-resend:focus-visible, .login-card .account-btn:focus-visible, .login-card input:focus-visible { outline: 3px solid #3083cf !important; outline-offset: 3px; }
.login-notice { border: 1px solid #cbddee; border-radius: 10px; padding: 14px 16px; background: #f2f7fc; color: #304f70; font-size: .88rem; line-height: 1.65; overflow-wrap: anywhere; }
.login-notice-success { background: #edf8ee; border-color: #bfdfc5; color: #215d30; }
.login-notice-error { background: #fff6e9; border-color: #ead0a8; color: #724b11; }
.login-card .forgot-password { text-align: right; font-size: .85rem; margin-top: 12px; color: #174d82; }
.login-card .login-code-input { letter-spacing: .35em; font-size: 1.35rem; }
.login-card .account-btn { display: block; box-sizing: border-box; width: 100%; border: 0; border-radius: 10px; padding: 14px; margin-top: 24px; background: #23863a; color: white; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.login-card .account-btn:hover { background: #1b6e2f; color: white; }
.login-resend { display: block; box-sizing: border-box; width: 100%; margin-top: 16px; border: 0; padding: 8px; background: none; color: #174d82; text-decoration: underline; text-align: center; font: inherit; font-size: .9rem; cursor: pointer; }
.login-help { margin: 14px 0 0; text-align: center; }
.login-help:empty { display: none; }
.login-code-display { display: block; margin: 24px 0; padding: 18px; border-radius: 12px; background: #edf3fa; color: #12365b; font-size: 3rem; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-align: center; }
.login-code-timer { text-align: center; font-variant-numeric: tabular-nums; }
.login-code-page { margin: 0; background: white; }
.login-code-page p { line-height: 1.65; }
.login-code-page .login-card { margin: auto; }
@media (max-width: 480px) { .login-page { min-height: auto; padding: 24px 12px; } .login-card .account-image { margin-bottom: 24px; } }