Add editable system configuration flow

src/app.css

@@ -43,7 +43,8 @@ body {
 
 button,
 input,
-select {
+select,
+textarea {
   font: inherit;
 }
 
@@ -51,6 +52,11 @@ button {
   cursor: pointer;
 }
 
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
 .login-shell {
   min-height: 100vh;
   display: grid;
@@ -106,7 +112,8 @@ button {
 }
 
 .login-form label,
-.modal-form label {
+.modal-form label,
+.field-group {
   display: grid;
   gap: 6px;
   font-weight: 500;
@@ -114,7 +121,10 @@ button {
 
 .login-form input,
 .modal-form input,
-.modal-form select {
+.modal-form select,
+.field-group input,
+.field-group select,
+.field-group textarea {
   width: 100%;
   height: 40px;
   padding: 0 12px;
@@ -126,7 +136,10 @@ button {
 
 .login-form input:focus,
 .modal-form input:focus,
-.modal-form select:focus {
+.modal-form select:focus,
+.field-group input:focus,
+.field-group select:focus,
+.field-group textarea:focus {
   outline: 2px solid rgba(37, 99, 235, 0.12);
   border-color: var(--accent);
 }
@@ -413,6 +426,13 @@ button,
   line-height: 1.2;
 }
 
+.table-note,
+.system-hint,
+.service-editor-header p {
+  margin: 0;
+  color: var(--muted);
+}
+
 .toolbar-actions {
   flex-wrap: wrap;
 }
@@ -522,6 +542,62 @@ tbody tr:last-child td {
   gap: 8px;
 }
 
+.system-editor {
+  display: block;
+}
+
+.system-fields,
+.service-editor-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.service-editor-list {
+  display: grid;
+  gap: 12px;
+}
+
+.service-editor-row {
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-muted);
+}
+
+.service-editor-header,
+.system-actions,
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.toggle-row {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.toggle-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+}
+
+.toggle-check input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+}
+
+.field-span-2 {
+  grid-column: 1 / -1;
+}
+
 pre {
   margin: 0;
   padding: 14px;
@@ -611,13 +687,19 @@ pre {
 
   .page-grid,
   .stats-strip,
-  .modal-form {
+  .modal-form,
+  .system-fields,
+  .service-editor-grid {
     grid-template-columns: 1fr;
   }
 
   .modal-actions {
     justify-content: stretch;
   }
+
+  .system-actions {
+    justify-content: stretch;
+  }
 }
 
 @media (max-width: 640px) {