.progress-circle {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto;
        }
        .progress-circle canvas {
            display: block;
        }
        .progress-circle .percentage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.5rem;
            font-weight: bold;
        }
        .progress-circle.blue .percentage { color: #3b82f6; }
        .progress-circle.red .percentage { color: #ef4444; }
        .progress-circle.green .percentage { color: #22c55e; }
        .progress-circle.yellow .percentage { color: #eab308; }
        .progress-circle.orange .percentage { color: #f97316; }