feat: govern accessible appearance overrides

webui/src/styles/components.css

@@ -3224,6 +3224,63 @@
   gap: 10px;
 }
 
+.appearance-overrides-editor {
+  display: grid;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: var(--border-line);
+}
+
+.appearance-overrides-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.appearance-overrides-fields {
+  padding: 12px;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+}
+
+.appearance-overrides-preview {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  min-height: 82px;
+  padding: 14px;
+  border: var(--border-line);
+  border-radius: var(--radius-sm);
+  background: var(--appearance-preview-surface);
+  color: var(--appearance-preview-surface-foreground);
+}
+
+.appearance-overrides-preview > button {
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--appearance-preview-accent);
+  color: var(--appearance-preview-accent-foreground);
+  padding: 7px 12px;
+  font: inherit;
+  font-weight: 700;
+}
+
+.appearance-overrides-statuses {
+  display: flex;
+  flex: 1 1 100%;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.appearance-overrides-statuses > span {
+  border-radius: var(--radius-pill);
+  padding: 4px 9px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
 .theme-preview {
   --preview-bg: var(--theme-preview-light-bg);
   --preview-bar: var(--theme-preview-light-bar);