.mfa-flash {
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  border: 1px solid #3f3f46;
  background: rgba(24, 24, 27, 0.8);
  color: #d4d4d8;
}
.mfa-flash--error {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}
.mfa-flash--ok {
  border-color: rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
}
#mfa-totp-setup-panel:not(.hidden) {
  display: block;
}
.mfa-backup-codes {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(9, 9, 11, 0.9);
}
.mfa-backup-codes__title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: #fbbf24;
}
.mfa-backup-codes__list {
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #fde68a;
  background: #09090b;
  border: 1px solid #3f3f46;
  white-space: pre-wrap;
  user-select: all;
}
.mfa-backup-codes__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mfa-backup-codes__copy,
.mfa-backup-codes__done {
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  border: 1px solid #3f3f46;
  background: #18181b;
  color: #e4e4e7;
  cursor: pointer;
}
.mfa-backup-codes__copy:hover,
.mfa-backup-codes__done:hover {
  border-color: #10b981;
  color: #fff;
}
.mfa-backup-codes__done {
  border-color: rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
}