/* ============================================
   15. UTILITAIRES
   ============================================ */
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.flex { display: flex; }
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-gray-500 { color: var(--gray-500); }
.text-green { color: var(--green-500); }
.text-red { color: var(--red-500); }
.font-bold { font-weight: 700; }

.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: 4px; }
.mb-12 { margin-bottom: 12px; }
.mb-20 { margin-bottom: 20px; }
.mb-28 { margin-bottom: 28px; }
.mt-4 { margin-top: 4px; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.mr-6 { margin-right: 6px; }
.p-28 { padding: 28px; }
.p-32 { padding: 32px; }
.w-full { width: 100%; }
.hidden { display: none; }
.relative { position: relative; }
.inline-flex { display: inline-flex; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.8125rem; }
.color-gray-400 { color: var(--gray-400); }
.max-w-520 { max-width: 520px; }
.max-w-500 { max-width: 500px; }
.max-h-280 { max-height: 280px; }
.mx-auto { margin: 0 auto; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.empty-state-text { text-align: center; padding: 32px; color: var(--gray-400); }
.btn-sm { font-size: 0.875rem; padding: 6px 16px; }
.font-mono { font-family: monospace; font-size: 0.8125rem; }
.border-top { border-top: 1px solid var(--gray-200); }
.pt-20 { padding-top: 20px; }