.u-hidden {
    display: none !important;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.u-text-center {
    text-align: center !important;
}

.u-text-muted {
    color: var(--text-muted) !important;
}

.u-w-full {
    width: 100% !important;
}

.u-flex {
    display: flex !important;
}

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

.u-grid {
    display: grid !important;
}

.u-gap-sm {
    gap: var(--space-sm) !important;
}

.u-gap-md {
    gap: var(--space-md) !important;
}

.u-gap-lg {
    gap: var(--space-lg) !important;
}

.u-stack-sm > * + * {
    margin-top: var(--space-sm) !important;
}

.u-stack-md > * + * {
    margin-top: var(--space-md) !important;
}

.u-stack-lg > * + * {
    margin-top: var(--space-lg) !important;
}

.u-mt-sm {
    margin-top: var(--space-sm) !important;
}

.u-mt-md {
    margin-top: var(--space-md) !important;
}

.u-mt-lg {
    margin-top: var(--space-lg) !important;
}

.u-surface {
    border: var(--border-width-thin) solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
}

.u-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
}

.u-shadow-soft {
    box-shadow: var(--shadow-soft) !important;
}

.u-shadow-medium {
    box-shadow: var(--shadow) !important;
}