#mfa-setup { min-width: 0; }
.mfa-intro { color: #79625d; margin: 16px 0 20px; }
.mfa-step { line-height: 1.7; }
.mfa-step > span {
  display: inline-grid; place-items: center; width: 25px; height: 25px;
  margin-right: 6px; border-radius: 50%; background: #eee4d6;
  color: #684b2f; font-size: 12px; font-weight: 700;
}
.mfa-qr { margin: 16px 0; text-align: center; }
.mfa-qr-frame {
  width: 280px; max-width: 100%; margin: 0 auto;
  background: #fff; border: 1px solid #ded2c6; border-radius: 12px;
  padding: 10px; box-shadow: 0 5px 20px #35202008;
}
.mfa-qr img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  image-rendering: pixelated; background: #fff;
}
.mfa-qr figcaption { margin-top: 8px; font-size: 12px; color: #79625d; overflow-wrap: anywhere; }
.mfa-manual { margin: 18px 0 22px; padding: 12px 14px; border: 1px solid #ded2c6; border-radius: 10px; }
.mfa-manual summary { cursor: pointer; font-size: 13px; font-weight: 600; outline-offset: 4px; }
.mfa-manual-content { margin-top: 12px; font-size: 13px; }
.mfa-manual .secret { display: block; user-select: all; margin: 12px 0; line-height: 1.8; color: #263128; }
#mfa-copy-status { font-size: 12px; margin-top: 8px; color: #79625d; }
#mfa-setup .field { margin: 14px 0 8px; }
#mfa-setup .mfa-code { font-size: 22px; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.mfa-help, .mfa-privacy { color: #79625d; font-size: 12px; }
.mfa-privacy { margin-top: 16px; }
@media (max-width: 380px) {
  #modal:has(#mfa-setup) { padding: 20px; }
  #modal:has(#mfa-setup) .form-actions { flex-wrap: wrap; }
}