.cell { display: flex; align-items: center; gap: 6px; }
.bar  { width: 48px; height: 6px; border-radius: 3px; background: var(--color-surface); overflow: hidden; }
.fill { height: 100%; border-radius: 3px; transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.high { background: linear-gradient(90deg, #00ff88, #76b900); }
.mid  { background: linear-gradient(90deg, #ffaa00, #ff8c00); }
.low  { background: linear-gradient(90deg, #ff4444, #cc0000); }
.value { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
.none  { color: var(--color-text-dim); }

/* 📖 Light theme: drop the neon gradients to deep, saturated versions. */
:global([data-theme="light"]) .high { background: linear-gradient(90deg, #008f4d, #4a7a00); }
:global([data-theme="light"]) .mid  { background: linear-gradient(90deg, #b86b00, #c45a00); }
:global([data-theme="light"]) .low  { background: linear-gradient(90deg, #c8143a, #990000); }