.chart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.chart-head-text { font-size: 1.05rem; font-weight: 700; color: #c8b8e0; }

.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bar-label {
  width: clamp(72px, 18vw, 172px); font-size: clamp(0.72rem, 1.7vw, 0.88rem);
  font-weight: 500; color: var(--text-muted); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.5s; flex-shrink: 0;
}
.bar-label.lit { color: #c8b8e0; }
.bar-label.fail { color: var(--text-muted); }

.bar-track {
  flex: 1; min-width: 0;
  position: relative; height: clamp(20px, 3.2vw, 28px); border-radius: 5px;
}
.bar-gray {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #22223a, #2d2d48); transition: opacity 0.4s;
}
.bar-fill {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #6d28d9, #a855f7); width: 0%; z-index: 2;
}
.bar-over {
  position: absolute; top: -2px; left: 0; height: calc(100% + 4px); border-radius: 6px;
  background: linear-gradient(90deg, #dc2626, #f87171);
  opacity: 0; z-index: 3; box-shadow: 0 0 18px rgba(239,68,68,0.6);
}
.bar-over.flash { animation: overFlash 0.8s ease-out forwards; }
@keyframes overFlash { 0%{opacity:.85} 30%{opacity:1} 100%{opacity:0} }

.bar-remaining {
  position: absolute; top: 0; height: 100%; border-radius: 5px;
  border: 2px dashed rgba(168,85,247,0.45); z-index: 1; opacity: 0; transition: opacity 0.6s 0.2s;
}
.bar-remaining.show { opacity: 1; }

.over-tag {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  font-size: 0.6rem; font-weight: 900; color: #ff4444; letter-spacing: 1px;
  opacity: 0; z-index: 5; text-shadow: 0 0 6px rgba(255,68,68,0.4);
}
.over-tag.show { animation: tagPop 1s ease-out forwards; }
@keyframes tagPop {
  0%{opacity:0;transform:translateY(-50%) scale(.5)}
  20%{opacity:1;transform:translateY(-50%) scale(1.15)}
  40%{opacity:1;transform:translateY(-50%) scale(1)}
  100%{opacity:0;transform:translateY(-50%) scale(.8)}
}

.scan-line {
  position: absolute; top: -2px; width: 3px; height: calc(100% + 4px);
  background: var(--gold); border-radius: 2px; z-index: 10;
  box-shadow: 0 0 14px rgba(255,215,0,0.6), 0 0 5px rgba(255,215,0,0.35);
  opacity: 0; left: 0;
}
.scan-line.visible { opacity: 1; }

.bar-value {
  min-width: clamp(44px, 8vw, 64px);
  font-size: clamp(0.72rem, 1.6vw, 0.88rem); font-weight: 700;
  text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums;
  transition: color 0.5s; flex-shrink: 0;
}
.bar-value.lit { color: #c084fc; }
.bar-value.fail { color: var(--text-muted); }

.legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px;
  font-size: 0.8rem; color: var(--text-dim); opacity: 0; transition: opacity 0.6s;
}
.legend.show { opacity: 1; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.leg-sw { width: 22px; height: 11px; border-radius: 2px; flex-shrink: 0; }

@media (max-width: 600px) {
  .bar-row { gap: 5px; margin-bottom: 5px; }
}