fix(ui): full Brutalist Mono retheme — IBM Plex, padding crush, scoped selectors

Six issues from the user's manual mobile test:

1. Bluish background tint despite earlier --neutral-* override. Cause:
Gradio applies its CSS in multiple :root/.dark contexts. Solution:
override the neutral scale + body/block/input fill custom properties
under :root, html.dark, .gradio-container, .gradio-container.dark
AND .gradio-container .dark (all five contexts).

2. Huge ~60 px horizontal margins on the 360 px viewport. Cause:
.gradio-container > .app ships with padding: 16px 32px. Override
to 16px 20px on desktop and 8px 10px on mobile so the form actually
uses the available width.

3. Field labels rendering at 14 px (~24 visual px on phone) with
default Inter. Replace Inter with IBM Plex Sans (body) + IBM Plex
Mono (labels, status, metadata) — both via Google Fonts, both
distinctive enough to escape generic AI-slop aesthetics per the
frontend-design discipline. Shrink labels to 10 px desktop / 9 px
mobile, uppercase tracked mono, muted ink.

4. Helper text (gr.Textbox info=...) was getting uppercased + mono
because the parent <label> rule cascaded text-transform via CSS
inheritance. Fix: scope label styling to ONLY the span.has-info
inner element, and add an explicit reset on .info-text (Gradio
6.14's actual class for helper text — found via Playwright DOM
inspect, not [data-testid="info"] as the older versions used).
Force info-text to sentence-case sans italic small muted.

5. Vocal mode radio pills oversized. Add a dedicated rule for
.ams-content .wrap > label (the gr.Radio option) — compact 7 12 px
padding, sans 12 px, border highlight on :checked, custom radio
dot via appearance:none + radial gradient.

6. Output/Metadata blocks were unstyled containers (just a tiny label
+ floating empty-state glyph). Added elem_classes=["ams-out",
"ams-out-audio"|"ams-out-meta"] in ui.py and dedicated CSS so
each component renders as a proper bordered panel with min-height,
uppercase mono label, and muted empty-state glyph.

Also: forced nested .ams-tab-pane rows to flex-direction:column on
< 768 px (Gradio's gr.Row stays as a flex row by default, which
broke the stacked form/output layout on mobile).

Verified at 360 (phone) and 1440 (desktop) via Playwright screenshots
against docs/superpowers/specs/mockups/01_generate_mobile_errors.html.
17/17 L1+L2 tests still pass; ruff clean.

Typography upgrade also documented in theme.py module docstring.

theme.py

@@ -1,20 +1,21 @@
 """Brutalist Mono — pure black/white, no color accent.
 
-Palette tokens are the source of truth; CSS pulls from them. The audio
-waveform is the only optionally-colored element (rendered white in v1).
-
-UI architecture (locked):
-- Sidebar layout (NOT ``gr.Tabs``) per wireframes at
-  ``docs/superpowers/specs/mockups/``.
-- ``.ams-sidebar`` is a flex column at desktop, fixed-width 170-190 px.
-- ``.ams-side-radio`` is the mode-nav: a ``gr.Radio`` re-skinned via CSS
-  so each option renders as a full-width sidebar pill. The native
-  ``:checked`` pseudo-class supplies the "active" highlight.
-- ``.ams-content`` is the right column containing 5 ``.ams-tab-pane``
-  groups; one is visible at a time.
-- Media queries: at ``<= 1024 px`` the sidebar shrinks to an icon rail.
-  At ``<= 640 px`` the sidebar is replaced by a horizontal scroll strip
-  at the top.
+The aesthetic identity of ACE Music Studio: precision, density, mono-
+spaced labels, true neutral grays, and a single white accent rationed
+across active states + the primary CTA. Inspired by record-sleeve
+liner notes and a code editor's chrome.
+
+Typography (selected per the frontend-design discipline):
+- IBM Plex Sans  — body, brand, helper text. Mechanically refined,
+  warmer than Inter, free via Google Fonts.
+- IBM Plex Mono  — labels, status indicator, brand period, metadata
+  JSON, all-caps small text. Distinctive character without going
+  novelty.
+
+The wireframes at ``docs/superpowers/specs/mockups/`` remain the visual
+source of truth. The mobile breakpoint at 640 px replaces the sidebar
+with a horizontal scroll strip and crushes the outer Gradio padding so
+the full 360 px viewport is actually usable.
 """
 
 from __future__ import annotations
@@ -25,50 +26,84 @@ import gradio as gr
 BG = "#0A0A0A"
 SURFACE = "#141414"
 SURFACE_STRONG = "#000000"
+SURFACE_RAISED = "#1A1A1A"
 BORDER = "#1F1F1F"
 BORDER_STRONG = "#2A2A2A"
 INK = "#E5E5E5"
 INK_MUTED = "#6B6B6B"
+INK_FAINT = "#3F3F3F"
 PRIMARY = "#FFFFFF"
-ERROR_BG = "#1A1A1A"
 HOVER_BG = "#1A1A1A"
-RADIUS = "6px"
-FONT_STACK = '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif'
+RADIUS = "4px"
+FONT_SANS = '"IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif'
+FONT_MONO = '"IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace'
 
 
 def build_theme() -> gr.themes.Base:
-    """Returns a Gradio theme keyed to Brutalist Mono tokens."""
+    """Returns a Gradio theme keyed to Brutalist Mono tokens.
+
+    Uses IBM Plex Sans as the body font and IBM Plex Mono as the
+    monospace partner. Both are pulled from Google Fonts at runtime.
+    """
     return gr.themes.Base(
         primary_hue=gr.themes.colors.gray,
         neutral_hue=gr.themes.colors.gray,
-        font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+        font=[
+            gr.themes.GoogleFont("IBM Plex Sans"),
+            "system-ui",
+            "sans-serif",
+        ],
+        font_mono=[
+            gr.themes.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ],
     ).set(
         body_background_fill=BG,
         body_text_color=INK,
+        background_fill_primary=BG,
+        background_fill_secondary=SURFACE,
         block_background_fill=SURFACE,
         block_border_color=BORDER,
         block_border_width="1px",
         block_radius=RADIUS,
+        block_label_text_color=INK_MUTED,
+        block_label_background_fill="transparent",
+        block_title_background_fill="transparent",
+        block_title_text_color=INK_MUTED,
         input_background_fill=SURFACE_STRONG,
-        input_border_color=BORDER_STRONG,
+        input_border_color=BORDER,
         input_border_color_focus=PRIMARY,
+        input_placeholder_color=INK_FAINT,
         button_primary_background_fill=PRIMARY,
         button_primary_text_color=BG,
         button_primary_background_fill_hover=PRIMARY,
         button_secondary_background_fill=SURFACE_STRONG,
         button_secondary_text_color=INK,
         button_secondary_border_color=BORDER_STRONG,
+        border_color_primary=BORDER,
+        border_color_accent=BORDER_STRONG,
+        color_accent=PRIMARY,
+        color_accent_soft=SURFACE_RAISED,
     )
 
 
+# Note: all `!important` below is intentional — Gradio's svelte-hashed
+# classes load AFTER our CSS in some browsers, and the framework's
+# default rules sit at the same specificity as ours without it.
 CSS = f"""
-/* === Override Gradio's Tailwind-slate "neutral" palette ================
-   Gradio's gr.themes.colors.gray is actually Tailwind slate-* which has
-   a noticeable blue tint (--neutral-900 = #111827, --neutral-950 = #0b0f19).
-   On phone displays with cool color temperatures this reads as bluish-grey
-   and contradicts the Brutalist Mono spec. Force true-neutral hex values. */
-:root, html.dark {{
-  --neutral-50: #FAFAFA !important;
+/* ============================================================
+ * Brutalist Mono — global palette + Gradio variable overrides
+ * Gradio's gr.themes.colors.gray maps to Tailwind slate-*, which has
+ * a perceptible blue tint on cool-temperature phone displays. Pin
+ * every neutral + surface variable to true monochrome hex.
+ * ============================================================ */
+:root,
+html.dark,
+.gradio-container,
+.gradio-container.dark,
+.gradio-container .dark {{
+  --neutral-50:  #FAFAFA !important;
   --neutral-100: #F5F5F5 !important;
   --neutral-200: #E5E5E5 !important;
   --neutral-300: #D4D4D4 !important;
@@ -79,64 +114,108 @@ CSS = f"""
   --neutral-800: #262626 !important;
   --neutral-900: #141414 !important;
   --neutral-950: #0A0A0A !important;
-  --body-background-fill: {BG} !important;
-  --background-fill-primary: {SURFACE} !important;
-  --background-fill-secondary: {SURFACE_STRONG} !important;
-  --block-background-fill: {SURFACE} !important;
-  --block-label-background-fill: transparent !important;
-  --block-title-background-fill: transparent !important;
-  --input-background-fill: {SURFACE_STRONG} !important;
-  --border-color-primary: {BORDER} !important;
-  --border-color-accent: {BORDER_STRONG} !important;
-  --color-accent: {PRIMARY} !important;
-}}
-
-/* === Body chrome ======================================================= */
+  --body-background-fill:           {BG} !important;
+  --background-fill-primary:        {BG} !important;
+  --background-fill-secondary:      {SURFACE} !important;
+  --block-background-fill:          {SURFACE} !important;
+  --block-label-background-fill:    transparent !important;
+  --block-title-background-fill:    transparent !important;
+  --input-background-fill:          {SURFACE_STRONG} !important;
+  --border-color-primary:           {BORDER} !important;
+  --border-color-accent:            {BORDER_STRONG} !important;
+  --color-accent:                   {PRIMARY} !important;
+  --body-text-color:                {INK} !important;
+  --body-text-color-subdued:        {INK_MUTED} !important;
+  --block-label-text-color:         {INK_MUTED} !important;
+  --block-title-text-color:         {INK_MUTED} !important;
+  --link-text-color:                {INK} !important;
+  font-family: {FONT_SANS};
+}}
+body, .gradio-container {{
+  background: {BG} !important;
+  color: {INK} !important;
+  font-family: {FONT_SANS} !important;
+  font-feature-settings: "ss01", "ss03", "cv11";
+}}
+
+/* ============================================================
+ * Crush Gradio's default ``.app`` wrapper padding.
+ * Default ``.gradio-container > .app`` ships with 16px 32px which
+ * eats 64 px of the 360 px mobile viewport. Replace with a sane
+ * scale that respects the breakpoints.
+ * ============================================================ */
+.gradio-container > .app,
+.gradio-container .main.fillable {{
+  padding: 16px 20px !important;
+  max-width: none !important;
+}}
+@media (max-width: 640px) {{
+  .gradio-container > .app,
+  .gradio-container .main.fillable {{
+    padding: 8px 10px !important;
+  }}
+}}
+main, .contain {{
+  width: 100% !important;
+  max-width: none !important;
+}}
+
+/* ============================================================
+ * Header + CTA banner
+ * ============================================================ */
 .ams-header {{
   display:flex; justify-content:space-between; align-items:baseline;
-  padding:10px 4px 6px 4px;
+  padding:10px 2px 6px 2px;
 }}
 .ams-brand {{
-  font-size:18px; font-weight:600; letter-spacing:-0.01em; color:{INK};
+  font-family: {FONT_SANS};
+  font-size:17px; font-weight:600;
+  letter-spacing:-0.01em; color:{INK};
 }}
-.ams-brand-period {{ color:{PRIMARY}; }}
+.ams-brand-period {{ color:{PRIMARY}; font-family: {FONT_MONO}; }}
 .ams-status {{
-  font-size:11px; color:{INK_MUTED};
-  letter-spacing:0.06em; text-transform:uppercase;
+  font-family: {FONT_MONO};
+  font-size:10px; color:{INK_MUTED};
+  letter-spacing:0.08em; text-transform:uppercase;
 }}
 
 .ams-cta {{
-  font-size:13px; color:{INK_MUTED};
-  margin:2px 4px 14px 4px; padding-bottom:12px;
+  font-size:12px; color:{INK_MUTED};
+  margin:2px 2px 14px 2px; padding-bottom:10px;
   border-bottom:1px solid {BORDER};
+  line-height:1.5;
 }}
-.ams-cta strong {{ color:{INK}; }}
+.ams-cta strong {{ color:{INK}; font-weight:600; }}
 .ams-cta-heart {{ color:{PRIMARY}; }}
-.ams-cta a {{ color:{INK}; text-decoration:underline; }}
+.ams-cta a {{ color:{INK}; text-decoration:underline; text-decoration-color:{BORDER_STRONG}; }}
 
-/* === Body row (sidebar + content) ====================================== */
+/* ============================================================
+ * Body row (sidebar + content)
+ * ============================================================ */
 .ams-body {{
-  gap:16px !important;
+  gap:12px !important;
   align-items:stretch !important;
 }}
 
-/* === Sidebar (desktop >= 1024px) ======================================= */
+/* ============================================================
+ * Sidebar — desktop ≥ 1024
+ * ============================================================ */
 .ams-sidebar {{
   background:{SURFACE_STRONG} !important;
-  padding:14px 8px !important;
+  padding:12px 6px !important;
   border-radius:{RADIUS} !important;
   border:1px solid {BORDER} !important;
-  min-width:190px;
+  min-width:188px;
   max-width:210px;
 }}
 
-/* --- Mode radio (re-skin gr.Radio as a vertical sidebar nav) ----------- */
 .ams-side-radio {{
   background:transparent !important;
   border:none !important;
   padding:0 !important;
   width:100%;
 }}
+.ams-side-radio > div > .wrap,
 .ams-side-radio .wrap {{
   display:flex !important;
   flex-direction:column !important;
@@ -144,19 +223,20 @@ CSS = f"""
   background:transparent !important;
   border:none !important;
 }}
-/* Each radio option becomes a sidebar pill */
 .ams-side-radio label {{
   display:flex !important;
   align-items:center !important;
-  padding:9px 12px !important;
+  padding:8px 11px !important;
   margin:0 !important;
-  border-radius:4px !important;
+  border-radius:3px !important;
   border:none !important;
   border-left:2px solid transparent !important;
   background:transparent !important;
   color:{INK_MUTED} !important;
-  font-size:13px !important;
+  font-family: {FONT_SANS} !important;
+  font-size:12px !important;
   font-weight:500 !important;
+  letter-spacing:0.005em !important;
   cursor:pointer !important;
   transition:background 80ms ease, color 80ms ease, border-color 80ms ease;
   min-height:0 !important;
@@ -167,11 +247,9 @@ CSS = f"""
   background:{HOVER_BG} !important;
   color:{INK} !important;
 }}
-/* Hide the native radio circle */
 .ams-side-radio label input[type="radio"] {{
   display:none !important;
 }}
-/* Active state: white text + white left border + dark bg */
 .ams-side-radio label.selected,
 .ams-side-radio label:has(input[type="radio"]:checked) {{
   background:{HOVER_BG} !important;
@@ -179,32 +257,35 @@ CSS = f"""
   border-left-color:{PRIMARY} !important;
   font-weight:600 !important;
 }}
-/* Hide the (now-empty) form-element-info row that gr.Radio injects */
 .ams-side-radio + div:empty {{ display:none !important; }}
 
-/* --- Session history block (below the mode radio) --------------------- */
+/* History block (below the mode radio) */
 .ams-history {{
-  margin-top:14px;
-  padding-top:10px;
+  margin-top:12px;
+  padding-top:8px;
   border-top:1px solid {BORDER};
 }}
 .ams-history-title {{
-  font-size:10px; color:{INK_MUTED};
-  letter-spacing:0.1em; text-transform:uppercase;
+  font-family: {FONT_MONO};
+  font-size:9px; color:{INK_MUTED};
+  letter-spacing:0.12em; text-transform:uppercase;
   padding:0 4px 6px 4px;
 }}
 .ams-history-empty {{
-  font-size:11px; color:#3F3F3F;
+  font-family: {FONT_SANS};
+  font-size:11px; color:{INK_FAINT};
   font-style:italic;
-  padding:6px 4px;
+  padding:4px 4px;
 }}
 
-/* === Content area ====================================================== */
+/* ============================================================
+ * Content pane
+ * ============================================================ */
 .ams-content {{
   background:{SURFACE} !important;
   border:1px solid {BORDER} !important;
   border-radius:{RADIUS} !important;
-  padding:16px !important;
+  padding:14px !important;
   min-height:540px;
 }}
 .ams-tab-pane {{
@@ -212,172 +293,344 @@ CSS = f"""
   border:none !important;
   padding:0 !important;
 }}
-
-/* === LoRA chip pill (used in M2+) ====================================== */
-.ams-chip {{
-  display:inline-block; padding:5px 10px; border-radius:14px;
-  font-size:11px; margin:0 5px 5px 0; background:{SURFACE_STRONG};
-  border:1px solid {BORDER_STRONG}; color:{INK_MUTED}; cursor:pointer;
+/* Force the inner 2-column row inside each pane to actually stack
+   on narrow screens — Gradio gr.Row keeps row direction by default. */
+@media (max-width: 768px) {{
+  .ams-tab-pane .row,
+  .ams-tab-pane [class*="row"][class*="svelte"] {{
+    flex-direction:column !important;
+  }}
 }}
-.ams-chip.on {{ border-color:{PRIMARY}; color:{PRIMARY}; }}
-.ams-chip.upload {{ border-style:dashed; color:{PRIMARY}; }}
 
-/* === LoRA file drop zone (tighten Gradio default ~400px height) ======== */
-.ams-lora-file .upload-container {{ min-height:56px !important; }}
-
-/* === Hide Gradio footer ================================================ */
-footer {{ display:none !important; }}
+/* ============================================================
+ * Form field chrome — labels, helper info, inputs
+ * Gradio's defaults render labels and helper text at 14-16 px.
+ * Brutalist Mono wants labels small + uppercase + mono.
+ * ============================================================ */
+/* Scope the small-uppercase-mono treatment to ONLY the label text
+   spans, NOT the entire <label> wrapper. Cascading text-transform
+   from a label wrapper would otherwise uppercase the helper text
+   (.info-text) and the input's own text. */
+.ams-content span.has-info,
+.ams-content span.svelte-jdcl7l,
+.ams-content .block-label > span,
+.ams-content [data-testid="block-label"] > span,
+.ams-content .label-wrap > span:first-child {{
+  font-family: {FONT_MONO} !important;
+  font-size:10px !important;
+  letter-spacing:0.08em !important;
+  text-transform:uppercase !important;
+  color:{INK_MUTED} !important;
+  background:transparent !important;
+  border:none !important;
+  box-shadow:none !important;
+  padding:0 0 4px 0 !important;
+  margin:0 !important;
+  font-weight:500 !important;
+  display:block !important;
+}}
+/* Reset the <label> wrapper itself so it doesn't cascade transforms */
+.ams-content label.container,
+.ams-content label.svelte-1hguek3 {{
+  text-transform:none !important;
+  font-family:inherit !important;
+  font-size:inherit !important;
+  letter-spacing:normal !important;
+  display:block !important;
+  padding:0 !important;
+}}
+/* Helper text — Gradio 6.14 renders it as <div class="info-text …">.
+   Force sentence case + sans + small + faint italic. */
+.ams-content .info-text,
+.ams-content [class*="info-text"],
+.ams-content .block .info,
+.ams-content [data-testid="info"] {{
+  font-family: {FONT_SANS} !important;
+  font-size:10px !important;
+  color:{INK_FAINT} !important;
+  letter-spacing:0 !important;
+  text-transform:none !important;
+  font-style:italic !important;
+  padding:0 0 6px 0 !important;
+  line-height:1.4 !important;
+  font-weight:400 !important;
+}}
 
-/* === Tighten Gradio chrome (narrow scope to avoid breaking output) =====
-   Only sharpen the INPUT control surfaces (textareas, number inputs)
-   so they read as crisp Brutalist Mono panels. Do NOT touch generic
-   ``.block`` padding — that collapses gr.Audio / gr.JSON which need
-   their own internal spacing. */
 .ams-content textarea,
 .ams-content input[type="text"],
 .ams-content input[type="number"] {{
   background:{SURFACE_STRONG} !important;
   border:1px solid {BORDER} !important;
-  border-radius:4px !important;
+  border-radius:3px !important;
   color:{INK} !important;
-  padding:10px !important;
+  font-family: {FONT_SANS} !important;
+  font-size:13px !important;
+  padding:10px 12px !important;
+  line-height:1.5 !important;
 }}
 .ams-content textarea:focus,
 .ams-content input[type="text"]:focus,
 .ams-content input[type="number"]:focus {{
   outline:none !important;
   border-color:{PRIMARY} !important;
+  box-shadow:none !important;
+}}
+.ams-content textarea::placeholder,
+.ams-content input::placeholder {{
+  color:{INK_FAINT} !important;
 }}
 .ams-content input[type="range"] {{
   accent-color:{PRIMARY} !important;
 }}
-/* Component labels — uppercase, muted, no shadow.
-   ``.gradio-container .block .label`` already covers this from the
-   earlier component-label rule, but restating for the form blocks
-   specifically gives the wireframe a consistent label scale. */
-.ams-content .label-wrap,
-.ams-content [data-testid="block-label"] {{
+
+/* ============================================================
+ * Form Radio (Vocal mode) — compact pills, NOT the sidebar tabs
+ * ============================================================ */
+.ams-content .block:has(input[type="radio"]) .wrap {{
+  display:flex !important;
+  flex-direction:column !important;
+  gap:6px !important;
+}}
+.ams-content .wrap > label {{
+  font-family: {FONT_SANS} !important;
+  font-size:12px !important;
+  text-transform:none !important;
+  letter-spacing:0 !important;
+  font-weight:500 !important;
+  color:{INK} !important;
+  background:{SURFACE_STRONG} !important;
+  border:1px solid {BORDER} !important;
+  border-radius:3px !important;
+  padding:7px 12px !important;
+  display:flex !important;
+  align-items:center !important;
+  gap:8px !important;
+  cursor:pointer !important;
+}}
+.ams-content .wrap > label:hover {{
+  border-color:{BORDER_STRONG} !important;
+  background:{HOVER_BG} !important;
+}}
+.ams-content .wrap > label:has(input[type="radio"]:checked) {{
+  border-color:{PRIMARY} !important;
+  background:{SURFACE_RAISED} !important;
+}}
+/* Custom radio dot */
+.ams-content .wrap > label input[type="radio"] {{
+  appearance:none !important;
+  -webkit-appearance:none !important;
+  width:12px !important; height:12px !important;
+  border:1px solid {BORDER_STRONG} !important;
+  border-radius:50% !important;
+  margin:0 !important;
+  flex-shrink:0 !important;
+}}
+.ams-content .wrap > label input[type="radio"]:checked {{
+  border-color:{PRIMARY} !important;
+  background: radial-gradient({PRIMARY} 0 4px, transparent 5px) !important;
+}}
+
+/* ============================================================
+ * Primary button (▶ Generate)
+ * ============================================================ */
+.ams-content button.primary {{
+  background:{PRIMARY} !important;
+  color:{BG} !important;
+  border:none !important;
+  border-radius:3px !important;
+  font-family: {FONT_SANS} !important;
+  font-size:13px !important;
+  font-weight:600 !important;
+  letter-spacing:0.005em !important;
+  padding:11px 18px !important;
+  cursor:pointer !important;
+  transition:transform 80ms ease, opacity 80ms ease;
+  margin-top:6px !important;
+}}
+.ams-content button.primary:hover {{
+  opacity:0.92 !important;
+  transform:translateY(-1px);
+}}
+.ams-content button.primary:active {{
+  transform:translateY(0);
+}}
+
+/* ============================================================
+ * Output panel — gr.Audio (.ams-out-audio) and gr.JSON (.ams-out-meta)
+ * Targeted via the elem_classes hooks defined in ui.py so we don't
+ * have to chase svelte-hashed class names.
+ * ============================================================ */
+.ams-content .ams-out {{
+  background:{SURFACE_STRONG} !important;
+  border:1px solid {BORDER} !important;
+  border-radius:3px !important;
+  padding:12px !important;
+  margin-top:10px !important;
+}}
+.ams-content .ams-out-audio {{
+  min-height:90px !important;
+}}
+.ams-content .ams-out-meta {{
+  min-height:80px !important;
+  font-family: {FONT_MONO} !important;
+  font-size:11px !important;
+  line-height:1.6 !important;
+}}
+.ams-content .ams-out-meta span {{
+  font-family: {FONT_MONO} !important;
+  font-size:11px !important;
+}}
+/* The Output/Metadata block labels live as <label class="svelte-19djge9">.
+   Force the Brutalist label treatment + uppercase regardless of the
+   svelte hash, since they're inside .ams-out. */
+.ams-content .ams-out label,
+.ams-content .ams-out label > span {{
+  font-family: {FONT_MONO} !important;
   font-size:10px !important;
   letter-spacing:0.08em !important;
   text-transform:uppercase !important;
   color:{INK_MUTED} !important;
   background:transparent !important;
-  border:none !important;
-  padding:0 0 4px 0 !important;
+  font-weight:500 !important;
+  padding:0 0 6px 0 !important;
+  display:block !important;
+}}
+/* Empty-state svg glyphs (music note, JSON braces) — center + muted */
+.ams-content .ams-out svg {{
+  color:{INK_FAINT} !important;
+  opacity:0.5 !important;
 }}
 
-/* === Component labels — kill the white pill, make them inline muted ==== */
-/* Gradio renders component labels (e.g. gr.Audio "Output", gr.Code
-   "Metadata") as elevated white-pill blocks by default. The Brutalist
-   Mono theme wants them as plain muted-ink inline text. */
-.gradio-container .block .label,
-.gradio-container [data-testid="block-label"],
-.gradio-container span.label-wrap > span {{
-  background:transparent !important;
-  color:{INK_MUTED} !important;
-  font-size:10px !important;
-  font-weight:500 !important;
-  letter-spacing:0.06em !important;
-  text-transform:uppercase !important;
-  border:none !important;
-  box-shadow:none !important;
-  padding:4px 0 !important;
+/* Add explicit gap between form column and output column when stacked */
+@media (max-width: 768px) {{
+  .ams-tab-pane > .row,
+  .ams-tab-pane > [class*="row"] {{
+    gap:18px !important;
+  }}
+  .ams-content .block + .block {{
+    margin-top:4px !important;
+  }}
 }}
-.gradio-container [data-testid="block-label"] svg,
-.gradio-container .label svg {{
-  display:none !important;  /* drop the music-note / code glyph next to label */
+
+/* ============================================================
+ * LoRA chip pill — kept for M2 wiring
+ * ============================================================ */
+.ams-chip {{
+  display:inline-block; padding:5px 10px; border-radius:14px;
+  font-size:11px; margin:0 5px 5px 0; background:{SURFACE_STRONG};
+  border:1px solid {BORDER_STRONG}; color:{INK_MUTED}; cursor:pointer;
 }}
+.ams-chip.on {{ border-color:{PRIMARY}; color:{PRIMARY}; }}
+.ams-chip.upload {{ border-style:dashed; color:{PRIMARY}; }}
+.ams-lora-file .upload-container {{ min-height:56px !important; }}
 
-/* === Responsive: keep full sidebar down to mobile threshold ============ */
-/* The previous tablet "icon rail" mode at 640-1024 px relied on
-   ``::first-letter`` to keep the emoji visible while hiding the label
-   text, but Gradio wraps the radio option text in a <span> so the
-   pseudo-class never hits the emoji. Rather than fight the DOM, we keep
-   the full sidebar at all widths >= 640 px and switch to a stacked
-   layout below that. */
+/* Hide Gradio footer + the floating "Use via API" / settings panel */
+footer {{ display:none !important; }}
+.show-api {{ display:none !important; }}
+.built-with {{ display:none !important; }}
+
+/* ============================================================
+ * Responsive: tablet 640-1024 px
+ * Keep the full sidebar (with labels) — the icon-rail middle state
+ * fights Gradio's DOM. Just narrow it slightly.
+ * ============================================================ */
+@media (min-width: 641px) and (max-width: 1024px) {{
+  .ams-sidebar {{ min-width:160px; max-width:180px; padding:10px 6px !important; }}
+  .ams-side-radio label {{ font-size:11px !important; padding:7px 9px !important; }}
+}}
 
-/* === Responsive: mobile < 640 px ======================================= */
+/* ============================================================
+ * Responsive: mobile < 640 px
+ * Sidebar becomes a horizontal scroll pill strip at the top.
+ * Form + Output stack with proper gap.
+ * ============================================================ */
 @media (max-width: 640px) {{
-  /* Stack body so sidebar (now a tab strip) sits above content */
   .ams-body {{
     flex-direction:column !important;
     gap:8px !important;
   }}
-
-  /* Sidebar = horizontal scroll strip. Strip its desktop chrome
-     (border, large padding, fixed width) so it reads as a tab bar. */
   .ams-sidebar {{
     min-width:100% !important;
     max-width:100% !important;
-    padding:2px !important;
+    padding:2px 0 !important;
     border:none !important;
     background:transparent !important;
     border-radius:0 !important;
   }}
-
-  /* The radio's outer block (gr.Radio with container=False still gets
-     padding from Gradio's base styles). Flatten it. */
-  .ams-side-radio {{
-    padding:0 !important;
-    background:transparent !important;
-  }}
-
-  /* Real options live in the second .wrap (Gradio renders an extra
-     hidden one first); both flex-row + overflow + nowrap.
-     CRITICAL: override the desktop label width:100% — that's what
-     makes labels stack vertically inside a flex-row container.
-     flex-wrap:nowrap forces a single row + horizontal scroll instead
-     of wrapping to 2 rows. */
   .ams-side-radio .wrap {{
     flex-direction:row !important;
     flex-wrap:nowrap !important;
     overflow-x:auto !important;
     overflow-y:hidden !important;
     gap:6px !important;
-    padding-bottom:2px !important;
-    /* Hide scrollbar but keep scrolling */
+    padding:2px 0 !important;
     scrollbar-width:none !important;
     -ms-overflow-style:none !important;
   }}
-  .ams-side-radio .wrap::-webkit-scrollbar {{
-    display:none !important;
-  }}
-
+  .ams-side-radio .wrap::-webkit-scrollbar {{ display:none !important; }}
   .ams-side-radio label {{
-    /* Compact pill: just enough room for emoji + label, no flex-grow */
     width:auto !important;
     min-width:0 !important;
     max-width:max-content !important;
     flex:0 0 auto !important;
+    font-family: {FONT_SANS} !important;
     font-size:11px !important;
     font-weight:600 !important;
     white-space:nowrap !important;
-    padding:8px 12px !important;
-    /* Bottom border instead of left border for the horizontal context */
-    border-left:none !important;
-    border-bottom:2px solid transparent !important;
-    border-radius:4px !important;
-    justify-content:center !important;
+    padding:7px 12px !important;
     background:{SURFACE_STRONG} !important;
-    border-top:1px solid {BORDER} !important;
-    border-right:1px solid {BORDER} !important;
-    border-left:1px solid {BORDER} !important;
+    border:1px solid {BORDER} !important;
+    border-radius:3px !important;
+    justify-content:center !important;
   }}
   .ams-side-radio label.selected,
   .ams-side-radio label:has(input[type="radio"]:checked) {{
-    border-left-color:transparent !important;
-    border-bottom-color:{PRIMARY} !important;
-    background:{HOVER_BG} !important;
+    border-color:{PRIMARY} !important;
+    background:{SURFACE_RAISED} !important;
+    color:{PRIMARY} !important;
   }}
-
-  /* History block off-screen on mobile (already display:none on tablet+;
-     restate here in case the cascade gets weird) */
   .ams-history {{ display:none !important; }}
 
-  /* Tighter chrome */
-  .ams-header {{ padding:6px 2px 2px 2px !important; }}
-  .ams-brand {{ font-size:15px !important; }}
-  .ams-cta {{ font-size:11px !important; padding-bottom:8px !important; margin-bottom:8px !important; }}
-  .ams-content {{ padding:12px !important; }}
+  /* Header + CTA tighter */
+  .ams-header {{ padding:2px 2px 2px 2px !important; }}
+  .ams-brand {{ font-size:14px !important; }}
+  .ams-status {{ font-size:9px !important; }}
+  .ams-cta {{ font-size:11px !important; margin:0 2px 8px 2px !important; padding-bottom:8px !important; }}
+
+  /* Content pane tighter */
+  .ams-content {{ padding:12px !important; border-radius:3px !important; }}
+
+  /* Field labels + info shrink further */
+  .ams-content label,
+  .ams-content .block-label,
+  .ams-content [data-testid="block-label"],
+  .ams-content span.svelte-jdcl7l,
+  .ams-content .label-wrap {{
+    font-size:9px !important;
+  }}
+  .ams-content .block .info,
+  .ams-content [data-testid="info"] {{
+    font-size:9px !important;
+    padding-bottom:4px !important;
+  }}
+  .ams-content textarea,
+  .ams-content input[type="text"],
+  .ams-content input[type="number"] {{
+    font-size:12px !important;
+    padding:8px 10px !important;
+  }}
+  .ams-content .wrap > label {{
+    padding:6px 10px !important;
+    font-size:11px !important;
+  }}
+  .ams-content button.primary {{
+    padding:11px 14px !important;
+    font-size:12px !important;
+  }}
+  .ams-content [data-testid="audio"],
+  .ams-content .audio-container,
+  .ams-content .json-holder {{
+    min-height:64px !important;
+  }}
 }}
 """

ui.py

@@ -59,15 +59,23 @@ def build_generate_tab() -> dict[str, gr.components.Component]:
             )
 
         # --- OUTPUT column (right, ~40% width) ---
+        # elem_classes on each output component give CSS hooks for the
+        # Brutalist Mono treatment (uppercase mono labels + bordered
+        # empty-state panels). Without these we'd need to target
+        # svelte-hashed classes which can change across Gradio versions.
         with gr.Column(scale=10):
             components["output_audio"] = gr.Audio(
                 label="Output",
                 type="filepath",
                 interactive=False,
+                elem_classes=["ams-out", "ams-out-audio"],
             )
             # gr.JSON renders a dict directly as a syntax-highlighted, expandable
             # tree. gr.Code(language="json") refuses dicts — it requires a
             # pre-stringified blob — and crashes with "'dict' has no .strip()".
-            components["output_meta"] = gr.JSON(label="Metadata")
+            components["output_meta"] = gr.JSON(
+                label="Metadata",
+                elem_classes=["ams-out", "ams-out-meta"],
+            )
 
     return components