/* Lightweight utility classes for spacing, layout, width and display */

/* Ensure hidden attribute always wins over utility display rules */
[hidden] { display: none !important; }

/* Display */
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-block { display: block !important; }
.u-inline { display: inline !important; }

/* Flex direction */
.u-flex-col { flex-direction: column !important; }
.u-flex-row { flex-direction: row !important; }

/* Flex grow/shrink */
.u-flex-1 { flex: 1 1 auto !important; }
.u-flex-none { flex: 0 0 auto !important; }

/* Align + justify */
.u-items-center { align-items: center !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-between { justify-content: space-between !important; }

/* Gap */
.u-gap-2 { gap: 6px !important; }
.u-gap-3 { gap: 8px !important; }
.u-gap-4 { gap: 12px !important; }
.u-gap-5 { gap: 16px !important; }

/* Width/height */
.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }

/* Min heights */
.u-minh-0 { min-height: 0 !important; }
.u-minh-52 { min-height: 52px !important; }

/* Position helpers */
.u-sticky-top { position: sticky !important; top: 0 !important; }
.u-inset-0 { position: fixed !important; inset: 0 !important; }
.u-abs-inset-0 { position: absolute !important; inset: 0 !important; }
.u-z-100 { z-index: 100 !important; }
.u-z-5000 { z-index: 5000 !important; }

/* Backgrounds */
.u-bg-black-98 { background: rgba(15,16,20,0.98) !important; }
.u-bg-white { background: #ffffff !important; }

/* Borders */
.u-border { border: 1px solid rgba(0,0,0,0.1) !important; }
.u-rounded { border-radius: 8px !important; }
.u-rounded-lg { border-radius: 12px !important; }

/* Shadows */
.u-shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important; }

/* Padding + margin */
.u-p-2 { padding: 8px !important; }
.u-p-3 { padding: 12px !important; }
.u-p-4 { padding: 16px !important; }
.u-pt-2 { padding-top: 8px !important; }
.u-pt-3 { padding-top: 12px !important; }
.u-pb-2 { padding-bottom: 8px !important; }
.u-pb-3 { padding-bottom: 12px !important; }
.u-m-0 { margin: 0 !important; }
.u-mb-2 { margin-bottom: 8px !important; }
.u-mb-3 { margin-bottom: 12px !important; }
.u-mt-2 { margin-top: 8px !important; }
.u-mt-3 { margin-top: 12px !important; }
.u-gap-wrap { gap: 8px !important; flex-wrap: wrap !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-cursor-default { cursor: default !important; }
.u-w-462 { width: 415.8px !important; } /* 462px - 10% = 415.8px */
.u-pre-wrap { white-space: pre-wrap !important; }
.u-overflow-auto { overflow: auto !important; }

/* Text */
.u-text-center { text-align: center !important; }
.u-text-muted { color: #6c757d !important; }
.u-fs-14 { font-size: 14px !important; }

/* Containers */
.u-container-narrow { width: min(520px, 95vw) !important; max-width: 95vw !important; }
.u-max-content-width { margin: 0 auto !important; width: min(100%, var(--content-max-width, 1100px)) !important; }


[hidden],
[hidden].u-flex,
[hidden].u-inline-flex,
[hidden].u-block { display: none !important; }