Reset to Defaults Button

<div class="nuda-reset">
  <button type="button" class="nuda-reset__btn">
    <svg class="nuda-reset__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M2.5 8a5.5 5.5 0 1 0 1.6-3.9" stroke="currentColor"
            stroke-width="1.5" stroke-linecap="round" />
      <path d="M2.5 2.5v3h3" stroke="currentColor" stroke-width="1.5"
            stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <span>Reset to defaults</span>
  </button>
  <div class="nuda-reset__confirm" role="alertdialog" aria-label="Confirm reset">
    <span class="nuda-reset__msg">Reset all preferences?</span>
    <div class="nuda-reset__actions">
      <button type="button" class="nuda-reset__cancel">Cancel</button>
      <button type="button" class="nuda-reset__yes">Reset</button>
    </div>
  </div>
</div>

/* Reset to Defaults Button
   A neutral button that morphs into a confirmation row on hover/focus.
   Customize: --danger, --card-bg */

.nuda-reset {
  --danger: #ef4444;
  --card-bg: #0c0c10;
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 44px;
}

.nuda-reset__btn,
.nuda-reset__confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--card-bg);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
}

.nuda-reset__btn {
  justify-content: center;
  gap: 0.5rem;
  color: #a0a0a8;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 0 1rem;
}

.nuda-reset__btn:hover {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.18);
}

.nuda-reset__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-reset__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.nuda-reset__confirm {
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.375rem 0 0.875rem;
  background: #111114;
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
}

.nuda-reset:hover .nuda-reset__btn,
.nuda-reset:focus-within .nuda-reset__btn {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
}

.nuda-reset:hover .nuda-reset__confirm,
.nuda-reset:focus-within .nuda-reset__confirm {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.nuda-reset__msg {
  color: #fafafa;
  font-size: 0.8125rem;
  font-weight: 500;
}

.nuda-reset__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.nuda-reset__cancel,
.nuda-reset__yes {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  transition: background 0.2s ease;
}

.nuda-reset__cancel {
  background: transparent;
  color: #a0a0a8;
}

.nuda-reset__cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fafafa;
}

.nuda-reset__yes {
  background: var(--danger);
  color: #fafafa;
}

.nuda-reset__yes:hover {
  background: #dc2626;
}

.nuda-reset__cancel:focus-visible,
.nuda-reset__yes:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-reset__btn,
  .nuda-reset__confirm,
  .nuda-reset__cancel,
  .nuda-reset__yes {
    transition: none;
  }
}