.account-email-settings {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border, #26303a);
  border-radius: 14px;
  background: rgba(255,255,255,.018);
}

.account-email-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}

.account-email-status > span,
.account-email-status > small { color: var(--muted, #7d8996); }
.account-email-status > small { grid-column: 2; font-size: 12px; }
.account-email-status > small.verified { color: #7ee2a8; }
.account-email-code { display: grid; gap: 10px; }
.admin-delete-user { margin-top: 14px; }

.rules-acceptance-panel {
  width: min(520px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
}

.rules-page-link { width: fit-content; text-decoration: none; }
.rules-acceptance-check {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border, #26303a);
  border-radius: 10px;
}

#authScreen .auth-checkbox {
  min-height: 44px;
  align-items: center;
}

#authScreen .auth-checkbox input,
.rules-acceptance-check input {
  min-width: 20px;
  min-height: 20px;
}

#usernameInput:focus-visible,
#accountEmailInput:focus-visible,
#accountEmailCodeInput:focus-visible,
.admin-delete-user:focus-visible,
.rules-page-link:focus-visible,
#rulesAcceptanceButton:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.auth-message.error { color: #ff8f8f; }

.authenticator-qr {
  width: min(240px, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

@media (max-width: 620px) {
  .account-email-status { grid-template-columns: 1fr; }
  .account-email-status > small { grid-column: 1; }
  .account-email-settings { padding: 14px; }
  #authScreen .auth-checkbox { width: 100%; }
  #authScreen .auth-text-actions { flex-wrap: wrap; }
}