.btn {
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  transition: 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #0f766e 100%);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #115e59 100%);
}

.btn-secondary {
  background: #eef2ff;
  color: #4338ca;
}

.btn-danger {
  background: #fee2e2;
  color: var(--danger);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.btn-ghost[data-action="back"],
.btn-ghost[data-action="cancel"] {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border-color: #d97706;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

.btn-ghost[data-action="back"]:hover,
.btn-ghost[data-action="cancel"]:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  color: white;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: white;
  display: grid;
  place-items: center;
}

.btn-icon {
  background: transparent;
  color: inherit;
  border: none;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 180ms ease;
}

.btn-icon:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: none;
  box-shadow: none;
}