fix(ui): kill .styler bands + label icons + deepen pill contrast

User feedback on the mobile screenshot flagged three remaining issues:

1. Slate-blue horizontal bands above and below the Generate button.
Cause: Gradio wraps each Row/Form in a <div class="styler …">
whose default background is var(--border-color-primary) — which
we set to #1F1F1F (BORDER). On Samsung's cool-temperature display
that #1F1F1F reads as bluish-grey. Force .styler inside .ams-content
to background:transparent so the form rows blend into the panel.

2. Tiny 11x11 music-note / braces SVG icons next to OUTPUT and
METADATA labels. Gradio inlines these inside the <label> as a
decoration. The wireframe does not show them; they overlap the
label text at small sizes. Hide via
.ams-content .ams-out label svg { display:none } while keeping
the LARGE empty-state SVG (which lives in a separate .empty.svelte-…
container) visible.

3. Bluish perception on Vocal mode pills. The pill backgrounds were
SURFACE_STRONG (#000) unselected / SURFACE_RAISED (#1A1A1A) selected.
The selected #1A1A1A neutral grey can read cool-bluish on phones.
Switch both states to pitch black #000 with white border on
selected — eliminates any neutral grey that could be perceptually
tinted.

Also added defensive .ams-content > .row, > .row > .column, .form
background:transparent overrides so no nested Gradio wrapper can
re-introduce a slate fill.

Verified at 360 px via Playwright: no bands around Generate, panel
labels clean, pills pure black. Theme L1 tests still pass (3/3),
ruff clean.

theme.py

@@ -398,7 +398,9 @@ main, .contain {{
   letter-spacing:0 !important;
   font-weight:500 !important;
   color:{INK} !important;
-  background:{SURFACE_STRONG} !important;
+  /* Pure pitch-black background so cool-display tinting can't read
+     into a neutral grey as bluish. */
+  background:#000 !important;
   border:1px solid {BORDER} !important;
   border-radius:3px !important;
   padding:7px 12px !important;
@@ -409,11 +411,11 @@ main, .contain {{
 }}
 .ams-content .wrap > label:hover {{
   border-color:{BORDER_STRONG} !important;
-  background:{HOVER_BG} !important;
+  background:#0F0F0F !important;
 }}
 .ams-content .wrap > label:has(input[type="radio"]:checked) {{
   border-color:{PRIMARY} !important;
-  background:{SURFACE_RAISED} !important;
+  background:#0F0F0F !important;
 }}
 /* Custom radio dot */
 .ams-content .wrap > label input[type="radio"] {{
@@ -495,12 +497,49 @@ main, .contain {{
   padding:0 0 6px 0 !important;
   display:block !important;
 }}
-/* Empty-state svg glyphs (music note, JSON braces) — center + muted */
-.ams-content .ams-out svg {{
+/* Hide Gradio's tiny inline icon SVG that sits inside the Output /
+   Metadata label (an 11x11 music-note / braces glyph). The wireframe
+   doesn't show these; they overlap the label text and create a
+   "broken" feel. Note that the LARGE empty-state SVG (centered in
+   the panel body) lives inside ``.empty.svelte-v95lt3`` and is
+   spared by this selector since it's not a direct label child. */
+.ams-content .ams-out label svg,
+.ams-content .ams-out > label > span:first-child:has(svg) {{
+  display:none !important;
+}}
+/* The large empty-state SVG centered in the panel body — keep, but
+   make it visually softer (muted faint ink, low opacity). */
+.ams-content .ams-out .empty svg,
+.ams-content .ams-out [class*="empty"] svg {{
   color:{INK_FAINT} !important;
   opacity:0.5 !important;
 }}
 
+/* ============================================================
+ * Defeat Gradio's ``div.styler`` wrapper backgrounds.
+ * Gradio wraps every Row / Form in a <div class="styler svelte-..."
+ * which has background:var(--border-color-primary) = #1F1F1F by
+ * default. That produces visible slate-blue "bands" between the
+ * form rows (most obviously around the Generate button) on cool
+ * displays. Force it transparent everywhere inside our content.
+ * ============================================================ */
+.ams-content .styler,
+.ams-content [class*="styler"],
+.ams-content .form > .styler {{
+  background:transparent !important;
+  border:none !important;
+  padding:0 !important;
+}}
+
+/* Defeat any residual Gradio block bg that might pull a slate value
+   despite our --neutral-* override (defensive, harmless if it's
+   already correct). */
+.ams-content > .row,
+.ams-content > .row > .column,
+.ams-content .form {{
+  background:transparent !important;
+}}
+
 /* Add explicit gap between form column and output column when stacked */
 @media (max-width: 768px) {{
   .ams-tab-pane > .row,