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/css/security.css

@@ -28,7 +28,7 @@
 
 .security-warning-box {
   background-color: rgba(180, 40, 40, 0.10);
-  border-left: 3px solid #c94040;
+  border-left: 3px solid var(--red);
   border-radius: 6px;
   padding: 12px 14px;
   margin-bottom: 14px;
@@ -78,7 +78,7 @@
 }
 
 .btn-danger {
-  background-color: #c94040;
+  background-color: var(--red);
   color: #fff;
   border: none;
   border-radius: 6px;
@@ -90,7 +90,7 @@
 }
 
 .btn-danger:hover:not(:disabled) {
-  background-color: #a83030;
+  background-color: var(--red);
 }
 
 .btn-danger:disabled {
@@ -105,8 +105,8 @@
 }
 
 .security-status-info  { color: var(--text-secondary); }
-.security-status-ok    { color: #6DBF8B; }
-.security-status-error { color: #e05252; }
+.security-status-ok    { color: var(--accent); }
+.security-status-error { color: var(--red); }
 
 /* ── Verify System Integrity ─────────────────────────────────────── */
 
@@ -160,7 +160,7 @@
 
 .security-verify-link {
   font-size: 0.78rem;
-  color: var(--accent-color, #6DBF8B);
+  color: var(--accent-color, var(--accent));
   text-decoration: none;
 }
 
@@ -174,13 +174,13 @@
 }
 
 .security-verify-pass {
-  background-color: rgba(109, 191, 139, 0.15);
-  color: #6DBF8B;
+  background-color: rgba(66, 243, 154, 0.15);
+  color: var(--accent);
 }
 
 .security-verify-fail {
   background-color: rgba(224, 82, 82, 0.15);
-  color: #e05252;
+  color: var(--red);
 }
 
 .security-verify-errors {
@@ -221,12 +221,11 @@
   display: none;
   position: fixed;
   inset: 0;
-  background-color: rgba(6, 8, 7, 0.94);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+  background: radial-gradient(1000px 640px at 50% 18%, #17211c, #0b100d 72%);
   z-index: 1000;
   align-items: center;
   justify-content: center;
+  padding: 26px;
   animation: security-reset-fade-in 0.35s ease-out;
 }
 
@@ -253,13 +252,13 @@
 }
 
 .security-reset-password-box {
-  font-family: monospace;
+  font-family: var(--mono);
   font-size: 1.35rem;
   font-weight: 700;
   color: var(--text-primary);
-  background: rgba(109, 191, 139, 0.10);
-  border: 1.5px solid rgba(109, 191, 139, 0.35);
-  border-radius: 8px;
+  background: var(--accent-dim);
+  border: 1.5px solid rgba(66, 243, 154, 0.35);
+  border-radius: 14px;
   padding: 14px 24px;
   letter-spacing: 0.04em;
   text-align: center;
@@ -277,10 +276,11 @@
 }
 
 .security-reset-reboot-btn {
-  background-color: #6DBF8B;
-  color: #0a0c0b;
+  background: linear-gradient(180deg, #3fd68e, #1ea263);
+  color: #04220f;
   border: none;
-  border-radius: 7px;
+  border-radius: 99px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(35, 199, 124, 0.22);
   padding: 11px 22px;
   font-size: 0.88rem;
   font-weight: 700;
@@ -290,7 +290,7 @@
 }
 
 .security-reset-reboot-btn:hover:not(:disabled) {
-  background-color: #5aab78;
+  background-color: var(--accent);
 }
 
 .security-reset-reboot-btn:disabled {
@@ -303,11 +303,12 @@
 .security-first-login-banner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 12px;
-  padding: 12px 18px;
-  background-color: rgba(94, 173, 138, 0.08);
-  border-bottom: 2px solid rgba(94, 173, 138, 0.25);
+  padding: 12px 16px;
+  margin-bottom: 24px;
+  background: rgba(233, 182, 74, 0.08);
+  border: 1px solid rgba(233, 182, 74, 0.30);
+  border-radius: 16px;
   color: var(--text-primary);
 }
 
@@ -333,19 +334,21 @@
 
 .security-banner-dismiss {
   background: none;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
+  border: 1px solid var(--border-strong);
+  border-radius: 99px;
   cursor: pointer;
   font-size: 0.9rem;
   color: var(--text-secondary);
-  padding: 2px 7px;
+  padding: 4px 10px;
   flex-shrink: 0;
   line-height: 1.4;
-  transition: background-color 0.15s;
+  transition: 0.15s;
 }
 
 .security-banner-dismiss:hover {
-  background-color: rgba(0,0,0,0.08);
+  color: var(--text);
+  border-color: rgba(255, 255, 255, 0.26);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 /* ── Legacy security inline warning banner ───────────────────────── */
@@ -357,14 +360,14 @@
   padding: 12px 14px;
   margin-bottom: 12px;
   background-color: rgba(180, 100, 0, 0.12);
-  border-left: 3px solid #c97a00;
+  border-left: 3px solid #c98d08;
   border-radius: 6px;
   color: var(--text-primary);
 }
 
 .security-inline-icon {
   font-size: 1rem;
-  color: #e69000;
+  color: #e0a010;
   flex-shrink: 0;
 }
 
@@ -378,9 +381,9 @@
   display: inline-block;
   font-size: 0.82rem;
   font-weight: 600;
-  color: #e69000;
+  color: #e0a010;
   text-decoration: none;
-  border: 1px solid #c97a00;
+  border: 1px solid #c98d08;
   border-radius: 4px;
   padding: 4px 10px;
   align-self: flex-start;
@@ -447,9 +450,9 @@
 
 .pw-credentials-note {
   font-size: 0.78rem;
-  color: #c97a00;
+  color: #c98d08;
   background-color: rgba(180, 100, 0, 0.10);
-  border-left: 2px solid #c97a00;
+  border-left: 2px solid #c98d08;
   border-radius: 4px;
   padding: 7px 10px;
   margin-bottom: 12px;