Restore settings preferences and simplify services editor

src/app.css

@@ -22,6 +22,23 @@
   --shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
 }
 
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --page-bg: #111827;
+  --surface: #18212f;
+  --surface-muted: #1f2937;
+  --border: #334155;
+  --border-strong: #475569;
+  --text: #f8fafc;
+  --muted: #94a3b8;
+  --accent: #60a5fa;
+  --accent-muted: rgba(96, 165, 250, 0.15);
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --danger: #f87171;
+  --shadow: 0 1px 2px rgba(2, 6, 23, 0.35);
+}
+
 * {
   box-sizing: border-box;
 }
@@ -374,13 +391,13 @@ button,
 .usage-bar {
   height: 8px;
   border-radius: 999px;
-  background: #eceff3;
+  background: color-mix(in srgb, var(--border) 70%, transparent);
   overflow: hidden;
 }
 
 .usage-bar div {
   height: 100%;
-  background: #94a3b8;
+  background: color-mix(in srgb, var(--accent) 55%, var(--muted));
 }
 
 .event-row,
@@ -429,12 +446,28 @@ button,
 }
 
 .table-note,
-.system-hint,
 .service-editor-header p {
   margin: 0;
   color: var(--muted);
 }
 
+.settings-toolbar {
+  display: flex;
+  align-items: end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.compact-field {
+  min-width: 220px;
+  flex: 0 1 240px;
+}
+
+.compact-field span {
+  color: var(--muted);
+  font-size: 12px;
+}
+
 .toolbar-actions {
   flex-wrap: wrap;
 }
@@ -548,10 +581,6 @@ tbody tr:last-child td {
   display: block;
 }
 
-.system-settings-card {
-  gap: 12px;
-}
-
 .system-fields,
 .service-editor-grid {
   display: grid;
@@ -610,8 +639,8 @@ pre {
   overflow: auto;
   border: 1px solid var(--border);
   border-radius: 10px;
-  background: #fbfbfc;
-  color: #1f2937;
+  background: color-mix(in srgb, var(--surface-muted) 80%, var(--surface));
+  color: var(--text);
   font: 13px/1.55 Consolas, "Courier New", monospace;
 }
 
@@ -679,7 +708,8 @@ pre {
   }
 
   .shell-header,
-  .table-toolbar {
+  .table-toolbar,
+  .settings-toolbar {
     flex-direction: column;
     align-items: flex-start;
   }