/* DONUT */
.donut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 14px; }
.donut-card { display: flex; align-items: center; gap: 14px; }
.donut { position: relative; width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; }
.donut-hole { position: absolute; inset: 16px; border-radius: 50%; background: var(--bg-1); border: 1px solid var(--border); display: grid; place-items: center; text-align: center; font-size: 10px; line-height: 1.3; color: var(--text-2); }
.donut-hole strong { font-family: 'DM Mono', monospace; font-size: 14px; color: var(--text); }

/* BAR CHART */
.bar-chart { display: flex; align-items: flex-end; gap: 10px; min-height: 180px; padding-top: 14px; }
.bar-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.bar-track { display: flex; align-items: flex-end; gap: 5px; min-height: 140px; }
.bar { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--bg-3); min-height: 3px; }
.bar.revenue { background: rgba(91,143,255,0.65); }
.bar.margin  { background: rgba(76,175,130,0.65); }
.bar.cf-cur  { background: rgba(255,255,255,0.18); }
.bar.cf-new  { background: rgba(91,143,255,0.7); }
.bar-label { text-align: center; font-size: 10px; color: var(--text-3); }