Per-position accent borders on the use-case pills

static/style.css

@@ -234,6 +234,20 @@ textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
 .uc-pill.active .pic { color: var(--accent); }
 .uc-cat .ic { font-size: 14px; color: var(--text-muted); }
 
+/* Same coloured-boundary treatment as the segmented rows: each position in a
+   group gets its own accent when selected (palette cycles past 6 items). */
+.uc-grid .uc-pill:nth-child(6n+1) { --segc: #60A5FA; }
+.uc-grid .uc-pill:nth-child(6n+2) { --segc: #4ADE80; }
+.uc-grid .uc-pill:nth-child(6n+3) { --segc: #F472B6; }
+.uc-grid .uc-pill:nth-child(6n+4) { --segc: #FBBF24; }
+.uc-grid .uc-pill:nth-child(6n+5) { --segc: #2DD4BF; }
+.uc-grid .uc-pill:nth-child(6n)   { --segc: #C084FC; }
+.uc-pill.active {
+  border-color: var(--segc, var(--accent));
+  background: color-mix(in srgb, var(--segc, var(--accent)) 13%, transparent);
+}
+.uc-pill.active .pic { color: var(--segc, var(--accent)); }
+
 /* Disclosure (advanced / accordions) */
 details.disc {
   border: 1px solid var(--border); border-radius: var(--r-md);