.mfa-login-grid { max-width: 38rem; margin-inline: auto; }
.topbar > .brand { min-height: 44px; align-items: center; }
.topbar > .brand:focus-visible { outline: 3px solid #ba852d; outline-offset: 3px; }
.auth-second-factor {
  box-sizing: border-box;
  max-width: 38rem;
  margin: 1.5rem auto;
  padding: clamp(1rem, 4vw, 2rem);
}
.auth-second-factor h3 { margin-top: 0; }
.auth-second-factor label { display: block; margin: 1rem 0 .5rem; }
.auth-second-factor input:not([type="checkbox"]),
.auth-second-factor textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: .5rem;
  padding: .75rem;
  font: inherit;
  border: 1px solid #9caebc;
  border-radius: .35rem;
}
.auth-second-factor select { box-sizing: border-box; width: 100%; min-height: 44px; margin-top: .5rem; padding: .5rem; font: inherit; }
.mfa-settings-dialog { width: min(38rem, calc(100vw - 1rem)); max-height: calc(100dvh - 2rem); margin: auto; overflow: auto; border: 1px solid #9caebc; border-radius: .6rem; color: #183d50; background: #fff; }
.mfa-settings-dialog::backdrop { background: rgb(16 35 48 / .45); }
.mfa-settings-header { display: flex; gap: 1rem; align-items: start; justify-content: space-between; }
.mfa-settings-header h2 { margin-top: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.auth-second-factor ol { padding-left: 1.4rem; }
.auth-second-factor li { margin-block: .5rem; }
.auth-second-factor .mfa-secret,
.auth-second-factor .mfa-recovery-codes { font-family: ui-monospace, monospace; }
.auth-second-factor .mfa-help { font-size: .9rem; color: #425a6d; }
.auth-second-factor .mfa-qr { display: block; width: min(100%, 250px); height: auto; margin: 1rem auto; }
.auth-second-factor summary { min-height: 44px; cursor: pointer; padding-block: .6rem; }
.auth-second-factor .mfa-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-block: 1.5rem .5rem; }
.auth-second-factor .button { min-height: 44px; white-space: normal; }
.auth-second-factor .mfa-continue:disabled {
  background: #e2e8ee;
  border-color: #9caebc;
  color: #425a6d;
  opacity: .7;
  cursor: not-allowed;
  box-shadow: none;
}
.auth-second-factor .mfa-saved { display: flex; gap: .75rem; align-items: flex-start; }
.auth-second-factor .mfa-saved input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin-top: .2rem; }
.auth-second-factor :focus-visible { outline: 3px solid #ba852d; outline-offset: 3px; }
@media (max-width: 420px) {
  .mfa-settings-header { flex-direction: column; }
  .mfa-settings-header h2 { font-size: 1.35rem; }
  .auth-second-factor .mfa-actions { display: grid; }
  .auth-second-factor .button { width: 100%; }
}