/* ==========================================================================
   Utilities — single-purpose helpers for one-off adjustments in the markup.
   They replace the inline style="" attributes of the original artifact and
   are !important so they keep the exact precedence an inline style had.
   ========================================================================== */

.u-bg-amber-100 { background: var(--color-amber-100) !important; }
.u-bg-amber-200 { background: var(--color-amber-200) !important; }
.u-bg-amber-500 { background: var(--color-amber-500) !important; }
.u-bg-blue-100 { background: var(--color-blue-100) !important; }
.u-bg-blue-500 { background: var(--color-blue-500) !important; }
.u-bg-blue-600 { background: var(--color-blue-600) !important; }
.u-bg-green-100 { background: var(--color-green-100) !important; }
.u-bg-green-200 { background: var(--color-green-200) !important; }
.u-bg-green-600 { background: var(--color-green-600) !important; }
.u-bg-red-100 { background: var(--color-red-100) !important; }
.u-bg-red-600 { background: var(--color-red-600) !important; }
.u-bg-slate-50 { background: var(--color-slate-50) !important; }
.u-bg-slate-300 { background: var(--color-slate-300) !important; }
.u-bg-violet-100 { background: var(--color-violet-100) !important; }
.u-bg-violet-500 { background: var(--color-violet-500) !important; }
.u-bg-violet-600 { background: var(--color-violet-600) !important; }
.u-border-0 { border: 0 !important; }
.u-border-b-0 { border-bottom: 0 !important; }
.u-border-t { border-top: 1px solid var(--color-border) !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-flex { display: flex !important; }
.u-flex-1 { flex: 1 !important; }
.u-flex-1-1-320 { flex: 1 1 320px !important; }
.u-flex-col { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-font-inherit { font: inherit !important; }
.u-fs-12 { font-size: var(--font-size-400) !important; }
.u-fs-12-5 { font-size: var(--font-size-500) !important; }
.u-fs-13 { font-size: var(--font-size-600) !important; }
.u-fs-14 { font-size: var(--font-size-800) !important; }
.u-fs-15 { font-size: var(--font-size-900) !important; }
.u-fs-16 { font-size: 16px !important; }
.u-fs-20 { font-size: 20px !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-gap-2 { gap: 2px !important; }
.u-gap-10 { gap: 10px !important; }
.u-gap-16 { gap: var(--space-md) !important; }
.u-gap-18 { gap: 18px !important; }
.u-grid { display: grid !important; }
.u-h-8 { height: 8px !important; }
.u-h-12 { height: 12px !important; }
.u-h-32 { height: 32px !important; }
.u-h-36 { height: 36px !important; }
.u-h-80 { height: 80px !important; }
.u-h-96 { height: 96px !important; }
.u-h-108 { height: 108px !important; }
.u-h-220 { height: 220px !important; }
.u-h-300 { height: 300px !important; }
.u-items-center { align-items: center !important; }
.u-justify-between { justify-content: space-between !important; }
.u-m-0 { margin: 0 !important; }
.u-m-10-0-6 { margin: 10px 0 6px !important; }
.u-m-10-0-8 { margin: 10px 0 8px !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-min-w-0 { min-width: 0 !important; }
.u-min-w-150 { min-width: 150px !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mt-2 { margin-top: 2px !important; }
.u-mt-4 { margin-top: 4px !important; }
.u-mt-6 { margin-top: 6px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-my-4 { margin: 4px 0 !important; }
.u-normal-case { text-transform: none !important; }
.u-nowrap { white-space: nowrap !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-p-2-8 { padding: 2px 8px !important; }
.u-p-6-18 { padding: 6px 18px !important; }
.u-p-6-18-18 { padding: 6px 18px 18px !important; }
.u-p-12-0-4 { padding: 12px 0 4px !important; }
.u-p-14 { padding: 14px !important; }
.u-p-16 { padding: var(--space-md) !important; }
.u-p-18 { padding: 18px !important; }
.u-place-center { place-items: center !important; }
.u-pr-16 { padding-right: 16px !important; }
.u-py-7 { padding: 7px 0 !important; }
.u-py-9 { padding: 9px 0 !important; }
.u-ring-1-5-violet-400 { box-shadow: inset 0 0 0 1.5px var(--color-violet-400) !important; }
.u-ring-1-green-300 { box-shadow: inset 0 0 0 1px var(--color-green-300) !important; }
.u-rounded-md { border-radius: var(--radius-md) !important; }
.u-self-start { align-self: start !important; }
.u-text-amber-800 { color: var(--color-amber-800) !important; }
.u-text-blue-600 { color: var(--color-blue-600) !important; }
.u-text-blue-800 { color: var(--color-blue-800) !important; }
.u-text-left { text-align: left !important; }
.u-text-red-800 { color: var(--color-red-800) !important; }
.u-text-right { text-align: right !important; }
.u-text-slate-500 { color: var(--color-slate-500) !important; }
.u-text-slate-900 { color: var(--color-slate-900) !important; }
.u-tracking-normal { letter-spacing: 0 !important; }
.u-w-32 { width: 32px !important; }
.u-w-34 { width: 34px !important; }
.u-w-36 { width: 36px !important; }
.u-w-44 { width: 44px !important; }
.u-w-50 { width: 50px !important; }
.u-w-64 { width: 64px !important; }
.u-w-120 { width: 120px !important; }
.u-w-full { width: 100% !important; }