feat: chart legend, fw bar height, feed fade, top tools mini bars

cmd/web-ui/static/style.css

@@ -1152,15 +1152,15 @@ tr.clickable:hover td:first-child {
 }
 
 .fw-bar-track {
-  height: 6px;
+  height: 8px;
   background: var(--surface-2);
-  border-radius: 3px;
+  border-radius: 4px;
   overflow: hidden;
 }
 
 .fw-bar-fill {
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
   transition: width 0.4s ease;
 }
 
@@ -1188,6 +1188,19 @@ tr.clickable:hover td:first-child {
   padding: 1.25rem;
   max-height: 480px;
   overflow-y: auto;
+  position: relative;
+}
+
+.feed-panel::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: linear-gradient(to bottom, transparent, var(--surface));
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  pointer-events: none;
 }
 
 .feed-panel .timeline-event {
@@ -1206,3 +1219,26 @@ tr.clickable:hover td:first-child {
 }
 
 .uplot .u-legend { display: none; }
+
+/* ── Chart legend ─────────────────────────────────────────── */
+.chart-legend {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.chart-legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}