.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn-primary {
  background: linear-gradient(135deg,#22c55e,#4ade80);
  color: #022c22;
  box-shadow: 0 16px 40px rgba(22,163,74,0.55);
}
.btn-primary:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.btn-ghost {
  background: #ffffff;
  color: #111827;
  border-color: rgba(148,163,184,0.7);
}
.btn-ghost:hover {
  background: #f9fafb;
  box-shadow: 0 10px 26px rgba(15,23,42,0.10);
}

.btn-pill {
  border-radius: 999px;
}

.btn-sm { padding: 6px 14px; font-size: 12px; }
.btn-lg { padding: 10px 22px; font-size: 14px; }

.btn-danger {
  background: #dc2626;
  color: #fef2f2;
}
.btn-danger:hover {
  background: #b91c1c;
}

.btn:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
}
.btn-danger:focus-visible {
  outline-color: #dc2626;
}
.btn-success:focus-visible {
  outline-color: #16a34a;
}