diff --git a/hbd/server/templates/settings.html b/hbd/server/templates/settings.html
index 390da3e..a51838c 100644
--- a/hbd/server/templates/settings.html
+++ b/hbd/server/templates/settings.html
@@ -3,943 +3,686 @@
   {% include 'head.html' %}
 
   <style>
-    html, body { overflow: visible; }
-
-    .container {
-      max-width: none;
+    /* ── Settings page tokens (green-biased neutrals, teal accent) ── */
+    :root {
+      --st-paper: #f4f6f4;
+      --st-surface: #ffffff;
+      --st-surface-2: #eef1ee;
+      --st-ink: #1d2420;
+      --st-muted: #5f6a63;
+      --st-faint: #8a948d;
+      --st-line: #dde3de;
+      --st-line-soft: #e8ece8;
+      --st-accent: #0e7280;
+      --st-accent-ink: #ffffff;
+      --st-accent-soft: #e0eef0;
+      --st-ok: #3f9c5a;
+      --st-warn: #d9982a;
+      --st-crit: #d64545;
+      --st-badge-owner: #ede7f6; --st-badge-owner-ink: #5e35b1;
+      --st-badge-mgr: #e3f2fd;   --st-badge-mgr-ink: #1565c0;
+      --st-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
+    }
+    html[data-theme="dark"] {
+      --st-paper: #131816;
+      --st-surface: #1b211e;
+      --st-surface-2: #222925;
+      --st-ink: #e4eae6;
+      --st-muted: #9aa69e;
+      --st-faint: #6e7a72;
+      --st-line: #2c342f;
+      --st-line-soft: #252c28;
+      --st-accent: #4cc4d4;
+      --st-accent-ink: #0d2326;
+      --st-accent-soft: #143b40;
+      --st-ok: #5cba77;
+      --st-warn: #e0ad4e;
+      --st-crit: #e06c6c;
+      --st-badge-owner: #33294a; --st-badge-owner-ink: #b39ddb;
+      --st-badge-mgr: #1b3350;   --st-badge-mgr-ink: #90caf9;
     }
 
-    h1 { color: #333; margin-bottom: 5px; margin-top: 15px; font-size: 1.5em; }
-    .subtitle { color: #666; margin-bottom: 24px; font-size: 0.9em; }
+    body { background: var(--st-paper); padding: 60px 0 0; }
 
-    /* ---- Sidebar + content layout ---- */
-    .settings-layout {
-      display: flex;
-      gap: 24px;
-      align-items: flex-start;
+    /* ── sticky toolbar under the site nav ── */
+    .st-toolbar {
+      position: sticky; top: 0; z-index: 90;
+      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+      padding: 9px 20px;
+      background: var(--st-surface); border-bottom: 1px solid var(--st-line);
     }
-
-    .settings-sidebar {
-      width: 180px;
-      flex-shrink: 0;
-      position: sticky;
-      top: 60px;
+    .st-toolbar .brand { font-family: var(--st-mono); font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--st-ink); }
+    .st-toolbar .brand .tld { color: var(--st-accent); }
+    .st-toolbar .hintline { font-size: 12px; color: var(--st-faint); }
+    .st-toolbar .spacer { flex: 1; }
+    .pending-pill {
+      display: none; align-items: center; gap: 8px;
+      font-size: 12.5px; color: var(--st-warn); font-weight: 600;
     }
-
-    .sidebar-nav a {
-      display: block;
-      padding: 6px 10px;
-      border-radius: 4px;
-      text-decoration: none;
-      font-size: 1.00em;
-      color: #444;
-      margin-bottom: 2px;
-      transition: background 0.1s, color 0.1s;
+    .pending-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-warn); }
+    .btn {
+      font: 600 13px/1 inherit; border: 1px solid var(--st-line); border-radius: 6px;
+      background: var(--st-surface); color: var(--st-ink); padding: 7px 14px; cursor: pointer;
     }
-    .sidebar-nav a:hover { background: #e8eaf6; color: #1a237e; }
-    .sidebar-nav a.active { background: #e3f2fd; color: #0066cc; font-weight: 600; }
+    .btn:focus-visible, a:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
+    .btn.primary { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-accent-ink); }
+    .btn.quiet { border-color: transparent; background: transparent; color: var(--st-muted); }
+    .btn.small { padding: 4px 10px; font-size: 12px; }
+    .btn.danger { color: var(--st-crit); }
+    .btn:disabled { opacity: .6; cursor: default; }
 
-    .settings-main { flex: 1; min-width: 0; }
+    .pulse { display: block; width: 100%; height: 14px; }
+    .pulse polyline { fill: none; stroke: var(--st-accent); stroke-width: 1.5; opacity: .55; }
 
-    /* ---- Section card ---- */
-    .section {
-      background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 1px 4px rgba(0,0,0,.08);
-      margin-bottom: 24px;
-      overflow: hidden;
+    /* ── shell: rail + main ── */
+    .shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 28px; max-width: 1100px; margin: 0 auto; padding: 0 20px 90px; }
+    .rail { position: sticky; top: 56px; align-self: start; padding-top: 18px; max-height: calc(100vh - 70px); overflow-y: auto; }
+    .rail a {
+      display: flex; justify-content: space-between; gap: 8px;
+      padding: 6px 10px; border-radius: 6px; text-decoration: none;
+      font-family: var(--st-mono); font-size: 12.5px; color: var(--st-muted);
     }
+    .rail a .n { color: var(--st-faint); font-size: 11px; }
+    .rail a:hover { background: var(--st-surface-2); color: var(--st-ink); }
+    .rail a.active { background: var(--st-accent-soft); color: var(--st-accent); font-weight: 600; }
+    .rail .as { margin-top: 16px; padding: 8px 10px; font-size: 11.5px; color: var(--st-faint); border-top: 1px solid var(--st-line-soft); }
 
-    .section-header {
-      padding: 14px 20px 12px;
-      border-bottom: 1px solid #eee;
+    .chips-nav { display: none; }
+
+    /* ── sections ── */
+    section.st { margin-top: 26px; scroll-margin-top: 96px; }
+    .sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
+    .sec-head h2 { margin: 0; font-family: var(--st-mono); font-size: 15px; font-weight: 700; color: var(--st-ink); }
+    .sec-head h2 .colon { color: var(--st-accent); }
+    .sec-head .count { font-family: var(--st-mono); font-size: 11.5px; color: var(--st-faint); }
+    .sec-head .sub { font-size: 12px; color: var(--st-muted); }
+    .sec-head .add { margin-left: auto; }
+
+    .list { background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
+
+    /* ── unified record row ── */
+    .row {
+      display: grid; grid-template-columns: 190px minmax(0,1fr) auto;
+      gap: 4px 14px; align-items: center;
+      padding: 8px 14px; border-bottom: 1px solid var(--st-line-soft);
+      transition: background .12s ease;
     }
-
-    .section-title {
-      font-size: 0.95em;
-      font-weight: 700;
-      color: #222;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin: 0 0 3px;
+    @media (prefers-reduced-motion: reduce) { .row { transition: none; } }
+    .row:last-child { border-bottom: none; }
+    .row:hover { background: var(--st-surface-2); }
+    .row .id { font-family: var(--st-mono); font-size: 13px; font-weight: 600; color: var(--st-ink); display: flex; align-items: center; gap: 8px; min-width: 0; }
+    .row .id .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+    .dot.ok { background: var(--st-ok); }
+    .dot.off { background: transparent; border: 1.5px solid var(--st-faint); }
+    .facts { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
+    .chip {
+      display: inline-flex; align-items: center; gap: 4px;
+      font-family: var(--st-mono); font-size: 11px; line-height: 1.3;
+      padding: 3px 7px; border-radius: 4px;
+      background: var(--st-surface-2); color: var(--st-muted);
     }
+    .chip.owner { background: var(--st-badge-owner); color: var(--st-badge-owner-ink); }
+    .chip.mgr { background: var(--st-badge-mgr); color: var(--st-badge-mgr-ink); }
+    .chip.level { background: transparent; border: 1px solid var(--st-line); }
+    .chip.private { background: transparent; border: 1px dashed var(--st-badge-owner-ink); color: var(--st-badge-owner-ink); }
+    .chip .k { color: var(--st-faint); }
+    .chip .w { color: var(--st-warn); font-weight: 700; }
+    .chip .c { color: var(--st-crit); font-weight: 700; }
+    .row .act { display: flex; gap: 4px; justify-content: flex-end; }
 
-    .section-desc {
-      font-size: 0.82em;
-      color: #888;
-      margin: 0;
+    /* row inline editor (one idiom for every type) */
+    .row .editor { display: none; }
+    .row.expanded { background: var(--st-surface-2); border-left: 3px solid var(--st-accent); padding-left: 11px; }
+    .row.expanded .editor {
+      grid-column: 1 / -1;
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 10px 16px; padding: 10px 2px 6px;
     }
-
-    /* ---- Field rows ---- */
-    .field-row {
-      display: flex;
-      align-items: baseline;
-      padding: 10px 20px;
-      border-bottom: 1px solid #f5f5f5;
-      gap: 16px;
+    .row.expanded .editor.wide { grid-template-columns: 1fr; }
+    .field label, .field .lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--st-faint); margin-bottom: 3px; }
+    .field .hint { font-size: 11px; color: var(--st-faint); margin-top: 3px; }
+    .field input[type=text], .field input[type=password], .field input[type=number], .field select {
+      width: 100%; font: 13px var(--st-mono); color: var(--st-ink);
+      background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 5px; padding: 6px 8px;
     }
-    .field-row:last-child { border-bottom: none; }
+    .toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--st-muted); margin-right: 14px; cursor: pointer; }
+    .editor .foot { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding-top: 2px; flex-wrap: wrap; }
+    .editor .foot .danger { margin-left: auto; }
 
-    .field-label {
-      width: 200px;
-      flex-shrink: 0;
-      font-size: 0.88em;
-      font-weight: 500;
-      color: #444;
+    /* server key/value groups */
+    .kv .row { grid-template-columns: 230px minmax(0,1fr); padding: 6px 14px; }
+    .group {
+      display: flex; align-items: center; gap: 10px;
+      padding: 7px 14px 5px; font-family: var(--st-mono); font-size: 11px; color: var(--st-faint);
+      background: var(--st-surface); border-bottom: 1px solid var(--st-line-soft);
     }
-
-    .field-body { flex: 1; min-width: 0; }
-
-    .field-value {
-      font-size: 0.9em;
-      color: #222;
-      word-break: break-all;
+    .group .gbtn { margin-left: auto; }
+    .kv .val { font-family: var(--st-mono); font-size: 12.5px; color: var(--st-muted); min-width: 0; }
+    .kv input.field-input, .kv .val input, .kv .val select {
+      width: 100%; max-width: 420px; font: 12.5px var(--st-mono); color: var(--st-ink);
+      background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 5px; padding: 4px 8px;
     }
+    .kv .desc { display: block; font-size: 11px; color: var(--st-faint); margin-top: 2px; }
+    .val-masked { color: var(--st-faint); letter-spacing: 2px; }
 
-    .field-desc {
-      font-size: 0.78em;
-      color: #999;
-      margin-top: 2px;
+    .note { margin: 8px 2px 0; font-size: 12px; color: var(--st-faint); }
+
+    /* threshold metric table inside editor */
+    .thr-table { border-collapse: collapse; width: 100%; font-family: var(--st-mono); font-size: 12px; }
+    .thr-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--st-faint); padding: 4px 6px; border-bottom: 1px solid var(--st-line); }
+    .thr-table td { padding: 3px 6px; border-bottom: 1px solid var(--st-line-soft); }
+    .thr-table input[type=text], .thr-table input[type=number], .thr-table select {
+      font: 12px var(--st-mono); color: var(--st-ink);
+      background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 4px; padding: 3px 6px;
     }
+    .thr-scroll { overflow-x: auto; }
+    fieldset.plain { border: none; margin: 0; padding: 0; min-width: 0; }
 
-    /* ---- Value type renderers ---- */
-    .val-boolean {
-      display: inline-block;
-      padding: 2px 9px;
-      border-radius: 10px;
-      font-size: 0.8em;
-      font-weight: 600;
-    }
-    .val-boolean.on  { background: #e8f5e9; color: #2e7d32; }
-    .val-boolean.off { background: #fce4ec; color: #c62828; }
-
-    .val-masked {
-      font-family: monospace;
-      color: #bbb;
-      letter-spacing: 2px;
-    }
-
-    .val-list { display: flex; flex-wrap: wrap; gap: 5px; }
-    .val-tag {
-      display: inline-block;
-      padding: 2px 9px;
-      background: #e8eaf6;
-      color: #283593;
-      border-radius: 10px;
-      font-size: 0.8em;
-    }
-    .val-empty { color: #ccc; font-style: italic; font-size: 0.88em; }
-
-    /* ---- Users table ---- */
-    .mini-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 0.875em;
-    }
-    .mini-table th {
-      background: #f5f5f5;
-      padding: 7px 12px;
-      text-align: left;
-      font-weight: 600;
-      color: #555;
-      font-size: 0.82em;
-      text-transform: uppercase;
-      letter-spacing: 0.4px;
-      border-bottom: 1px solid #e0e0e0;
-    }
-    .mini-table td {
-      padding: 7px 12px;
-      border-bottom: 1px solid #f0f0f0;
-      color: #333;
-      vertical-align: middle;
-    }
-    .mini-table tbody tr:last-child td { border-bottom: none; }
-    .mini-table tbody tr:hover { background: #fafafa; }
-
-    .badge {
-      display: inline-block;
-      padding: 1px 8px;
-      border-radius: 10px;
-      font-size: 0.75em;
-      font-weight: 600;
-    }
-    .badge-admin { background: #e8f0fe; color: #1a73e8; }
-    .badge-user  { background: #f1f3f4; color: #666; }
-
-    /* ---- Notification channels ---- */
-    .channel-card {
-      border: 1px solid #e8eaf6;
-      border-radius: 6px;
-      margin: 12px 20px;
-      overflow: hidden;
-    }
-
-    .channel-header {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      padding: 9px 14px;
-      background: #f8f9ff;
-      border-bottom: 1px solid #e8eaf6;
-    }
-
-    .channel-name-text { font-weight: 600; font-size: 0.9em; color: #222; }
-
-    .ch-type-badge {
-      padding: 2px 8px;
-      border-radius: 8px;
-      font-size: 0.75em;
-      font-weight: 600;
-      background: #e8eaf6;
-      color: #3949ab;
-    }
-
-    .channel-fields { padding: 6px 0; }
-
-    .channel-field {
-      display: flex;
-      padding: 5px 14px;
-      font-size: 1.00em;
-      border-bottom: 1px solid #f5f5f5;
-      gap: 12px;
-    }
-    .channel-field:last-child { border-bottom: none; }
-    .channel-field-label { width: 130px; flex-shrink: 0; color: #777; }
-    .channel-field-value { color: #333; word-break: break-all; }
-
-    /* ---- Channel management (form-based section) ---- */
-    .channel-header-actions { margin-left: auto; display: flex; gap: 6px; }
-    .ch-owner-badge { padding: 2px 7px; border-radius: 8px; font-size: .72em; font-weight: 600; background: #e8f5e9; color: #2e7d32; }
-    .ch-private-badge { padding: 2px 7px; border-radius: 8px; font-size: .72em; font-weight: 600; background: #fce4ec; color: #c62828; }
-    .ch-level-badge { padding: 2px 7px; border-radius: 8px; font-size: .72em; font-weight: 600; background: #fff3e0; color: #e65100; }
-    .channel-grid { padding: 12px 20px 0; }
-    .channel-add-bar { display: flex; justify-content: flex-end; padding: 10px 20px; border-top: 1px solid #f0f0f0; }
-
-    /* Channel modal */
-    .ch-modal-overlay {
-      position: fixed; inset: 0; background: rgba(0,0,0,.4);
-      display: flex; align-items: center; justify-content: center; z-index: 1001;
-    }
-    .ch-modal-box {
-      background: #fff; border-radius: 8px; padding: 24px;
-      min-width: 360px; max-width: 520px; width: 95%;
-      box-shadow: 0 8px 32px rgba(0,0,0,.2);
-    }
-    .ch-modal-box h3 { margin: 0 0 16px; font-size: 1em; }
-    .ch-form-row { margin-bottom: 12px; }
-    .ch-form-row label { display: block; font-size: .83em; font-weight: 600; color: #555; margin-bottom: 3px; }
-    .ch-form-row input[type=text], .ch-form-row input[type=password], .ch-form-row select {
-      width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 5px 8px;
-      font-size: .88em; box-sizing: border-box; font-family: inherit;
-    }
-    .ch-form-row input:focus, .ch-form-row select:focus { border-color: #0066cc; outline: none; }
-    .ch-form-divider { font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #888; margin: 14px 0 8px; border-top: 1px solid #eee; padding-top: 10px; }
-    .ch-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
-    .ch-status { font-size: .83em; margin-top: 8px; }
-
-    /* ---- Hosts table ---- */
-    /* ---- Mobile: collapsible sidebar ---- */
-    .sidebar-toggle {
-      display: none;
-      width: 100%;
-      padding: 8px 12px;
-      background: #e8eaf6;
-      border: none;
-      border-radius: 6px;
-      font-size: 0.9em;
-      font-weight: 600;
-      color: #283593;
-      cursor: pointer;
-      text-align: left;
-      margin-bottom: 16px;
-    }
-    .sidebar-toggle::after { content: ' ▾'; float: right; }
-    .sidebar-toggle.open::after { content: ' ▴'; }
-
-    @media (max-width: 640px) {
-      .sidebar-toggle { display: block; }
-
-      .settings-layout { flex-direction: column; gap: 0; }
-
-      .settings-sidebar {
-        width: 100%;
-        position: static;
-        margin-bottom: 0;
-      }
-
-      .sidebar-nav {
-        display: none;
-        background: white;
-        border-radius: 6px;
-        box-shadow: 0 1px 4px rgba(0,0,0,.1);
-        margin-bottom: 16px;
-        padding: 4px 0;
-      }
-      .sidebar-nav.open { display: block; }
-      .sidebar-nav a { padding: 10px 16px; font-size: 1em; }
-
-      .field-row { flex-direction: column; gap: 4px; }
-      .field-label { width: 100%; font-size: 0.82em; color: #888; }
-    }
-    .host-bool { text-align: center; }
-    .dot-yes { color: #2e7d32; font-size: 1.1em; }
-    .dot-no  { color: #ddd;    font-size: 1.1em; }
-
-    /* ---- Threshold configurations ---- */
-    .thresh-config { margin: 12px 20px 20px; }
-    .thresh-config-name {
-      font-weight: 600; font-size: 0.9em; color: #1a237e;
-      margin-bottom: 6px;
-    }
-    .mini-table .warn  { color: #e65100; font-weight: 600; }
-    .mini-table .crit  { color: #b71c1c; font-weight: 600; }
-    .mini-table .dim   { color: #aaa; }
-    .mini-table .metric-path { font-family: monospace; font-size: 0.88em; }
-
-    /* ---- Editable inputs ---- */
-    .field-input {
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      padding: 4px 8px;
-      font-size: 0.88em;
-      box-sizing: border-box;
-      font-family: inherit;
-    }
-    .field-input:focus { border-color: #0066cc; outline: none; box-shadow: 0 0 0 2px rgba(0,102,204,.15); }
-
-    /* ---- Section footer (Stage Changes button) ---- */
-    .section-footer {
-      padding: 10px 20px;
-      border-top: 1px solid #f0f0f0;
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    /* ---- Pending changes banner ---- */
-    .pending-banner {
-      position: sticky;
-      top: 8px;
-      z-index: 100;
-      background: #fffbe6;
-      border: 1px solid #e8c840;
-      border-radius: 6px;
-      padding: 10px 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 0.87em;
-      margin-bottom: 16px;
-      box-shadow: 0 2px 8px rgba(0,0,0,.08);
-    }
-    .pending-banner .pending-msg { color: #7a6000; }
-    .pending-banner .pending-actions { display: flex; gap: 8px; }
-
-    /* ---- YAML editor ---- */
-    .yaml-editor {
-      width: 100%;
-      font-family: monospace;
-      font-size: 0.83em;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      padding: 8px;
-      box-sizing: border-box;
-      background: #fafafa;
-      resize: vertical;
-      min-height: 140px;
-    }
-    .yaml-editor:focus { border-color: #0066cc; outline: none; }
-
-    /* ---- Button styles ---- */
-    .btn { border: none; border-radius: 4px; padding: 5px 12px; font-size: 1.00em; cursor: pointer; }
-    .btn-primary { background: #0066cc; color: #fff; }
-    .btn-primary:hover { background: #0055aa; }
-    .btn-success { background: #2a7a2a; color: #fff; }
-    .btn-success:hover { background: #226622; }
-    .btn-secondary { background: #888; color: #fff; }
-    .btn-secondary:hover { background: #666; }
-    .btn-danger { background: transparent; color: #c62828; border: 1px solid #e0e0e0; border-radius: 4px; padding: 2px 7px; font-size: 0.82em; cursor: pointer; }
-    .btn-danger:hover { background: #fce4ec; }
-
-    /* ---- CRUD table for users / oauth ---- */
-    .crud-table { width: 100%; border-collapse: collapse; font-size: 0.83em; }
-    .crud-table th { background: #f5f5f5; padding: 6px 10px; text-align: left; font-weight: 600; color: #555; font-size: .78em; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e0e0e0; }
-    .crud-table td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
-    .crud-table tbody tr:last-child td { border-bottom: none; }
-    .crud-table .field-input { width: 100%; }
-
-    /* ---- Rollback modal ---- */
-    .modal-overlay {
-      position: fixed; inset: 0; background: rgba(0,0,0,.4);
-      display: flex; align-items: center; justify-content: center; z-index: 1000;
-    }
-    .modal-box {
-      background: #fff; border-radius: 8px; padding: 24px;
-      min-width: 340px; max-width: 520px; width: 90%;
-      box-shadow: 0 8px 32px rgba(0,0,0,.18);
-    }
-    .modal-box h3 { margin: 0 0 12px; font-size: 1em; }
-    .backup-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: .87em; }
-    .backup-row:last-child { border-bottom: none; }
-
-    /* ---- Threshold config cards ---- */
-    .thresh-cfg-card {
-      margin-bottom: 14px;
-      border: 1px solid #e0e0e0;
-      border-radius: 6px;
-      overflow: hidden;
-    }
-    .thresh-cfg-header {
-      background: #f5f5f5;
-      padding: 8px 14px;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      border-bottom: 1px solid #e0e0e0;
-    }
-    .thresh-cfg-name-label {
-      font-weight: 600;
-      font-size: 0.9em;
-      color: #1a237e;
-    }
-    .thresh-metric-table { width: 100%; }
-    .thresh-metric-table th { white-space: nowrap; }
-
-    /* ---- Multi-picker ---- */
-    .mpick-wrapper { display: block; }
-    .mpick-display {
-      display: flex; align-items: center; gap: 4px; flex-wrap: nowrap;
-      cursor: pointer; padding: 3px 7px; border: 1px solid #ccc; border-radius: 4px;
-      min-height: 26px; min-width: 80px; width: 100%; box-sizing: border-box;
-      background: #fff; user-select: none; overflow: hidden;
-    }
-    .mpick-display:hover { border-color: #0066cc; background: #f8fbff; }
-    .mpick-tag {
-      padding: 1px 6px; background: #e8eaf6; color: #283593;
-      border-radius: 10px; font-size: 0.82em; white-space: nowrap; flex-shrink: 0;
-    }
-    .mpick-more { color: #888; font-size: 0.82em; white-space: nowrap; flex-shrink: 0; }
-    .mpick-empty { color: #bbb; font-style: italic; font-size: 0.82em; }
+    /* mpick — multi-select chips */
+    .mpick-wrapper { position: relative; }
+    .mpick-display { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; align-items: center; cursor: pointer; padding: 3px 6px; border: 1px dashed var(--st-line); border-radius: 5px; }
+    .mpick-display:hover { border-color: var(--st-accent); }
+    .mpick-tag { font-family: var(--st-mono); font-size: 11px; background: var(--st-surface-2); color: var(--st-muted); padding: 3px 7px; border-radius: 4px; }
+    .mpick-more { font-size: 11px; color: var(--st-faint); }
+    .mpick-empty { font-size: 11.5px; color: var(--st-faint); }
     .mpick-panel {
-      position: fixed; background: #fff; border: 1px solid #d0d0d0;
-      border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,.18);
-      z-index: 2000; width: 360px; overflow: hidden;
+      position: fixed; z-index: 300; width: 360px; max-width: calc(100vw - 16px);
+      background: var(--st-surface); border: 1px solid var(--st-line); border-radius: 8px;
+      box-shadow: 0 8px 28px var(--shadow);
     }
-    .mpick-panel-header {
-      padding: 6px 12px; font-size: 0.78em; font-weight: 700;
-      text-transform: uppercase; letter-spacing: 0.04em; color: #555;
-      border-bottom: 1px solid #eee; display: flex;
-      justify-content: space-between; align-items: center; background: #f5f5f5;
-    }
-    .mpick-panel-body { display: flex; }
-    .mpick-col { flex: 1; min-width: 0; max-height: 200px; overflow-y: auto; }
-    .mpick-col-header {
-      padding: 4px 10px; font-size: 0.72em; font-weight: 700;
-      text-transform: uppercase; letter-spacing: 0.04em; color: #888;
-      border-bottom: 1px solid #f0f0f0; background: #fafafa;
-      position: sticky; top: 0; z-index: 1;
-    }
-    .mpick-col:first-child { border-right: 1px solid #eee; }
-    .mpick-item {
-      padding: 5px 10px; font-size: 1.00em; cursor: pointer;
-      display: flex; align-items: center; justify-content: space-between;
-      border-bottom: 1px solid #f8f8f8; gap: 4px;
-    }
-    .mpick-item:last-child { border-bottom: none; }
-    .mpick-item-avail:hover { background: #e8f5e9; }
-    .mpick-item-sel:hover { background: #fce4ec; }
-    .mpick-arrow { font-size: 1.1em; opacity: 0.4; flex-shrink: 0; line-height: 1; }
-    .mpick-item:hover .mpick-arrow { opacity: 1; }
-    .mpick-item-avail .mpick-arrow { color: #2a7a2a; }
-    .mpick-item-sel .mpick-arrow { color: #c62828; }
-    .mpick-panel-footer {
-      padding: 6px 10px; border-top: 1px solid #eee;
-      display: flex; justify-content: flex-end; background: #f8f8f8;
-    }
-    .mpick-none { padding: 10px; font-size: .82em; color: #aaa; text-align: center; }
+    .mpick-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--st-muted); border-bottom: 1px solid var(--st-line-soft); }
+    .mpick-panel-body { display: grid; grid-template-columns: 1fr 1fr; max-height: 240px; }
+    .mpick-col { overflow-y: auto; padding: 6px; }
+    .mpick-col + .mpick-col { border-left: 1px solid var(--st-line-soft); }
+    .mpick-col-header { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--st-faint); padding: 2px 6px 6px; }
+    .mpick-item { display: flex; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 4px; font-family: var(--st-mono); font-size: 12px; cursor: pointer; color: var(--st-ink); }
+    .mpick-item-avail:hover { background: var(--st-accent-soft); }
+    .mpick-item-sel:hover { background: var(--st-surface-2); }
+    .mpick-none { font-size: 11.5px; color: var(--st-faint); padding: 6px; }
+    .mpick-panel-footer { padding: 8px 12px; border-top: 1px solid var(--st-line-soft); text-align: right; }
 
-    /* ── Dark mode ── */
-    html[data-theme="dark"] h1 { color: var(--text); }
-    html[data-theme="dark"] .subtitle { color: var(--text-sec); }
-    html[data-theme="dark"] .sidebar-nav a { color: var(--text-sec); }
-    html[data-theme="dark"] .sidebar-nav a:hover { background: var(--surface-3); color: var(--link); }
-    html[data-theme="dark"] .sidebar-nav a.active { background: #1a3255; color: #60a5fa; }
-    html[data-theme="dark"] .sidebar-toggle { background: var(--surface-3); color: var(--text-sec); }
-    html[data-theme="dark"] .sidebar-nav { background: var(--surface); }
-    html[data-theme="dark"] .section { background: var(--surface); box-shadow: 0 1px 4px var(--shadow); }
-    html[data-theme="dark"] .section-header { border-bottom-color: var(--border); }
-    html[data-theme="dark"] .section-title { color: var(--text-2); }
-    html[data-theme="dark"] .section-desc { color: var(--text-muted); }
-    html[data-theme="dark"] .section-footer { border-top-color: var(--border-3); }
-    html[data-theme="dark"] .field-row { border-bottom-color: var(--border-4); }
-    html[data-theme="dark"] .field-label { color: var(--text-sec); }
-    html[data-theme="dark"] .field-value { color: var(--text); }
-    html[data-theme="dark"] .field-desc { color: var(--text-muted); }
-    html[data-theme="dark"] .val-boolean.on  { background: #0d2e17; color: #66bb6a; }
-    html[data-theme="dark"] .val-boolean.off { background: #2e0d0d; color: #ef9a9a; }
-    html[data-theme="dark"] .val-tag { background: #1a2d5a; color: #7aa8f0; }
-    html[data-theme="dark"] .val-empty { color: var(--text-dim); }
-    html[data-theme="dark"] .val-masked { color: var(--text-muted); }
-    html[data-theme="dark"] .mini-table th { background: var(--surface-3); color: var(--text-sec); border-bottom-color: var(--border); }
-    html[data-theme="dark"] .mini-table td { border-bottom-color: var(--border-3); color: var(--text); }
-    html[data-theme="dark"] .mini-table tbody tr:hover { background: var(--surface-2); }
-    html[data-theme="dark"] .badge-admin { background: #1a3255; color: #7aa8f0; }
-    html[data-theme="dark"] .badge-user  { background: var(--surface-3); color: var(--text-sec); }
-    html[data-theme="dark"] .channel-card { border-color: var(--border); }
-    html[data-theme="dark"] .channel-header { background: var(--surface-2); border-bottom-color: var(--border); }
-    html[data-theme="dark"] .channel-name-text { color: var(--text); }
-    html[data-theme="dark"] .channel-field { border-bottom-color: var(--border-4); }
-    html[data-theme="dark"] .channel-field-label { color: var(--text-muted); }
-    html[data-theme="dark"] .channel-field-value { color: var(--text); }
-    html[data-theme="dark"] .thresh-cfg-card { border-color: var(--border); }
-    html[data-theme="dark"] .thresh-cfg-header { background: var(--surface-2); border-bottom-color: var(--border); }
-    html[data-theme="dark"] .thresh-cfg-name-label { color: #60a5fa; }
-    html[data-theme="dark"] .crud-table th { background: var(--surface-3); color: var(--text-sec); border-bottom-color: var(--border); }
-    html[data-theme="dark"] .crud-table td { border-bottom-color: var(--border-3); color: var(--text); }
-    html[data-theme="dark"] .yaml-editor { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
-    html[data-theme="dark"] .pending-banner { background: #2d2400; border-color: #a08020; }
-    html[data-theme="dark"] .pending-banner .pending-msg { color: #e8c840; }
-    html[data-theme="dark"] .modal-box,
-    html[data-theme="dark"] .ch-modal-box { background: var(--surface); color: var(--text); }
-    html[data-theme="dark"] .modal-box h3,
-    html[data-theme="dark"] .ch-modal-box h3 { color: var(--text); }
-    html[data-theme="dark"] .ch-form-row label { color: var(--text-sec); }
-    html[data-theme="dark"] .ch-form-divider { color: var(--text-muted); border-top-color: var(--border); }
-    html[data-theme="dark"] .backup-row { border-bottom-color: var(--border-3); }
-    html[data-theme="dark"] .mpick-display { background: var(--input-bg); border-color: var(--input-border); }
-    html[data-theme="dark"] .mpick-display:hover { border-color: var(--link); background: var(--surface-2); }
-    html[data-theme="dark"] .mpick-tag { background: #1a2d5a; color: #7aa8f0; }
-    html[data-theme="dark"] .mpick-more,
-    html[data-theme="dark"] .mpick-empty { color: var(--text-muted); }
-    html[data-theme="dark"] .mpick-panel { background: var(--surface); border-color: var(--border); }
-    html[data-theme="dark"] .mpick-panel-header { background: var(--surface-3); color: var(--text-sec); border-bottom-color: var(--border); }
-    html[data-theme="dark"] .mpick-item { border-bottom-color: var(--border-4); color: var(--text); }
-    html[data-theme="dark"] .mpick-item-avail:hover { background: #0d2e17; }
-    html[data-theme="dark"] .mpick-item-sel:hover   { background: #2e0d0d; }
-    html[data-theme="dark"] .mpick-panel-footer { background: var(--surface-2); border-top-color: var(--border); }
-    html[data-theme="dark"] .mpick-none { color: var(--text-dim); }
+    /* rollback modal */
+    .modal-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; padding: 16px; }
+    .modal-box { background: var(--st-surface); color: var(--st-ink); border-radius: 10px; padding: 18px 20px; width: 480px; max-width: 100%; }
+    .modal-box h3 { margin: 0 0 12px; font-family: var(--st-mono); font-size: 14px; }
+    .backup-item { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--st-line-soft); font-family: var(--st-mono); font-size: 12px; }
+
+    /* ── handheld ── */
+    @media (max-width: 760px) {
+      .shell { grid-template-columns: 1fr; padding: 0 10px 90px; }
+      .rail { display: none; }
+      .chips-nav {
+        display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
+        position: sticky; top: 46px; z-index: 80;
+        padding: 8px 10px; background: var(--st-paper); border-bottom: 1px solid var(--st-line-soft);
+        scrollbar-width: none;
+      }
+      .chips-nav::-webkit-scrollbar { display: none; }
+      .chips-nav a {
+        flex: none; font-family: var(--st-mono); font-size: 12px; text-decoration: none;
+        color: var(--st-muted); background: var(--st-surface); border: 1px solid var(--st-line);
+        border-radius: 999px; padding: 5px 12px;
+      }
+      .chips-nav a.active { background: var(--st-accent-soft); border-color: var(--st-accent); color: var(--st-accent); font-weight: 600; }
+      .st-toolbar { padding: 8px 10px; }
+      .st-toolbar .hintline { display: none; }
+      .row { grid-template-columns: minmax(0,1fr) auto; padding: 9px 12px; }
+      .row .id { grid-row: 1; grid-column: 1; }
+      .row .act { grid-row: 1; grid-column: 2; }
+      .row .facts { grid-column: 1 / -1; }
+      .kv .row { grid-template-columns: 1fr; }
+      section.st { scroll-margin-top: 140px; }
+    }
   </style>
 
   <body>
   {%- macro mpick(all_items, sel, cls) -%}
-  <div class="mpick-wrapper"><div class="mpick-display" onclick="openMpick(this)" title="{{ sel | join(', ') | e }}">{%- if sel -%}{%- for v in sel[:2] -%}<span class="mpick-tag">{{ v | e }}</span>{%- endfor -%}{%- if sel|length > 2 %}<span class="mpick-more">+{{ sel|length - 2 }}</span>{%- endif -%}{%- else -%}<span class="mpick-empty">(none)</span>{%- endif -%}</div><select class="{{ cls }}" multiple hidden>{%- for item in all_items %}<option value="{{ item | e }}"{% if item in sel %} selected{% endif %}>{{ item | e }}</option>{%- endfor %}</select></div>
+  <div class="mpick-wrapper"><div class="mpick-display" onclick="openMpick(this)" title="{{ sel | join(', ') | e }}">{%- if sel -%}{%- for v in sel -%}<span class="mpick-tag">{{ v | e }}</span>{%- endfor -%}{%- else -%}<span class="mpick-empty">(none — click to pick)</span>{%- endif -%}</div><select class="{{ cls }}" multiple hidden>{%- for item in all_items %}<option value="{{ item | e }}"{% if item in sel %} selected{% endif %}>{{ item | e }}</option>{%- endfor %}</select></div>
   {%- endmacro %}
     {% include 'nav.html' %}
 
-    <div class="container">
-      <h1>Settings</h1>
-      <p class="subtitle">Edit server configuration — changes are staged until you publish them to <code>.hb.yaml</code>.</p>
+    {% set is_admin = not current_user or current_user.admin %}
+    {% set by_id = {} %}
+    {% for s in sections %}{% if by_id.update({s.id: s}) %}{% endif %}{% endfor %}
+    {% set entity_order = ['hosts', 'channels', 'thresholds', 'users', 'oauth'] %}
+    {% set server_group = sections | rejectattr('id', 'in', entity_order) | list %}
 
-      <!-- Pending changes banner (hidden until something is staged) -->
-      <div id="pending-banner" class="pending-banner" style="display:none">
-        <span class="pending-msg">⚠ <strong id="pending-count">0</strong> section(s) with pending changes — not yet saved to .hb.yaml</span>
-        <span class="pending-actions">
-          <button class="btn btn-secondary" onclick="discardAll()">Discard all</button>
-          <button class="btn btn-success" onclick="publishAll()">Publish to .hb.yaml</button>
-        </span>
-      </div>
+    <!-- sticky toolbar -->
+    <div class="st-toolbar">
+      <span class="brand">hbd<span class="tld">·settings</span></span>
+      <span class="hintline">changes are staged until you publish them to .hb.yaml</span>
+      <span class="spacer"></span>
+      <span class="pending-pill" id="pending-banner"><span id="pending-count">0</span>&nbsp;unpublished change(s)</span>
+      <button class="btn quiet small" onclick="discardAll()">Discard</button>
+      <button class="btn primary small" onclick="publishAll()">Publish</button>
+      {% if is_admin %}
+      <button class="btn quiet small" onclick="showRollbackModal()" title="View config backups / roll back">Backups</button>
+      {% endif %}
+    </div>
+    <svg class="pulse" viewBox="0 0 1200 14" preserveAspectRatio="none" aria-hidden="true">
+      <polyline points="0,10 340,10 352,10 358,3 364,13 370,1 378,12 384,10 560,10 572,10 578,3 584,13 590,1 598,12 604,10 1200,10"/>
+    </svg>
 
-      <!-- Rollback modal -->
-      <div id="rollback-modal" class="modal-overlay" style="display:none" onclick="if(event.target===this)closeRollbackModal()">
-        <div class="modal-box">
-          <h3>Backups / Rollback</h3>
-          <div id="rollback-list" style="max-height:300px;overflow-y:auto">Loading…</div>
-          <div style="margin-top:14px;text-align:right">
-            <button class="btn btn-secondary" onclick="closeRollbackModal()">Close</button>
-          </div>
+    <!-- mobile section chips -->
+    <nav class="chips-nav" id="chips-nav">
+      {% for sid in entity_order %}{% if sid in by_id %}
+      <a href="#{{ sid }}">{{ {'hosts':'hosts','channels':'channels','thresholds':'thresholds','users':'users','oauth':'oauth'}[sid] }}</a>
+      {% endif %}{% endfor %}
+      {% if server_group %}<a href="#server">server</a>{% endif %}
+    </nav>
+
+    <!-- rollback modal -->
+    <div id="rollback-modal" class="modal-overlay" onclick="if(event.target===this)closeRollbackModal()">
+      <div class="modal-box">
+        <h3>backups / rollback</h3>
+        <div id="rollback-list" style="max-height:300px;overflow-y:auto">Loading…</div>
+        <div style="margin-top:14px;text-align:right">
+          <button class="btn small" onclick="closeRollbackModal()">Close</button>
         </div>
       </div>
+    </div>
 
-      <!-- Channel add/edit modal -->
-      <div id="ch-modal" class="ch-modal-overlay" style="display:none" onclick="if(event.target===this)closeChannelModal()">
-        <div class="ch-modal-box">
-          <h3 id="ch-modal-title">Add Notification Channel</h3>
-          <div class="ch-form-row">
-            <label>Channel name</label>
-            <input type="text" id="ch-name" placeholder="e.g. pushover_ops" autocomplete="off">
-          </div>
-          <div class="ch-form-row">
-            <label>Type</label>
-            <select id="ch-type" onchange="onChTypeChange()">
-              <option value="">— select —</option>
-            </select>
-          </div>
-          <div id="ch-type-fields"></div>
-          <div class="ch-form-divider">Options</div>
-          <div class="ch-form-row">
-            <label>Minimum alert level</label>
-            <select id="ch-min-level">
-              <option value="WARNING">WARNING (and above)</option>
-              <option value="CRITICAL">CRITICAL only</option>
-            </select>
-          </div>
-          {% if not current_user or current_user.admin %}
-          <div class="ch-form-row">
-            <label>Owner <span style="font-weight:normal;color:#888">(empty = global)</span></label>
-            <input type="text" id="ch-owner" placeholder="(global)" autocomplete="off">
-          </div>
-          {% endif %}
-          <div id="ch-modal-status" class="ch-status"></div>
-          <div class="ch-modal-footer">
-            <button class="btn btn-secondary" onclick="closeChannelModal()">Cancel</button>
-            <button class="btn btn-primary" onclick="saveChannel()">Save</button>
-          </div>
+    <div class="shell">
+      <nav class="rail" id="rail">
+        {% if 'hosts' in by_id %}<a href="#hosts">hosts <span class="n">{{ by_id['hosts'].hosts | length }}</span></a>{% endif %}
+        {% if 'channels' in by_id %}<a href="#channels">notification_channels <span class="n">{{ by_id['channels'].channels | length }}</span></a>{% endif %}
+        {% if 'thresholds' in by_id %}<a href="#thresholds">threshold_configs <span class="n">{{ by_id['thresholds'].threshold_configs | length }}</span></a>{% endif %}
+        {% if 'users' in by_id %}<a href="#users">users <span class="n">{{ by_id['users'].users | length }}</span></a>{% endif %}
+        {% if 'oauth' in by_id %}<a href="#oauth">oauth <span class="n">{{ by_id['oauth'].providers | length }}</span></a>{% endif %}
+        {% if server_group %}<a href="#server">server <span class="n">{{ server_group | length }} groups</span></a>{% endif %}
+        <div class="as">
+          {% if current_user %}Signed in as <b>{{ current_user.username }}</b>{% if current_user.admin %} (admin){% endif %}.
+          {% if not current_user.admin %}<br>You see the hosts, channels and thresholds you own or manage.{% endif %}
+          {% else %}Authentication is disabled — full access.{% endif %}
         </div>
-      </div>
+      </nav>
 
-      <div class="settings-layout">
+      <main>
 
-        <!-- Sidebar navigation -->
-        <nav class="settings-sidebar">
-          <button class="sidebar-toggle" id="sidebar-toggle" aria-expanded="false">Sections</button>
-          <div class="sidebar-nav" id="sidebar-nav">
-            {% for section in sections %}
-            <a href="#{{ section.id }}" onclick="closeSidebar()">{{ section.title }}</a>
-            {% endfor %}
-            {% if not current_user or current_user.admin %}
-            <hr style="margin: 8px 0; border: none; border-top: 1px solid #e8e8e8;">
-            <a href="#" onclick="showRollbackModal(); return false;" style="color:#888;font-size:.82em">View backups / rollback</a>
-            {% endif %}
+        {# ================= hosts ================= #}
+        {% if 'hosts' in by_id %}{% set sec = by_id['hosts'] %}
+        <section class="st" id="hosts">
+          <div class="sec-head">
+            <h2>hosts<span class="colon">:</span></h2>
+            <span class="count">{{ sec.hosts | length }}</span>
+            <span class="sub">watched machines and who runs them</span>
+            <button class="btn small add" onclick="addHostRow()">+ Add host</button>
           </div>
-        </nav>
-
-        <!-- Main content -->
-        <div class="settings-main">
-          {% for section in sections %}
-          <div class="section" id="{{ section.id }}">
-            <div class="section-header">
-              <p class="section-title">{{ section.title }}</p>
-              {% if section.description %}<p class="section-desc">{{ section.description }}</p>{% endif %}
-            </div>
-
-            {# ---- Users CRUD ---- #}
-            {% if section.id == 'users' %}
-            <div style="padding: 12px 20px 0">
-              {% for f in section.fields %}
-              {% if f.editable %}
-              <div class="field-row" style="border-bottom: 1px solid #eee; margin-bottom: 8px">
-                <div class="field-label" style="font-size:.85em;color:#555">{{ f.label }}</div>
-                <div class="field-body">
-                  <input type="text" class="field-input"
-                         data-key="{{ f.key }}" data-section="{{ section.api_section }}"
-                         value="{{ f.raw if f.raw is not none else '' }}">
-                  {% if f.description %}<p class="field-desc">{{ f.description }}</p>{% endif %}
+          <div class="list" id="hosts-list">
+            {% for h in sec.hosts %}
+            <div class="row" data-host-row="true" data-hostname="{{ h.name | e }}">
+              <span class="id">
+                <span class="dot {{ 'ok' if h.watch else 'off' }}" title="{{ 'watched' if h.watch else 'not watched' }}"></span>
+                <span class="name">{{ h.name | e }}</span>
+              </span>
+              <span class="facts">
+                {% if h.owner %}<span class="chip owner">⌂ {{ h.owner | e }}</span>{% endif %}
+                {% for m in h.managers %}<span class="chip mgr">{{ m | e }}</span>{% endfor %}
+                {% for t in h.threshold_configs %}<span class="chip">{{ t | e }}</span>{% endfor %}
+                {% if h.notification_channels %}<span class="chip">{{ h.notification_channels | length }} channel{{ 's' if h.notification_channels | length != 1 }}</span>{% endif %}
+                {% if h.dyndns %}<span class="chip">dyndns</span>{% endif %}
+              </span>
+              <span class="act">
+                <button class="btn small quiet" onclick="toggleEditor(this)">Edit</button>
+                {% if h.is_owner %}<button class="btn small quiet danger" onclick="toggleDeleteRow(this)" title="Mark for deletion">✕</button>{% endif %}
+              </span>
+              <div class="editor">
+                <div class="field">
+                  <span class="lbl">Flags</span>
+                  <label class="toggle"><input type="checkbox" class="host-watch" {% if h.watch %}checked{% endif %}> watch</label>
+                  <label class="toggle"><input type="checkbox" class="host-dyndns" {% if h.dyndns %}checked{% endif %}> dyndns</label>
+                </div>
+                {% if h.is_owner %}
+                <div class="field">
+                  <label>Owner</label>
+                  <input type="text" class="host-owner" value="{{ h.owner | e }}" placeholder="(none)">
+                  <div class="hint">Full control incl. delete and access lists</div>
+                </div>
+                <div class="field">
+                  <span class="lbl">Managers</span>
+                  {{ mpick(all_usernames, h.managers, 'host-managers') }}
+                  <div class="hint">Edit settings, receive alerts</div>
+                </div>
+                <div class="field">
+                  <span class="lbl">Monitors</span>
+                  {{ mpick(all_usernames, h.monitors, 'host-monitors') }}
+                  <div class="hint">View only</div>
                 </div>
-              </div>
-              {% endif %}
-              {% endfor %}
-            </div>
-            <div style="overflow-x:auto;padding:0 20px">
-              <table class="crud-table" id="users-editor">
-                <thead><tr>
-                  <th>Username</th><th>Display name</th><th>Avatar URL</th>
-                  <th>Admin</th><th>Channels</th><th style="min-width:110px">New password</th><th></th>
-                </tr></thead>
-                <tbody id="users-tbody">
-                  {% for u in section.users %}
-                  <tr data-user-row="true" data-username="{{ u.username | e }}">
-                    <td style="font-family:monospace;font-size:.9em">{{ u.username | e }}</td>
-                    <td><input class="field-input user-full-name" value="{{ u.full_name | e }}"></td>
-                    <td><input class="field-input user-avatar" value="{{ u.avatar | e }}"></td>
-                    <td style="text-align:center"><input type="checkbox" class="user-admin" {% if u.admin %}checked{% endif %}></td>
-                    <td style="min-width:140px">
-                      {{ mpick(all_channel_names, u.notification_channels, 'user-ch-select') }}
-                    </td>
-                    <td><input type="password" class="field-input user-password" placeholder="(leave blank to keep)"></td>
-                    <td><button class="btn-danger" onclick="toggleDeleteRow(this)">✕</button></td>
-                  </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
-            </div>
-            <div class="section-footer">
-              <button class="btn btn-secondary" onclick="addUserRow()" style="margin-right:auto">+ Add user</button>
-              <button class="btn btn-primary" onclick="stageUsersSection()">Stage changes</button>
-            </div>
-
-            {# ---- OAuth CRUD ---- #}
-            {% elif section.id == 'oauth' %}
-            <div style="overflow-x:auto;padding:0 20px">
-              <table class="crud-table" id="oauth-editor">
-                <thead><tr>
-                  <th>Name (slug)</th><th>Type</th><th>URL</th><th>Client ID</th>
-                  <th>Client Secret</th><th>Label</th><th>Logo URL</th><th></th>
-                </tr></thead>
-                <tbody id="oauth-tbody">
-                  {% for p in section.providers %}
-                  <tr data-oauth-row="true" data-name="{{ p.name | e }}">
-                    <td style="font-family:monospace;font-size:.9em">{{ p.name | e }}</td>
-                    <td>
-                      <select class="field-input oauth-type">
-                        {% for t in ['gitea', 'github', 'nextcloud'] %}
-                        <option value="{{ t }}" {% if p.type == t %}selected{% endif %}>{{ t }}</option>
-                        {% endfor %}
-                      </select>
-                    </td>
-                    <td><input class="field-input oauth-url" value="{{ p.url | e }}"></td>
-                    <td><input class="field-input oauth-client-id" value="{{ p.client_id | e }}"></td>
-                    <td><input type="password" class="field-input oauth-secret" value="{{ p.client_secret | e }}"></td>
-                    <td><input class="field-input oauth-label" value="{{ p.label | e }}"></td>
-                    <td><input class="field-input oauth-logo" value="{{ p.logo | e }}"></td>
-                    <td><button class="btn-danger" onclick="toggleDeleteRow(this)">✕</button></td>
-                  </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
-            </div>
-            <div class="section-footer">
-              <button class="btn btn-secondary" onclick="addOAuthRow()" style="margin-right:auto">+ Add provider</button>
-              <button class="btn btn-primary" onclick="stageOAuthSection()">Stage changes</button>
-            </div>
-
-            {# ---- Hosts CRUD table ---- #}
-            {% elif section.section_mode == 'hosts' %}
-            <div style="overflow-x:auto;padding:0 20px">
-              <table class="crud-table" id="hosts-editor">
-                <thead><tr>
-                  <th>Hostname</th>
-                  <th>Watch</th>
-                  <th>DynDNS</th>
-                  <th>Owner</th>
-                  <th style="min-width:110px">Managers</th>
-                  <th style="min-width:110px">Monitors</th>
-                  <th style="min-width:110px">Threshold config</th>
-                  <th style="min-width:110px">Channels</th>
-                  <th></th>
-                </tr></thead>
-                <tbody id="hosts-tbody">
-                  {% for h in section.hosts %}
-                  <tr data-host-row="true" data-hostname="{{ h.name | e }}">
-                    <td style="font-family:monospace;font-size:.9em;white-space:nowrap">{{ h.name | e }}</td>
-                    <td style="text-align:center"><input type="checkbox" class="host-watch" {% if h.watch %}checked{% endif %}></td>
-                    <td style="text-align:center"><input type="checkbox" class="host-dyndns" {% if h.dyndns %}checked{% endif %}></td>
-                    {% if h.is_owner %}
-                    <td><input class="field-input host-owner" value="{{ h.owner | e }}" placeholder="(none)" style="min-width:90px"></td>
-                    <td>{{ mpick(all_usernames, h.managers, 'host-managers') }}</td>
-                    <td>{{ mpick(all_usernames, h.monitors, 'host-monitors') }}</td>
-                    {% else %}
-                    <td><span class="val-tag">{{ h.owner | e }}</span></td>
-                    <td>{% for m in h.managers %}<span class="val-tag">{{ m | e }}</span>{% else %}<span class="val-empty">(none)</span>{% endfor %}</td>
-                    <td>{% for m in h.monitors %}<span class="val-tag">{{ m | e }}</span>{% else %}<span class="val-empty">(none)</span>{% endfor %}</td>
-                    {% endif %}
-                    <td>{{ mpick(all_threshold_configs, h.threshold_configs, 'host-tc') }}</td>
-                    <td>{{ mpick(all_channel_names, h.notification_channels, 'host-channels') }}</td>
-                    <td>{% if h.is_owner %}<button class="btn-danger" onclick="toggleDeleteRow(this)">✕</button>{% endif %}</td>
-                  </tr>
-                  {% endfor %}
-                </tbody>
-              </table>
-            </div>
-            <div class="section-footer">
-              <button class="btn btn-secondary" onclick="addHostRow()" style="margin-right:auto">+ Add host</button>
-              <button class="btn btn-primary" onclick="stageHostsSection()">Stage changes</button>
-            </div>
-
-            {# ---- Notification channels (form-based, live CRUD) ---- #}
-            {% elif section.section_mode == 'channels' %}
-            {% for f in section.fields %}
-            <div class="field-row" style="border-bottom:1px solid #f0f0f0">
-              <div class="field-label">{{ f.label }}</div>
-              <div class="field-body">
-                {% if f.type == 'list' %}
-                  {% if f.value %}<span class="val-list">{% for item in f.value %}<span class="val-tag">{{ item }}</span>{% endfor %}</span>
-                  {% else %}<span class="val-empty">None</span>{% endif %}
                 {% else %}
-                  <div class="field-value">{{ f.value if f.value is not none else '' }}</div>
-                {% endif %}
-                {% if f.description %}<p class="field-desc">{{ f.description }}</p>{% endif %}
-              </div>
-            </div>
-            {% endfor %}
-            <div class="channel-grid" id="channel-cards">
-              {% for ch in section.channels %}
-              <div class="channel-card" id="chcard-{{ ch.name | e }}">
-                <div class="channel-header">
-                  <span class="channel-name-text">{{ ch.name | e }}</span>
-                  <span class="ch-type-badge">{{ ch.type_label | e }}</span>
-                  {% if ch.min_level and ch.min_level != 'WARNING' %}<span class="ch-level-badge">{{ ch.min_level | e }}+</span>{% endif %}
-                  {% if ch.owner %}<span class="ch-owner-badge">{{ ch.owner | e }}</span>{% endif %}
-                  {% if ch.editable %}
-                  <span class="channel-header-actions">
-                    <button class="btn btn-secondary" style="font-size:.78em;padding:2px 8px" onclick="openChannelModal('{{ ch.name | e }}')">Edit</button>
-                    <button class="btn-danger" onclick="deleteChannel('{{ ch.name | e }}')">✕</button>
+                <div class="field">
+                  <span class="lbl">Access</span>
+                  <span class="facts">
+                    <span class="chip owner">⌂ {{ h.owner | e }}</span>
+                    {% for m in h.managers %}<span class="chip mgr">{{ m | e }}</span>{% endfor %}
+                    {% for m in h.monitors %}<span class="chip">{{ m | e }}</span>{% endfor %}
                   </span>
-                  {% endif %}
+                  <div class="hint">Only the owner can change access</div>
                 </div>
-                <div class="channel-fields">
-                  {% for f in ch.fields %}
-                  <div class="channel-field">
-                    <span class="channel-field-label">{{ f.label }}</span>
-                    <span class="channel-field-value">{% if f.sensitive %}<span class="val-masked">•••</span>{% elif f.value %}{{ f.value | e }}{% else %}<span style="color:#ccc">—</span>{% endif %}</span>
-                  </div>
-                  {% endfor %}
-                </div>
-              </div>
-              {% endfor %}
-              {% if not section.channels %}<p style="color:#aaa;font-size:.88em;padding:12px 0">No channels configured yet.</p>{% endif %}
-            </div>
-            <div class="channel-add-bar">
-              <button class="btn btn-primary" onclick="openChannelModal()">+ Add channel</button>
-            </div>
-
-            {# ---- Threshold configurations (form-based) ---- #}
-            {% elif section.section_mode == 'thresholds' %}
-            {% for f in section.fields %}
-            <div class="field-row" style="border-bottom:1px solid #f0f0f0">
-              <div class="field-label">{{ f.label }}</div>
-              <div class="field-body">
-                <input type="text" class="field-input thresh-default-config"
-                       value="{{ f.raw if f.raw is not none else '' }}"
-                       placeholder="default"
-                       list="thresh-cfg-names-{{ section.id }}">
-                <datalist id="thresh-cfg-names-{{ section.id }}">
-                  {% for tc in section.threshold_configs %}<option value="{{ tc.name | e }}">{% endfor %}
-                </datalist>
-                {% if f.description %}<p class="field-desc">{{ f.description }}</p>{% endif %}
-              </div>
-            </div>
-            {% endfor %}
-            <div id="thresh-cfgs-{{ section.id }}" style="padding:8px 20px 0">
-              {% for tc in section.threshold_configs %}
-              <div class="thresh-cfg-card" data-config-name="{{ tc.name | e }}"{% if not tc.editable %} data-readonly="true"{% endif %}>
-                <div class="thresh-cfg-header">
-                  <span class="thresh-cfg-name-label">{{ tc.name | e }}</span>
-                  {% if (not current_user or current_user.admin) and tc.name != 'default' %}
-                  <input type="text" class="field-input thresh-owner" value="{{ tc.owner or '' }}"
-                         placeholder="(global)" title="Owner — empty = global" style="max-width:140px;margin-left:10px">
-                  {% elif tc.owner %}
-                  <span class="ch-owner-badge" style="margin-left:10px">{{ tc.owner | e }}</span>
-                  {% endif %}
-                  {% if tc.editable and tc.name != 'default' %}
-                  <button class="btn-danger" style="margin-left:auto" onclick="deleteThresholdConfigCard(this)">✕ Delete</button>
-                  {% endif %}
-                </div>
-                <fieldset {% if not tc.editable %}disabled{% endif %} style="border:none;margin:0;padding:0;min-width:0">
-                <div style="overflow-x:auto">
-                  <table class="crud-table thresh-metric-table">
-                    <thead><tr>
-                      <th>Metric path</th><th>Op</th>
-                      <th>Warning</th><th>Critical</th>
-                      <th>Hysteresis</th><th>Count</th>
-                      <th title="Grace period (s) — overrides global; empty = use global">Grace</th>
-                      <th style="max-width:160px">Display</th>
-                      <th>En</th><th></th>
-                    </tr></thead>
-                    <tbody>
-                      {% for m in tc.metrics %}
-                      <tr data-metric-row="true" data-metric-path="{{ m.metric | e }}">
-                        <td style="font-family:monospace;font-size:.85em;white-space:nowrap">{{ m.metric | e }}</td>
-                        <td>
-                          <select class="field-input thresh-op" style="width:80px" onchange="onThreshOpChange(this)">
-                            {% for op in ['>', '>=', '<', '<=', '==', '!=', 'nagios'] %}
-                            <option value="{{ op }}" {% if m.operator == op %}selected{% endif %}>{{ op }}</option>
-                            {% endfor %}
-                          </select>
-                        </td>
-                        <td><input type="number" class="field-input thresh-warn" step="any" style="width:80px"
-                                   value="{{ m.warning if m.warning is not none else '' }}"
-                                   {% if m.operator == 'nagios' %}disabled{% endif %}></td>
-                        <td><input type="number" class="field-input thresh-crit" step="any" style="width:80px"
-                                   value="{{ m.critical if m.critical is not none else '' }}"
-                                   {% if m.operator == 'nagios' %}disabled{% endif %}></td>
-                        <td><input type="number" class="field-input thresh-hyst" step="any" style="width:72px"
-                                   value="{{ m.hysteresis if m.hysteresis is not none else 0.02 }}"></td>
-                        <td><input type="number" class="field-input thresh-count" step="1" min="1" style="width:52px"
-                                   value="{{ m.count if m.count is not none else 1 }}"></td>
-                        <td><input type="number" class="field-input thresh-grace" step="any" min="0" style="width:60px"
-                                   value="{{ m.grace if m.grace is not none else '' }}"
-                                   placeholder="(global)"></td>
-                        <td><input type="text" class="field-input thresh-display" style="width:150px"
-                                   value="{{ m.display | e }}" placeholder="(default)"></td>
-                        <td style="text-align:center"><input type="checkbox" class="thresh-enabled"
-                                   {% if m.enabled %}checked{% endif %}></td>
-                        <td><button class="btn-danger" onclick="this.closest('tr').remove()">✕</button></td>
-                      </tr>
-                      {% endfor %}
-                    </tbody>
-                  </table>
-                </div>
-                <div style="padding:6px 14px 8px;border-top:1px solid #f0f0f0">
-                  <button class="btn btn-secondary" style="font-size:.8em;padding:3px 10px"
-                          onclick="addThresholdMetricRow(this.closest('.thresh-cfg-card').querySelector('tbody'))">+ Add metric</button>
-                </div>
-                </fieldset>
-              </div>
-              {% endfor %}
-            </div>
-            <div class="section-footer" style="justify-content:space-between">
-              <button class="btn btn-secondary" onclick="addThresholdConfigCard('thresh-cfgs-{{ section.id }}')">+ Add config</button>
-              <button class="btn btn-primary" onclick="stageThresholdsSection('{{ section.id }}')">Stage changes</button>
-            </div>
-
-            {# ---- YAML editor section ---- #}
-            {% elif section.section_mode == 'yaml' %}
-            <div style="padding: 12px 20px">
-              <textarea id="yaml-{{ section.id }}" class="yaml-editor" rows="12"></textarea>
-              <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:6px">
-                <button class="btn btn-secondary" onclick="loadYamlSection('{{ section.api_section }}', 'yaml-{{ section.id }}')">Reload from file</button>
-                <button class="btn btn-primary" onclick="stageYamlSection('{{ section.api_section }}', 'yaml-{{ section.id }}')">Stage changes</button>
-              </div>
-            </div>
-
-            {# ---- Form section (generic fields) ---- #}
-            {% else %}
-            {% for f in section.fields %}
-            <div class="field-row">
-              <div class="field-label">{{ f.label }}</div>
-              <div class="field-body">
-                {% if f.editable and section.api_section %}
-                  {% if f.type == 'boolean' %}
-                    <label style="display:flex;align-items:center;gap:6px;cursor:pointer">
-                      <input type="checkbox" class="user-admin"
-                             data-key="{{ f.key }}" data-section="{{ section.api_section }}"
-                             {% if f.value %}checked{% endif %}>
-                      <span style="font-size:.88em">{{ 'Enabled' if f.value else 'Disabled' }}</span>
-                    </label>
-                  {% elif f.type in ('number', 'port', 'size') %}
-                    <input type="number" class="field-input"
-                           data-key="{{ f.key }}" data-type="{{ f.type }}" data-section="{{ section.api_section }}"
-                           value="{{ f.raw if f.raw is not none else '' }}">
-                  {% elif f.type == 'list' %}
-                    <input type="text" class="field-input"
-                           data-key="{{ f.key }}" data-type="list" data-section="{{ section.api_section }}"
-                           value="{{ f.value | join(', ') if f.value else '' }}"
-                           placeholder="comma-separated">
-                  {% else %}
-                    <input type="text" class="field-input"
-                           data-key="{{ f.key }}" data-section="{{ section.api_section }}"
-                           value="{{ f.raw if f.raw is not none else '' }}">
-                  {% endif %}
-                  {% if f.description %}<p class="field-desc">{{ f.description }}</p>{% endif %}
-                {% elif f.sensitive %}
-                  <div class="field-value"><span class="val-masked">••••••••</span></div>
-                {% elif f.type == 'boolean' %}
-                  <div class="field-value">
-                    <span class="val-boolean {{ 'on' if f.value else 'off' }}">{{ 'Enabled' if f.value else 'Disabled' }}</span>
-                  </div>
-                {% elif f.type == 'list' %}
-                  <div class="field-value">
-                    {% if f.value %}<span class="val-list">{% for item in f.value %}<span class="val-tag">{{ item }}</span>{% endfor %}</span>
-                    {% else %}<span class="val-empty">None</span>{% endif %}
-                  </div>
-                {% else %}
-                  <div class="field-value">{{ f.value if f.value is not none else '' }}</div>
                 {% endif %}
-                {% if f.description and not f.editable %}<p class="field-desc">{{ f.description }}</p>{% endif %}
+                <div class="field">
+                  <span class="lbl">Threshold configs</span>
+                  {{ mpick(all_threshold_configs, h.threshold_configs, 'host-tc') }}
+                </div>
+                <div class="field">
+                  <span class="lbl">Alert channels</span>
+                  {{ mpick(all_channel_names, h.notification_channels, 'host-channels') }}
+                </div>
+                <div class="foot">
+                  <button class="btn small primary" onclick="stageHostsSection()">Stage changes</button>
+                  <button class="btn small quiet" onclick="toggleEditor(this)">Close</button>
+                </div>
               </div>
             </div>
             {% endfor %}
-            {% if section.api_section %}
-            <div class="section-footer">
-              <button class="btn btn-primary" onclick="stageFormSection('{{ section.id }}', '{{ section.api_section }}')">Stage changes</button>
-            </div>
-            {% endif %}
-            {% endif %}
+            {% if not sec.hosts %}<div class="row"><span class="id"><span class="name" style="color:var(--st-faint)">No hosts yet — add one above.</span></span></div>{% endif %}
+          </div>
+        </section>
+        {% endif %}
 
+        {# ================= notification channels ================= #}
+        {% if 'channels' in by_id %}{% set sec = by_id['channels'] %}
+        <section class="st" id="channels">
+          <div class="sec-head">
+            <h2>notification_channels<span class="colon">:</span></h2>
+            <span class="count">{{ sec.channels | length }}</span>
+            <span class="sub">where alerts go — global unless owned</span>
+            <button class="btn small add" onclick="openChannelEditor(null, this)">+ Add channel</button>
+          </div>
+          <div class="list" id="channels-list">
+            <div class="row" id="ch-new-slot" style="display:none"><div class="editor wide" style="display:grid"></div></div>
+            {% for ch in sec.channels %}
+            <div class="row" data-channel-name="{{ ch.name | e }}">
+              <span class="id"><span class="name">{{ ch.name | e }}</span></span>
+              <span class="facts">
+                <span class="chip">{{ ch.type_label | e }}</span>
+                <span class="chip level">{{ ch.min_level | e }}{{ '+' if ch.min_level == 'WARNING' }}</span>
+                {% if ch.owner %}<span class="chip private">⌂ {{ ch.owner | e }}</span>{% endif %}
+                {% for f in ch.fields %}{% if not f.sensitive and f.value %}<span class="chip"><span class="k">{{ f.label | lower | e }}</span> {{ f.value | truncate(28) | e }}</span>{% endif %}{% endfor %}
+              </span>
+              <span class="act">
+                {% if ch.editable %}
+                <button class="btn small quiet" onclick="openChannelEditor('{{ ch.name | e }}', this)">Edit</button>
+                <button class="btn small quiet danger" onclick="deleteChannel('{{ ch.name | e }}')">✕</button>
+                {% endif %}
+              </span>
+              <div class="editor wide"></div>
+            </div>
+            {% endfor %}
+            {% if not sec.channels %}<div class="row"><span class="id"><span class="name" style="color:var(--st-faint)">No channels yet — add one above.</span></span></div>{% endif %}
+          </div>
+          <p class="note">A channel with an owner (dashed badge) is private to that user.{% if is_admin %} Clear or set the owner in the editor to promote or demote.{% endif %} Channel edits save immediately — no publish step.</p>
+        </section>
+        {% endif %}
+
+        {# ================= threshold configs ================= #}
+        {% if 'thresholds' in by_id %}{% set sec = by_id['thresholds'] %}
+        <section class="st" id="thresholds">
+          <div class="sec-head">
+            <h2>threshold_configs<span class="colon">:</span></h2>
+            <span class="count">{{ sec.threshold_configs | length }}</span>
+            <span class="sub">named alert rule sets, assigned per host</span>
+            <button class="btn small add" onclick="addThresholdConfigCard('thresh-cfgs-{{ sec.id }}')">+ Add config</button>
+          </div>
+          {% for f in sec.fields %}
+          <div class="note" style="margin-bottom:6px">
+            {{ f.label }}:
+            <input type="text" class="thresh-default-config" value="{{ f.raw if f.raw is not none else '' }}"
+                   placeholder="default" list="thresh-cfg-names" style="font:12px var(--st-mono);padding:3px 6px;border:1px solid var(--st-line);border-radius:4px;background:var(--st-surface);color:var(--st-ink)">
+            <datalist id="thresh-cfg-names">{% for tc in sec.threshold_configs %}<option value="{{ tc.name | e }}">{% endfor %}</datalist>
           </div>
           {% endfor %}
-        </div>{# /settings-main #}
-      </div>{# /settings-layout #}
-    </div>{# /container #}
+          <div class="list" id="thresh-cfgs-{{ sec.id }}">
+            {% for tc in sec.threshold_configs %}
+            <div class="row thresh-cfg-card" data-config-name="{{ tc.name | e }}"{% if not tc.editable %} data-readonly="true"{% endif %}>
+              <span class="id"><span class="name">{{ tc.name | e }}</span></span>
+              <span class="facts">
+                {% for m in tc.metrics[:3] %}
+                <span class="chip">
+                  <span class="k">{{ m.metric | e }}</span>
+                  {%- if m.operator == 'nagios' %} nagios
+                  {%- else %} {{ m.operator }} <span class="w">{{ m.warning if m.warning is not none else '·' }}</span>/<span class="c">{{ m.critical if m.critical is not none else '·' }}</span>
+                  {%- endif %}
+                  {%- if not m.enabled %} (off){% endif %}
+                </span>
+                {% endfor %}
+                {% if tc.metrics | length > 3 %}<span class="chip">+{{ tc.metrics | length - 3 }} more</span>{% endif %}
+                {% if tc.name != 'default' %}<span class="chip level">inherits default</span>{% endif %}
+                {% if tc.owner %}<span class="chip private">⌂ {{ tc.owner | e }}</span>{% endif %}
+              </span>
+              <span class="act">
+                {% if tc.editable %}
+                <button class="btn small quiet" onclick="toggleEditor(this)">Edit</button>
+                {% if tc.name != 'default' %}<button class="btn small quiet danger" onclick="deleteThresholdConfigCard(this)">✕</button>{% endif %}
+                {% else %}
+                <button class="btn small quiet" onclick="toggleEditor(this)">View</button>
+                {% endif %}
+              </span>
+              <div class="editor wide">
+                {% if is_admin and tc.name != 'default' %}
+                <div class="field" style="max-width:280px">
+                  <label>Owner <span style="text-transform:none;font-weight:400">(empty = global)</span></label>
+                  <input type="text" class="thresh-owner" value="{{ tc.owner or '' }}" placeholder="(global)">
+                </div>
+                {% endif %}
+                <fieldset class="plain" {% if not tc.editable %}disabled{% endif %}>
+                  <div class="thr-scroll">
+                    <table class="thr-table">
+                      <thead><tr>
+                        <th>Metric path</th><th>Op</th><th>Warn</th><th>Crit</th>
+                        <th>Hyst</th><th>Count</th><th title="Grace seconds — empty uses global">Grace</th>
+                        <th>Display</th><th>En</th><th></th>
+                      </tr></thead>
+                      <tbody>
+                        {% for m in tc.metrics %}
+                        <tr data-metric-row="true" data-metric-path="{{ m.metric | e }}">
+                          <td style="white-space:nowrap">{{ m.metric | e }}</td>
+                          <td>
+                            <select class="thresh-op" style="width:76px" onchange="onThreshOpChange(this)">
+                              {% for op in ['>', '>=', '<', '<=', '==', '!=', 'nagios'] %}
+                              <option value="{{ op }}" {% if m.operator == op %}selected{% endif %}>{{ op }}</option>
+                              {% endfor %}
+                            </select>
+                          </td>
+                          <td><input type="number" class="thresh-warn" step="any" style="width:72px"
+                                     value="{{ m.warning if m.warning is not none else '' }}"
+                                     {% if m.operator == 'nagios' %}disabled{% endif %}></td>
+                          <td><input type="number" class="thresh-crit" step="any" style="width:72px"
+                                     value="{{ m.critical if m.critical is not none else '' }}"
+                                     {% if m.operator == 'nagios' %}disabled{% endif %}></td>
+                          <td><input type="number" class="thresh-hyst" step="any" style="width:64px"
+                                     value="{{ m.hysteresis if m.hysteresis is not none else 0.02 }}"></td>
+                          <td><input type="number" class="thresh-count" step="1" min="1" style="width:52px"
+                                     value="{{ m.count if m.count is not none else 1 }}"></td>
+                          <td><input type="number" class="thresh-grace" step="any" min="0" style="width:60px"
+                                     value="{{ m.grace if m.grace is not none else '' }}" placeholder="(global)"></td>
+                          <td><input type="text" class="thresh-display" style="width:130px"
+                                     value="{{ m.display | e }}" placeholder="(default)"></td>
+                          <td style="text-align:center"><input type="checkbox" class="thresh-enabled" {% if m.enabled %}checked{% endif %}></td>
+                          <td><button class="btn small quiet danger" onclick="this.closest('tr').remove()">✕</button></td>
+                        </tr>
+                        {% endfor %}
+                      </tbody>
+                    </table>
+                  </div>
+                  <div class="foot">
+                    <button class="btn small" onclick="addThresholdMetricRow(this.closest('.thresh-cfg-card').querySelector('tbody'))">+ Add metric</button>
+                    {% if tc.editable %}
+                    <button class="btn small primary" onclick="stageThresholdsSection('{{ sec.id }}')">Stage changes</button>
+                    {% endif %}
+                    <button class="btn small quiet" onclick="toggleEditor(this)">Close</button>
+                  </div>
+                </fieldset>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+        {# ================= users (admin) ================= #}
+        {% if 'users' in by_id %}{% set sec = by_id['users'] %}
+        <section class="st" id="users">
+          <div class="sec-head">
+            <h2>users<span class="colon">:</span></h2>
+            <span class="count">{{ sec.users | length }}</span>
+            <span class="sub">accounts and their alert subscriptions</span>
+            <button class="btn small add" onclick="addUserRow()">+ Add user</button>
+          </div>
+          <div class="list" id="users-list">
+            {% for u in sec.users %}
+            <div class="row" data-user-row="true" data-username="{{ u.username | e }}">
+              <span class="id"><span class="name">{{ u.username | e }}</span></span>
+              <span class="facts">
+                {% if u.admin %}<span class="chip owner">admin</span>{% endif %}
+                {% if u.full_name %}<span class="chip">{{ u.full_name | e }}</span>{% endif %}
+                {% if u.notification_channels %}<span class="chip"><span class="k">alerts</span> {{ u.notification_channels | join(', ') | truncate(40) | e }}</span>{% endif %}
+              </span>
+              <span class="act">
+                <button class="btn small quiet" onclick="toggleEditor(this)">Edit</button>
+                <button class="btn small quiet danger" onclick="toggleDeleteRow(this)" title="Mark for deletion">✕</button>
+              </span>
+              <div class="editor">
+                <div class="field">
+                  <label>Display name</label>
+                  <input type="text" class="user-full-name" value="{{ u.full_name | e }}">
+                </div>
+                <div class="field">
+                  <label>Avatar</label>
+                  <input type="text" class="user-avatar" value="{{ u.avatar | e }}" placeholder="URL or path">
+                </div>
+                <div class="field">
+                  <label>New password</label>
+                  <input type="password" class="user-password" placeholder="(leave blank to keep)" autocomplete="new-password">
+                </div>
+                <div class="field">
+                  <span class="lbl">Flags</span>
+                  <label class="toggle"><input type="checkbox" class="user-admin" {% if u.admin %}checked{% endif %}> admin</label>
+                </div>
+                <div class="field">
+                  <span class="lbl">Alert channels</span>
+                  {{ mpick(all_channel_names, u.notification_channels, 'user-ch-select') }}
+                </div>
+                <div class="foot">
+                  <button class="btn small primary" onclick="stageUsersSection()">Stage changes</button>
+                  <button class="btn small quiet" onclick="toggleEditor(this)">Close</button>
+                </div>
+              </div>
+            </div>
+            {% endfor %}
+          </div>
+          {% for f in sec.fields %}{% if f.editable %}
+          <p class="note">{{ f.label }}:
+            <input type="text" data-key="{{ f.key }}" data-section="{{ sec.api_section }}"
+                   value="{{ f.raw if f.raw is not none else '' }}"
+                   style="font:12px var(--st-mono);padding:3px 6px;border:1px solid var(--st-line);border-radius:4px;background:var(--st-surface);color:var(--st-ink)">
+            <span style="margin-left:4px">{{ f.description }}</span>
+            <span style="margin-left:4px;color:var(--st-muted)">(staged with users)</span>
+          </p>
+          {% endif %}{% endfor %}
+        </section>
+        {% endif %}
+
+        {# ================= oauth (admin) ================= #}
+        {% if 'oauth' in by_id %}{% set sec = by_id['oauth'] %}
+        <section class="st" id="oauth">
+          <div class="sec-head">
+            <h2>oauth<span class="colon">:</span></h2>
+            <span class="count">{{ sec.providers | length }}</span>
+            <span class="sub">external sign-in providers</span>
+            <button class="btn small add" onclick="addOAuthRow()">+ Add provider</button>
+          </div>
+          <div class="list" id="oauth-list">
+            {% for p in sec.providers %}
+            <div class="row" data-oauth-row="true" data-name="{{ p.name | e }}">
+              <span class="id"><span class="name">{{ p.name | e }}</span></span>
+              <span class="facts">
+                <span class="chip">{{ p.type | e }}</span>
+                {% if p.url %}<span class="chip"><span class="k">url</span> {{ p.url | truncate(34) | e }}</span>{% endif %}
+                {% if p.label %}<span class="chip">{{ p.label | e }}</span>{% endif %}
+              </span>
+              <span class="act">
+                <button class="btn small quiet" onclick="toggleEditor(this)">Edit</button>
+                <button class="btn small quiet danger" onclick="toggleDeleteRow(this)" title="Mark for deletion">✕</button>
+              </span>
+              <div class="editor">
+                <div class="field">
+                  <label>Type</label>
+                  <select class="oauth-type">
+                    {% for t in ['gitea', 'github', 'nextcloud'] %}
+                    <option value="{{ t }}" {% if p.type == t %}selected{% endif %}>{{ t }}</option>
+                    {% endfor %}
+                  </select>
+                </div>
+                <div class="field"><label>URL</label><input type="text" class="oauth-url" value="{{ p.url | e }}"></div>
+                <div class="field"><label>Client ID</label><input type="text" class="oauth-client-id" value="{{ p.client_id | e }}"></div>
+                <div class="field"><label>Client secret</label><input type="password" class="oauth-secret" value="{{ p.client_secret | e }}"></div>
+                <div class="field"><label>Button label</label><input type="text" class="oauth-label" value="{{ p.label | e }}"></div>
+                <div class="field"><label>Logo URL</label><input type="text" class="oauth-logo" value="{{ p.logo | e }}"></div>
+                <div class="foot">
+                  <button class="btn small primary" onclick="stageOAuthSection()">Stage changes</button>
+                  <button class="btn small quiet" onclick="toggleEditor(this)">Close</button>
+                </div>
+              </div>
+            </div>
+            {% endfor %}
+            {% if not sec.providers %}<div class="row"><span class="id"><span class="name" style="color:var(--st-faint)">No providers configured.</span></span></div>{% endif %}
+          </div>
+        </section>
+        {% endif %}
+
+        {# ================= server (grouped scalar sections) ================= #}
+        {% if server_group %}
+        <section class="st" id="server">
+          <div class="sec-head">
+            <h2>server<span class="colon">:</span></h2>
+            <span class="count">{{ server_group | length }} groups</span>
+            <span class="sub">ports, timing, persistence, DNS — one place, grouped</span>
+          </div>
+          <div class="list kv">
+            {% for s in server_group %}
+            <div id="{{ s.id }}">
+              <div class="group"># {{ s.title | lower }}
+                {% if s.api_section %}<button class="btn small gbtn" onclick="stageFormSection('{{ s.id }}', '{{ s.api_section }}')">Stage group</button>{% endif %}
+              </div>
+              {% for f in s.fields %}
+              <div class="row">
+                <span class="id"><span class="name">{{ f.key }}</span></span>
+                <span class="val">
+                  {% if f.editable and s.api_section %}
+                    {% if f.type == 'boolean' %}
+                      <label class="toggle"><input type="checkbox" data-key="{{ f.key }}" data-section="{{ s.api_section }}" {% if f.value %}checked{% endif %}> enabled</label>
+                    {% elif f.type in ('number', 'port', 'size') %}
+                      <input type="number" data-key="{{ f.key }}" data-type="{{ f.type }}" data-section="{{ s.api_section }}"
+                             value="{{ f.raw if f.raw is not none else '' }}">
+                    {% elif f.type == 'list' %}
+                      <input type="text" data-key="{{ f.key }}" data-type="list" data-section="{{ s.api_section }}"
+                             value="{{ f.value | join(', ') if f.value else '' }}" placeholder="comma-separated">
+                    {% else %}
+                      <input type="text" data-key="{{ f.key }}" data-section="{{ s.api_section }}"
+                             value="{{ f.raw if f.raw is not none else '' }}">
+                    {% endif %}
+                  {% elif f.sensitive %}
+                    <span class="val-masked">••••••••</span>
+                  {% elif f.type == 'boolean' %}
+                    {{ 'enabled' if f.value else 'disabled' }}
+                  {% elif f.type == 'list' %}
+                    {{ f.value | join(', ') if f.value else '—' }}
+                  {% else %}
+                    {{ f.value if f.value is not none and f.value != '' else '—' }}
+                  {% endif %}
+                  {% if f.description %}<span class="desc">{{ f.description }}</span>{% endif %}
+                </span>
+              </div>
+              {% endfor %}
+            </div>
+            {% endfor %}
+          </div>
+        </section>
+        {% endif %}
+
+      </main>
+    </div>
 
     <script>
       // ---- Lookup arrays for CRUD rows ----
@@ -948,136 +691,28 @@
       const _allThresholdConfigs = {{ all_threshold_configs | tojson }};
       const _isAdmin = {{ 'true' if (not current_user or current_user.admin) else 'false' }};
 
-      // ---- Channel CRUD ----
-      let _channelSchemas = {};
-      let _chEditName = null; // null = create mode, string = edit mode
-
-      async function _loadChannelSchemas() {
-        try {
-          const r = await fetch('/api/0/notification_channel_types');
-          _channelSchemas = await r.json();
-          const sel = document.getElementById('ch-type');
-          if (!sel) return;
-          Object.entries(_channelSchemas).forEach(([k, v]) => {
-            const opt = document.createElement('option');
-            opt.value = k; opt.textContent = v.label;
-            sel.appendChild(opt);
-          });
-        } catch(e) { console.warn('Could not load channel schemas', e); }
-      }
-
-      function onChTypeChange() {
-        const type = document.getElementById('ch-type').value;
-        const container = document.getElementById('ch-type-fields');
-        container.innerHTML = '';
-        if (!type || !_channelSchemas[type]) return;
-        const divider = document.createElement('div');
-        divider.className = 'ch-form-divider';
-        divider.textContent = _channelSchemas[type].label + ' settings';
-        container.appendChild(divider);
-        (_channelSchemas[type].fields || []).forEach(sf => {
-          const row = document.createElement('div');
-          row.className = 'ch-form-row';
-          const lbl = document.createElement('label');
-          lbl.textContent = sf.label + (sf.required ? ' *' : '');
-          const inp = document.createElement(sf.type === 'secret' ? 'input' : 'input');
-          inp.type = sf.type === 'secret' ? 'password' : 'text';
-          inp.id = 'chf-' + sf.key;
-          inp.placeholder = sf.required ? '(required)' : '(optional)';
-          inp.autocomplete = 'off';
-          row.appendChild(lbl);
-          row.appendChild(inp);
-          container.appendChild(row);
-        });
-      }
-
-      async function openChannelModal(name) {
-        _chEditName = name || null;
-        document.getElementById('ch-modal-status').textContent = '';
-        document.getElementById('ch-modal-title').textContent = name ? 'Edit Channel' : 'Add Notification Channel';
-        document.getElementById('ch-name').value = name || '';
-        document.getElementById('ch-name').disabled = !!name;
-        document.getElementById('ch-type').value = '';
-        document.getElementById('ch-type-fields').innerHTML = '';
-        document.getElementById('ch-min-level').value = 'WARNING';
-        const ownerInp = document.getElementById('ch-owner');
-        if (ownerInp) ownerInp.value = '';
-
-        if (name) {
-          // Load existing channel data via API
-          try {
-            const r = await fetch('/api/0/notification_channels');
-            const channels = await r.json();
-            const ch = channels.find(c => c.name === name);
-            if (ch) {
-              document.getElementById('ch-type').value = ch.type;
-              onChTypeChange();
-              document.getElementById('ch-min-level').value = ch.min_level || 'WARNING';
-              if (ownerInp) ownerInp.value = ch.owner || '';
-              (ch.fields || []).forEach(f => {
-                const inp = document.getElementById('chf-' + f.key);
-                if (inp) inp.value = f.value || '';
-              });
-            }
-          } catch(e) { console.warn('Failed to load channel data', e); }
-        }
-        document.getElementById('ch-modal').style.display = 'flex';
-      }
-
-      function closeChannelModal() {
-        document.getElementById('ch-modal').style.display = 'none';
-      }
-
-      async function saveChannel() {
-        const name = document.getElementById('ch-name').value.trim();
-        const type = document.getElementById('ch-type').value;
-        const minLevel = document.getElementById('ch-min-level').value;
-        const statusEl = document.getElementById('ch-modal-status');
-        statusEl.textContent = '';
-
-        if (!name) { statusEl.textContent = 'Channel name is required.'; statusEl.style.color = '#c62828'; return; }
-        if (!type) { statusEl.textContent = 'Please select a type.'; statusEl.style.color = '#c62828'; return; }
-
-        const body = { name, type, min_level: minLevel };
-        const ownerInp = document.getElementById('ch-owner');
-        if (ownerInp) body.owner = ownerInp.value.trim();
-        if (_channelSchemas[type]) {
-          (_channelSchemas[type].fields || []).forEach(sf => {
-            const inp = document.getElementById('chf-' + sf.key);
-            if (inp) body[sf.key] = inp.value;
-          });
-        }
-
-        const isEdit = !!_chEditName;
-        const url = isEdit ? '/api/0/notification_channels/' + encodeURIComponent(_chEditName) : '/api/0/notification_channels';
-        const method = isEdit ? 'PUT' : 'POST';
-        try {
-          const r = await fetch(url, { method, headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) });
-          if (r.ok) {
-            closeChannelModal();
-            window.location.reload();
-          } else {
-            const err = await r.json().catch(() => ({}));
-            statusEl.textContent = err.error || 'Error saving channel.';
-            statusEl.style.color = '#c62828';
-          }
-        } catch(e) {
-          statusEl.textContent = 'Network error: ' + e.message;
-          statusEl.style.color = '#c62828';
+      // ---- Row expansion (one edit idiom for every type) ----
+      function toggleEditor(el) {
+        const row = el.closest('.row');
+        const open = row.classList.toggle('expanded');
+        const btn = row.querySelector('.act .btn');
+        if (btn && (btn.textContent === 'Edit' || btn.textContent === 'Close')) {
+          btn.textContent = open ? 'Close' : 'Edit';
         }
       }
 
-      async function deleteChannel(name) {
-        if (!confirm('Delete channel "' + name + '"? This cannot be undone.')) return;
-        try {
-          const r = await fetch('/api/0/notification_channels/' + encodeURIComponent(name), { method: 'DELETE' });
-          if (r.ok) {
-            window.location.reload();
-          } else {
-            const err = await r.json().catch(() => ({}));
-            alert('Error: ' + (err.error || 'Could not delete channel.'));
-          }
-        } catch(e) { alert('Network error: ' + e.message); }
+      function toggleDeleteRow(btn) {
+        const row = btn.closest('.row');
+        const deleted = row.dataset.deleted === 'true';
+        row.dataset.deleted = deleted ? 'false' : 'true';
+        row.style.opacity = deleted ? '1' : '0.4';
+        row.querySelectorAll('input, select').forEach(el => { el.disabled = !deleted; });
+        btn.textContent = deleted ? '✕' : '↩';
+        btn.title = deleted ? 'Mark for deletion' : 'Deletion pending — click to restore, then stage';
+      }
+
+      function escHtml(s) {
+        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
       }
 
       // ---- Staged changes accumulator ----
@@ -1088,7 +723,7 @@
         const banner = document.getElementById('pending-banner');
         if (count > 0) {
           document.getElementById('pending-count').textContent = count;
-          banner.style.display = 'flex';
+          banner.style.display = 'inline-flex';
           localStorage.setItem('hbd_pending_config', JSON.stringify(_staged));
         } else {
           banner.style.display = 'none';
@@ -1098,6 +733,46 @@
         if (navBtn) navBtn.style.display = count > 0 ? '' : 'none';
       }
 
+      function flashStaged(sectionId) {
+        const sec = document.getElementById(sectionId);
+        if (!sec) return;
+        sec.style.outline = '2px solid var(--st-warn)';
+        setTimeout(() => { sec.style.outline = ''; }, 800);
+      }
+
+      async function publishAll() {
+        const btn = document.querySelector('[onclick="publishAll()"]');
+        btn.disabled = true;
+        btn.textContent = 'Saving…';
+        try {
+          const resp = await fetch('/api/0/config', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(_staged),
+          });
+          if (resp.ok) {
+            window.location.reload();
+          } else {
+            const err = await resp.json().catch(() => ({}));
+            alert('Error: ' + (err.error || resp.statusText));
+            btn.disabled = false;
+            btn.textContent = 'Publish';
+          }
+        } catch (e) {
+          alert('Network error: ' + e.message);
+          btn.disabled = false;
+          btn.textContent = 'Publish';
+        }
+      }
+
+      function discardAll() {
+        Object.keys(_staged).forEach(k => delete _staged[k]);
+        localStorage.removeItem('hbd_pending_config');
+        updatePendingBanner();
+        window.location.reload();
+      }
+
+      // ---- Server scalar groups ----
       function stageFormSection(sectionId, apiSection) {
         const section = document.getElementById(sectionId);
         if (!_staged[apiSection] || typeof _staged[apiSection] !== 'object') {
@@ -1120,78 +795,7 @@
         flashStaged(sectionId);
       }
 
-      function stageYamlSection(apiSection, textareaId) {
-        _staged[apiSection] = document.getElementById(textareaId).value;
-        updatePendingBanner();
-      }
-
-      function stageUsersSection() {
-        const users = {};
-        document.querySelectorAll('[data-user-row]').forEach(row => {
-          if (row.dataset.deleted === 'true') return;
-          const username = row.dataset.username;
-          const entry = {
-            full_name: row.querySelector('.user-full-name').value,
-            avatar: row.querySelector('.user-avatar').value,
-            admin: row.querySelector('.user-admin').checked,
-            notification_channels: [...(row.querySelector('.user-ch-select')?.selectedOptions || [])].map(o => o.value),
-          };
-          const pw = row.querySelector('.user-password').value;
-          if (pw) entry.password = pw;
-          users[username] = entry;
-        });
-        document.querySelectorAll('[data-new-user]').forEach(row => {
-          if (row.dataset.deleted === 'true') return;
-          const uname = (row.querySelector('.new-username') || {value: ''}).value.trim();
-          if (!uname) return;
-          const entry = {
-            full_name: row.querySelector('.user-full-name').value,
-            avatar: row.querySelector('.user-avatar').value,
-            admin: row.querySelector('.user-admin').checked,
-            notification_channels: [...(row.querySelector('.user-ch-select')?.selectedOptions || [])].map(o => o.value),
-          };
-          const pw = row.querySelector('.user-password').value;
-          if (pw) entry.password = pw;
-          users[uname] = entry;
-        });
-        const defOwner = document.querySelector('[data-key="default_owner"]');
-        if (defOwner) {
-          if (!_staged['server']) _staged['server'] = {};
-          _staged['server']['default_owner'] = defOwner.value;
-        }
-        _staged['users'] = users;
-        updatePendingBanner();
-        flashStaged('users');
-      }
-
-      function stageOAuthSection() {
-        const oauth = {};
-        document.querySelectorAll('[data-oauth-row]').forEach(row => {
-          if (row.dataset.deleted === 'true') return;
-          let name = row.dataset.name;
-          if (!name) {
-            const ni = row.querySelector('.oauth-name-input');
-            if (ni) name = ni.value.trim();
-          }
-          if (!name) return;
-          const entry = {
-            type: row.querySelector('.oauth-type').value,
-            url: row.querySelector('.oauth-url').value,
-            client_id: row.querySelector('.oauth-client-id').value,
-          };
-          const label = row.querySelector('.oauth-label').value;
-          if (label) entry.label = label;
-          const logo = row.querySelector('.oauth-logo').value;
-          if (logo) entry.logo = logo;
-          const secret = row.querySelector('.oauth-secret').value;
-          if (secret && secret !== '•••') entry.client_secret = secret;
-          oauth[name] = entry;
-        });
-        _staged['oauth'] = oauth;
-        updatePendingBanner();
-        flashStaged('oauth');
-      }
-
+      // ---- Hosts ----
       function stageHostsSection() {
         function rowToEntry(row) {
           const entry = {
@@ -1230,325 +834,202 @@
       }
 
       function addHostRow() {
-        const tbody = document.getElementById('hosts-tbody');
-        const row = document.createElement('tr');
+        const list = document.getElementById('hosts-list');
+        const row = document.createElement('div');
+        row.className = 'row expanded';
         row.setAttribute('data-new-host', 'true');
         row.innerHTML = `
-          <td><input class="field-input new-hostname" placeholder="hostname" required style="min-width:120px"></td>
-          <td style="text-align:center"><input type="checkbox" class="host-watch" checked></td>
-          <td style="text-align:center"><input type="checkbox" class="host-dyndns"></td>
-          <td><input class="field-input host-owner" placeholder="(none)" style="min-width:90px"></td>
-          <td>${makeMpickHTML(_allUsers, [], 'host-managers')}</td>
-          <td>${makeMpickHTML(_allUsers, [], 'host-monitors')}</td>
-          <td>${makeMpickHTML(_allThresholdConfigs, [], 'host-tc')}</td>
-          <td>${makeMpickHTML(_allChannels, [], 'host-channels')}</td>
-          <td><button class="btn-danger" onclick="this.closest('tr').remove()">✕</button></td>`;
-        tbody.appendChild(row);
+          <span class="id"><span class="dot ok"></span>
+            <input type="text" class="new-hostname" placeholder="hostname" required
+                   style="font:600 13px var(--st-mono);color:var(--st-ink);background:var(--st-surface);border:1px solid var(--st-line);border-radius:5px;padding:5px 8px;min-width:150px"></span>
+          <span class="facts"><span class="chip level">new host</span></span>
+          <span class="act"><button class="btn small quiet danger" onclick="this.closest('.row').remove()">✕</button></span>
+          <div class="editor">
+            <div class="field">
+              <span class="lbl">Flags</span>
+              <label class="toggle"><input type="checkbox" class="host-watch" checked> watch</label>
+              <label class="toggle"><input type="checkbox" class="host-dyndns"> dyndns</label>
+            </div>
+            ${_isAdmin ? `<div class="field">
+              <label>Owner</label>
+              <input type="text" class="host-owner" placeholder="(you)">
+            </div>
+            <div class="field"><span class="lbl">Managers</span>${makeMpickHTML(_allUsers, [], 'host-managers')}</div>
+            <div class="field"><span class="lbl">Monitors</span>${makeMpickHTML(_allUsers, [], 'host-monitors')}</div>` : ''}
+            <div class="field"><span class="lbl">Threshold configs</span>${makeMpickHTML(_allThresholdConfigs, [], 'host-tc')}</div>
+            <div class="field"><span class="lbl">Alert channels</span>${makeMpickHTML(_allChannels, [], 'host-channels')}</div>
+            <div class="foot">
+              <button class="btn small primary" onclick="stageHostsSection()">Stage changes</button>
+            </div>
+          </div>`;
+        list.prepend(row);
+        row.querySelector('.new-hostname').focus();
       }
 
-      async function publishAll() {
-        const btn = document.querySelector('[onclick="publishAll()"]');
-        btn.disabled = true;
-        btn.textContent = 'Saving…';
+      // ---- Channels (live CRUD via API, editor moves into the row) ----
+      let _channelSchemas = {};
+      let _chEditName = null;
+      let _chEditorHost = null;
+
+      async function _loadChannelSchemas() {
         try {
-          const resp = await fetch('/api/0/config', {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(_staged),
+          const r = await fetch('/api/0/notification_channel_types');
+          _channelSchemas = await r.json();
+        } catch(e) { console.warn('Could not load channel schemas', e); }
+      }
+
+      function _channelEditorHTML() {
+        const typeOpts = Object.entries(_channelSchemas)
+          .map(([k, v]) => `<option value="${escHtml(k)}">${escHtml(v.label)}</option>`).join('');
+        return `
+          <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px">
+            <div class="field">
+              <label>Channel name</label>
+              <input type="text" id="ch-name" placeholder="e.g. pushover_ops" autocomplete="off">
+            </div>
+            <div class="field">
+              <label>Type</label>
+              <select id="ch-type" onchange="onChTypeChange()"><option value="">— select —</option>${typeOpts}</select>
+            </div>
+            <div class="field">
+              <label>Minimum alert level</label>
+              <select id="ch-min-level">
+                <option value="WARNING">WARNING (and above)</option>
+                <option value="CRITICAL">CRITICAL only</option>
+              </select>
+            </div>
+            ${_isAdmin ? `<div class="field">
+              <label>Owner <span style="text-transform:none;font-weight:400">(empty = global)</span></label>
+              <input type="text" id="ch-owner" placeholder="(global)" autocomplete="off">
+            </div>` : ''}
+            <div id="ch-type-fields" style="grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 16px"></div>
+            <div class="foot">
+              <button class="btn small primary" onclick="saveChannel()">Save channel</button>
+              <button class="btn small quiet" onclick="closeChannelEditor()">Cancel</button>
+              <span id="ch-modal-status" style="font-size:12px;color:var(--st-crit)"></span>
+            </div>
+          </div>`;
+      }
+
+      function onChTypeChange() {
+        const type = document.getElementById('ch-type').value;
+        const container = document.getElementById('ch-type-fields');
+        container.innerHTML = '';
+        if (!type || !_channelSchemas[type]) return;
+        (_channelSchemas[type].fields || []).forEach(sf => {
+          const div = document.createElement('div');
+          div.className = 'field';
+          const lbl = document.createElement('label');
+          lbl.textContent = sf.label + (sf.required ? ' *' : '');
+          const inp = document.createElement('input');
+          inp.type = sf.type === 'secret' ? 'password' : 'text';
+          inp.id = 'chf-' + sf.key;
+          inp.placeholder = sf.required ? '(required)' : '(optional)';
+          inp.autocomplete = 'off';
+          div.appendChild(lbl);
+          div.appendChild(inp);
+          container.appendChild(div);
+        });
+      }
+
+      async function openChannelEditor(name, btn) {
+        closeChannelEditor();
+        _chEditName = name || null;
+        let row;
+        if (name) {
+          row = document.querySelector(`[data-channel-name="${CSS.escape(name)}"]`);
+        } else {
+          row = document.getElementById('ch-new-slot');
+          row.style.display = '';
+        }
+        _chEditorHost = row;
+        const slot = row.querySelector('.editor');
+        slot.innerHTML = _channelEditorHTML();
+        row.classList.add('expanded');
+
+        document.getElementById('ch-name').value = name || '';
+        document.getElementById('ch-name').disabled = !!name;
+        if (name) {
+          try {
+            const r = await fetch('/api/0/notification_channels');
+            const channels = await r.json();
+            const ch = channels.find(c => c.name === name);
+            if (ch) {
+              document.getElementById('ch-type').value = ch.type;
+              onChTypeChange();
+              document.getElementById('ch-min-level').value = ch.min_level || 'WARNING';
+              const ownerInp = document.getElementById('ch-owner');
+              if (ownerInp) ownerInp.value = ch.owner || '';
+              (ch.fields || []).forEach(f => {
+                const inp = document.getElementById('chf-' + f.key);
+                if (inp) inp.value = f.value || '';
+              });
+            }
+          } catch(e) { console.warn('Failed to load channel data', e); }
+        }
+      }
+
+      function closeChannelEditor() {
+        if (!_chEditorHost) return;
+        _chEditorHost.classList.remove('expanded');
+        const slot = _chEditorHost.querySelector('.editor');
+        if (slot) slot.innerHTML = '';
+        if (_chEditorHost.id === 'ch-new-slot') _chEditorHost.style.display = 'none';
+        _chEditorHost = null;
+        _chEditName = null;
+      }
+
+      async function saveChannel() {
+        const name = document.getElementById('ch-name').value.trim();
+        const type = document.getElementById('ch-type').value;
+        const minLevel = document.getElementById('ch-min-level').value;
+        const statusEl = document.getElementById('ch-modal-status');
+        statusEl.textContent = '';
+
+        if (!name) { statusEl.textContent = 'Channel name is required.'; return; }
+        if (!type) { statusEl.textContent = 'Please select a type.'; return; }
+
+        const body = { name, type, min_level: minLevel };
+        const ownerInp = document.getElementById('ch-owner');
+        if (ownerInp) body.owner = ownerInp.value.trim();
+        if (_channelSchemas[type]) {
+          (_channelSchemas[type].fields || []).forEach(sf => {
+            const inp = document.getElementById('chf-' + sf.key);
+            if (inp) body[sf.key] = inp.value;
           });
-          if (resp.ok) {
+        }
+
+        const isEdit = !!_chEditName;
+        const url = isEdit ? '/api/0/notification_channels/' + encodeURIComponent(_chEditName) : '/api/0/notification_channels';
+        const method = isEdit ? 'PUT' : 'POST';
+        try {
+          const r = await fetch(url, { method, headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body) });
+          if (r.ok) {
             window.location.reload();
           } else {
-            const err = await resp.json().catch(() => ({}));
-            alert('Error: ' + (err.error || resp.statusText));
-            btn.disabled = false;
-            btn.textContent = 'Publish to .hb.yaml';
+            const err = await r.json().catch(() => ({}));
+            statusEl.textContent = err.error || 'Error saving channel.';
           }
-        } catch (e) {
-          alert('Network error: ' + e.message);
-          btn.disabled = false;
-          btn.textContent = 'Publish to .hb.yaml';
+        } catch(e) {
+          statusEl.textContent = 'Network error: ' + e.message;
         }
       }
 
-      function discardAll() {
-        Object.keys(_staged).forEach(k => delete _staged[k]);
-        localStorage.removeItem('hbd_pending_config');
-        updatePendingBanner();
-        window.location.reload();
-      }
-
-      async function loadYamlSection(apiSection, textareaId) {
-        const ta = document.getElementById(textareaId);
-        ta.value = 'Loading…';
+      async function deleteChannel(name) {
+        if (!confirm('Delete channel "' + name + '"? This cannot be undone.')) return;
         try {
-          const resp = await fetch('/api/0/config/section/' + apiSection);
-          const data = await resp.json();
-          ta.value = data.yaml || '';
-        } catch (e) {
-          ta.value = '# Error loading: ' + e.message;
-        }
-      }
-
-      document.addEventListener('DOMContentLoaded', () => {
-        _loadChannelSchemas();
-        document.querySelectorAll('textarea[id^="yaml-"]').forEach(ta => {
-          const sectionId = ta.id.replace('yaml-', '');
-          const section = document.getElementById(sectionId);
-          if (section) {
-            const btn = section.querySelector('[onclick^="stageYamlSection"]');
-            if (btn) {
-              const m = btn.getAttribute('onclick').match(/stageYamlSection\('([^']+)'/);
-              if (m) loadYamlSection(m[1], ta.id);
-            }
+          const r = await fetch('/api/0/notification_channels/' + encodeURIComponent(name), { method: 'DELETE' });
+          if (r.ok) {
+            window.location.reload();
+          } else {
+            const err = await r.json().catch(() => ({}));
+            alert('Error: ' + (err.error || 'Could not delete channel.'));
           }
-        });
-      });
-
-      function toggleDeleteRow(btn) {
-        const row = btn.closest('tr');
-        const deleted = row.dataset.deleted === 'true';
-        row.dataset.deleted = deleted ? 'false' : 'true';
-        row.style.opacity = deleted ? '1' : '0.4';
-        row.querySelectorAll('input, select').forEach(el => { el.disabled = !deleted; });
-        btn.textContent = deleted ? '✕' : '↩';
+        } catch(e) { alert('Network error: ' + e.message); }
       }
 
-      function addUserRow() {
-        const tbody = document.getElementById('users-tbody');
-        const row = document.createElement('tr');
-        row.setAttribute('data-new-user', 'true');
-        row.innerHTML = `
-          <td><input class="field-input new-username" placeholder="username" required></td>
-          <td><input class="field-input user-full-name" placeholder="Display Name"></td>
-          <td><input class="field-input user-avatar" placeholder="Avatar URL or path"></td>
-          <td style="text-align:center"><input type="checkbox" class="user-admin"></td>
-          <td>${makeMpickHTML(_allChannels, [], 'user-ch-select')}</td>
-          <td><input type="password" class="field-input user-password" placeholder="(required)"></td>
-          <td><button class="btn-danger" onclick="this.closest('tr').remove()">✕</button></td>`;
-        tbody.appendChild(row);
-      }
-
-      function addOAuthRow() {
-        const tbody = document.getElementById('oauth-tbody');
-        const row = document.createElement('tr');
-        row.setAttribute('data-oauth-row', 'true');
-        row.setAttribute('data-name', '');
-        row.innerHTML = `
-          <td><input class="field-input oauth-name-input" placeholder="slug (e.g. gitea)"></td>
-          <td><select class="field-input oauth-type">
-            <option value="gitea">gitea</option>
-            <option value="github">github</option>
-            <option value="nextcloud">nextcloud</option>
-          </select></td>
-          <td><input class="field-input oauth-url" placeholder="https://…"></td>
-          <td><input class="field-input oauth-client-id" placeholder="client_id"></td>
-          <td><input type="password" class="field-input oauth-secret" placeholder="client_secret"></td>
-          <td><input class="field-input oauth-label" placeholder="Sign in with…"></td>
-          <td><input class="field-input oauth-logo" placeholder="/path/to/logo.png"></td>
-          <td><button class="btn-danger" onclick="this.closest('tr').remove()">✕</button></td>`;
-        tbody.appendChild(row);
-      }
-
-      async function showRollbackModal() {
-        document.getElementById('rollback-modal').style.display = 'flex';
-        const el = document.getElementById('rollback-list');
-        el.innerHTML = 'Loading…';
-        try {
-          const resp = await fetch('/api/0/config/backups');
-          const data = await resp.json();
-          if (!data.backups || !data.backups.length) {
-            el.innerHTML = '<p style="color:#888;font-size:.88em">No backups available.</p>';
-            return;
-          }
-          el.innerHTML = data.backups.map(b => {
-            const m = b.match(/\.bak\.(\d{4})(\d{2})(\d{2})-(\d{2})(\d{2})(\d{2})$/);
-            const label = m ? `${m[1]}-${m[2]}-${m[3]} ${m[4]}:${m[5]}:${m[6]}` : b;
-            const safe = b.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
-            return `<div class="backup-row"><span>${label}</span><button class="btn btn-secondary" style="font-size:.8em" onclick="doRollback('${safe}')">Restore</button></div>`;
-          }).join('');
-        } catch (e) {
-          el.innerHTML = '<p style="color:#c62828">Error loading backups: ' + e.message + '</p>';
-        }
-      }
-
-      function closeRollbackModal() {
-        document.getElementById('rollback-modal').style.display = 'none';
-      }
-
-      async function doRollback(backupPath) {
-        if (!confirm('Restore this backup? The current config will be backed up first.')) return;
-        const resp = await fetch('/api/0/config/rollback', {
-          method: 'POST',
-          headers: {'Content-Type': 'application/json'},
-          body: JSON.stringify({backup: backupPath}),
-        });
-        if (resp.ok) {
-          closeRollbackModal();
-          window.location.reload();
-        } else {
-          const err = await resp.json().catch(() => ({}));
-          alert('Rollback failed: ' + (err.error || resp.statusText));
-        }
-      }
-
-      function flashStaged(sectionId) {
-        const sec = document.getElementById(sectionId);
-        if (!sec) return;
-        sec.style.outline = '2px solid #e8c840';
-        setTimeout(() => { sec.style.outline = ''; }, 800);
-      }
-
-      function escHtml(s) {
-        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
-      }
-
-      // ---- Multi-picker ----
-      let _mpickPanel = null;
-      let _mpickTarget = null;
-
-      function _initMpickPanel() {
-        if (_mpickPanel) return;
-        const p = document.createElement('div');
-        p.className = 'mpick-panel';
-        p.style.display = 'none';
-        p.innerHTML = `
-          <div class="mpick-panel-header">
-            <span>Select items</span>
-            <button style="background:none;border:none;cursor:pointer;color:#888;font-size:1.1em;padding:0 2px;line-height:1" onclick="closeMpick()">✕</button>
-          </div>
-          <div class="mpick-panel-body">
-            <div class="mpick-col" id="mpick-avail-col">
-              <div class="mpick-col-header">Available</div>
-              <div id="mpick-avail"></div>
-            </div>
-            <div class="mpick-col" id="mpick-sel-col">
-              <div class="mpick-col-header">Selected</div>
-              <div id="mpick-sel"></div>
-            </div>
-          </div>
-          <div class="mpick-panel-footer">
-            <button class="btn btn-primary" style="font-size:.82em;padding:4px 12px" onclick="closeMpick()">Done</button>
-          </div>`;
-        document.body.appendChild(p);
-        _mpickPanel = p;
-        document.addEventListener('mousedown', e => {
-          if (!_mpickPanel || _mpickPanel.style.display === 'none') return;
-          if (!_mpickPanel.contains(e.target) && !e.target.closest('.mpick-display')) closeMpick();
-        }, true);
-        document.addEventListener('keydown', e => {
-          if (e.key === 'Escape' && _mpickPanel && _mpickPanel.style.display !== 'none') closeMpick();
-        });
-      }
-
-      function openMpick(displayEl) {
-        if (displayEl.closest('tr')?.dataset.deleted === 'true') return;
-        _initMpickPanel();
-        _mpickTarget = displayEl.closest('.mpick-wrapper');
-        _rerenderMpick();
-        _mpickPanel.style.display = 'block';
-        const rect = displayEl.getBoundingClientRect();
-        const pw = _mpickPanel.offsetWidth || 360;
-        const ph = _mpickPanel.offsetHeight || 280;
-        let top = rect.bottom + 4;
-        let left = rect.left;
-        if (left + pw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - pw - 8);
-        if (top + ph > window.innerHeight - 8) top = Math.max(8, rect.top - ph - 4);
-        _mpickPanel.style.top = top + 'px';
-        _mpickPanel.style.left = left + 'px';
-      }
-
-      function _rerenderMpick() {
-        const sel = _mpickTarget.querySelector('select');
-        const allOpts = [...sel.options];
-        const selVals = new Set([...sel.selectedOptions].map(o => o.value));
-        const avail = allOpts.filter(o => !selVals.has(o.value));
-        const chosen = allOpts.filter(o => selVals.has(o.value));
-        document.getElementById('mpick-avail').innerHTML = avail.length
-          ? avail.map(o => `<div class="mpick-item mpick-item-avail" data-val="${escHtml(o.value)}" onclick="_mpickToggle(this,true)"><span>${escHtml(o.value)}</span><span class="mpick-arrow">+</span></div>`).join('')
-          : '<div class="mpick-none">All selected</div>';
-        document.getElementById('mpick-sel').innerHTML = chosen.length
-          ? chosen.map(o => `<div class="mpick-item mpick-item-sel" data-val="${escHtml(o.value)}" onclick="_mpickToggle(this,false)"><span>${escHtml(o.value)}</span><span class="mpick-arrow">−</span></div>`).join('')
-          : '<div class="mpick-none">None selected</div>';
-      }
-
-      function _mpickToggle(itemEl, toSelected) {
-        const val = itemEl.dataset.val;
-        const sel = _mpickTarget.querySelector('select');
-        const opt = [...sel.options].find(o => o.value === val);
-        if (opt) opt.selected = toSelected;
-        _updateMpickDisplay(_mpickTarget);
-        _rerenderMpick();
-      }
-
-      function _updateMpickDisplay(wrapper) {
-        const sel = wrapper.querySelector('select');
-        const display = wrapper.querySelector('.mpick-display');
-        const selected = [...sel.selectedOptions].map(o => o.value);
-        if (!selected.length) {
-          display.innerHTML = '<span class="mpick-empty">(none)</span>';
-          display.title = '';
-          return;
-        }
-        const MAX = 2;
-        let html = selected.slice(0, MAX).map(v => `<span class="mpick-tag">${escHtml(v)}</span>`).join('');
-        if (selected.length > MAX) html += `<span class="mpick-more">+${selected.length - MAX}</span>`;
-        display.innerHTML = html;
-        display.title = selected.join(', ');
-      }
-
-      function closeMpick() {
-        if (_mpickPanel) _mpickPanel.style.display = 'none';
-        _mpickTarget = null;
-      }
-
-      function makeMpickHTML(allItems, selectedItems, cls) {
-        const selSet = new Set(selectedItems);
-        const opts = allItems.map(v => `<option value="${escHtml(v)}"${selSet.has(v) ? ' selected' : ''}>${escHtml(v)}</option>`).join('');
-        const selected = allItems.filter(v => selSet.has(v));
-        const MAX = 2;
-        let dispHtml;
-        if (!selected.length) {
-          dispHtml = '<span class="mpick-empty">(none)</span>';
-        } else {
-          dispHtml = selected.slice(0, MAX).map(v => `<span class="mpick-tag">${escHtml(v)}</span>`).join('');
-          if (selected.length > MAX) dispHtml += `<span class="mpick-more">+${selected.length - MAX}</span>`;
-        }
-        const title = escHtml(selected.join(', '));
-        return `<div class="mpick-wrapper"><div class="mpick-display" onclick="openMpick(this)" title="${title}">${dispHtml}</div><select class="${cls}" multiple hidden>${opts}</select></div>`;
-      }
-
-      // Highlight sidebar link for the section currently in view
-      const sections = document.querySelectorAll('.section');
-      const navLinks = document.querySelectorAll('.sidebar-nav a');
-
-      const observer = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const id = entry.target.id;
-            navLinks.forEach(a => {
-              a.classList.toggle('active', a.getAttribute('href') === '#' + id);
-            });
-          }
-        });
-      }, { threshold: 0.25 });
-
-      sections.forEach(s => observer.observe(s));
-
-      // Collapsible sidebar on mobile
-      var sidebarToggle = document.getElementById('sidebar-toggle');
-      var sidebarNav = document.getElementById('sidebar-nav');
-      if (sidebarToggle && sidebarNav) {
-        sidebarToggle.addEventListener('click', function() {
-          var open = sidebarNav.classList.toggle('open');
-          sidebarToggle.classList.toggle('open', open);
-          sidebarToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
-        });
-      }
-
-      // ---- Threshold configurations form ----
+      // ---- Thresholds ----
       function stageThresholdsSection(sectionId) {
-        const section = document.getElementById(sectionId);
         const configs = {};
 
         function readMetrics(card) {
@@ -1593,14 +1074,14 @@
 
         _staged['thresholds'] = configs;
 
-        const defInput = section.querySelector('.thresh-default-config');
+        const defInput = document.querySelector('.thresh-default-config');
         if (defInput) {
           if (!_staged['server']) _staged['server'] = {};
           _staged['server']['default_threshold_config'] = defInput.value || 'default';
         }
 
         updatePendingBanner();
-        flashStaged(sectionId);
+        flashStaged('thresholds');
       }
 
       function onThreshOpChange(select) {
@@ -1614,7 +1095,7 @@
 
       function _threshOpSelect(selected) {
         const ops = ['>', '>=', '<', '<=', '==', '!=', 'nagios'];
-        return '<select class="field-input thresh-op" style="width:80px" onchange="onThreshOpChange(this)">' +
+        return '<select class="thresh-op" style="width:76px" onchange="onThreshOpChange(this)">' +
           ops.map(op => `<option value="${escHtml(op)}"${op === selected ? ' selected' : ''}>${escHtml(op)}</option>`).join('') +
           '</select>';
       }
@@ -1622,64 +1103,347 @@
       function addThresholdMetricRow(tbody) {
         const row = document.createElement('tr');
         row.innerHTML = `
-          <td><input type="text" class="field-input new-metric-path" placeholder="plugin.metric" style="min-width:160px;font-family:monospace;font-size:.85em" required></td>
+          <td><input type="text" class="new-metric-path" placeholder="plugin.metric" style="min-width:150px" required></td>
           <td>${_threshOpSelect('>')}</td>
-          <td><input type="number" class="field-input thresh-warn" step="any" style="width:80px"></td>
-          <td><input type="number" class="field-input thresh-crit" step="any" style="width:80px"></td>
-          <td><input type="number" class="field-input thresh-hyst" step="any" style="width:72px" value="0.02"></td>
-          <td><input type="number" class="field-input thresh-count" step="1" min="1" style="width:52px" value="1"></td>
-          <td><input type="number" class="field-input thresh-grace" step="any" min="0" style="width:60px" placeholder="(global)"></td>
-          <td><input type="text" class="field-input thresh-display" style="width:150px" placeholder="(default)"></td>
+          <td><input type="number" class="thresh-warn" step="any" style="width:72px"></td>
+          <td><input type="number" class="thresh-crit" step="any" style="width:72px"></td>
+          <td><input type="number" class="thresh-hyst" step="any" style="width:64px" value="0.02"></td>
+          <td><input type="number" class="thresh-count" step="1" min="1" style="width:52px" value="1"></td>
+          <td><input type="number" class="thresh-grace" step="any" min="0" style="width:60px" placeholder="(global)"></td>
+          <td><input type="text" class="thresh-display" style="width:130px" placeholder="(default)"></td>
           <td style="text-align:center"><input type="checkbox" class="thresh-enabled" checked></td>
-          <td><button class="btn-danger" onclick="this.closest('tr').remove()">✕</button></td>`;
+          <td><button class="btn small quiet danger" onclick="this.closest('tr').remove()">✕</button></td>`;
         tbody.appendChild(row);
       }
 
       function addThresholdConfigCard(containerId) {
         const container = document.getElementById(containerId);
         const card = document.createElement('div');
-        card.className = 'thresh-cfg-card';
+        card.className = 'row expanded thresh-cfg-card';
         card.innerHTML = `
-          <div class="thresh-cfg-header">
-            <input type="text" class="field-input new-config-name" placeholder="Config name (e.g. servers)" style="max-width:220px">
-            ${_isAdmin ? '<input type="text" class="field-input thresh-owner" placeholder="(global)" title="Owner — empty = global" style="max-width:140px;margin-left:10px">' : ''}
-            <button class="btn-danger" style="margin-left:auto" onclick="this.closest('.thresh-cfg-card').remove()">✕ Delete</button>
-          </div>
-          <div style="overflow-x:auto">
-            <table class="crud-table thresh-metric-table">
-              <thead><tr>
-                <th>Metric path</th><th>Op</th>
-                <th>Warning</th><th>Critical</th>
-                <th>Hysteresis</th><th>Count</th>
-                <th style="max-width:160px">Display</th>
-                <th>En</th><th></th>
-              </tr></thead>
-              <tbody></tbody>
-            </table>
-          </div>
-          <div style="padding:6px 14px 8px;border-top:1px solid #f0f0f0">
-            <button class="btn btn-secondary" style="font-size:.8em;padding:3px 10px"
-                    onclick="addThresholdMetricRow(this.closest('.thresh-cfg-card').querySelector('tbody'))">+ Add metric</button>
+          <span class="id">
+            <input type="text" class="new-config-name" placeholder="config name (e.g. servers)"
+                   style="font:600 13px var(--st-mono);color:var(--st-ink);background:var(--st-surface);border:1px solid var(--st-line);border-radius:5px;padding:5px 8px;min-width:170px">
+          </span>
+          <span class="facts"><span class="chip level">new config</span></span>
+          <span class="act"><button class="btn small quiet danger" onclick="this.closest('.row').remove()">✕</button></span>
+          <div class="editor wide">
+            ${_isAdmin ? `<div class="field" style="max-width:280px">
+              <label>Owner <span style="text-transform:none;font-weight:400">(empty = global)</span></label>
+              <input type="text" class="thresh-owner" placeholder="(global)">
+            </div>` : ''}
+            <div class="thr-scroll">
+              <table class="thr-table">
+                <thead><tr>
+                  <th>Metric path</th><th>Op</th><th>Warn</th><th>Crit</th>
+                  <th>Hyst</th><th>Count</th><th>Grace</th><th>Display</th><th>En</th><th></th>
+                </tr></thead>
+                <tbody></tbody>
+              </table>
+            </div>
+            <div class="foot">
+              <button class="btn small" onclick="addThresholdMetricRow(this.closest('.thresh-cfg-card').querySelector('tbody'))">+ Add metric</button>
+              <button class="btn small primary" onclick="stageThresholdsSection('thresholds')">Stage changes</button>
+            </div>
           </div>`;
-        container.appendChild(card);
+        container.prepend(card);
+        addThresholdMetricRow(card.querySelector('tbody'));
+        card.querySelector('.new-config-name').focus();
       }
 
       function deleteThresholdConfigCard(btn) {
         const card = btn.closest('.thresh-cfg-card');
         const name = card.dataset.configName || 'this config';
-        if (!confirm(`Delete config "${name}"?`)) return;
+        if (!confirm(`Delete config "${name}"? Stage + publish to make it permanent.`)) return;
         card.remove();
       }
 
-      function closeSidebar() {
-        var sidebarNav = document.getElementById('sidebar-nav');
-        var sidebarToggle = document.getElementById('sidebar-toggle');
-        if (sidebarNav) { sidebarNav.classList.remove('open'); }
-        if (sidebarToggle) {
-          sidebarToggle.classList.remove('open');
-          sidebarToggle.setAttribute('aria-expanded', 'false');
+      // ---- Users ----
+      function stageUsersSection() {
+        const users = {};
+        document.querySelectorAll('[data-user-row]').forEach(row => {
+          if (row.dataset.deleted === 'true') return;
+          const username = row.dataset.username;
+          const entry = {
+            full_name: row.querySelector('.user-full-name').value,
+            avatar: row.querySelector('.user-avatar').value,
+            admin: row.querySelector('.user-admin').checked,
+            notification_channels: [...(row.querySelector('.user-ch-select')?.selectedOptions || [])].map(o => o.value),
+          };
+          const pw = row.querySelector('.user-password').value;
+          if (pw) entry.password = pw;
+          users[username] = entry;
+        });
+        document.querySelectorAll('[data-new-user]').forEach(row => {
+          if (row.dataset.deleted === 'true') return;
+          const uname = (row.querySelector('.new-username') || {value: ''}).value.trim();
+          if (!uname) return;
+          const entry = {
+            full_name: row.querySelector('.user-full-name').value,
+            avatar: row.querySelector('.user-avatar').value,
+            admin: row.querySelector('.user-admin').checked,
+            notification_channels: [...(row.querySelector('.user-ch-select')?.selectedOptions || [])].map(o => o.value),
+          };
+          const pw = row.querySelector('.user-password').value;
+          if (pw) entry.password = pw;
+          users[uname] = entry;
+        });
+        const defOwner = document.querySelector('[data-key="default_owner"]');
+        if (defOwner) {
+          if (!_staged['server']) _staged['server'] = {};
+          _staged['server']['default_owner'] = defOwner.value;
+        }
+        _staged['users'] = users;
+        updatePendingBanner();
+        flashStaged('users');
+      }
+
+      function addUserRow() {
+        const list = document.getElementById('users-list');
+        const row = document.createElement('div');
+        row.className = 'row expanded';
+        row.setAttribute('data-new-user', 'true');
+        row.innerHTML = `
+          <span class="id">
+            <input type="text" class="new-username" placeholder="username" required
+                   style="font:600 13px var(--st-mono);color:var(--st-ink);background:var(--st-surface);border:1px solid var(--st-line);border-radius:5px;padding:5px 8px;min-width:140px">
+          </span>
+          <span class="facts"><span class="chip level">new user</span></span>
+          <span class="act"><button class="btn small quiet danger" onclick="this.closest('.row').remove()">✕</button></span>
+          <div class="editor">
+            <div class="field"><label>Display name</label><input type="text" class="user-full-name" placeholder="Display Name"></div>
+            <div class="field"><label>Avatar</label><input type="text" class="user-avatar" placeholder="URL or path"></div>
+            <div class="field"><label>Password</label><input type="password" class="user-password" placeholder="(required)" autocomplete="new-password"></div>
+            <div class="field"><span class="lbl">Flags</span><label class="toggle"><input type="checkbox" class="user-admin"> admin</label></div>
+            <div class="field"><span class="lbl">Alert channels</span>${makeMpickHTML(_allChannels, [], 'user-ch-select')}</div>
+            <div class="foot"><button class="btn small primary" onclick="stageUsersSection()">Stage changes</button></div>
+          </div>`;
+        list.prepend(row);
+        row.querySelector('.new-username').focus();
+      }
+
+      // ---- OAuth ----
+      function stageOAuthSection() {
+        const oauth = {};
+        document.querySelectorAll('[data-oauth-row]').forEach(row => {
+          if (row.dataset.deleted === 'true') return;
+          let name = row.dataset.name;
+          if (!name) {
+            const ni = row.querySelector('.oauth-name-input');
+            if (ni) name = ni.value.trim();
+          }
+          if (!name) return;
+          const entry = {
+            type: row.querySelector('.oauth-type').value,
+            url: row.querySelector('.oauth-url').value,
+            client_id: row.querySelector('.oauth-client-id').value,
+          };
+          const label = row.querySelector('.oauth-label').value;
+          if (label) entry.label = label;
+          const logo = row.querySelector('.oauth-logo').value;
+          if (logo) entry.logo = logo;
+          const secret = row.querySelector('.oauth-secret').value;
+          if (secret && secret !== '•••') entry.client_secret = secret;
+          oauth[name] = entry;
+        });
+        _staged['oauth'] = oauth;
+        updatePendingBanner();
+        flashStaged('oauth');
+      }
+
+      function addOAuthRow() {
+        const list = document.getElementById('oauth-list');
+        const row = document.createElement('div');
+        row.className = 'row expanded';
+        row.setAttribute('data-oauth-row', 'true');
+        row.setAttribute('data-name', '');
+        row.innerHTML = `
+          <span class="id">
+            <input type="text" class="oauth-name-input" placeholder="slug (e.g. gitea)"
+                   style="font:600 13px var(--st-mono);color:var(--st-ink);background:var(--st-surface);border:1px solid var(--st-line);border-radius:5px;padding:5px 8px;min-width:140px">
+          </span>
+          <span class="facts"><span class="chip level">new provider</span></span>
+          <span class="act"><button class="btn small quiet danger" onclick="this.closest('.row').remove()">✕</button></span>
+          <div class="editor">
+            <div class="field"><label>Type</label><select class="oauth-type">
+              <option value="gitea">gitea</option><option value="github">github</option><option value="nextcloud">nextcloud</option>
+            </select></div>
+            <div class="field"><label>URL</label><input type="text" class="oauth-url" placeholder="https://…"></div>
+            <div class="field"><label>Client ID</label><input type="text" class="oauth-client-id" placeholder="client_id"></div>
+            <div class="field"><label>Client secret</label><input type="password" class="oauth-secret" placeholder="client_secret"></div>
+            <div class="field"><label>Button label</label><input type="text" class="oauth-label" placeholder="Sign in with…"></div>
+            <div class="field"><label>Logo URL</label><input type="text" class="oauth-logo" placeholder="/path/to/logo.png"></div>
+            <div class="foot"><button class="btn small primary" onclick="stageOAuthSection()">Stage changes</button></div>
+          </div>`;
+        list.prepend(row);
+        row.querySelector('.oauth-name-input').focus();
+      }
+
+      // ---- Rollback / backups (admin) ----
+      async function showRollbackModal() {
+        document.getElementById('rollback-modal').style.display = 'flex';
+        const el = document.getElementById('rollback-list');
+        el.textContent = 'Loading…';
+        try {
+          const resp = await fetch('/api/0/config/backups');
+          const data = await resp.json();
+          const backups = data.backups || [];
+          if (!backups.length) { el.textContent = 'No backups yet.'; return; }
+          el.innerHTML = backups.map(b => `
+            <div class="backup-item">
+              <span>${escHtml(b.split('/').pop())}</span>
+              <button class="btn small" onclick="rollbackTo('${escHtml(b)}')">Restore</button>
+            </div>`).join('');
+        } catch (e) {
+          el.textContent = 'Error loading backups: ' + e.message;
         }
       }
+
+      function closeRollbackModal() {
+        document.getElementById('rollback-modal').style.display = 'none';
+      }
+
+      async function rollbackTo(backupPath) {
+        if (!confirm('Restore this backup? The current config will be backed up first.')) return;
+        const resp = await fetch('/api/0/config/rollback', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({backup: backupPath}),
+        });
+        if (resp.ok) {
+          closeRollbackModal();
+          window.location.reload();
+        } else {
+          const err = await resp.json().catch(() => ({}));
+          alert('Rollback failed: ' + (err.error || resp.statusText));
+        }
+      }
+
+      // ---- Multi-picker ----
+      let _mpickPanel = null;
+      let _mpickTarget = null;
+
+      function _initMpickPanel() {
+        if (_mpickPanel) return;
+        const p = document.createElement('div');
+        p.className = 'mpick-panel';
+        p.style.display = 'none';
+        p.innerHTML = `
+          <div class="mpick-panel-header">
+            <span>Select items</span>
+            <button style="background:none;border:none;cursor:pointer;color:var(--st-faint);font-size:1.1em;padding:0 2px;line-height:1" onclick="closeMpick()">✕</button>
+          </div>
+          <div class="mpick-panel-body">
+            <div class="mpick-col" id="mpick-avail-col">
+              <div class="mpick-col-header">Available</div>
+              <div id="mpick-avail"></div>
+            </div>
+            <div class="mpick-col" id="mpick-sel-col">
+              <div class="mpick-col-header">Selected</div>
+              <div id="mpick-sel"></div>
+            </div>
+          </div>
+          <div class="mpick-panel-footer">
+            <button class="btn primary small" onclick="closeMpick()">Done</button>
+          </div>`;
+        document.body.appendChild(p);
+        _mpickPanel = p;
+        document.addEventListener('mousedown', e => {
+          if (!_mpickPanel || _mpickPanel.style.display === 'none') return;
+          if (!_mpickPanel.contains(e.target) && !e.target.closest('.mpick-display')) closeMpick();
+        }, true);
+        document.addEventListener('keydown', e => {
+          if (e.key === 'Escape' && _mpickPanel && _mpickPanel.style.display !== 'none') closeMpick();
+        });
+      }
+
+      function openMpick(displayEl) {
+        if (displayEl.closest('.row')?.dataset.deleted === 'true') return;
+        _initMpickPanel();
+        _mpickTarget = displayEl.closest('.mpick-wrapper');
+        _rerenderMpick();
+        _mpickPanel.style.display = 'block';
+        const rect = displayEl.getBoundingClientRect();
+        const pw = _mpickPanel.offsetWidth || 360;
+        const ph = _mpickPanel.offsetHeight || 280;
+        let top = rect.bottom + 4;
+        let left = rect.left;
+        if (left + pw > window.innerWidth - 8) left = Math.max(8, window.innerWidth - pw - 8);
+        if (top + ph > window.innerHeight - 8) top = Math.max(8, rect.top - ph - 4);
+        _mpickPanel.style.top = top + 'px';
+        _mpickPanel.style.left = left + 'px';
+      }
+
+      function _rerenderMpick() {
+        const sel = _mpickTarget.querySelector('select');
+        const allOpts = [...sel.options];
+        const selVals = new Set([...sel.selectedOptions].map(o => o.value));
+        const avail = allOpts.filter(o => !selVals.has(o.value));
+        const chosen = allOpts.filter(o => selVals.has(o.value));
+        document.getElementById('mpick-avail').innerHTML = avail.length
+          ? avail.map(o => `<div class="mpick-item mpick-item-avail" data-val="${escHtml(o.value)}" onclick="_mpickToggle(this,true)"><span>${escHtml(o.value)}</span><span class="mpick-arrow">+</span></div>`).join('')
+          : '<div class="mpick-none">All selected</div>';
+        document.getElementById('mpick-sel').innerHTML = chosen.length
+          ? chosen.map(o => `<div class="mpick-item mpick-item-sel" data-val="${escHtml(o.value)}" onclick="_mpickToggle(this,false)"><span>${escHtml(o.value)}</span><span class="mpick-arrow">−</span></div>`).join('')
+          : '<div class="mpick-none">None selected</div>';
+      }
+
+      function _mpickToggle(itemEl, toSelected) {
+        const val = itemEl.dataset.val;
+        const sel = _mpickTarget.querySelector('select');
+        const opt = [...sel.options].find(o => o.value === val);
+        if (opt) opt.selected = toSelected;
+        _updateMpickDisplay(_mpickTarget);
+        _rerenderMpick();
+      }
+
+      function _updateMpickDisplay(wrapper) {
+        const sel = wrapper.querySelector('select');
+        const display = wrapper.querySelector('.mpick-display');
+        const selected = [...sel.selectedOptions].map(o => o.value);
+        if (!selected.length) {
+          display.innerHTML = '<span class="mpick-empty">(none — click to pick)</span>';
+          display.title = '';
+          return;
+        }
+        display.innerHTML = selected.map(v => `<span class="mpick-tag">${escHtml(v)}</span>`).join('');
+        display.title = selected.join(', ');
+      }
+
+      function closeMpick() {
+        if (_mpickPanel) _mpickPanel.style.display = 'none';
+        _mpickTarget = null;
+      }
+
+      function makeMpickHTML(allItems, selectedItems, cls) {
+        const selSet = new Set(selectedItems);
+        const opts = allItems.map(v => `<option value="${escHtml(v)}"${selSet.has(v) ? ' selected' : ''}>${escHtml(v)}</option>`).join('');
+        const selected = allItems.filter(v => selSet.has(v));
+        const dispHtml = selected.length
+          ? selected.map(v => `<span class="mpick-tag">${escHtml(v)}</span>`).join('')
+          : '<span class="mpick-empty">(none — click to pick)</span>';
+        const title = escHtml(selected.join(', '));
+        return `<div class="mpick-wrapper"><div class="mpick-display" onclick="openMpick(this)" title="${title}">${dispHtml}</div><select class="${cls}" multiple hidden>${opts}</select></div>`;
+      }
+
+      // ---- Section nav highlight (rail + mobile chips) ----
+      const _navSections = document.querySelectorAll('section.st');
+      const _navLinks = document.querySelectorAll('#rail a, #chips-nav a');
+      const _navObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            _navLinks.forEach(a => {
+              a.classList.toggle('active', a.getAttribute('href') === '#' + id);
+            });
+          }
+        });
+      }, { threshold: 0.2 });
+      _navSections.forEach(s => _navObserver.observe(s));
+
+      document.addEventListener('DOMContentLoaded', () => {
+        _loadChannelSchemas();
+      });
     </script>
   </body>
 </html>