Variant title bars: mint fill on the meter, muted track behind

app.py

@@ -1194,13 +1194,18 @@ def _variants_prompt_card_html(prompt_text: str) -> str:
 
 
 def _bars(v: int) -> str:
-    """Map a 0–100 score to a 4-block bar string. Quartiles at 12/38/63/88."""
+    """Map a 0–100 score to a 4-block bar HTML string. Quartiles at 12/38/63/88.
+
+    Returns inline HTML with a `.fill` span on the filled portion so the
+    measured axis (mint) reads as colour-coded fill against the muted
+    `▯` track behind it — that's the metering colour the variant titles
+    rely on for at-a-glance match strength."""
     if v >= 88: n = 4
     elif v >= 63: n = 3
     elif v >= 38: n = 2
     elif v >= 12: n = 1
     else: n = 0
-    return "▮" * n + "▯" * (4 - n)
+    return f'<span class="fill">{"▮" * n}</span>{"▯" * (4 - n)}'
 
 
 def _variant_title_html(idx: int, breakdown: dict | None) -> str:

theme.py

@@ -432,12 +432,16 @@ h3 { font-size: 13px; color: #C9CDD4; }
     font-family: 'JetBrains Mono', monospace;
     font-size: 10px;
     line-height: 1.2;
-    color: #C9CDD4;
+    color: #5E6671;  /* track behind the meter — muted grey */
     text-align: left;
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.dc-variant-title .bars .fill {
+    color: #5BE0C8;  /* mint — measured axis, the metering colour */
+    font-weight: 600;
+}
 .dc-variant-title .bars.placeholder {
     color: #3A3F47;  /* faded — pre-regen state */
 }