.util-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

.util-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
}

.util-stack--xs { gap: var(--space-2); }
.util-stack--sm { gap: var(--space-3); }
.util-stack--lg { gap: var(--space-6); }

.util-cluster {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.util-cluster--between {
    justify-content: space-between;
}

.util-cluster--end {
    justify-content: flex-end;
}

.util-align-start { align-items: flex-start; }
.util-align-end { align-items: flex-end; }
.util-nowrap { flex-wrap: nowrap; }
.util-grow { flex: 1 1 auto; }
.util-shrink-0 { flex-shrink: 0; }
.util-min-w-0 { min-width: 0; }
.util-w-full { width: 100%; }

.util-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.util-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.util-grid-aside {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 1fr);
    gap: var(--space-8);
}

.util-mt-1 { margin-top: var(--space-1); }
.util-mt-2 { margin-top: var(--space-2); }
.util-mt-3 { margin-top: var(--space-3); }
.util-mt-4 { margin-top: var(--space-4); }
.util-mt-5 { margin-top: var(--space-5); }
.util-mt-6 { margin-top: var(--space-6); }
.util-mb-2 { margin-bottom: var(--space-2); }
.util-mb-3 { margin-bottom: var(--space-3); }
.util-mb-4 { margin-bottom: var(--space-4); }
.util-ml-auto { margin-left: auto; }

.util-text-2xs { font-size: var(--font-size-2xs); }
.util-text-xs { font-size: var(--font-size-xs); }
.util-text-sm { font-size: var(--font-size-sm); }
.util-text-base { font-size: var(--font-size-base); }
.util-text-lg { font-size: var(--font-size-lg); }
.util-text-xl { font-size: var(--font-size-xl); }
.util-font-medium { font-weight: var(--font-weight-medium); }
.util-font-semibold { font-weight: var(--font-weight-semibold); }
.util-text-muted { color: var(--color-text-muted); }
.util-text-primary { color: var(--color-primary); }
.util-text-success { color: var(--color-success); }
.util-text-warning { color: var(--color-warning); }
.util-text-danger { color: var(--color-danger); }
.util-text-right { text-align: right; }
.util-text-center { text-align: center; }
.util-leading-tight { line-height: var(--line-height-tight); }
.util-break-words { overflow-wrap: anywhere; }
.util-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.util-divider-list > * + * {
    border-top: 1px solid var(--color-border);
}

.util-icon-surface {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.util-panel-pad {
    padding: var(--space-5);
}

.util-code {
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-surface-muted);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.util-scroll-x {
    max-width: 100%;
    overflow-x: auto;
}

.util-desktop-only { display: initial; }
.util-mobile-only { display: none; }