.mfa-setup-wrapper {
  max-width: 32rem;
  margin-inline: auto;
  color: var(--text-primary);

  & h1 { margin-bottom: var(--spacing-8); }
}

.mfa-setup-back-row { margin-bottom: var(--spacing-24); }

.mfa-setup-intro {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-32);
}

.mfa-setup-qr-row {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-24);

  & .mfa-setup-qr-tile {
    background-color: var(--color-white-solid);
    padding: var(--spacing-16);
    border-radius: var(--corner-radius-sm);
  }
}

.mfa-setup-manual {
  margin-bottom: var(--spacing-24);

  & .mfa-setup-manual-label {
    font-size: var(--font-size-12);
    line-height: 1rem;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-8);
  }

  & .mfa-setup-manual-code {
    display: block;
    background-color: var(--background-surface-2);
    padding: var(--spacing-12);
    border-radius: var(--corner-radius-sm);
    text-align: center;
    font-family: var(--font-family-mono);
    letter-spacing: 0.1em;
    word-break: break-all;
    user-select: all;
  }
}