.points-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #2a1458 0%, #4b1d9e 100%);
    border: 1px solid #7c3aed;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: transform 300ms ease;
}

.points-badge--sm { padding: 4px 10px; font-size: 12px; gap: 6px; }
.points-badge--md { padding: 8px 16px; font-size: 14px; gap: 8px; }
.points-badge--lg { padding: 12px 22px; font-size: 18px; gap: 10px; }

.points-badge-icon {
    font-size: 1.1em;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.points-badge-value {
    font-weight: 700;
}

.points-badge-label {
    opacity: 0.7;
    font-weight: 400;
}

.points-badge.is-updating {
    transform: scale(1.08);
}

.points-badge.is-earning .points-badge-value {
    color: #a5f3c3;
}

.points-badge.is-deducting .points-badge-value {
    color: #ff8a80;
}