/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-family: 'Exo 2', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-primary { background: linear-gradient(135deg, var(--blue-main), var(--blue-light)); color: white; box-shadow: 0 4px 12px rgba(30,93,181,0.4); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(30,93,181,0.5); }
.btn-success { background: linear-gradient(135deg, var(--green-dark), var(--green-main)); color: white; box-shadow: 0 4px 12px rgba(34,197,94,0.4); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(34,197,94,0.5); }
.btn-danger { background: linear-gradient(135deg, #b91c1c, var(--red)); color: white; }
.btn-warning { background: linear-gradient(135deg, #92400e, var(--orange)); color: white; }
.btn-ghost { background: var(--bg-card); border: 1px solid var(--gray-200); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--radius); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ── Responsive buttons ─────────────────────────────────────── */
@media (max-width: 768px) {
  .btn { padding: 8px 14px; font-size: 13px; }
  .btn-lg { padding: 11px 18px; font-size: 14px; }
  .nav-btn { padding: 5px 10px; font-size: 12px; }
}

@media (max-width: 600px) {
  .btn { min-height: 44px; font-size: 14px !important; padding: 10px 14px !important; }
  .btn-sm { min-height: 36px; font-size: 13px !important; }
}