.recovery-email {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.recovery-email strong {
  color: var(--copy);
}

.recovery-secondary {
  width: min(720px, 100%);
  margin-top: 12px;
  text-align: center;
}

.recovery-secondary button {
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.name-dialog {
  width: min(480px, calc(100% - 28px));
  border: 1px solid var(--store-line);
  border-radius: 6px;
  background: var(--store-panel);
  color: var(--copy);
  padding: 0;
  box-shadow: var(--store-shadow);
}

.name-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
  backdrop-filter: blur(4px);
}

.name-dialog form {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.name-dialog h2,
.name-dialog p {
  margin: 0;
}

.name-dialog h2 {
  font-size: 24px;
}

.name-dialog p {
  color: var(--muted);
  font-size: 13px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-cancel {
  min-height: 46px;
  border: 1px solid var(--store-line);
  border-radius: 5px;
  background: transparent;
  color: var(--copy);
  padding: 0 18px;
  cursor: pointer;
}

.recovery-options {
  display: grid;
  gap: 10px;
}

.recovery-option {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--store-line);
  border-radius: 5px;
  cursor: pointer;
}

.recovery-option:has(input:checked) {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.recovery-option input {
  position: absolute;
  opacity: 0;
}

.recovery-option strong {
  padding-right: 22px;
}

.recovery-option small {
  color: var(--muted);
}

@media (max-width: 560px) {
  .name-dialog form {
    padding: 22px;
  }

  .dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}