.badge,
.tg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.badge__sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
}

.badge--success,
.tg-badge--success {
    background: rgba(31, 157, 85, 0.12);
    color: var(--color-success);
}

.badge--warning,
.tg-badge--warning {
    background: rgba(240, 162, 2, 0.14);
    color: var(--color-warning);
}

.badge--danger,
.tg-badge--danger {
    background: rgba(215, 38, 61, 0.12);
    color: var(--color-danger);
}

.badge--info,
.tg-badge--info {
    background: rgba(15, 108, 189, 0.12);
    color: var(--color-info);
}

.badge--neutral,
.tg-badge--neutral,
.tg-badge--muted {
    background: #f3f4f6;
    color: var(--color-text-muted);
}