Redesign The Hub web UI: softer dark theme, sidebar nav, status widgets

Apply the approved "The Hub" redesign to the web admin while keeping every
existing mechanic intact (polling, service-detail modals, Matrix and system
password management, NWC wallet manager, update/rebuild/backup/security/
reboot flows, feature manager, onboarding, role handling).

Layout (templates/index.html):
- Old header bar + IP bar replaced by a sidebar + topbar app shell.
  Sidebar carries the brand (The Hub / Sovran_SystemsOS version), category
  navigation with live counts, the System actions (Update System, Tech
  Support, Manual Backup, Security, node-only Upgrade), Feature Manager /
  Preferences, and the role badge.
- Topbar carries the page title, a service search box, the LAN | WAN
  network chip (external IP always visible, one line), Reboot and Sign Out.
- New widgets row: Systems Operational summary (opens the new Systems
  Operational modal) and Bitcoin Core sync progress with block/ETA.
- New Systems Operational modal: service counts, router port-forwarding
  steps (80/443 to this machine's LAN IP), the live domain diagnostics
  checklist, and which services use those ports.

New static/js/dashboard.js (namespaced IIFE, no new globals) renders the
nav, search filtering, widgets, and the Systems Operational modal; it is
driven by the existing /api/services payloads via a
window.dashboardServicesUpdated() hook called from buildTiles/updateTiles.

Visual design (static/css/*):
- New token set (softer dark surfaces, lifted contrast, Sovran green
  reserved for status and actions) with legacy variable names aliased so
  every secondary sheet re-skins automatically.
- Tiles, dialogs, buttons, inputs, toggles, tables, forms, overlays and
  the login page restyled to the GNOME/libadwaita-flavored surfaces:
  20px cards, 26px dialogs, pill buttons, libadwaita switches, mono value
  pills with Copy buttons, consistent modal anatomy.
- Inline SVG symbol set for chrome/nav icons (monochrome, currentColor);
  service icons still load from /static/icons/*.svg as before.
- Sidebar system buttons now use vector glyphs instead of emoji.

Behavioral details:
- Service detail modal header gains a status pill next to the version
  chip; credentials render with pre-wrap for multiline values.
- First-login security banner now renders as a card inside the content
  area instead of a full-width strip above the app.
- Search + category filtering hide/show sections and tiles without
  touching the polling or update logic.

Onboarding and login pages rebranded to "The Hub" with aligned palette.

app/sovran_systemsos_web/static/js/tiles.js

@@ -52,6 +52,7 @@ function buildTiles(services, categoryLabels) {
   if ($tilesArea.children.length === 0) {
     $tilesArea.innerHTML = '<div class="empty-state"><p>No services configured.</p></div>';
   }
+  if (typeof window.dashboardServicesUpdated === "function") window.dashboardServicesUpdated();
 }
 
 function renderSidebarSupport(supportServices) {
@@ -62,7 +63,7 @@ function renderSidebarSupport(supportServices) {
   sidebarUpdateBtn.className = "sidebar-support-btn";
   sidebarUpdateBtn.id = "sidebar-btn-update";
   sidebarUpdateBtn.innerHTML =
-    '<img class="sidebar-support-icon" src="/static/icons/update.svg" alt="Update" style="width:1.5rem;height:1.5rem;">' +
+    '<span class="sidebar-support-icon"><svg><use href="#g-refresh"/></svg></span>' +
     '<span class="sidebar-support-text">' +
       '<span class="sidebar-support-title">Update System</span>' +
       '<span class="sidebar-support-hint" id="sidebar-update-hint">Check for updates</span>' +
@@ -75,7 +76,7 @@ function renderSidebarSupport(supportServices) {
     var btn = document.createElement("button");
     btn.className = "sidebar-support-btn";
     btn.innerHTML =
-      '<span class="sidebar-support-icon">🛟</span>' +
+      '<span class="sidebar-support-icon"><svg><use href="#g-lifebuoy"/></svg></span>' +
       '<span class="sidebar-support-text">' +
         '<span class="sidebar-support-title">' + escHtml(svc.name || "Tech Support") + '</span>' +
         '<span class="sidebar-support-hint">Click for help</span>' +
@@ -88,7 +89,7 @@ function renderSidebarSupport(supportServices) {
   var backupBtn = document.createElement("button");
   backupBtn.className = "sidebar-support-btn";
   backupBtn.innerHTML =
-    '<span class="sidebar-support-icon">💾</span>' +
+    '<span class="sidebar-support-icon"><svg><use href="#g-box"/></svg></span>' +
     '<span class="sidebar-support-text">' +
       '<span class="sidebar-support-title">Manual Backup</span>' +
       '<span class="sidebar-support-hint">Back up to external drive</span>' +
@@ -100,7 +101,7 @@ function renderSidebarSupport(supportServices) {
   var securityBtn = document.createElement("button");
   securityBtn.className = "sidebar-support-btn";
   securityBtn.innerHTML =
-    '<span class="sidebar-support-icon">\uD83D\uDEE1</span>' +
+    '<span class="sidebar-support-icon"><svg><use href="#g-shield-check"/></svg></span>' +
     '<span class="sidebar-support-text">' +
       '<span class="sidebar-support-title">Security</span>' +
       '<span class="sidebar-support-hint">Reset &amp; verify system</span>' +
@@ -113,7 +114,7 @@ function renderSidebarSupport(supportServices) {
     var upgradeBtn = document.createElement("button");
     upgradeBtn.className = "sidebar-support-btn";
     upgradeBtn.innerHTML =
-      '<span class="sidebar-support-icon">🚀</span>' +
+      '<span class="sidebar-support-icon"><svg><use href="#g-antenna"/></svg></span>' +
       '<span class="sidebar-support-text">' +
         '<span class="sidebar-support-title">Upgrade to Full Server</span>' +
         '<span class="sidebar-support-hint">Unlock all services</span>' +
@@ -237,6 +238,7 @@ function updateTiles(services) {
       if (text) text.textContent = st;
     }
   }
+  if (typeof window.dashboardServicesUpdated === "function") window.dashboardServicesUpdated();
 }
 
 // ── Service polling ───────────────────────────────────────────────