/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-2xl);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 11px 24px;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
  line-height: 1;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }
.btn--primary { background: var(--lime-500); color: var(--lime-900); border-color: var(--lime-500); }
.btn--primary:hover { transform: translateX(4px) translateY(-4px); box-shadow: -5px 6px 0 var(--lime-900); }
.btn--ghost   { background: var(--bg-elevated); color: var(--text-1); border-color: var(--n-500); }
.btn--ghost:hover { border-color: var(--orange-500); transform: translateX(4px) translateY(-4px); box-shadow: -5px 6px 0 var(--orange-500); }
.btn--teal    { background: var(--teal-500); color: var(--teal-900); border-color: var(--teal-500); }
.btn--teal:hover  { transform: translateX(4px) translateY(-4px); box-shadow: -5px 6px 0 var(--teal-900); }
.btn--outline { background: transparent; color: var(--lime-500); border-color: var(--lime-500); }
.btn--outline:hover { background: rgba(170,255,69,.07); transform: translateX(4px) translateY(-4px); box-shadow: -5px 6px 0 var(--lime-500); }
.btn--ghost-lime { background: var(--bg-elevated); color: var(--text-1); border-color: var(--lime-500); }
.btn--ghost-lime:hover { border-color: var(--lime-500); transform: translateX(4px) translateY(-4px); box-shadow: -5px 6px 0 var(--lime-500); }
.btn--danger  { background: transparent; color: var(--error); border-color: var(--error); }
.btn--danger:hover { background: rgba(248,113,113,.05); transform: translateX(4px) translateY(-4px); box-shadow: -5px 6px 0 var(--error); }
.btn--sm { padding: 7px 16px; font-size: 13px; border-radius: var(--r-lg); }
.btn--lg { padding: 15px 32px; font-size: 17px; }
.btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ── ICON BUTTON ─────────────────────────────────────────── */
.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  color: var(--text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-bounce);
  flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--n-500); color: var(--text-1); transform: scale(1.1); }
.btn-icon--sm   { width: 36px; height: 36px; }
.btn-icon--lime { background: var(--lime-500); color: var(--lime-900); border-color: var(--lime-500); }
.btn-icon--teal { background: var(--teal-500); color: var(--teal-900); border-color: var(--teal-500); }
.btn-icon svg   { width: 18px; height: 18px; }
.btn-icon--sm svg { width: 14px; height: 14px; }