.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-medium); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-danger { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.btn-danger:hover { background: #FEE2E2; }

.btn-add {
  background: transparent;
  color: var(--text-tertiary);
  border: 1.5px dashed var(--border-medium);
  width: 100%;
}
.btn-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 22px; font-size: 14px; }
.btn-icon { padding: 6px; width: 32px; height: 32px; }
.btn-icon.btn-sm { width: 26px; height: 26px; padding: 4px; }
.btn-icon svg { width: 16px; height: 16px; }
.btn-full { width: 100%; }