.authenticator-page { min-height: 100vh; margin: 0; padding: 48px 20px; background: #f3f6f9; color: #263746; }
.authenticator-card { position: relative; box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto; padding: 36px; border: 1px solid #e3e9ef; border-radius: 12px; box-shadow: 0 6px 24px rgba(35, 58, 83, .08); }
.authenticator-header { margin-bottom: 24px; padding-top: 16px; text-align: center; }
.authenticator-logo { display: block; width: 162px; height: 45px; margin: 0 auto 24px; object-fit: contain; }
.authenticator-card h1 { margin: 0; font-size: 1.65rem; font-weight: 500; line-height: 1.3; color: #233c54; }
.authenticator-description { margin: 0 0 24px; line-height: 1.65; color: #607385; text-align: center; }
.authenticator-message { margin: 0 0 16px; line-height: 1.5; }
.authenticator-message:empty { display: none; }
.authenticator-completion-notice { box-sizing: border-box; max-width: 560px; margin: 0 auto 20px; padding: 16px 20px; border: 1px solid #e7cc8d; border-radius: 6px; background: #fff8e8; color: #70531c; line-height: 1.6; }
.authenticator-login-confirmation { width: calc(100% - 32px); margin: 48px auto; }
.authenticator-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.authenticator-card .btn,
.authenticator-card .btn-flat { box-sizing: border-box; height: auto; min-height: 44px; padding: 10px 16px; border-radius: 6px; font: inherit; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: normal; cursor: pointer; }
.authenticator-actions > .btn { flex: 1 1 190px; }
.authenticator-card .btn:focus-visible,
.authenticator-card .btn-flat:focus-visible,
.authenticator-back:focus-visible { outline: 3px solid #8bcbd6; outline-offset: 3px; }
.authenticator-secondary-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.authenticator-secondary-actions > .btn-flat { flex: 1 1 190px; border: 1px solid #d9e3eb; background: #fff; color: #415c72; text-align: center; }
.authenticator-secondary-actions > .btn-flat:hover { background: #f2f7fa; }
.authenticator-card .authenticator-cancel { position: absolute; top: 10px; right: 12px; min-height: 32px; padding: 5px 8px; border: 0; background: transparent; color: #607385; font-size: .85rem; font-weight: 400; box-shadow: none; }
.authenticator-card .authenticator-cancel:hover { background: #f3f6f9; color: #233c54; }
.authenticator-back { display: block; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e8edf2; line-height: 1.5; text-align: center; }
.authenticator-field { margin-top: 20px; }
.authenticator-field label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 500; color: #415c72; }
.authenticator-field input[type=text],
.authenticator-field input[type=password] { box-sizing: border-box; width: 100%; margin-bottom: 0; padding: 0 12px; border: 1px solid #cbd7e1; border-radius: 6px; background: #fff; }
.authenticator-setup { margin-top: 24px; line-height: 1.6; }
.authenticator-setup code { display: block; margin-top: 8px; padding: 12px; border-radius: 6px; background: #f3f6f9; overflow-wrap: anywhere; }
#authenticatorQr { box-sizing: border-box; width: 256px; max-width: 100%; margin: 20px auto; padding: 16px; background: #fff; }
#authenticatorQr img, #authenticatorQr canvas { display: block; max-width: 100%; height: auto; }
.authenticator-recovery { margin: 20px 0; padding: 16px; border: 1px solid #dfe7ee; border-radius: 6px; background: #f7f9fb; font-size: 1rem; line-height: 1.9; letter-spacing: .05em; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
#recoveryPanel > .btn { width: 100%; }
@media (max-width: 480px) {
    .authenticator-page { padding: 24px 12px; }
    .authenticator-card { padding: 28px 20px; }
    .authenticator-card h1 { font-size: 1.45rem; }
    .authenticator-secondary-actions > .btn-flat { flex-basis: 100%; }
}