Add users and network settings tabs with admin protections.

List and delete accounts with last-admin and Administrators-group guards, and expose editable network settings via the configuration UI.

webui/src/App.css

@@ -51,6 +51,15 @@
   overflow-y: auto;
 }
 
+.nav-section-divider {
+  width: 40%;
+  height: 1px;
+  margin-block: 0.4rem;
+  margin-inline: auto;
+  background: var(--ctp-surface1);
+  border: none;
+}
+
 .sidebar-footer {
   display: flex;
   flex-direction: column;
@@ -311,6 +320,19 @@
   font-weight: 650;
   color: var(--ctp-text);
   margin-bottom: 0.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.user-badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--ctp-subtext0);
+  border: 1px solid var(--ctp-surface1);
+  border-radius: 0.25rem;
+  padding: 0.1rem 0.4rem;
 }
 
 .groups-li-meta {
@@ -331,6 +353,16 @@
   cursor: pointer;
 }
 
+.groups-delete:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.groups-delete:disabled:hover {
+  background: transparent;
+  color: var(--ctp-text);
+}
+
 .groups-delete:hover {
   background: var(--ctp-mauve-hover);
   color: var(--ctp-mauve);
@@ -468,3 +500,102 @@
     padding: 1.5rem;
   }
 }
+
+.wizard-shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1.5rem;
+  background:
+    radial-gradient(ellipse at top, color-mix(in srgb, var(--ctp-mauve) 18%, transparent), transparent 55%),
+    var(--ctp-base);
+  color: var(--ctp-text);
+  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
+}
+
+.wizard-card {
+  width: min(560px, 100%);
+  padding: 1.75rem 1.75rem 1.5rem;
+  border: 1px solid var(--ctp-surface0);
+  border-radius: 0.5rem;
+  background: var(--ctp-mantle);
+  box-shadow: 0 12px 40px color-mix(in srgb, var(--ctp-crust) 35%, transparent);
+}
+
+.wizard-brand {
+  margin: 0 0 0.35rem;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ctp-mauve);
+  font-weight: 650;
+}
+
+.wizard-title {
+  margin: 0 0 0.35rem;
+  font-size: 1.6rem;
+  line-height: 1.2;
+}
+
+.wizard-step-indicator {
+  margin: 0 0 1.25rem;
+  color: var(--ctp-subtext0);
+  font-size: 0.85rem;
+}
+
+.wizard-body h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1.15rem;
+}
+
+.wizard-body p {
+  margin: 0 0 0.85rem;
+  line-height: 1.5;
+  color: var(--ctp-subtext1);
+}
+
+.wizard-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  margin-top: 1.25rem;
+}
+
+.wizard-error {
+  margin: 0 0 0.85rem;
+  color: var(--ctp-red);
+  font-size: 0.9rem;
+}
+
+.wizard-rules {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  resize: vertical;
+}
+
+.totp-setup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  margin-top: 0.75rem;
+  padding: 0.85rem;
+  border: 1px solid var(--ctp-surface0);
+  border-radius: 0.35rem;
+  background: var(--ctp-base);
+}
+
+.totp-qr {
+  align-self: center;
+  border-radius: 0.25rem;
+  background: #fff;
+  padding: 0.5rem;
+}
+
+.totp-secret {
+  display: block;
+  padding: 0.5rem 0.65rem;
+  border-radius: 0.25rem;
+  background: var(--ctp-surface0);
+  word-break: break-all;
+  font-size: 0.85rem;
+}