/* =========================================
   UTILITIES — small single-purpose helpers (.hidden, .flex, .mb-16, ...)
   ========================================= */

.hidden { display: none !important; }

/* =========================================
   UTILITIES
   ========================================= */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-row { display: flex; align-items: center; flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); font-size: 0.82rem; }
.inline-flex { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================
   RESPONSIVE GRID UTILITIES
   ========================================= */
.responsive-grid-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }