.ui-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    max-width: 100%;
}

.ui-badge {
    --ui-badge-py: 2px;
    --ui-badge-px: 8px;
    --ui-badge-radius: 999px;
    --ui-badge-font-size: 11px;
    --ui-badge-line-height: 1.4;
    --ui-badge-font-weight: 700;
    --ui-badge-bg: rgba(0,0,0,0.06);
    --ui-badge-color: rgba(0,0,0,0.78);
    --ui-badge-border: rgba(0,0,0,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ui-badge-py) var(--ui-badge-px);
    border-radius: var(--ui-badge-radius);
    font-size: var(--ui-badge-font-size);
    line-height: var(--ui-badge-line-height);
    font-weight: var(--ui-badge-font-weight);
    border: 1px solid var(--ui-badge-border);
    background: var(--ui-badge-bg);
    color: var(--ui-badge-color);
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
}

.ui-badge:hover {
    text-decoration: none;
}

.ui-badge--neutral {
    --ui-badge-bg: rgba(0,0,0,0.06);
    --ui-badge-color: #374151;
    --ui-badge-border: rgba(0,0,0,0.06);
}

.ui-badge--primary {
    --ui-badge-bg: rgba(33,89,181,0.12);
    --ui-badge-color: #2159b5;
    --ui-badge-border: rgba(33,89,181,0.18);
}

.ui-badge--success {
    --ui-badge-bg: rgba(19,168,95,0.12);
    --ui-badge-color: #0d7a44;
    --ui-badge-border: rgba(19,168,95,0.18);
}

.ui-badge--warn {
    --ui-badge-bg: rgba(255,149,0,0.14);
    --ui-badge-color: #8a4b00;
    --ui-badge-border: rgba(255,149,0,0.18);
}

.ui-badge--danger {
    --ui-badge-bg: rgba(220,2,2,0.10);
    --ui-badge-color: #b30000;
    --ui-badge-border: rgba(220,2,2,0.16);
}

.ui-badge--info {
    --ui-badge-bg: rgba(10,132,255,0.12);
    --ui-badge-color: #0b63ce;
    --ui-badge-border: rgba(10,132,255,0.16);
}

.ui-badge--light {
    --ui-badge-bg: #f8fafc;
    --ui-badge-color: #475569;
    --ui-badge-border: #e2e8f0;
}

.ui-badge--dark {
    --ui-badge-bg: #111827;
    --ui-badge-color: #f9fafb;
    --ui-badge-border: #111827;
}

.ui-badge--outline {
    --ui-badge-bg: transparent;
}

.ui-badge--soft {
    --ui-badge-border: transparent;
}

.ui-badge--amount {
    font-variant-numeric: tabular-nums;
}

.ui-badge--xs {
    --ui-badge-font-size: 9px;
    --ui-badge-py: 1px;
    --ui-badge-px: 6px;
}

.ui-badge--sm {
    --ui-badge-font-size: 10px;
    --ui-badge-py: 1px;
    --ui-badge-px: 7px;
}

.ui-badge--md {
    --ui-badge-font-size: 12px;
    --ui-badge-py: 3px;
    --ui-badge-px: 10px;
}

.ui-badge--lg {
    --ui-badge-font-size: 13px;
    --ui-badge-py: 4px;
    --ui-badge-px: 12px;
}

.ui-badge--xl {
    --ui-badge-font-size: 14px;
    --ui-badge-py: 5px;
    --ui-badge-px: 14px;
}

.ui-badge--rounded {
    --ui-badge-radius: 10px;
}

.ui-badge--square {
    --ui-badge-radius: 6px;
}