/* Header and cards share the common master-form-shell / ui-page-shell geometry. */
.mfa-page .main { min-width: 0; }
.mfa-page p, .mfa-page li, .mfa-page summary { line-height: 1.8; line-break: strict; overflow-wrap: anywhere; }
.mfa-page .settings-card h2 { font-size: clamp(18px, 4vw, 22px); }
.mfa-status { display: inline-block; color: #8a440e; background: #fff0df; border-radius: 999px; padding: 5px 14px; margin: 0 0 16px; }
.mfa-form { display: grid; gap: 20px; margin-top: 24px; }
.mfa-form label { display: grid; gap: 8px; }
.mfa-form input:not([type="hidden"]):not([type="checkbox"]) { box-sizing: border-box; width: 100%; min-height: 48px; border: 1px solid #d8b998; border-radius: 12px; padding: 12px; font: inherit; }
.mfa-form button { min-height: 48px; white-space: normal; line-height: 1.6; }
.mfa-form .mfa-check { display: flex; align-items: center; min-height: 44px; line-height: 1.8; }
.mfa-check input { flex-shrink: 0; width: 22px; height: 22px; accent-color: #c96513; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.mfa-codes li, .mfa-secret { background: #fff8ef; border: 1px solid #f4d8bb; border-radius: 10px; padding: 12px; }
.mfa-codes code { overflow-wrap: anywhere; }
.mfa-secret { display: block; overflow-wrap: anywhere; font-size: 18px; user-select: all; }
.mfa-options { margin-top: 20px; }
.mfa-options summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: #8a440e; }
.mfa-options details { border-top: 1px solid #f4d8bb; padding: 12px 0; }
.mfa-warning { color: #963e20; }
.mfa-steps { padding-left: 24px; }
.mfa-page :focus-visible { outline: 3px solid #a34e0d; outline-offset: 3px; }
.mfa-help summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: #8a440e; }
.mfa-help details + details { border-top: 1px solid #f4d8bb; }
.mfa-help a { overflow-wrap: anywhere; text-underline-offset: 3px; }
@media (max-width: 480px) {
    .mfa-codes { grid-template-columns: 1fr; }
}