.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.badge-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.badge-circle {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: default;
}
.badge-circle.earned { border: 2px solid transparent; }
.badge-circle.locked {
    background: var(--current-secondary-background);
    border: 2px dashed #7272722b;
}
.badge-circle.locked i { color: var(--color-text-tertiary); font-size: 22px; }
.badge-label { font-size: 11px; color: var(--color-text-secondary); text-align: center; max-width: 80px; line-height: 1.3; }
.badge-label.earned-label { color: var(--color-text-primary); font-weight: 500; }
.badge-rarity {
    font-size: 10px; padding: 2px 7px; border-radius: 99px;
    font-weight: 500; letter-spacing: 0.02em;
}