Show a live mockup mapping each custom theme field to the real UI

The 12 color pickers (Background, Sidebar background, Surface, Border,
etc.) gave no indication of what each one actually affects without
trial and error. Adds a miniature, self-contained mockup of the real
chat UI above the picker grid -- a sidebar with room rows, a message
with an avatar/mention/role badge, a composer, a danger button -- styled
from inline styles bound to the draft colors (not the --ds-* custom
properties, since those reflect whatever theme is currently active, not
necessarily the one being edited).

Hovering or focusing either a color input or its matching element in
the mockup highlights both, using a fixed amber outline that stays
visible regardless of the theme's own palette -- makes the mapping
between the 12 fields and where they actually show up immediately
obvious in either direction, without needing to activate the theme and
go look around the rest of the app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/Modal.css

@@ -263,6 +263,20 @@
   font-size: 0.8rem;
   color: var(--ds-text);
   cursor: pointer;
+  border-radius: 6px;
+  padding: 3px 4px;
+  margin: -3px -4px;
+  transition: background 0.1s ease;
+}
+
+/* Mirrors CustomThemePreview.css's .ctp-highlighted -- same fixed, theme-
+   independent color so it stays visible regardless of what's actually
+   being edited. Set when either this field's input OR the matching swatch
+   in the live mockup above is hovered/focused, so the mapping works in
+   both directions. */
+.custom-theme-field-highlighted {
+  background: rgba(251, 191, 36, 0.15);
+  box-shadow: 0 0 0 1px #fbbf24;
 }
 
 .custom-theme-field input[type='color'] {