.circle-container {
    position: relative;
    width: 32px;
    height: 32px;
    background: white;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

    .circle-container svg {
        transform: rotate(-90deg);
        position: absolute;
    }

.circle-bg {
    fill: none;
    stroke: var(--color-gray);
    stroke-width: 3;
}

.circle-progress {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 106.81;
}

.percentage-text {
    font-size: 8px;
    font-weight: bold;
    color: #667eea;
    z-index: 1;
}