.progressdisplay {
    --pd-primary: #d00000;
    --pd-secondary: #ef5350;
    --pd-track: #e9ecef;
    --pd-card: #f8f9fa;
    --pd-text: #212529;
    --pd-percentage: 0;
    width: 100%;
    color: var(--pd-text);
}
.progressdisplay, .progressdisplay * { box-sizing: border-box; }
.progressdisplay__intro { margin-bottom: .75rem; }
.progressdisplay__bar-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.progressdisplay__track { display: block; width: 100%; height: 1.875rem; overflow: hidden; background: var(--pd-track); border: 1px solid rgba(0,0,0,.14); border-radius: 999px; }
.progressdisplay__fill { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg,var(--pd-primary),var(--pd-secondary)); border-radius: inherit; transition: width .35s ease; }
.progressdisplay__circle-wrap { display: flex; justify-content: center; width: 100%; }
.progressdisplay__circle { display: grid; place-items: center; width: 200px; max-width: 80vw; aspect-ratio: 1; padding: 16px; border-radius: 50%; background: conic-gradient(var(--pd-primary) 0 calc(var(--pd-percentage) * 1%),var(--pd-track) calc(var(--pd-percentage) * 1%) 100%); }
.progressdisplay__circle-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1rem; text-align: center; background: var(--pd-card); border-radius: 50%; }
.progressdisplay__circle-inner strong { font-size: 2rem; line-height: 1.1; }
.progressdisplay__circle-inner span { margin-top: .35rem; }
.progressdisplay__values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-top: 1rem; }
.progressdisplay__value { display: flex; flex-direction: row; align-items: baseline; justify-content: center; flex-wrap: wrap; column-gap: .5rem; row-gap: .25rem; min-width: 0; padding: .75rem; text-align: center; background: var(--pd-card); border-radius: .5rem; }
.progressdisplay__value span { font-size: 1.1rem; }
@media (max-width: 767.98px) { .progressdisplay__values { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .progressdisplay__fill { transition: none; } }