.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
    line-height: 1.4;
    border: 1px solid transparent;

    &--pill    { border-radius: var(--radius-pill); }
    &--primary { background: var(--color-primary-soft); color: var(--color-primary); }
    &--success { background: rgba(22, 163, 74, .12);   color: #15803D; }
    &--warning { background: rgba(217, 119, 6, .12);   color: #B45309; }
    &--danger  { background: rgba(220, 38, 38, .12);   color: #B91C1C; }
    &--info    { background: rgba(14, 165, 233, .12);  color: #0369A1; }
    &--muted   { background: var(--color-surface-alt);  color: var(--color-text-muted); }

    &__dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: currentColor;
        display: inline-block;
    }
    &__icon { display: inline-flex; }
}