/* ── DONUT ───────────────────────────────────────── */
.donut{position:relative;width:140px;height:140px;flex:none;border-radius:50%}
.donut-hole{position:absolute;inset:18px;border-radius:50%;background:var(--sf);display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ── BAR CHART ───────────────────────────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar-rect{width:100%;max-width:46px;border-radius:8px 8px 0 0;transform-origin:bottom;animation:growbar .5s ease both}
.progress-row{display:flex;flex-direction:column;gap:11px}
.progress-item{display:flex;flex-direction:column;gap:4px}
.progress-bar{height:8px;border-radius:var(--rf);background:var(--sf3);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--rf);transform-origin:left;animation:growbar .6s ease both}