Make dashboard cards uniform and symmetric; stop clipping update text

The four welcome cards varied in shape and typography: the grid produced a 3+1 orphan layout at wide widths, sub text was single-line ellipsized (the updates card ended mid-sentence with "…"), the Network card's values used a different size than the other cards' sub text, and only the clickable cards carried a chevron circle. - Grid is now a symmetric 2×2 at wide widths (equal-height rows); the three-card Desktop-only role renders one balanced row - Card sub text wraps instead of being cut off — "Sovran_SystemsOS keeps itself current" is fully visible at every width - One type scale across all cards: 0.9rem titles, 0.8rem sub text (Network values aligned to it), 46px chips, uniform min-height - Chevron circles removed from the cards — hover/focus lift is the click affordance, and every card has the same shape - The updates card now reflects the real update state (failed, restart required, running) instead of only "updates available"; it can no longer claim up-to-date while a restart is pending
Fix role fit-and-finish: Desktop-only router note, narrow-viewport layout
2026-09-08 20:08:52 -05:00 · 2026-09-08 19:38:34 -05:00 · 2026-09-08 19:15:06 -05:00 · 2026-09-08 18:58:48 -05:00 · 2026-09-08 18:46:43 -05:00 · 2026-09-08 18:25:47 -05:00
26 changed files with 3521 additions and 1910 deletions
@@ -234,10 +234,9 @@ _support_expiry_timer_lock = Lock()

 CATEGORY_ORDER = [
    ("infrastructure", "Infrastructure"),
-    ("bitcoin-base",   "Bitcoin Base"),
-    ("bitcoin-apps",   "Bitcoin Apps"),
+    ("bitcoin",        "Bitcoin"),
    ("communication",  "Communication"),
-    ("apps",           "Self-Hosted Apps"),
+    ("apps",           "Personal Apps"),
    ("nostr",          "Nostr"),
    ("support",        "Support"),
    ("feature-manager", "Feature Manager"),
@@ -452,7 +451,7 @@ ROLE_LABELS = {
 ROLE_CATEGORIES: dict[str, set[str] | None] = {
    "server_plus_desktop": None,
    "desktop":             {"infrastructure", "support", "feature-manager"},
-    "node":                {"infrastructure", "bitcoin-base", "bitcoin-apps", "support", "feature-manager"},
+    "node":                {"infrastructure", "bitcoin", "support", "feature-manager"},
 }

 # Features shown per role (None = show all)
@@ -1,6 +1,11 @@
 /* Sovran_SystemsOS Hub — Web UI Stylesheet
-   Dark theme — near-black with green accents matching the Sovran Hub icon
-   v8 — Black-forward, green used for accents/borders/highlights only */
+   The Hub redesign — softer dark theme, GNOME 50 / libadwaita surfaces,
+   Sovran green reserved for status and actions.
+
+   Design tokens are defined once here. Legacy variable names from the
+   previous theme are aliased to the new values so every stylesheet
+   (support, security, domain-setup, onboarding, …) re-skins without
+   needing per-rule edits. */

 *, *::before, *::after {
  box-sizing: border-box;
@@ -9,22 +14,48 @@
 }

 :root {
-  --bg-color:        #080a09;
-  --surface-color:   rgba(14, 16, 15, 0.7);
-  --card-color:      rgba(20, 22, 21, 0.6);
-  --border-color:    rgba(255, 255, 255, 0.06);
-  --text-primary:    #ecf3ef;
-  --text-secondary:  #8aaa9a;
-  --text-dim:        #4a6658;
-  --accent-color:    #5EAD8A;
-  --green:           #6DBF8B;
-  --yellow:          #e5a50a;
-  --red:             #e01b24;
-  --grey:            #5E7A6A;
-  --radius-card:     18px;
-  --radius-btn:      8px;
-  --shadow-card:     0 4px 16px rgba(0, 0, 0, 0.4);
-  --shadow-hover:    0 8px 32px rgba(0, 0, 0, 0.5);
+  color-scheme: dark;
+
+  /* ── The Hub palette ─────────────────────────────────────────── */
+  --bg:            #17191d;
+  --surface:       #1c1f24;
+  --card:          #23272c;
+  --card-hover:    #292e34;
+  --elevated:      #26292e;
+  --inset:         #121417;
+  --border:        rgba(255, 255, 255, 0.07);
+  --border-strong: rgba(255, 255, 255, 0.14);
+  --text:          #e9edec;
+  --text-2:        #a9b0b3;
+  --text-3:        #7a8388;
+  --accent:        #3ecf8e;
+  --accent-strong: #42f39a;
+  --accent-deep:   #1aa45d;
+  --accent-dim:    rgba(66, 243, 154, 0.12);
+  --amber:         #e9b64a;
+  --red:           #f66151;
+  --blue:          #78aeed;
+  --mono:          'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  --radius-card:   20px;
+  --radius-dialog: 26px;
+  --shadow-card:   0 10px 30px rgba(0, 0, 0, 0.25);
+  --shadow-hover:  0 16px 36px rgba(0, 0, 0, 0.38);
+  --shadow-pop:    0 30px 80px rgba(0, 0, 0, 0.5);
+
+  /* ── Legacy aliases (previous theme) — keep every old sheet working */
+  --bg-color:        var(--bg);
+  --surface-color:   var(--surface);
+  --card-color:      var(--card);
+  --border-color:    var(--border);
+  --text-primary:    var(--text);
+  --text-secondary:  var(--text-2);
+  --text-dim:        var(--text-3);
+  --accent-color:    var(--accent);
+  --green:           var(--accent);
+  --yellow:          var(--amber);
+  --red:             var(--red);
+  --grey:            var(--text-3);
+  --radius-btn:      12px;
 }

 html, body {
@@ -32,19 +63,27 @@ html, body {
 }

 body {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background:
-    radial-gradient(ellipse at top, rgba(94, 173, 138, 0.04) 0%, transparent 50%),
-    var(--bg-color);
-  color: var(--text-primary);
+  font-family: Inter, Cantarell, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 15px;
  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
  overflow: hidden;
 }

-/* ── Login page ──────────────────────────────────────────────────── */
+button { font-family: inherit; }
+
+::selection { background: rgba(66, 243, 154, 0.25); }
+
+/* ── Scrollbars ─────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); background-clip: padding-box; }
+::-webkit-scrollbar-track { background: transparent; }
+
+/* ── Login page ─────────────────────────────────────────────────── */

 .login-wrapper {
  display: flex;
@@ -52,86 +91,103 @@ body {
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
+  position: relative;
+  z-index: 1;
 }

 .login-card {
-  background-color: rgba(14, 16, 15, 0.75);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
-  padding: 48px 40px;
  width: 100%;
-  max-width: 400px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  max-width: 402px;
+  text-align: center;
+  background: var(--elevated);
+  border: 1px solid var(--border-strong);
+  border-radius: 28px;
+  padding: 46px 42px 38px;
+  box-shadow: var(--shadow-pop);
 }

 .login-header {
  text-align: center;
-  margin-bottom: 32px;
+  margin-bottom: 26px;
 }

 .login-logo {
-  height: 64px;
-  margin-bottom: 16px;
+  width: 78px;
+  height: 78px;
+  margin-bottom: 18px;
+  filter: drop-shadow(0 8px 24px rgba(28, 196, 120, 0.3));
 }

 .login-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--text-primary);
+  font-size: 1.3rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
+
+.login-title em { font-style: normal; color: var(--accent); }
+
+.login-sub {
+  color: var(--text-2);
+  font-size: 0.85rem;
+  margin: 7px 0 0;
 }

 .login-form {
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: 14px;
 }

 .form-group label {
  display: block;
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-weight: 650;
+  color: var(--text-2);
  margin-bottom: 6px;
+  text-align: left;
 }

 .form-group input {
  width: 100%;
-  padding: 10px 14px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-btn);
-  background-color: var(--card-color);
-  color: var(--text-primary);
+  padding: 11px 16px;
+  border: 1px solid var(--border-strong);
+  border-radius: 14px;
+  background: var(--inset);
+  color: var(--text);
+  font: inherit;
  font-size: 0.92rem;
+  outline: 0;
+  transition: border-color 0.15s, box-shadow 0.15s;
 }

 .form-group input:focus {
-  outline: none;
-  border-color: var(--accent-color);
+  border-color: rgba(66, 243, 154, 0.55);
+  box-shadow: 0 0 0 3px rgba(66, 243, 154, 0.13);
 }

 .btn-login {
  width: 100%;
  padding: 12px;
-  border-radius: var(--radius-btn);
-  background-color: var(--accent-color);
-  color: #0A1A10;
-  font-size: 0.95rem;
+  border-radius: 99px;
+  background: linear-gradient(180deg, #3fd68e, #1ea263);
+  color: #04220f;
+  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 8px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(35, 199, 124, 0.22);
 }

-.btn-login:hover {
-  opacity: 0.88;
+.btn-login:hover:not(:disabled) {
+  filter: brightness(1.08);
 }

 .login-error {
-  background-color: rgba(224, 27, 36, 0.12);
-  border: 1px solid var(--red);
-  color: #f87171;
+  background: rgba(246, 97, 81, 0.10);
+  border: 1px solid rgba(246, 97, 81, 0.35);
+  color: #f8a39b;
  padding: 10px 14px;
-  border-radius: 8px;
+  border-radius: 12px;
  font-size: 0.85rem;
  display: none;
 }
@@ -5,34 +5,134 @@ button {
  cursor: pointer;
  border: none;
  outline: none;
-  transition: opacity 0.15s, box-shadow 0.15s, background-color 0.15s;
+  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s, filter 0.16s, opacity 0.15s;
 }

 button:disabled {
-  opacity: 0.45;
+  opacity: 0.55;
  cursor: default;
+  pointer-events: none;
 }

 .btn {
-  padding: 7px 16px;
-  border-radius: var(--radius-btn);
-  font-size: 0.88rem;
-  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 99px;
+  padding: 8px 18px;
+  font-size: 0.84rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
 }

+.btn svg { width: 15px; height: 15px; }
+.btn:active { transform: scale(0.97); }
+
 .btn-primary {
-  background-color: var(--accent-color);
-  color: #0A1A10;
+  background: linear-gradient(180deg, #3fd68e, #1ea263);
+  color: #04220f;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(35, 199, 124, 0.22);
 }

 .btn-primary:hover:not(:disabled) {
-  opacity: 0.88;
+  filter: brightness(1.08);
+  transform: translateY(-1px);
 }

-/* Update System button: uses accent green by default */
+.btn-primary:active:not(:disabled) { transform: scale(0.97); }
+
+/* Ghost — the default secondary action (legacy: btn-close-modal / btn-save) */
+.btn-ghost,
+.btn-close-modal,
+.btn-save {
+  background: transparent;
+  border-color: var(--border-strong);
+  color: var(--text-2);
+}
+
+.btn-ghost:hover:not(:disabled),
+.btn-close-modal:hover:not(:disabled),
+.btn-save:hover:not(:disabled) {
+  color: var(--text);
+  border-color: rgba(255, 255, 255, 0.26);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+/* Blue — restart / retry actions (amber reads as an error) */
+.btn-amber,
+.btn-reboot,
+.btn-restart-amber,
+.btn-warning {
+  background: rgba(120, 174, 237, 0.10);
+  border-color: rgba(120, 174, 237, 0.35);
+  color: #a5cbf2;
+}
+
+.btn-amber:hover:not(:disabled),
+.btn-reboot:hover:not(:disabled),
+.btn-restart-amber:hover:not(:disabled),
+.btn-warning:hover:not(:disabled) {
+  background: rgba(120, 174, 237, 0.18);
+  border-color: rgba(120, 174, 237, 0.55);
+  color: #c2dcf8;
+}
+
+.btn-danger {
+  background: rgba(246, 97, 81, 0.10);
+  border-color: rgba(246, 97, 81, 0.35);
+  color: #f8a39b;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(246, 97, 81, 0.18);
+  border-color: rgba(246, 97, 81, 0.5);
+}
+
+.btn-sm { padding: 6px 14px; font-size: 0.77rem; }
+
+/* ── Header / topbar buttons ────────────────────────────────────── */
+
+.btn-header-reboot {
+  background: rgba(120, 174, 237, 0.10);
+  border: 1px solid rgba(120, 174, 237, 0.35);
+  color: #a5cbf2;
+  font-size: 0.77rem;
+  font-weight: 700;
+  padding: 6px 14px;
+  border-radius: 99px;
+}
+
+.btn-header-reboot:hover:not(:disabled) {
+  background: rgba(120, 174, 237, 0.18);
+  border-color: rgba(120, 174, 237, 0.55);
+}
+
+.btn-logout {
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--text-2);
+  font-size: 0.77rem;
+  font-weight: 700;
+  padding: 6px 14px;
+  border-radius: 99px;
+}
+
+.btn-logout:hover {
+  color: var(--text);
+  border-color: rgba(255, 255, 255, 0.26);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+/* ── Update System button (sidebar) ─────────────────────────────── */
+
 .btn-update {
-  background-color: #4A9474;
-  color: #E0F2EA;
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--text-2);
  position: relative;
  display: flex;
  align-items: center;
@@ -40,24 +140,22 @@ button:disabled {
 }

 .btn-update:hover:not(:disabled) {
-  opacity: 0.88;
+  color: var(--text);
+  border-color: rgba(255, 255, 255, 0.26);
+  background: rgba(255, 255, 255, 0.04);
 }

-/* Update System button: brighter green when updates are available */
 .btn-update.has-updates {
-  background-color: #5EAD8A;
-  color: #0A1A10;
-}
-
-.btn-update.has-updates:hover:not(:disabled) {
-  background-color: #78C8A2;
+  background: rgba(66, 243, 154, 0.12);
+  border-color: rgba(66, 243, 154, 0.4);
+  color: var(--accent);
 }

 .update-badge {
  display: none;
  width: 10px;
  height: 10px;
-  background-color: var(--yellow);
+  background-color: var(--amber);
  border-radius: 50%;
  animation: pulse-badge 1.4s ease-in-out infinite;
 }
@@ -71,9 +169,11 @@ button:disabled {
  50%       { opacity: 0.5; transform: scale(1.35); }
 }

+/* ── Icon buttons ───────────────────────────────────────────────── */
+
 .btn-icon {
  background: none;
-  color: var(--text-secondary);
+  color: var(--text-2);
  padding: 6px;
  border-radius: 50%;
  font-size: 1.1rem;
@@ -81,6 +181,6 @@ button:disabled {
 }

 .btn-icon:hover:not(:disabled) {
-  background-color: var(--border-color);
-  color: var(--text-primary);
+  background-color: rgba(255, 255, 255, 0.06);
+  color: var(--text);
 }
@@ -18,7 +18,7 @@ domain-field-label {

 domain-field-input {
  width: 100%;
-  background-color: #0c0f0e;
+  background-color: var(--inset);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
@@ -75,7 +75,7 @@ domain-field-actions {

 .domain-field-input {
  width: 100%;
-  background-color: #0c0f0e;
+  background-color: var(--inset);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
@@ -198,21 +198,21 @@ domain-field-actions {
 }

 .port-proto-badge--tcp {
-  color: #6dbf8b;
-  background: rgba(109, 191, 139, 0.12);
-  border: 1px solid rgba(109, 191, 139, 0.4);
+  color: var(--accent);
+  background: rgba(66, 243, 154, 0.12);
+  border: 1px solid rgba(66, 243, 154, 0.4);
 }

 .port-proto-badge--udp {
-  color: #6aa9e0;
+  color: var(--blue);
  background: rgba(106, 169, 224, 0.12);
  border: 1px solid rgba(106, 169, 224, 0.4);
 }

 .port-proto-badge--both {
-  color: #e5a50a;
-  background: rgba(229, 165, 10, 0.12);
-  border: 1px solid rgba(229, 165, 10, 0.45);
+  color: var(--amber);
+  background: rgba(233, 182, 74, 0.12);
+  border: 1px solid rgba(233, 182, 74, 0.45);
 }

 .port-proto-note {
@@ -230,7 +230,7 @@ domain-field-actions {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255, 180, 0, 0.10);
-  border: 1px solid var(--warning-color, #f59e0b);
+  border: 1px solid var(--warning-color, var(--amber));
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.6;
@@ -1,143 +1,196 @@
-/* ── Feature Manager styles ──────────────────────────────────────── */
+/* ── Sidebar: Feature Manager + Preferences ─────────────────────── */

-.feature-manager-section {
-  margin-bottom: 32px;
+.category-section.autolaunch-section,
+.category-section.feature-manager-section {
+  margin-bottom: 0;
 }

-.feature-subcategory {
-  margin-bottom: 16px;
+/* The old "Preferences" header + hr becomes a small sidebar label.
+   features.js renders: .section-header + hr.section-divider + cards */
+.autolaunch-section .section-header,
+.feature-manager-section .section-header {
+  font-size: 0.66rem;
+  font-weight: 750;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin: 0;
+  padding: 14px 10px 7px;
+  display: block;
 }

+.autolaunch-section .section-divider,
+.feature-manager-section .section-divider {
+  background: none;
+  height: 0;
+  margin: 0;
+}
+
+.feature-cards-wrap { display: flex; flex-direction: column; }
+
+.feature-subcategory { display: flex; flex-direction: column; }
+
 .feature-subcategory-header {
-  font-size: 0.78rem;
-  font-weight: 700;
+  font-size: 0.66rem;
+  font-weight: 750;
+  letter-spacing: 0.14em;
  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-dim);
-  margin-bottom: 8px;
-  padding-left: 4px;
-}
-
-.feature-cards-wrap {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  color: var(--text-3);
+  padding: 12px 10px 6px;
 }

+/* Feature card — sidebar preference row with a switch */
 .feature-card {
-  background-color: var(--card-color);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 14px 16px;
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 9px 10px;
+  border-radius: 10px;
+  transition: background 0.15s;
 }

+.feature-card:hover { background: rgba(255, 255, 255, 0.05); }
+
 .feature-card-top {
  display: flex;
  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 8px;
+  gap: 10px;
+  width: 100%;
 }

-.feature-card-info {
-  flex: 1;
-  min-width: 0;
-}
+.feature-card-info { min-width: 0; flex: 1; }

 .feature-card-name {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 4px;
+  font-size: 0.84rem;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.3;
 }

 .feature-card-desc {
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  line-height: 1.5;
+  margin-top: 2px;
+  font-size: 0.68rem;
+  color: var(--text-3);
+  line-height: 1.45;
 }

 .feature-card-status {
-  font-size: 0.72rem;
-  color: var(--text-dim);
+  font-size: 0.66rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 99px;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border);
+  color: var(--text-2);
+}
+
+.feature-card-status.status-on {
+  color: var(--accent);
+  background: var(--accent-dim);
+  border-color: rgba(66, 243, 154, 0.3);
+}
+
+.feature-conflict-warning {
+  margin-top: 8px;
+  font-size: 0.68rem;
+  color: var(--amber);
+  line-height: 1.5;
+}
+
+/* Domain badges inside feature cards */
+.feature-domain-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.64rem;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 99px;
  margin-top: 6px;
 }

+.feature-domain-badge.configured {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.feature-domain-badge.not-configured {
+  color: var(--amber);
+  background: rgba(233, 182, 74, 0.10);
+}
+
+.feature-domain-icon { font-size: 0.8rem; }
+
+.feature-domain-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 0.66rem;
+  font-weight: 650;
+  margin-top: 5px;
+  color: var(--text-3);
+}
+
+.feature-domain-label--ok { color: var(--accent); }
+.feature-domain-label--warn { color: var(--amber); }
+.feature-domain-label--error { color: var(--red); }
+.feature-domain-label--checking { color: var(--blue); }
+
+/* ── Toggle switch (libadwaita style) ───────────────────────────── */
+
 .feature-toggle {
  position: relative;
  display: inline-block;
-  width: 44px;
-  height: 24px;
+  width: 46px;
+  height: 26px;
  flex-shrink: 0;
+  margin-left: auto;
+  margin-top: 2px;
  cursor: pointer;
 }

 .feature-toggle-input {
-  opacity: 0;
-  width: 0;
-  height: 0;
  position: absolute;
+  inset: 0;
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
 }

 .feature-toggle-slider {
  position: absolute;
  inset: 0;
-  background-color: var(--border-color);
-  border-radius: 24px;
-  transition: background-color 0.2s;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid var(--border-strong);
+  transition: 0.2s;
+  pointer-events: none;
 }

-.feature-toggle-slider::before {
+.feature-toggle-slider::after {
  content: "";
  position: absolute;
-  width: 18px;
-  height: 18px;
-  left: 3px;
-  top: 3px;
-  background-color: #fff;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
  border-radius: 50%;
-  transition: transform 0.2s;
+  background: #cfd8d2;
+  transition: 0.2s cubic-bezier(0.3, 0.8, 0.4, 1.2);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
 }

-.feature-toggle.active .feature-toggle-slider {
-  background-color: var(--green);
+.feature-toggle-input:checked + .feature-toggle-slider {
+  background: var(--accent);
+  border-color: transparent;
 }

-.feature-toggle.active .feature-toggle-slider::before {
-  transform: translateX(20px);
+.feature-toggle-input:checked + .feature-toggle-slider::after {
+  left: 23px;
+  background: #fff;
 }

-.feature-domain-badge {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 6px;
-  font-size: 0.78rem;
-}
-
-.feature-domain-icon {
-  flex-shrink: 0;
-}
-
-.feature-domain-label {
-  color: var(--text-secondary);
-}
-
-.feature-domain-label--checking {
-  color: var(--text-dim);
-  font-style: italic;
-}
-
-.feature-domain-label--ok {
-  color: var(--green);
-  font-weight: 600;
-}
-
-.feature-domain-label--warn {
-  color: var(--yellow);
-  font-weight: 600;
-}
-
-.feature-domain-label--error {
-  color: var(--red);
-  font-weight: 600;
+.feature-toggle-input:focus-visible + .feature-toggle-slider {
+  box-shadow: 0 0 0 3px rgba(66, 243, 154, 0.3);
 }
@@ -1,69 +1,93 @@
-/* ── Header bar ─────────────────────────────────────────────────── */
+/* ── Topbar (replaces the old header-bar + ip-bar) ──────────────── */

-.header-bar {
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  background-color: rgba(10, 12, 11, 0.82);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 8px 24px;
+.topbar {
  display: flex;
-  flex-direction: row;
  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-logo {
-  height: 80px;
-  width: auto;
-  display: block;
+  gap: 14px;
+  padding: 13px 26px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
+  position: relative;
+  z-index: 5;
 }

-.header-bar .title {
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--text-primary);
+.page-title {
+  font-size: 1.02rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
 }

-.title-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 6px 10px;
-}
+/* ── Search ─────────────────────────────────────────────────────── */

-.header-buttons {
+.search-box {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: 9px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  padding: 8px 16px;
+  flex: 1;
+  max-width: 400px;
+  min-width: 140px;
+  margin-left: 18px;
+  color: var(--text-3);
+  transition: border-color 0.15s, box-shadow 0.15s;
 }

+.search-box:focus-within {
+  border-color: rgba(66, 243, 154, 0.35);
+  box-shadow: 0 0 0 3px rgba(66, 243, 154, 0.09);
+}
+
+.search-box svg { width: 15px; height: 15px; flex-shrink: 0; }
+
+.search-box input {
+  background: none;
+  border: 0;
+  outline: 0;
+  color: var(--text);
+  width: 100%;
+  font: inherit;
+  font-size: 0.87rem;
+}
+
+.search-box input::placeholder { color: var(--text-3); }
+
+.top-actions {
+  display: flex;
+  gap: 9px;
+  margin-left: auto;
+  order: 5;
+}
+
+/* ── Legacy badges (still used inside dialogs) ──────────────────── */
+
 .role-badge {
-  background-color: var(--accent-color);
-  color: #0A1A10;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border-strong);
+  color: var(--text-2);
  font-size: 0.72rem;
-  font-weight: 700;
-  padding: 3px 10px;
-  border-radius: 20px;
-  letter-spacing: 0.03em;
+  font-weight: 750;
+  padding: 6px 12px;
+  border-radius: 99px;
+  letter-spacing: 0.02em;
 }

-/* ── OS Version Badge — identical styling to the version badge ────
-   ── shown next to titles in the service modal windows ──────────── */
 .os-version-badge {
-  background-color: rgba(255, 255, 255, 0.06);
-  color: var(--text-secondary);
-  font-size: 0.72rem;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-2);
+  font-size: 0.66rem;
  font-weight: 600;
-  padding: 2px 10px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 2px 9px;
+  border-radius: 99px;
+  border: 1px solid var(--border);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
@@ -71,76 +95,13 @@
  flex-shrink: 0;
 }

-/* ── IP bar ─────────────────────────────────────────────────────── */
-
-.ip-bar {
-  background-color: rgba(10, 12, 11, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  padding: 8px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 32px;
-  font-size: 0.82rem;
-  color: var(--text-secondary);
-}
-
-.ip-bar .ip-label {
-  color: var(--text-dim);
-  margin-right: 6px;
-}
-
-.ip-bar .ip-value {
-  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
-  color: var(--accent-color);
-  font-weight: 600;
-}
-
-.ip-separator {
-  color: var(--border-color);
-}
-.btn-logout {
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  color: var(--text-secondary);
-  font-size: 0.78rem;
-  font-weight: 600;
-  padding: 4px 12px;
-  border-radius: var(--radius-btn);
-  cursor: pointer;
-  transition: border-color 0.15s, color 0.15s;
-}
-
-.btn-logout:hover {
-  border-color: var(--accent-color);
-  color: var(--accent-color);
-}
-
-/* ── Header reboot button ───────────────────────────────────────── */
-
-.btn-header-reboot {
-  background: transparent;
-  border: 1px solid rgba(184, 125, 0, 0.35);
-  color: #c98d08;
-  font-size: 0.78rem;
-  font-weight: 600;
-  padding: 4px 12px;
-  border-radius: var(--radius-btn);
-  cursor: pointer;
-  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
-}
-
-.btn-header-reboot:hover {
-  border-color: #b87d00;
-  color: #e0a010;
-  background-color: rgba(184, 125, 0, 0.1);
-}
-
@media (max-width: 480px) {
  .btn-header-reboot {
-    padding: 4px 8px;
+    padding: 5px 10px;
+    font-size: 0.72rem;
+  }
+  .btn-logout {
+    padding: 5px 10px;
    font-size: 0.72rem;
  }
 }
@@ -1,138 +1,533 @@
-/* ── Main content ───────────────────────────────────────────────── */
+/* ── App shell: sidebar + main column ───────────────────────────── */

-.main-content {
+.app {
  display: flex;
-  align-items: flex-start;
+  height: 100vh;
+  position: relative;
+  z-index: 1;
+}
+
+.main {
  flex: 1;
-  overflow: hidden;
-  max-width: 1400px;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 26px 30px 70px;
+  min-width: 0;
 }

 /* ── Sidebar ────────────────────────────────────────────────────── */

 .sidebar {
-  width: 270px;
+  width: 250px;
  flex-shrink: 0;
-  height: 100%;
-  overflow-y: auto;
-  border-right: 1px solid rgba(255, 255, 255, 0.06);
-  background-color: rgba(12, 14, 13, 0.65);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  padding: 20px 14px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
-  gap: 0;
+  padding: 20px 14px 14px;
+  overflow-y: auto;
 }

-/* ── Sidebar: Tech Support button ───────────────────────────────── */
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 2px 8px 20px;
+}

+.brand-logo {
+  width: 42px;
+  height: 42px;
+  flex-shrink: 0;
+  filter: drop-shadow(0 4px 14px rgba(28, 196, 120, 0.25));
+}
+
+.brand-text { display: flex; flex-direction: column; min-width: 0; }
+
+.brand-title {
+  font-size: 1.02rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.brand-title em { font-style: normal; color: var(--accent); }
+
+.brand-sub {
+  font-size: 0.7rem;
+  color: var(--text-3);
+  font-family: var(--mono);
+  margin-top: 3px;
+}
+
+.nav-label {
+  font-size: 0.66rem;
+  font-weight: 750;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  padding: 14px 10px 7px;
+}
+
+/* Category nav (dashboard.js) */
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 0;
+  background: none;
+  color: var(--text-2);
+  font-size: 0.87rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s, color 0.15s;
+}
+
+.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+}
+
+.nav-item.active {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text);
+  box-shadow: inset 2.5px 0 0 var(--accent);
+}
+
+.nav-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-count {
+  margin-left: auto;
+  font-size: 0.67rem;
+  font-weight: 750;
+  flex-shrink: 0;
+  color: var(--text-3);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2px 8px;
+  border-radius: 99px;
+}
+
+.nav-item.active .nav-count {
+  background: rgba(255, 255, 255, 0.10);
+  color: var(--text-2);
+}
+
+/* System items (tiles.js renders these as .sidebar-support-btn) */
 .sidebar-support-btn {
  display: flex;
  align-items: center;
-  gap: 10px;
+  gap: 11px;
  width: 100%;
-  background-color: var(--card-color);
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 12px 14px;
-  color: var(--text-primary);
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 0;
+  background: none;
+  color: var(--text-2);
+  font-size: 0.87rem;
+  font-weight: 600;
  cursor: pointer;
-  transition: border-style 0.15s, border-color 0.15s, background-color 0.15s;
  text-align: left;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
 }

 .sidebar-support-btn:hover {
-  border-color: var(--accent-color);
-  border-style: solid;
-  background-color: #162320;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
 }

 .sidebar-support-btn + .sidebar-support-btn {
-  margin-top: 8px;
+  margin-top: 2px;
 }

 .sidebar-support-icon {
-  font-size: 1.5rem;
+  font-size: 1rem;
+  width: 17px;
+  height: 17px;
+  display: grid;
+  place-items: center;
  flex-shrink: 0;
 }

+.sidebar-support-icon svg { width: 17px; height: 17px; }
+
 .sidebar-support-text {
  display: flex;
  flex-direction: column;
-  gap: 2px;
+  gap: 1px;
+  min-width: 0;
 }

 .sidebar-support-title {
-  font-size: 0.88rem;
-  font-weight: 700;
-  color: var(--text-primary);
+  font-size: 0.87rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .sidebar-support-hint {
-  font-size: 0.72rem;
-  color: var(--accent-color);
-  font-weight: 600;
+  font-size: 0.68rem;
+  font-weight: 650;
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .sidebar-divider {
  border: none;
-  border-top: 1px solid var(--border-color);
-  margin: 16px 0;
+  border-top: 1px solid var(--border);
+  margin: 14px 0 0;
 }

-/* ── Upgrade modal ──────────────────────────────────────────────── */
+.sidebar-spacer { flex: 1; min-height: 18px; }

-.upgrade-dialog {
-  max-width: 480px;
+/* ── Welcome dashboard (default view) ───────────────────────────── */
+
+.welcome {
+  position: relative;
+  /* Full-bleed: cancel .content's padding so the glow reaches
+     every edge of the panel (sidebar border, topbar, viewport). */
+  margin: -26px -30px -70px;
+  padding: 70px 38px 70px;
+  overflow: hidden;
+  min-height: calc(100% + 96px);
 }

-.upgrade-info-box {
-  background-color: var(--card-color);
-  border: 1px solid var(--border-color);
-  border-radius: 10px;
-  padding: 14px 18px;
-  margin-bottom: 14px;
+/* Soft drifting glow — calm, GPU-cheap (transforms only) */
+.welcome-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
 }

-.upgrade-info-title {
-  font-size: 0.88rem;
-  font-weight: 700;
-  color: var(--text-primary);
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  will-change: transform;
+}
+
+.orb-a {
+  width: 560px; height: 560px;
+  left: -140px; top: -180px;
+  background: radial-gradient(circle, rgba(62, 207, 142, 0.10), transparent 70%);
+  animation: orb-drift-a 26s ease-in-out infinite alternate;
+}
+
+.orb-b {
+  width: 680px; height: 680px;
+  right: -200px; top: 20%;
+  background: radial-gradient(circle, rgba(120, 174, 237, 0.07), transparent 70%);
+  animation: orb-drift-b 34s ease-in-out infinite alternate;
+}
+
+.orb-c {
+  width: 460px; height: 460px;
+  left: 34%; bottom: -200px;
+  background: radial-gradient(circle, rgba(66, 243, 154, 0.06), transparent 70%);
+  animation: orb-drift-c 42s ease-in-out infinite alternate;
+}
+
+@keyframes orb-drift-a { to { transform: translate(70px, 50px) scale(1.14); } }
+@keyframes orb-drift-b { to { transform: translate(-60px, -70px) scale(1.10); } }
+@keyframes orb-drift-c { to { transform: translate(50px, -40px) scale(1.18); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .orb { animation: none; }
+  .welcome-inner { animation: none; }
+}
+
+/* ── Boot splash ────────────────────────────────────────────────── */
+/* Covers the shell while the first services/config data loads; the
+   inline script in index.html lifts it (window.__liftAppSplash). */
+#app-splash {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  background: var(--bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.45s ease;
+}
+
+#app-splash.done { opacity: 0; pointer-events: none; }
+
+.splash-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 24px;
+}
+
+.splash-ring {
+  position: relative;
+  width: 96px;
+  height: 96px;
+  display: grid;
+  place-items: center;
  margin-bottom: 8px;
 }

-.upgrade-info-list {
-  padding-left: 20px;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  line-height: 1.7;
-  margin: 0;
+.splash-ring img { width: 60px; height: 60px; opacity: 0.95; }
+
+.splash-ring-arc {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 3px solid rgba(255, 255, 255, 0.10);
+  border-top-color: var(--accent);
+  animation: splash-spin 1s linear infinite;
 }

-.upgrade-info-list a {
-  color: var(--accent-color);
+@keyframes splash-spin { to { transform: rotate(360deg); } }
+
+.splash-title {
+  font-size: 1.02rem;
+  font-weight: 700;
+  color: var(--text);
 }

-.upgrade-rebuild-note {
-  font-style: italic;
-  color: var(--text-dim);
-  font-size: 0.82rem;
+.splash-sub {
+  font-size: 0.84rem;
+  color: var(--text-3);
 }

+@media (prefers-reduced-motion: reduce) {
+  .splash-ring-arc { animation-duration: 2.5s; }
+}
+
+.welcome-inner {
+  position: relative;
+  max-width: 1040px;
+  margin: 0 auto;
+  animation: welcome-in 0.5s ease both;
+}
+
+@keyframes welcome-in {
+  from { opacity: 0; transform: translateY(14px); }
+}
+
+.welcome-greeting {
+  font-size: 0.98rem;
+  font-weight: 650;
+  color: var(--text-2);
+}
+
+.welcome-title {
+  margin-top: 6px;
+  font-size: clamp(1.7rem, 2.8vw, 2.25rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.18;
+}
+
+.welcome-title em { font-style: normal; color: var(--accent); }
+
+.welcome-meta {
+  margin-top: 12px;
+  font-size: 0.8rem;
+  color: var(--text-3);
+  font-family: var(--mono);
+}
+
+.welcome-meta-sep { margin: 0 8px; opacity: 0.6; }
+
+.welcome-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: 1fr; /* both rows share the taller height → uniform cards */
+  gap: 16px;
+  margin-top: 34px;
+}
+
+/* Three cards (Desktop-only role, no Bitcoin card) → one symmetric row */
+@media (min-width: 681px) {
+  .welcome-cards:not(:has(#w-btc)) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* wrappers whose children become grid items */
+.welcome-dyn { display: contents; }
+
+.w-network .net-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-top: 6px;
+  font-family: var(--mono);
+}
+
+.w-network .net-k {
+  font-size: 0.6rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  color: var(--text-3);
+  width: 30px;
+  flex-shrink: 0;
+}
+
+.w-network .ip-value {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.w-network .sub { margin-top: 8px; }
+
+.welcome-browse {
+  margin-top: 26px;
+}
+
+.widget {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 17px 19px;
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), var(--shadow-card);
+  transition: border-color 0.18s;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 88px; /* uniform card height everywhere */
+}
+
+.widget:hover { border-color: var(--border-strong); }
+.widget.clickable:hover { transform: translateY(-1px); }
+
+.widget.clickable { cursor: pointer; }
+.widget.clickable:focus-visible {
+  outline: 2px solid rgba(66, 243, 154, 0.45);
+  outline-offset: 2px;
+}
+
+.widget-chip {
+  width: 46px;
+  height: 46px;
+  border-radius: 14px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.widget-chip svg { width: 22px; height: 22px; }
+.widget-chip img { width: 46px; height: 46px; display: block; object-fit: contain; }
+
+.widget-chip.chip-green {
+  background: linear-gradient(160deg, #2f9f6b, #17683f);
+}
+
+.widget-chip.chip-btc {
+  background: linear-gradient(160deg, #f7931a, #b96a0a);
+}
+
+.widget-chip.chip-amber {
+  background: linear-gradient(160deg, #b98426, #8a5f16);
+}
+
+.widget-chip.chip-sovran {
+  background: linear-gradient(160deg, #42f39a, #1aa45d);
+}
+
+.widget-chip.chip-neutral {
+  background: linear-gradient(160deg, #2e333a, #23272c);
+}
+
+.w-body { min-width: 0; }
+
+.widget h3 {
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.widget .sub {
+  margin-top: 4px;
+  font-size: 0.8rem;
+  line-height: 1.45;
+  color: var(--text-2);
+  overflow-wrap: anywhere;
+}
+
+.widget .sub b { color: var(--text); font-weight: 650; }
+.widget .sub .good { color: var(--accent); font-weight: 650; }
+.widget .sub .warn { color: var(--amber); font-weight: 650; }
+
+.w-bar {
+  height: 7px;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.07);
+  overflow: hidden;
+  margin: 8px 0 7px;
+}
+
+.w-bar-fill {
+  height: 100%;
+  border-radius: 99px;
+  background: linear-gradient(90deg, #42f39a, #1aa45d);
+  transition: width 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
+}
+
+
 /* ── Tiles area ─────────────────────────────────────────────────── */

 #tiles-area {
-  flex: 1;
-  height: 100%;
-  overflow-y: auto;
-  padding: 24px 20px 48px;
  min-width: 0;
 }

+.dashboard-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 72px 24px;
+  color: var(--text-3);
+  font-size: 0.9rem;
+}
+
+.dashboard-loading-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2.5px solid rgba(255, 255, 255, 0.12);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
 /* ── Category sections ──────────────────────────────────────────── */

 .category-section {
@@ -140,25 +535,30 @@
 }

 .section-header {
-  font-size: 0.82rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 15px;
+  font-size: 0.72rem;
+  font-weight: 750;
+  letter-spacing: 0.14em;
  text-transform: uppercase;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-  padding-left: 4px;
+  color: var(--text-2);
+  white-space: nowrap;
 }

 .section-divider {
  border: none;
-  border-top: 1px solid var(--border-color);
-  margin-bottom: 16px;
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, var(--border), transparent);
+  margin: 0;
 }

 .tiles-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 14px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
+  gap: 15px;
 }

 /* ── Empty state ────────────────────────────────────────────────── */
@@ -166,10 +566,103 @@
 .empty-state {
  text-align: center;
  padding: 64px 24px;
-  color: var(--text-dim);
+  color: var(--text-3);
 }

 .empty-state p {
  font-size: 1rem;
  margin-bottom: 8px;
 }
+
+/* ── Upgrade modal (kept from previous layout) ──────────────────── */
+
+.upgrade-dialog {
+  max-width: 480px;
+}
+
+.upgrade-info-box {
+  background: rgba(0, 0, 0, 0.16);
+  border: 1px solid var(--border-strong);
+  border-radius: 16px;
+  padding: 14px 16px;
+  margin: 14px 0;
+}
+
+.upgrade-info-title {
+  font-size: 0.88rem;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.upgrade-info-list {
+  padding-left: 20px;
+  font-size: 0.85rem;
+  color: var(--text-2);
+  line-height: 1.7;
+  margin: 0;
+}
+
+.upgrade-info-list a {
+  color: var(--accent);
+}
+
+.upgrade-rebuild-note {
+  font-style: italic;
+  color: var(--text-3);
+  font-size: 0.82rem;
+}
+
+/* ── First-login security banner (inside .content) ──────────────── */
+
+.security-first-login-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(233, 182, 74, 0.08);
+  border: 1px solid rgba(233, 182, 74, 0.30);
+  border-radius: 16px;
+  padding: 12px 16px;
+  color: var(--text-2);
+  font-size: 0.85rem;
+  margin-bottom: 24px;
+}
+
+/* ── Narrow viewports (phone / half-screen RDP) ──────────────────── */
+/* The sidebar becomes an icon rail so the content keeps room, and the
+   topbar wraps its search onto a second row instead of overflowing. */
+@media (max-width: 920px) {
+  .sidebar {
+    width: 76px;
+    padding: 16px 8px 12px;
+  }
+
+  .brand { justify-content: center; padding: 2px 0 18px; gap: 0; }
+  .brand-text,
+  .nav-label,
+  .nav-text,
+  .nav-count,
+  .sidebar-support-text,
+  .sidebar-divider,
+  #sidebar-features { display: none; }
+
+  .nav-item { justify-content: center; gap: 0; padding: 10px 0; }
+  .sidebar-support-btn { justify-content: center; gap: 0; padding: 10px 0; }
+
+  .content { padding: 18px 18px 40px; }
+
+  /* keep the welcome background full-bleed against the new padding */
+  .welcome {
+    margin: -18px -18px -40px;
+    padding: 48px 20px 40px;
+    min-height: calc(100% + 58px);
+  }
+}
+
+@media (max-width: 640px) {
+  .topbar { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
+  .search-box { order: 5; flex-basis: 100%; }
+
+  .welcome { padding: 40px 16px 36px; }
+  .welcome-cards { grid-template-columns: 1fr; }
+}
@@ -7,7 +7,7 @@
  justify-content: flex-start;
  min-height: 100vh;
  background:
-    radial-gradient(ellipse at top, rgba(94, 173, 138, 0.04) 0%, transparent 50%),
+    radial-gradient(ellipse at top, rgba(62, 207, 142, 0.04) 0%, transparent 50%),
    var(--bg-color);
  padding: 24px 16px 48px;
  overflow-y: auto;
@@ -70,13 +70,13 @@
 .onboarding-step-dot.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
-  color: #0A1A10;
+  color: #04220f;
 }

 .onboarding-step-dot.completed {
  background-color: var(--green);
  border-color: var(--green);
-  color: #0A1A10;
+  color: #04220f;
 }

 .onboarding-step-connector {
@@ -139,7 +139,7 @@
 /* Cards */

 .onboarding-card {
-  background-color: rgba(14, 16, 15, 0.65);
+  background-color: rgba(18, 24, 20, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
@@ -184,10 +184,10 @@
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-color);
-  background-color: rgba(94, 173, 138, 0.10);
+  background-color: rgba(62, 207, 142, 0.10);
  padding: 3px 10px;
  border-radius: 20px;
-  border: 1px solid rgba(94, 173, 138, 0.25);
+  border: 1px solid rgba(62, 207, 142, 0.25);
 }

 /* Step header */
@@ -371,8 +371,8 @@

 .onboarding-port-warn {
  padding: 10px 14px;
-  background-color: rgba(229, 165, 10, 0.1);
-  border: 1px solid rgba(229, 165, 10, 0.35);
+  background-color: rgba(233, 182, 74, 0.1);
+  border: 1px solid rgba(233, 182, 74, 0.35);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--yellow);
@@ -409,8 +409,8 @@

 .onboarding-creds-notice {
  padding: 12px 16px;
-  background-color: rgba(94, 173, 138, 0.08);
-  border: 1px solid rgba(94, 173, 138, 0.20);
+  background-color: rgba(62, 207, 142, 0.08);
+  border: 1px solid rgba(62, 207, 142, 0.20);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
@@ -503,8 +503,8 @@
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 4px;
-  background-color: rgba(94, 173, 138, 0.08);
-  border: 1px solid rgba(94, 173, 138, 0.20);
+  background-color: rgba(62, 207, 142, 0.08);
+  border: 1px solid rgba(62, 207, 142, 0.20);
  color: var(--accent-color);
  cursor: pointer;
  white-space: nowrap;
@@ -512,7 +512,7 @@
 }

 .onboarding-cred-reveal-btn:hover {
-  background-color: rgba(94, 173, 138, 0.15);
+  background-color: rgba(62, 207, 142, 0.15);
 }

 /* Completion checklist (Step 5) */
@@ -671,7 +671,7 @@
 }

 .onboarding-password-toggle:hover {
-  background-color: rgba(94, 173, 138, 0.10);
+  background-color: rgba(62, 207, 142, 0.10);
  border-color: var(--accent-color);
 }

@@ -683,8 +683,8 @@

 .onboarding-password-warning {
  padding: 10px 14px;
-  background-color: rgba(229, 165, 10, 0.1);
-  border: 1px solid rgba(229, 165, 10, 0.35);
+  background-color: rgba(233, 182, 74, 0.1);
+  border: 1px solid rgba(233, 182, 74, 0.35);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--yellow);
@@ -694,8 +694,8 @@

 .onboarding-password-success {
  padding: 12px 16px;
-  background-color: rgba(94, 173, 138, 0.10);
-  border: 1px solid rgba(94, 173, 138, 0.30);
+  background-color: rgba(62, 207, 142, 0.10);
+  border: 1px solid rgba(62, 207, 142, 0.30);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--green);
@@ -748,7 +748,7 @@
 }

 .reboot-card {
-  background-color: rgba(14, 16, 15, 0.8);
+  background-color: rgba(18, 24, 20, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
@@ -823,57 +823,8 @@

 /* ── Responsive ─────────────────────────────────────────────────── */

-@media (max-width: 768px) {
-  body {
-    overflow: auto;
-  }
-  .main-content {
-    flex-direction: column;
-    overflow: visible;
-  }
-  .sidebar {
-    width: 100%;
-    height: auto;
-    border-right: none;
-    border-bottom: 1px solid var(--border-color);
-    padding: 14px 12px;
-  }
-  #tiles-area {
-    height: auto;
-    overflow-y: visible;
-    padding: 16px 12px 40px;
-  }
-}
-
-@media (max-width: 600px) {
-  .header-bar {
-    padding: 10px 14px;
-    gap: 10px;
-  }
-  .header-bar .title {
-    font-size: 0.95rem;
-  }
-  .ip-bar {
-    gap: 16px;
-    flex-wrap: wrap;
-    padding: 8px 14px;
-  }
-  .tiles-grid {
-    justify-content: center;
-  }
-  .service-tile {
-    width: 140px;
-    min-height: 130px;
-  }
-  .reboot-card {
-    padding: 36px 28px;
-    margin: 0 16px;
-  }
-  .creds-dialog {
-    margin: 0 12px;
-  }
-  .creds-qr-img {
-    width: 200px;
-    height: 200px;
-  }
-}
+/* Legacy pre-redesign narrow-screen rules removed: they targeted the old
+   DOM (.main-content, .header-bar, .ip-bar) and their .sidebar /
+   #tiles-area / .service-tile / .creds-qr-img overrides fought the new
+   responsive layout in layout.css (sidebar icon rail, wrapping topbar).
+   Narrow-viewport behavior now lives in layout.css + header.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%, #202429, #0f1113 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;
@@ -104,7 +104,7 @@
 }

 .support-steps code {
-  background-color: rgba(94, 173, 138, 0.10);
+  background-color: rgba(62, 207, 142, 0.10);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
@@ -116,7 +116,7 @@
  padding: 12px;
  border-radius: var(--radius-btn);
  background-color: var(--accent-color);
-  color: #0A1A10;
+  color: #04220f;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 10px;
@@ -146,7 +146,7 @@
  padding: 12px;
  border-radius: var(--radius-btn);
  background-color: var(--accent-color);
-  color: #0A1A10;
+  color: #04220f;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 16px;
@@ -168,7 +168,7 @@
 }

 .support-btn-auditlog:hover:not(:disabled) {
-  background-color: #1c2a24;
+  background-color: var(--card-hover);
 }

 .support-fine-print {
@@ -219,13 +219,13 @@
 }

 .support-wallet-protected {
-  background-color: rgba(109, 191, 139, 0.06);
-  border-color: rgba(109, 191, 139, 0.3);
+  background-color: rgba(66, 243, 154, 0.06);
+  border-color: rgba(66, 243, 154, 0.3);
 }

 .support-wallet-unlocked {
-  background-color: rgba(229, 165, 10, 0.06);
-  border-color: rgba(229, 165, 10, 0.3);
+  background-color: rgba(233, 182, 74, 0.06);
+  border-color: rgba(233, 182, 74, 0.3);
 }

 .support-wallet-warning {
@@ -290,7 +290,7 @@
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  background-color: var(--yellow);
-  color: #0A1A10;
+  color: #04220f;
  font-size: 0.82rem;
  font-weight: 700;
 }
@@ -310,7 +310,7 @@
 }

 .support-btn-wallet-lock:hover:not(:disabled) {
-  background-color: #529E7E;
+  background-color: var(--accent);
 }

 /* ── Audit log ───────────────────────────────────────────────────── */
@@ -324,7 +324,7 @@
 .support-audit-log {
  max-height: 200px;
  overflow-y: auto;
-  background-color: #0c0f0e;
+  background-color: var(--inset);
  border-radius: 8px;
  padding: 10px 14px;
 }
@@ -1,473 +1,178 @@
-/* ── Service tile card (status-only) ─────────────────────────────── */
-
-.dashboard-loading {
-  min-height: 180px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  color: var(--text-secondary);
-  font-size: 0.9rem;
-}
-
-.dashboard-loading-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--border-color);
-  border-top-color: var(--accent-color);
-  border-radius: 50%;
-  animation: dashboard-loading-spin 0.8s linear infinite;
-}
-
-@keyframes dashboard-loading-spin {
-  to { transform: rotate(360deg); }
-}
+/* ── Service tiles ──────────────────────────────────────────────── */

 .service-tile {
-  width: 160px;
-  min-height: 130px;
-  background-color: var(--card-color);
-  border: 1px solid var(--border-color);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  overflow: hidden;
+  padding: 21px 12px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: center;
-  padding: 20px 12px 18px;
-  gap: 0;
-  transition: box-shadow 0.2s, border-color 0.2s;
-  position: relative;
  cursor: pointer;
+  position: relative;
+  transition: transform 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s, opacity 0.18s;
+  animation: tileIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
+}
+
+@keyframes tileIn {
+  from { opacity: 0; transform: translateY(10px) scale(0.96); }
 }

 .service-tile:hover {
+  transform: translateY(-4px);
+  border-color: var(--border-strong);
+  background: var(--card-hover);
  box-shadow: var(--shadow-hover);
-  border-color: var(--accent-color);
 }

-.service-tile.disabled {
-  opacity: 0.45;
+.service-tile:active { transform: translateY(-1px) scale(0.985); }
+
+.service-tile:focus-visible {
+  outline: 2px solid rgba(66, 243, 154, 0.45);
+  outline-offset: 2px;
 }

+.service-tile.disabled { opacity: 0.55; }
+
 .tile-icon {
-  width: 48px;
-  height: 48px;
+  width: 62px;
+  height: 62px;
+  display: block;
  object-fit: contain;
-  margin-bottom: 10px;
 }

 .tile-icon-fallback {
-  width: 48px;
-  height: 48px;
+  width: 62px;
+  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: var(--border-color);
-  border-radius: 12px;
-  color: var(--text-dim);
-  font-size: 1.5rem;
-  margin-bottom: 10px;
+  color: var(--text-3);
+  font-size: 1.2rem;
+  font-weight: 700;
 }

 .tile-name {
-  font-size: 0.88rem;
-  font-weight: 600;
+  margin-top: 13px;
+  font-size: 0.86rem;
+  font-weight: 650;
  text-align: center;
-  color: var(--text-primary);
-  line-height: 1.3;
-  max-width: 140px;
-  word-break: break-word;
-  hyphens: auto;
-  min-height: 1.3em;
+  line-height: 1.25;
+  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
+  color: var(--text);
+  max-width: 100%;
 }

+/* Status pill — dot + label inside a rounded pill */
 .tile-status {
-  font-size: 0.75rem;
-  margin-top: 8px;
-  display: flex;
+  margin-top: 9px;
+  display: inline-flex;
  align-items: center;
-  gap: 5px;
-  color: var(--text-secondary);
+  gap: 6px;
+  font-size: 0.69rem;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 99px;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-2);
 }

-.tile-version {
-  font-size: 0.7rem;
-  color: var(--text-dim);
-  margin-top: 2px;
-  text-align: center;
-}
+.status-text { line-height: 1; }

 .status-dot {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
  border-radius: 50%;
+  background: var(--text-3);
  flex-shrink: 0;
-  background-color: var(--grey);
 }

-.status-dot.active         { background-color: var(--green); }
-.status-dot.inactive       { background-color: var(--red); }
-.status-dot.loading        { background-color: var(--yellow); animation: pulse-badge 1s infinite; }
-.status-dot.failed         { background-color: var(--red); }
-.status-dot.disabled       { background-color: var(--grey); }
-.status-dot.needs-attention { background-color: var(--yellow); }
-.status-dot.syncing        { background-color: #f5a623; animation: pulse-badge 1.5s infinite; }
-.status-dot.checking-reachability { background-color: var(--accent-color); animation: pulse-badge 1s infinite; }
+.status-dot.active { background: var(--accent); }
+.status-dot.needs-attention { background: var(--amber); }
+.status-dot.failed { background: var(--red); }
+.status-dot.inactive,
+.status-dot.disabled { background: var(--text-3); }
+.status-dot.syncing,
+.status-dot.loading,
+.status-dot.checking-reachability { background: var(--blue); animation: tile-dot-pulse 1.4s ease-in-out infinite; }
+.status-dot.unknown { background: var(--text-3); }

-/* ── Bitcoin IBD sync progress bar ──────────────────────────────── */
+@keyframes tile-dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+
+/* Progressive enhancement: tint the whole pill on modern browsers */
+.tile-status:has(.status-dot.active) { background: var(--accent-dim); color: var(--accent); }
+.tile-status:has(.status-dot.needs-attention) { background: rgba(233, 182, 74, 0.10); color: var(--amber); }
+.tile-status:has(.status-dot.failed) { background: rgba(246, 97, 81, 0.10); color: var(--red); }
+.tile-status:has(.status-dot.syncing),
+.tile-status:has(.status-dot.loading),
+.tile-status:has(.status-dot.checking-reachability) { background: rgba(120, 174, 237, 0.10); color: var(--blue); }
+
+.support-status-label {
+  font-size: 0.69rem;
+  font-weight: 700;
+  color: var(--text-2);
+}
+
+/* ── Bitcoin IBD sync tile ──────────────────────────────────────── */

 .tile-sync-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
+  margin-top: 12px;
  width: 100%;
-  margin-top: 6px;
+  padding: 0 6px;
 }

 .tile-sync-label {
-  font-size: 0.72rem;
-  color: #f5a623;
-  font-weight: 600;
+  font-size: 0.66rem;
+  font-weight: 750;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--amber);
  text-align: center;
-  white-space: nowrap;
 }

 .tile-sync-bar-row {
  display: flex;
  align-items: center;
-  gap: 5px;
-  width: 100%;
+  gap: 8px;
+  margin-top: 7px;
 }

 .tile-sync-bar-track {
  flex: 1;
-  height: 6px;
-  background-color: var(--border-color);
-  border-radius: 3px;
+  height: 7px;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
 }

 .tile-sync-bar-fill {
  height: 100%;
-  background-color: #f5a623;
-  border-radius: 3px;
-  transition: width 0.6s ease;
-  min-width: 2px;
+  border-radius: 99px;
+  background: linear-gradient(90deg, #42f39a, #1aa45d);
+  transition: width 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
 }

 .tile-sync-percent {
-  font-size: 0.72rem;
+  font-family: var(--mono);
+  font-size: 0.7rem;
  font-weight: 700;
-  color: #f5a623;
-  white-space: nowrap;
-  min-width: 2.5em;
-  text-align: right;
+  color: var(--amber);
+  flex-shrink: 0;
 }

 .tile-sync-eta {
-  font-size: 0.68rem;
-  color: var(--text-dim);
+  margin-top: 6px;
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  color: var(--text-3);
  text-align: center;
-  white-space: nowrap;
-}
-
-
-/* ── Service detail modal sections ───────────────────────────────── */
-
-.svc-detail-section {
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.svc-detail-section:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-.svc-detail-section-title {
-  font-size: 0.78rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-dim);
-  margin-bottom: 10px;
-}
-
-.svc-detail-desc {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.svc-detail-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-/* ── Service detail: Domain ──────────────────────────────────────── */
-
-.svc-detail-domain-value {
-  font-size: 0.9rem;
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-.tile-domain-label--ok {
-  color: var(--green);
-  font-weight: 600;
-}
-
-.tile-domain-label--warn {
-  color: var(--yellow);
-  font-weight: 600;
-}
-
-.tile-domain-label--error {
-  color: var(--red);
-  font-weight: 600;
-}
-
-/* ── Service detail: Port table ──────────────────────────────────── */
-
-.svc-detail-port-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.82rem;
-  margin-top: 8px;
-}
-
-.svc-detail-port-table th {
-  text-align: left;
-  color: var(--text-dim);
-  font-weight: 600;
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.svc-detail-port-table td {
-  padding: 8px 10px;
-  border-bottom: 1px solid rgba(30, 45, 39, 0.6);
-  color: var(--text-primary);
-}
-
-.svc-detail-port-table tr:last-child td {
-  border-bottom: none;
-}
-
-.svc-detail-port-table-port {
-  font-family: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
-  font-weight: 600;
-  color: var(--accent-color);
-}
-
-.svc-detail-port-table-proto {
-  text-transform: uppercase;
-  color: var(--text-secondary);
-}
-
-.svc-detail-port-table-desc {
-  color: var(--text-secondary);
-}
-
-.svc-detail-port-table-status {
-  font-weight: 600;
-}
-
-.port-status-listening { color: var(--green); }
-.port-status-open      { color: var(--yellow); }
-.port-status-closed    { color: var(--red); }
-.port-status-unknown   { color: var(--text-dim); }
-
-/* ── Service detail: Troubleshoot box ────────────────────────────── */
-
-.svc-detail-troubleshoot {
-  margin-top: 12px;
-  padding: 14px 16px;
-  background-color: rgba(229, 165, 10, 0.08);
-  border: 1px solid rgba(229, 165, 10, 0.3);
-  border-radius: 10px;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  line-height: 1.6;
-}
-
-.svc-detail-troubleshoot strong {
-  color: var(--yellow);
-}
-
-.svc-detail-troubleshoot ol {
-  margin-top: 8px;
-  padding-left: 20px;
-}
-
-.svc-detail-troubleshoot li {
-  margin-bottom: 4px;
-}
-
-.svc-detail-troubleshoot code {
-  background-color: rgba(94, 173, 138, 0.10);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 0.82rem;
-  color: var(--accent-color);
-}
-
-.svc-detail-troubleshoot a {
-  color: var(--accent-color);
-  text-decoration: none;
-}
-
-.svc-detail-troubleshoot a:hover {
-  text-decoration: underline;
-}
-
-/* ── Service detail: Domain configure button ─────────────────────── */
-
-.svc-detail-domain-btn {
-  margin-top: 12px;
-}
-
-/* ── Service detail: Addon feature toggle ────────────────────────── */
-
-.svc-detail-addon-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: 12px;
-}
-
-.svc-detail-addon-status {
-  font-size: 0.88rem;
-  font-weight: 700;
-}
-
-.addon-status--on {
-  color: var(--green);
-}
-
-.addon-status--off {
-  color: var(--text-dim);
-}
-
-.svc-detail-option-card {
-  padding: 16px;
-  background: rgba(94, 173, 138, 0.06);
-  border: 1px solid rgba(94, 173, 138, 0.24);
-  border-radius: 10px;
-}
-
-.svc-detail-option-list {
-  margin: 10px 0 0;
-  padding-left: 20px;
-  color: var(--text-secondary);
-  font-size: 0.84rem;
-  line-height: 1.55;
-}
-
-.svc-detail-option-list li {
-  margin-bottom: 5px;
-}
-
-.svc-detail-option-privacy {
-  margin-top: 12px;
-  padding: 10px 12px;
-  border-left: 3px solid var(--accent-color);
-  background: rgba(94, 173, 138, 0.08);
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-size: 0.82rem;
-  line-height: 1.5;
-}
-
-.svc-detail-option-privacy strong {
-  color: var(--accent-color);
-}
-
-.svc-detail-related-feature-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.feature-conflict-warning {
-  margin-top: 8px;
-  margin-bottom: 8px;
-  padding: 10px 14px;
-  background-color: rgba(229, 165, 10, 0.1);
-  border: 1px solid rgba(229, 165, 10, 0.3);
-  border-radius: 8px;
-  font-size: 0.82rem;
-  color: var(--yellow);
-  font-weight: 600;
-}
-
-.btn-warning {
-  background-color: #d97706;
-  color: #fff;
-}
-
-.btn-warning:hover:not(:disabled) {
-  background-color: #b45309;
-}
-
-.svc-detail-restart-section {
-  border-top: 1px solid var(--border-color);
-  padding-top: 16px;
-}
-
-.svc-detail-restart-btn {
-  margin-top: 8px;
-}
-
-.svc-detail-restart-result {
-  margin-top: 12px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  font-size: 0.88rem;
-  line-height: 1.5;
-  display: none;
-}
-
-.svc-detail-restart-result.success {
-  background-color: rgba(109, 191, 139, 0.12);
-  border: 1px solid var(--green);
-  color: var(--green);
-  display: block;
-}
-
-.svc-detail-restart-result.error {
-  background-color: rgba(239, 68, 68, 0.12);
-  border: 1px solid #ef4444;
-  color: #f87171;
-  display: block;
-}
-
-
-/* ── Desktop launch buttons ──────────────────────────────────────── */
-
-.svc-detail-launch-row {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.svc-detail-launch-btn {
-  font-size: 0.85rem;
-  padding: 8px 18px;
-  cursor: pointer;
 }
@@ -23,13 +23,19 @@ const SUPPORT_TIMER_INTERVAL    = 1000;

 const CATEGORY_ORDER = [
  "infrastructure",
-  "bitcoin-base",
-  "bitcoin-apps",
+  "bitcoin",
  "communication",
  "apps",
  "nostr",
 ];

+/* The service catalog still distinguishes the Bitcoin foundation services
+   from the Bitcoin apps; the Hub shows them as one "Bitcoin" section. */
+const CATEGORY_ALIASES = {
+  "bitcoin-base": "bitcoin",
+  "bitcoin-apps": "bitcoin",
+};
+
 const FEATURE_SUBCATEGORY_LABELS = {
  "infrastructure": "🔧 Infrastructure",
  "bitcoin":        "₿ Bitcoin",
@@ -0,0 +1,445 @@
+"use strict";
+
+/* ── The Hub dashboard chrome ──────────────────────────────────────
+   Welcome dashboard (default view), category navigation, service
+   search, status cards, and the Systems Operational modal.
+
+   Everything lives in an IIFE so no globals leak into the other Hub
+   scripts; tiles.js calls window.dashboardServicesUpdated() whenever
+   the service list refreshes. */
+
+(function () {
+
+  var $nav = document.getElementById("sidebar-nav");
+  var $pageTitle = document.getElementById("page-title");
+  var $search = document.getElementById("search-input");
+  var $sysModal = document.getElementById("systems-modal");
+  var $sysBody = document.getElementById("systems-body");
+  var $welcome = document.getElementById("welcome-view");
+  var $tilesArea = document.getElementById("tiles-area");
+  var $wcSystems = document.getElementById("wc-systems");
+  var $wcMore = document.getElementById("wc-more");
+  var $greeting = document.getElementById("welcome-greeting");
+  var $welcomeRole = document.getElementById("welcome-role");
+  var $browseBtn = document.getElementById("welcome-browse-btn");
+
+  var _view = "dashboard";   // "dashboard" | "services"
+  var _cat = "all";
+  var _query = "";
+
+  var CAT_ICONS = {
+    "all":            "g-grid",
+    "infrastructure": "g-server",
+    "bitcoin":        "g-btc-sym",
+    "communication":  "g-chat",
+    "apps":           "g-dots",
+    "nostr":          "g-antenna",
+    "other":          "g-dots"
+  };
+
+  var CAT_FALLBACK_LABELS = {
+    "infrastructure": "Infrastructure",
+    "bitcoin":        "Bitcoin",
+    "communication":  "Communication",
+    "apps":           "Personal Apps",
+    "nostr":          "Nostr",
+    "other":          "Other"
+  };
+
+  /* Units that serve a domain — used to find a live diagnostics
+     checklist for the Systems Operational modal (order matters only
+     for which service is polled first). */
+  var DOMAIN_UNITS = [
+    "matrix-synapse.service",
+    "btcpayserver.service",
+    "vaultwarden.service",
+    "phpfpm-nextcloud.service",
+    "phpfpm-wordpress.service",
+    "haven-relay.service",
+    "livekit.service",
+    "albyhub.service"
+  ];
+
+  function icon(id) {
+    return '<svg><use href="#' + id + '"/></svg>';
+  }
+
+  function visibleServices() {
+    var services = (typeof _servicesCache !== "undefined" && _servicesCache) ? _servicesCache : [];
+    return services.filter(function (s) {
+      return s.category !== "support" && s.type !== "support";
+    });
+  }
+
+  /* ── Views ────────────────────────────────────────────────────── */
+
+  function setTitle(t) {
+    if ($pageTitle) $pageTitle.textContent = t;
+  }
+
+  function syncNav() {
+    if (!$nav) return;
+    $nav.querySelectorAll(".nav-item").forEach(function (b) {
+      var isActive;
+      if (b.dataset.cat === "__dash") isActive = (_view === "dashboard");
+      else isActive = (_view === "services" && b.dataset.cat === _cat);
+      b.classList.toggle("active", isActive);
+    });
+  }
+
+  function showDashboard() {
+    _view = "dashboard";
+    _cat = "all";
+    if ($welcome) $welcome.style.display = "";
+    if ($tilesArea) $tilesArea.style.display = "none";
+    setTitle("Dashboard");
+    syncNav();
+  }
+
+  function showServices(cat) {
+    _view = "services";
+    if (cat) _cat = cat;
+    if ($welcome) $welcome.style.display = "none";
+    if ($tilesArea) $tilesArea.style.display = "";
+    setTitle(_cat === "all" ? "All services" : catLabel(_cat));
+    syncNav();
+    applyFilter();
+  }
+
+  /* ── Category navigation ──────────────────────────────────────── */
+
+  function renderNav() {
+    if (!$nav) return;
+    var counts = {};
+    var order = [];
+    visibleServices().forEach(function (s) {
+      var cat = s.category || "other";
+      if (CATEGORY_ALIASES[cat]) cat = CATEGORY_ALIASES[cat];
+      if (!counts[cat]) { counts[cat] = 0; order.push(cat); }
+      counts[cat]++;
+    });
+    var total = visibleServices().length;
+
+    var html = '<div class="nav-label">Menu</div>';
+    html += '<button class="nav-item' + (_view === "dashboard" ? " active" : "") + '" data-cat="__dash" type="button">' +
+      icon("g-home") +
+      '<span class="nav-text">Dashboard</span>' +
+      '</button>';
+    html += '<div class="nav-label">Services</div>';
+    html += navItem("all", "All services", total);
+    order.forEach(function (cat) {
+      html += navItem(cat, catLabel(cat), counts[cat]);
+    });
+    $nav.innerHTML = html;
+
+    $nav.querySelectorAll(".nav-item").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        if (btn.dataset.cat === "__dash") showDashboard();
+        else showServices(btn.dataset.cat);
+      });
+    });
+  }
+
+  function navItem(cat, label, count) {
+    return '<button class="nav-item' + (_view === "services" && cat === _cat ? " active" : "") + '" data-cat="' + escHtml(cat) + '" type="button">' +
+      icon(CAT_ICONS[cat] || "g-dots") +
+      '<span class="nav-text">' + escHtml(label) + '</span>' +
+      '<span class="nav-count">' + count + '</span>' +
+      '</button>';
+  }
+
+  function catLabel(cat) {
+    if (typeof _categoryLabels !== "undefined" && _categoryLabels[cat]) return _categoryLabels[cat];
+    return CAT_FALLBACK_LABELS[cat] || cat;
+  }
+
+  /* ── Filtering (applies in the services view) ─────────────────── */
+
+  function applyFilter() {
+    if (_view !== "services") return;
+    var area = $tilesArea;
+    if (!area) return;
+    var q = _query.trim().toLowerCase();
+    area.querySelectorAll(".category-section").forEach(function (section) {
+      var catMatch = (_cat === "all") || (section.dataset.category === _cat);
+      var anyVisible = false;
+      section.querySelectorAll(".service-tile").forEach(function (tile) {
+        var nameEl = tile.querySelector(".tile-name");
+        var name = nameEl ? nameEl.textContent.toLowerCase() : "";
+        var match = catMatch && (!q || name.indexOf(q) !== -1);
+        tile.style.display = match ? "" : "none";
+        if (match) anyVisible = true;
+      });
+      section.style.display = (catMatch && (anyVisible || !q)) ? "" : "none";
+    });
+  }
+
+  if ($search) {
+    $search.addEventListener("input", function () {
+      // Searching implies browsing services — leave the welcome view.
+      if (_view === "dashboard" && $search.value) showServices("all");
+      _query = $search.value;
+      applyFilter();
+    });
+  }
+
+  if ($browseBtn) {
+    $browseBtn.addEventListener("click", function () { showServices("all"); });
+  }
+
+  /* ── Welcome header ───────────────────────────────────────────── */
+
+  function updateWelcomeMeta() {
+    if ($greeting) {
+      var h = new Date().getHours();
+      var g;
+      if (h >= 5 && h < 12) g = "Good morning";
+      else if (h >= 12 && h < 17) g = "Good afternoon";
+      else g = "Good evening";
+      $greeting.textContent = g;
+    }
+    if ($welcomeRole) {
+      $welcomeRole.textContent = (typeof window._roleLabel !== "undefined" && window._roleLabel) ? window._roleLabel : "";
+    }
+  }
+
+  /* ── Status cards ─────────────────────────────────────────────── */
+
+  function serviceCounts() {
+    var services = visibleServices();
+    var running = 0, attention = 0, off = 0;
+    var attentionNames = [], offNames = [];
+    services.forEach(function (s) {
+      if (!s.enabled) { off++; offNames.push(s.name); return; }
+      var h = s.health || s.status;
+      if (h === "needs_attention" || h === "failed") { attention++; attentionNames.push(s.name); }
+      else running++;
+    });
+    return { services: services, running: running, attention: attention, off: off, attentionNames: attentionNames, offNames: offNames };
+  }
+
+  function renderWidgets() {
+    if (!$wcSystems) return;
+    var c = serviceCounts();
+    if (!c.services.length) { $wcSystems.innerHTML = ""; if ($wcMore) $wcMore.innerHTML = ""; return; }
+
+    /* Systems operational */
+    var sub = '<b>' + c.running + '</b> running';
+    if (c.attention) sub += ' · <span class="warn">' + c.attention + ' needs attention</span>';
+    if (c.off) sub += ' · ' + c.off + ' off';
+    var attentionTitle = c.attention ? "Systems need attention" : "Systems operational";
+    $wcSystems.innerHTML =
+      '<div class="widget clickable" id="w-systems" role="button" tabindex="0" title="System status and router setup">' +
+        '<div class="widget-chip chip-green">' + icon("g-pulse") + '</div>' +
+        '<div class="w-body"><h3>' + attentionTitle + '</h3><div class="sub">' + sub + '</div></div>' +
+      '</div>';
+
+    var wSys = document.getElementById("w-systems");
+    if (wSys) {
+      wSys.addEventListener("click", openSystemsModal);
+      wSys.addEventListener("keydown", function (e) { if (e.key === "Enter") openSystemsModal(); });
+    }
+
+    if (!$wcMore) return;
+    var more = "";
+
+    /* Bitcoin Core sync */
+    var btc = null;
+    c.services.forEach(function (s) {
+      if (s.sync_ibd && s.enabled) btc = s;
+    });
+    if (btc) {
+      var pct = Math.round((btc.sync_progress || 0) * 100);
+      var blocks = btc.sync_blocks ? btc.sync_blocks.toLocaleString() : "—";
+      var eta = (typeof _calcBtcEta === "function") ? _calcBtcEta(btc.unit + "::" + btc.name, btc.sync_progress || 0) : "";
+      more +=
+        '<div class="widget clickable" id="w-btc" role="button" tabindex="0" title="' + escHtml(btc.name) + ' details">' +
+          '<div class="widget-chip chip-btc"><img src="/static/icons/' + escHtml(btc.icon) + '.svg" alt="" style="width:46px;height:46px;display:block;object-fit:contain"/></div>' +
+          '<div class="w-body"><h3>' + escHtml(btc.name) + ' — syncing timechain</h3>' +
+          '<div class="w-bar"><div class="w-bar-fill" style="width:' + pct + '%"></div></div>' +
+          '<div class="sub">Block <b>' + blocks + '</b> · ' + pct + '% · <span class="warn">' + escHtml(eta) + '</span></div></div>' +
+        '</div>';
+    } else {
+      var btcDone = null;
+      c.services.forEach(function (s) { if (s.unit === "bitcoind.service" && s.enabled) btcDone = s; });
+      if (btcDone) {
+        var blk = btcDone.sync_blocks ? btcDone.sync_blocks.toLocaleString() : "";
+        more +=
+          '<div class="widget clickable" id="w-btc" role="button" tabindex="0" title="' + escHtml(btcDone.name) + ' details">' +
+            '<div class="widget-chip chip-btc"><img src="/static/icons/' + escHtml(btcDone.icon) + '.svg" alt="" style="width:46px;height:46px;display:block;object-fit:contain"/></div>' +
+            '<div class="w-body"><h3>' + escHtml(btcDone.name) + '</h3><div class="sub"><span class="good">Fully synced</span>' + (blk ? ' · Block <b>' + blk + '</b>' : '') + '</div></div>' +
+          '</div>';
+      }
+    }
+
+    /* Updates — mirror the sidebar's read of the update state, so the card
+       never claims "up to date" while an update failed or needs a restart */
+    var upd = (typeof window._lastUpdateCheck === "object" && window._lastUpdateCheck) ? window._lastUpdateCheck : null;
+    var updStatus = (upd && upd.status) || "idle";
+    var updTitle, updSub, updChip;
+    if (updStatus === "failed") {
+      updTitle = "Update failed"; updSub = "Click to retry the update"; updChip = "chip-amber";
+    } else if (updStatus === "reboot_required") {
+      updTitle = "Restart required"; updSub = "Click to restart and finish the update"; updChip = "chip-amber";
+    } else if (updStatus === "running") {
+      updTitle = "Update in progress"; updSub = "Installing the new system generation"; updChip = "chip-amber";
+    } else if (upd && upd.available) {
+      updTitle = "Updates available"; updSub = "Click to review and update"; updChip = "chip-amber";
+    } else {
+      updTitle = "System is up to date"; updSub = "Sovran_SystemsOS keeps itself current"; updChip = "chip-green";
+    }
+    more +=
+      '<div class="widget clickable" id="w-updates" role="button" tabindex="0" title="Check for system updates">' +
+        '<div class="widget-chip ' + updChip + '">' + icon("g-update") + '</div>' +
+        '<div class="w-body"><h3>' + updTitle + '</h3>' +
+        '<div class="sub">' + updSub + '</div></div>' +
+      '</div>';
+
+    $wcMore.innerHTML = more;
+
+    var wBtc = document.getElementById("w-btc");
+    if (wBtc) {
+      var svc = btc || btcDone;
+      if (svc) {
+        wBtc.addEventListener("click", function () { openServiceDetailModal(svc.unit, svc.name, svc.icon); });
+        wBtc.addEventListener("keydown", function (e) { if (e.key === "Enter") openServiceDetailModal(svc.unit, svc.name, svc.icon); });
+      }
+    }
+    var wUpd = document.getElementById("w-updates");
+    if (wUpd) {
+      wUpd.addEventListener("click", function () { openUpdateModal(); });
+      wUpd.addEventListener("keydown", function (e) { if (e.key === "Enter") openUpdateModal(); });
+    }
+  }
+
+  /* ── Systems Operational modal ────────────────────────────────── */
+
+  function isNodeRole() {
+    return (typeof _currentRole !== "undefined" && _currentRole === "node");
+  }
+
+  function hasEnabledDomainService(services) {
+    return DOMAIN_UNITS.some(function (u) {
+      return services.some(function (s) { return s.unit === u && s.enabled; });
+    });
+  }
+
+  function whoUsesPorts() {
+    if (isNodeRole()) {
+      return 'On this <strong>Bitcoin Node</strong> install, <strong>BTCPay Server</strong> and <strong>Lightning Wallet Connections (LNURL)</strong> are the domain services that use these ports.';
+    }
+    return 'All your domain services share ports 80 and 443 — Matrix, BTCPay Server, VaultWarden, Nextcloud, WordPress, Haven Relay, Lightning Wallet Connections, and Element Calling.';
+  }
+
+  function step(n, title, sub, value) {
+    return '<div class="sysstep"><div class="sysnum">' + n + '</div><div class="sysstep-x">' +
+      '<div class="sysstep-t">' + title + (sub ? ' <span class="sysstep-sub">· ' + sub + '</span>' : '') + '</div>' +
+      (value ? '<div class="sysval"><span class="sysval-text">' + value + '</span></div>' : '') +
+      '</div></div>';
+  }
+
+  function openSystemsModal() {
+    if (!$sysModal || !$sysBody) return;
+    var c = serviceCounts();
+
+    var html = "";
+
+    /* System status */
+    html += '<div class="sysmodal-card">' +
+      '<div class="sysmodal-card-title">' + icon("g-pulse") + 'System Status</div>' +
+      step(1, "Services running", "", String(c.running)) +
+      step(2, "Needs attention", "", c.attention ? escHtml(c.attentionNames.join(", ")) : "None") +
+      step(3, "Turned off", "", c.off ? escHtml(c.offNames.join(", ")) : "None") +
+      '</div>';
+
+    /* Router — a simple open / not-open verdict. How to open the ports is
+       covered during onboarding, so the modal does not repeat instructions.
+       When no domain service is enabled (a fresh Desktop-only install, a
+       Node with BTCPay/LNURL off, or everything turned off), there is
+       nothing to check on the router — say so instead of listing services
+       this machine does not have. */
+    if (!hasEnabledDomainService(c.services)) {
+      var noRouterDesc = isNodeRole()
+        ? 'Ports 80 and 443 only need to be forwarded on your router if you turn on <strong>BTCPay Server</strong> or <strong>Lightning Wallet Connections (LNURL)</strong>. If you enable one of them, come back here to check your ports.'
+        : 'None of your services need ports forwarded from your router right now. If you turn on a service that uses a domain, come back here to check your ports.';
+      html += '<div class="sysmodal-card">' +
+        '<div class="sysmodal-card-title">' + icon("g-wifi") + 'Router</div>' +
+        '<div class="sysnote"><div class="sysnote-title">' + icon("g-check") + 'No router setup needed yet</div>' +
+        '<div class="sysnote-desc">' + noRouterDesc + '</div></div>' +
+        '</div>';
+    } else {
+      html += '<div class="sysmodal-card" id="sys-ports-card" style="display:none">' +
+        '<div class="sysmodal-card-title">' + icon("g-wifi") + 'Router</div>' +
+        '<div id="sys-ports-status"><div class="sysfineprint">Checking…</div></div>' +
+        '</div>';
+    }
+
+    /* Who uses these ports (only meaningful when a domain service is
+       actually enabled — otherwise the router note above covers it) */
+    if (hasEnabledDomainService(c.services)) {
+      html += '<div class="sysnote" style="margin-top:14px">' +
+        '<div class="sysnote-title">' + icon("g-antenna") + 'Who uses these ports</div>' +
+        '<div class="sysnote-desc">' + whoUsesPorts() + '</div></div>';
+    }
+
+    $sysBody.innerHTML = html;
+    $sysModal.classList.add("open");
+
+    /* Poll the first configured domain service and reduce its diagnostics
+       to one verdict: the ports are open or they are not. */
+    var portsCard = document.getElementById("sys-ports-card");
+    var portsEl = document.getElementById("sys-ports-status");
+    var units = DOMAIN_UNITS.filter(function (u) {
+      return c.services.some(function (s) { return s.unit === u && s.enabled; });
+    });
+    if (!units.length || !portsCard || !portsEl) return;
+    portsCard.style.display = "";
+
+    apiFetch("/api/service-detail/" + encodeURIComponent(units[0]))
+      .then(function (data) {
+        var steps = (data && data.domain_check_steps) || [];
+        var portsStep = null;
+        steps.forEach(function (s) {
+          if (Number(s.step) === 3 || /ports?\s*80/i.test(s.label || "")) portsStep = s;
+        });
+        if (!portsStep) { portsCard.style.display = "none"; return; }
+        if (portsStep.status === "ok") {
+          portsEl.innerHTML = '<div class="svc-detail-status" style="font-size:0.92rem"><span class="status-dot active"></span>Ports 80 and 443 are open</div>';
+        } else {
+          portsEl.innerHTML = '<div class="svc-detail-status" style="font-size:0.92rem"><span class="status-dot failed"></span>Ports 80 and 443 are not open</div>';
+        }
+      })
+      .catch(function () {
+        portsCard.style.display = "none";
+      });
+  }
+
+  function closeSystemsModal() {
+    if ($sysModal) $sysModal.classList.remove("open");
+  }
+
+  var sysClose = document.getElementById("systems-close-btn");
+  if (sysClose) sysClose.addEventListener("click", closeSystemsModal);
+  if ($sysModal) {
+    $sysModal.addEventListener("click", function (e) {
+      if (e.target === $sysModal) closeSystemsModal();
+    });
+    $sysModal.addEventListener("keydown", function (e) {
+      if (e.key === "Escape") closeSystemsModal();
+    });
+  }
+
+  /* ── Public hook for tiles.js ────────────────────────────────── */
+
+  window.dashboardServicesUpdated = function () {
+    renderNav();
+    updateWelcomeMeta();
+    renderWidgets();
+    applyFilter();
+  };
+
+  // Initial view
+  showDashboard();
+  updateWelcomeMeta();
+
+})();
@@ -4,6 +4,8 @@

 // if ($updateBtn) $updateBtn.addEventListener("click", openUpdateModal); // moved to sidebar in tiles.js
 if ($btnCloseModal) $btnCloseModal.addEventListener("click", closeUpdateModal);
+if ($btnCheckAgain) $btnCheckAgain.addEventListener("click", function() { openUpdateModal(); });
+if ($updateCloseBtn) $updateCloseBtn.addEventListener("click", closeUpdateModal);
 if ($btnReboot) $btnReboot.addEventListener("click", doReboot);
 if ($btnSave) $btnSave.addEventListener("click", saveErrorReport);
 if ($btnRetryUpdate) $btnRetryUpdate.addEventListener("click", retryUpdateStatus);
@@ -28,6 +30,7 @@ if ($logoutBtn) $logoutBtn.addEventListener("click", function () {

 // Rebuild modal
 if ($rebuildClose) $rebuildClose.addEventListener("click", closeRebuildModal);
+if ($rebuildCloseHdr) $rebuildCloseHdr.addEventListener("click", closeRebuildModal);
 if ($rebuildReboot) $rebuildReboot.addEventListener("click", doReboot);
 if ($rebuildSave) $rebuildSave.addEventListener("click", saveRebuildErrorReport);
 if ($rebuildModal) $rebuildModal.addEventListener("click", function(e) { if (e.target === $rebuildModal) closeRebuildModal(); });
@@ -175,9 +178,9 @@ function showSecurityBanner() {
    '</div>' +
    '<button class="security-banner-dismiss" id="security-banner-dismiss-btn" title="Dismiss">\u2715</button>';

-  var mainContent = document.querySelector(".main-content");
-  if (mainContent) {
-    mainContent.insertAdjacentElement("beforebegin", banner);
+  var contentArea = document.querySelector(".content");
+  if (contentArea) {
+    contentArea.insertAdjacentElement("afterbegin", banner);
  } else {
    document.body.insertAdjacentElement("afterbegin", banner);
  }
@@ -239,10 +242,11 @@ async function init() {
    }
    var badge = document.getElementById("role-badge");
    if (badge && cfg.role_label) badge.textContent = cfg.role_label;
+    window._roleLabel = cfg.role_label || "";

-    await refreshServices();
    loadNetwork();
    checkUpdates();
+    await refreshServices();

    setInterval(refreshServices, POLL_INTERVAL_SERVICES);
    setInterval(checkUpdates, POLL_INTERVAL_UPDATES);
@@ -252,9 +256,9 @@ async function init() {
    }
    loadAutolaunchToggle();
  } catch (_) {
-    await refreshServices();
    loadNetwork();
    checkUpdates();
+    await refreshServices();
    setInterval(refreshServices, POLL_INTERVAL_SERVICES);
    setInterval(checkUpdates, POLL_INTERVAL_UPDATES);
    loadAutolaunchToggle();
@@ -97,7 +97,6 @@ function openDomainSetupModal(feat, onSaved) {
    nwcWarning +
    renderDomainNeedsHtml({ serviceName: feat.name, hostExample: hostExample, purpose: purpose }) +
    renderNjallaStepsHtml({ hostExample: hostExample, pasteHint: "below" }) +
-    '<div class="onboarding-port-warn" id="domain-router-box" style="margin-top:12px;"></div>' +
    '<p style="margin-top:10px;">Enter the address for this service and paste the update command from Njal.la.</p>' +
    '</div>' +
    '<div class="domain-field-group"><label class="domain-field-label" for="domain-subdomain-input">Service address (e.g. ' + domainLabelExample + '):</label><input class="domain-field-input" type="text" id="domain-subdomain-input" placeholder="' + domainPlaceholder + '" /></div>' +
@@ -144,8 +143,6 @@ function openDomainSetupModal(feat, onSaved) {

  $domainSetupModal.classList.add("open");

-  // Fill the router port-forwarding box with this computer's LAN IP (best-effort)
-  renderRouterPortsBox("domain-router-box");
 }

 function openDomainReconfigureModal(feat, existingDomain, onSaved) {
@@ -193,9 +190,7 @@ function openDomainReconfigureModal(feat, existingDomain, onSaved) {
    '<span style="display:inline-block;margin-top:4px;padding:4px 10px;background:var(--card-color);border:1px solid var(--border-color);border-radius:6px;font-family:monospace;font-size:1em;font-weight:700;">' + escHtml(externalIp) + '</span></li>' +
    '<li>If the IP is wrong or the record is missing, update it</li>' +
    '<li>If you changed the DDNS curl command, paste the updated one below</li>' +
-    '<li>Confirm ports <strong>80</strong> and <strong>443</strong> (TCP) are still forwarded on your router to this computer — see the reminder below:</li>' +
    '</ol>' +
-    '<div class="onboarding-port-warn" id="domain-router-box" style="margin-top:12px;"></div>' +
    '</div>' +
    '<div class="domain-field-group"><label class="domain-field-label" for="domain-subdomain-input">Service domain (e.g. ' + domainLabelExample + '):</label><input class="domain-field-input" type="text" id="domain-subdomain-input" placeholder="' + domainPlaceholder + '" value="' + escHtml(currentDomain) + '" /></div>' +
    '<div class="domain-field-group"><label class="domain-field-label" for="domain-ddns-input">Njal.la Dynamic DNS Update Command:</label><input class="domain-field-input" type="text" id="domain-ddns-input" placeholder="curl &quot;https://njal.la/update/?h=' + domainPlaceholder + '&amp;k=abc123&amp;auto&quot;" /><p class="domain-field-hint">ℹ Paste the full curl command from your Njal.la dashboard\'s Dynamic record</p></div>' +
@@ -241,8 +236,6 @@ function openDomainReconfigureModal(feat, existingDomain, onSaved) {

  $domainSetupModal.classList.add("open");

-  // Fill the router port-forwarding box with this computer's LAN IP (best-effort)
-  renderRouterPortsBox("domain-router-box");
 }

 function closeDomainSetupModal() {
@@ -635,16 +628,16 @@ async function loadAutolaunchToggle() {
 }

 function renderAutolaunchToggle(enabled) {
-  // Remove existing section if any
-  var old = $sidebarFeatures.querySelector(".autolaunch-section");
+  // The preference lives in the Systems Operational modal (moved from the sidebar)
+  var slot = document.getElementById("autolaunch-slot");
+  if (!slot) return;
+  var old = slot.querySelector(".autolaunch-section");
  if (old) old.parentNode.removeChild(old);

  var section = document.createElement("div");
  section.className = "category-section autolaunch-section";

  section.innerHTML =
-    '<div class="section-header">Preferences</div>' +
-    '<hr class="section-divider" />' +
    '<div class="feature-card">' +
      '<div class="feature-card-top">' +
        '<div class="feature-card-info">' +
@@ -658,7 +651,7 @@ function renderAutolaunchToggle(enabled) {
      '</div>' +
    '</div>';

-  $sidebarFeatures.appendChild(section);
+  slot.appendChild(section);

  var input = document.getElementById("autolaunch-toggle-input");
  var label = document.getElementById("autolaunch-toggle-label");
@@ -2,6 +2,35 @@

 // ── Rebuild modal ─────────────────────────────────────────────────

+// Status line + header pill for the rebuild dialog (same presentation
+// contract as the update dialog's _setUpdateStatus).
+function _setRebuildStatus(text) {
+  if ($rebuildStatus) $rebuildStatus.textContent = text;
+  if ($rebuildPill) {
+    var cls = "upd-pill";
+    var html;
+    if (text.charAt(0) === "✓") {
+      if (text.indexOf("restart required") !== -1) {
+        cls += " st-needs-attention"; html = '<span class="status-dot needs-attention pulse"></span>Restart required';
+      } else {
+        cls += " st-active"; html = '<span class="status-dot active"></span>Done';
+      }
+    } else if (text.charAt(0) === "✗") {
+      cls += " st-failed"; html = '<span class="status-dot failed"></span>Failed';
+    } else {
+      cls += " st-loading"; html = '<span class="status-dot loading pulse"></span>Applying…';
+    }
+    $rebuildPill.className = cls;
+    $rebuildPill.innerHTML = html;
+  }
+  if ($rebuildStatus) {
+    var msg = "update-status-msg";
+    if (text.charAt(0) === "✓") $rebuildStatus.className = (text.indexOf("restart required") !== -1) ? msg + " st-warn" : msg + " st-ok";
+    else if (text.charAt(0) === "✗") $rebuildStatus.className = msg + " st-err";
+    else $rebuildStatus.className = msg;
+  }
+}
+
 function openRebuildModal() {
  if (!$rebuildModal) return;
  _rebuildLog = "";
@@ -13,11 +42,12 @@ function openRebuildModal() {
  if ($rebuildLog) { $rebuildLog.textContent = ""; $rebuildLog.style.display = "none"; }
  var action = _rebuildIsEnabling ? "Enabling" : "Disabling";
  var label = _rebuildFeatureName || "feature";
-  if ($rebuildStatus) $rebuildStatus.textContent = action + " " + label + "…";
+  _setRebuildStatus(action + " " + label + "…");
  if ($rebuildSpinner) $rebuildSpinner.classList.add("spinning");
  if ($rebuildReboot) $rebuildReboot.style.display = "none";
  if ($rebuildSave) $rebuildSave.style.display = "none";
  if ($rebuildClose) $rebuildClose.disabled = true;
+  if ($rebuildCloseHdr) $rebuildCloseHdr.disabled = true;
  $rebuildModal.classList.add("open");
  // Delay first poll slightly to let the rebuild service start and clear stale log
  setTimeout(startRebuildPoll, 1500);
@@ -76,7 +106,7 @@ async function pollRebuildStatus() {
      window.location.reload();
      return;
    }
-    if (!_rebuildServerDown) { _rebuildServerDown = true; if ($rebuildStatus) $rebuildStatus.textContent = "Applying changes…"; }
+    if (!_rebuildServerDown) { _rebuildServerDown = true; _setRebuildStatus("Applying changes…"); }
  } finally {
    _rebuildPollInFlight = false;
  }
@@ -85,15 +115,16 @@ async function pollRebuildStatus() {
 function onRebuildDone(result) {
  if ($rebuildSpinner) $rebuildSpinner.classList.remove("spinning");
  if ($rebuildClose) $rebuildClose.disabled = false;
+  if ($rebuildCloseHdr) $rebuildCloseHdr.disabled = false;
  if (result === true) {
-    if ($rebuildStatus) $rebuildStatus.textContent = "✓ Done";
+    _setRebuildStatus("✓ Done");
    // Auto-reload the page after a short delay so tiles and toggles reflect the new state
    setTimeout(function() { window.location.reload(); }, 1200);
  } else if (result === "reboot_required") {
-    if ($rebuildStatus) $rebuildStatus.textContent = "✓ Done — restart required";
+    _setRebuildStatus("✓ Done — restart required");
    if ($rebuildReboot) $rebuildReboot.style.display = "inline-flex";
  } else {
-    if ($rebuildStatus) $rebuildStatus.textContent = "✗ Something went wrong";
+    _setRebuildStatus("✗ Something went wrong");
    if ($rebuildSave) $rebuildSave.style.display = "inline-flex";
    if ($rebuildReboot) $rebuildReboot.style.display = "inline-flex";
  }
@@ -5,7 +5,12 @@
 function openSecurityModal() {
  if ($supportModal) $supportModal.classList.add("open");
  var title = document.getElementById("support-modal-title");
-  if (title) title.textContent = "\uD83D\uDEE1 Security";
+  if (title) title.textContent = "Security";
+  var chip = document.getElementById("support-modal-chip");
+  if (chip) {
+    var use = chip.querySelector("use");
+    if (use) use.setAttribute("href", "#g-shield-check");
+  }

  if ($supportBody) {
    $supportBody.innerHTML =
@@ -696,6 +696,17 @@ async function openServiceDetailModal(unit, name, icon) {
      : (data.health || data.status);
    var sc = statusClass(effectiveHealth);
    var st = statusText(effectiveHealth, effectiveEnabled);
+    if ($credsTitle) {
+      var existingPill = $credsTitle.querySelector(".creds-title-status-pill");
+      if (!existingPill) {
+        var pill = document.createElement("span");
+        pill.className = "creds-title-status-pill";
+        $credsTitle.appendChild(pill);
+        existingPill = pill;
+      }
+      existingPill.className = "creds-title-status-pill st-" + sc;
+      existingPill.textContent = st;
+    }
    addSetup('<div class="svc-detail-section">' +
      '<div class="svc-detail-section-title">Status</div>' +
      '<div class="svc-detail-status">' +
@@ -707,19 +718,27 @@ async function openServiceDetailModal(unit, name, icon) {

    // Section C: Domain diagnostics (domain services)
    if (data.needs_domain) {
-      var steps = data.domain_check_steps || [];
+      // The Hub shows only the domain-active step here; the full DNS and
+      // port diagnostics live in the Systems Operational modal.
+      var steps = (data.domain_check_steps || []).filter(function (s) {
+        return Number(s.step) === 1;
+      });
      var stepsHtml = "";
      steps.forEach(function(step) {
-        var iconLabel = "—";
-        if (step.status === "ok") iconLabel = "✅";
-        else if (step.status === "error") iconLabel = "❌";
-        else if (step.status === "warning") iconLabel = "⚠️";
-        else if (step.status === "skipped") iconLabel = "⏭️";
        var detail = escHtml(step.detail || "").replace(/\n/g, "<br>");
-        stepsHtml += '<div class="svc-detail-troubleshoot" style="margin-bottom:10px">' +
-          '<strong>' + iconLabel + ' Step ' + escHtml(String(step.step)) + ': ' + escHtml(step.label || "") + '</strong>' +
-          (detail ? '<div style="margin-top:6px">' + detail + '</div>' : '') +
-          '</div>';
+        if (step.status === "ok") {
+          // Not a checklist anymore — just note that the domain works.
+          stepsHtml += '<div class="svc-detail-status"><span class="status-dot active"></span>Domain is active</div>' +
+            (detail ? '<div class="svc-detail-desc" style="margin-top:6px">' + detail + '</div>' : '');
+        } else {
+          var iconLabel = "❌";
+          if (step.status === "warning") iconLabel = "⚠️";
+          else if (step.status === "skipped") iconLabel = "⏭️";
+          stepsHtml += '<div class="svc-detail-troubleshoot" style="margin-bottom:10px">' +
+            '<strong>' + iconLabel + ' ' + escHtml(step.label || "Domain not configured") + '</strong>' +
+            (detail ? '<div style="margin-top:6px">' + detail + '</div>' : '') +
+            '</div>';
+        }
      });

      var domainActionHtml = "";
@@ -731,11 +750,22 @@ async function openServiceDetailModal(unit, name, icon) {
      }

      addSetup('<div class="svc-detail-section">' +
-        '<div class="svc-detail-section-title">Domain Diagnostic Checklist</div>' +
+        '<div class="svc-detail-section-title">Domain Status</div>' +
        stepsHtml +
        domainActionHtml +
        '</div>');

+      // Node-only role: BTCPay Server and Lightning Wallet Connections are
+      // the domain services — surface the router task here. (Desktop + Server
+      // set this up during onboarding; Systems Operational shows it too.)
+      if (typeof _currentRole !== "undefined" && _currentRole === "node" &&
+          (unit === "btcpayserver.service" || unit === "albyhub.service")) {
+        addSetup('<div class="svc-detail-section">' +
+          '<div class="svc-detail-section-title">Ports to Forward in Your Router</div>' +
+          '<div class="onboarding-port-warn" id="svc-node-router-box"></div>' +
+          '</div>');
+      }
+
      if (data.router_ports && data.router_ports.length > 0) {
        var trimmedInternalIp = data.internal_ip ? String(data.internal_ip).trim() : "";
        addSetup('<div class="svc-detail-section">' +
@@ -993,6 +1023,9 @@ async function openServiceDetailModal(unit, name, icon) {
    $credsBody.innerHTML = html;
    if (isNwc) _nwcWireTabs();
    _attachCopyHandlers($credsBody);
+    if (document.getElementById("svc-node-router-box")) {
+      renderRouterPortsBox("svc-node-router-box");
+    }
    if (_isNwcServiceUnit(unit) && (effectiveEnabled || data.enabled)) {
      await _nwcInitWalletFlow(unit, name, icon);
      var nwcRtlBtn = document.getElementById("nwc-open-rtl-btn");
@@ -55,6 +55,10 @@ const $btnSave        = document.getElementById("btn-save-report");
 const $btnRetryUpdate = document.getElementById("btn-retry-update-status");
 const $btnRetryRun    = document.getElementById("btn-retry-update");
 const $btnCloseModal  = document.getElementById("btn-close-modal");
+const $btnCheckAgain  = document.getElementById("btn-check-again");
+const $updateCloseBtn = document.getElementById("update-close-btn");
+const $updPill        = document.getElementById("upd-pill");
+const $updLastChecked = document.getElementById("upd-last-checked");

 const $rebootOverlay  = document.getElementById("reboot-overlay");
 const $rebootMainCard = document.getElementById("reboot-main-card");
@@ -80,6 +84,8 @@ const $rebuildLog      = document.getElementById("rebuild-log");
 const $rebuildReboot   = document.getElementById("rebuild-reboot-btn");
 const $rebuildSave     = document.getElementById("rebuild-save-report");
 const $rebuildClose    = document.getElementById("rebuild-close-btn");
+const $rebuildCloseHdr = document.getElementById("rebuild-close-hdr");
+const $rebuildPill     = document.getElementById("rebuild-pill");

 // Feature Manager — domain setup modal
 const $domainSetupModal = document.getElementById("domain-setup-modal");
@@ -5,6 +5,14 @@
 async function openSupportModal() {
  if (!$supportModal) return;
  $supportModal.classList.add("open");
+  // The dialog is shared with Security — always restore its identity
+  var title = document.getElementById("support-modal-title");
+  if (title) title.textContent = "Tech Support";
+  var chip = document.getElementById("support-modal-chip");
+  if (chip) {
+    var use = chip.querySelector("use");
+    if (use) use.setAttribute("href", "#g-lifebuoy");
+  }
  $supportBody.innerHTML = '<p class="creds-loading">Checking support status…</p>';
  try {
    var status = await apiFetch("/api/support/status");
@@ -25,6 +25,7 @@ function buildTiles(services, categoryLabels) {
      continue;
    }
    var cat = svc.category || "other";
+    if (CATEGORY_ALIASES[cat]) cat = CATEGORY_ALIASES[cat];
    if (!grouped[cat]) grouped[cat] = [];
    grouped[cat].push(svc);
  }
@@ -52,6 +53,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,20 +64,22 @@ 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-update"/></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>' +
    '</span>';
  sidebarUpdateBtn.addEventListener("click", function() { openUpdateModal(); });
  $sidebarSupport.appendChild(sidebarUpdateBtn);
+  // checkUpdates may already have run before the sidebar was built
+  applyUpdateSidebarState(window._lastUpdateCheck);

  for (var i = 0; i < supportServices.length; i++) {
    var svc = supportServices[i];
    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 +92,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 +104,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 +117,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 +241,7 @@ function updateTiles(services) {
      if (text) text.textContent = st;
    }
  }
+  if (typeof window.dashboardServicesUpdated === "function") window.dashboardServicesUpdated();
 }

 // ── Service polling ───────────────────────────────────────────────
@@ -248,6 +253,10 @@ async function refreshServices() {
    var services = await apiFetch("/api/services");
    if (_firstLoad) { buildTiles(services, _categoryLabels); _firstLoad = false; }
    else { updateTiles(services); }
+    // Service data has rendered — the dashboard is ready; lift the boot
+    // splash (no-op once lifted). Note: dashboardServicesUpdated may also
+    // fire from checkUpdates before this resolves, so the lift lives here.
+    if (typeof window.__liftAppSplash === "function") window.__liftAppSplash();
  } catch (err) { console.warn("Failed to fetch services:", err); }
 }

@@ -267,37 +276,48 @@ async function loadNetwork() {

 // ── Update check ──────────────────────────────────────────────────

+// Paint the sidebar Update button from the last known update state.
+// Called after each check AND when the button is (re)built, so the hint
+// is correct regardless of which finishes first at startup.
+function applyUpdateSidebarState(data) {
+  if (!data) return;
+  var sidebarUpdateBtn = document.getElementById("sidebar-btn-update");
+  var sidebarUpdateHint = document.getElementById("sidebar-update-hint");
+  if (!sidebarUpdateBtn) return;
+  var hasUpdates = !!data.available;
+  var updateStatus = data.status || "idle";
+  if (updateStatus === "failed") {
+    // Last update errored and did not apply — surface it as a persistent
+    // red banner that re-opens the failed run with a "Retry Update" action.
+    sidebarUpdateBtn.style.borderColor = "#f66151";
+    sidebarUpdateBtn.style.backgroundColor = "rgba(246, 97, 81, 0.10)";
+    if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Update failed — click to retry";
+  } else if (updateStatus === "reboot_required") {
+    sidebarUpdateBtn.style.borderColor = "#e9b64a";
+    sidebarUpdateBtn.style.backgroundColor = "rgba(233, 182, 74, 0.10)";
+    if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Restart required";
+  } else if (updateStatus === "running") {
+    sidebarUpdateBtn.style.borderColor = "#78aeed";
+    sidebarUpdateBtn.style.backgroundColor = "rgba(120, 174, 237, 0.10)";
+    if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Update in progress…";
+  } else if (hasUpdates) {
+    sidebarUpdateBtn.style.borderColor = "#3ecf8e";
+    sidebarUpdateBtn.style.backgroundColor = "rgba(62, 207, 142, 0.10)";
+    if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Updates available!";
+  } else {
+    sidebarUpdateBtn.style.borderColor = "";
+    sidebarUpdateBtn.style.backgroundColor = "";
+    if (sidebarUpdateHint) sidebarUpdateHint.textContent = "System is up to date";
+  }
+}
+
 async function checkUpdates() {
  try {
    var data = await apiFetch("/api/updates/check");
-    var hasUpdates = !!data.available;
-    var updateStatus = data.status || "idle";
-    var sidebarUpdateBtn = document.getElementById("sidebar-btn-update");
-    var sidebarUpdateHint = document.getElementById("sidebar-update-hint");
-    if (sidebarUpdateBtn) {
-      if (updateStatus === "failed") {
-        // Last update errored and did not apply — surface it as a persistent
-        // red banner that re-opens the failed run with a "Retry Update" action.
-        sidebarUpdateBtn.style.borderColor = "#e01b24";
-        sidebarUpdateBtn.style.backgroundColor = "rgba(224, 27, 36, 0.10)";
-        if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Update failed — click to retry";
-      } else if (updateStatus === "reboot_required") {
-        sidebarUpdateBtn.style.borderColor = "#e5a50a";
-        sidebarUpdateBtn.style.backgroundColor = "rgba(229, 165, 10, 0.10)";
-        if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Restart required";
-      } else if (updateStatus === "running") {
-        sidebarUpdateBtn.style.borderColor = "#3584e4";
-        sidebarUpdateBtn.style.backgroundColor = "rgba(53, 132, 228, 0.10)";
-        if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Update in progress…";
-      } else if (hasUpdates) {
-        sidebarUpdateBtn.style.borderColor = "#2ec27e";
-        sidebarUpdateBtn.style.backgroundColor = "rgba(46, 194, 126, 0.08)";
-        if (sidebarUpdateHint) sidebarUpdateHint.textContent = "Updates available!";
-      } else {
-        sidebarUpdateBtn.style.borderColor = "";
-        sidebarUpdateBtn.style.backgroundColor = "";
-        if (sidebarUpdateHint) sidebarUpdateHint.textContent = "System is up to date";
-      }
-    }
+    window._lastUpdateCheck = data;
+    if (typeof markUpdateChecked === "function") markUpdateChecked();
+    applyUpdateSidebarState(data);
+    // The welcome dashboard's updates card reads this state
+    if (typeof window.dashboardServicesUpdated === "function") window.dashboardServicesUpdated();
  } catch (_) {}
 }
@@ -2,9 +2,88 @@

 // ── Update modal ──────────────────────────────────────────────────

+// ── Update dialog presentation (pill, status line, last-checked) ──
+
+var _updateLastCheckTs = 0;
+
+function markUpdateChecked() {
+  _updateLastCheckTs = Date.now();
+}
+
+function _updateLastCheckedText() {
+  if (!$updLastChecked) return;
+  if (!_updateLastCheckTs) { $updLastChecked.textContent = "—"; return; }
+  var s = Math.floor((Date.now() - _updateLastCheckTs) / 1000);
+  if (s < 30) { $updLastChecked.textContent = "just now"; return; }
+  var m = Math.floor(s / 60);
+  if (m < 60) { $updLastChecked.textContent = m + (m === 1 ? " minute ago" : " minutes ago"); return; }
+  var h = Math.floor(m / 60);
+  $updLastChecked.textContent = h + (h === 1 ? " hour ago" : " hours ago");
+}
+
+function setUpdatePill(state) {
+  if (!$updPill) return;
+  var cls = "upd-pill";
+  var html;
+  if (state === "checking") {
+    cls += " st-loading"; html = '<span class="status-dot loading pulse"></span>Checking…';
+  } else if (state === "uptodate") {
+    cls += " st-active"; html = '<span class="status-dot active"></span>Up to date';
+  } else if (state === "complete") {
+    cls += " st-active"; html = '<span class="status-dot active"></span>Update complete';
+  } else if (state === "reboot") {
+    cls += " st-needs-attention"; html = '<span class="status-dot needs-attention pulse"></span>Restart required';
+  } else if (state === "failed") {
+    cls += " st-failed"; html = '<span class="status-dot failed"></span>Update failed';
+  } else if (state === "unavailable") {
+    cls += " st-needs-attention"; html = '<span class="status-dot needs-attention pulse"></span>Status unknown';
+  } else {
+    cls += " st-loading"; html = '<span class="status-dot loading pulse"></span>Updating…';
+  }
+  $updPill.className = cls;
+  $updPill.innerHTML = html;
+}
+
+// Single place that reflects update state in the dialog: status message
+// text + color, header pill, and the Close / Check again availability.
+function _setUpdateStatus(text) {
+  if ($modalStatus) $modalStatus.textContent = text;
+  var state;
+  if (text.charAt(0) === "✗") state = "failed";
+  else if (text.indexOf("restart required") !== -1) state = "reboot";
+  else if (text.charAt(0) === "✓") state = (text.indexOf("already up to date") !== -1) ? "uptodate" : "complete";
+  else if (text.indexOf("unavailable") !== -1) state = "unavailable";
+  else if (text.indexOf("Checking") === 0) state = "checking";
+  else state = "updating";
+  if ($modalStatus) {
+    var msg = "update-status-msg";
+    if (state === "failed") $modalStatus.className = msg + " st-err";
+    else if (state === "reboot" || state === "unavailable") $modalStatus.className = msg + " st-warn";
+    else if (state === "uptodate" || state === "complete") $modalStatus.className = msg + " st-ok";
+    else $modalStatus.className = msg;
+    // In the up-to-date state the green console line already says it —
+    // the mockup shows it exactly once.
+    $modalStatus.style.display = (state === "uptodate") ? "none" : "";
+  }
+  setUpdatePill(state);
+  var interactive = (state !== "updating");
+  if ($updateCloseBtn) $updateCloseBtn.disabled = !interactive;
+  if ($btnCheckAgain) {
+    $btnCheckAgain.disabled = (state === "checking" || state === "updating");
+    $btnCheckAgain.style.display = interactive ? "inline-flex" : "none";
+  }
+  _updateLastCheckedText();
+}
+
 async function openUpdateModal() {
  if (!$modal) return;

+  // Open immediately in a checking state; the status/check requests below
+  // fill in the real result (mockup: auto-check on open).
+  $modal.classList.add("open");
+  if ($modalLog) $modalLog.innerHTML = '<span class="dim">Checking for updates…</span>';
+  _setUpdateStatus("Checking for updates…");
+
  // Reattach before checking for new updates. This makes a browser reload,
  // RDP reconnect, or suspended tab recover the authoritative systemd-backed
  // state instead of starting over or claiming the system is merely up to date.
@@ -31,6 +110,7 @@ async function openUpdateModal() {
    STATUS_POLL_FETCH_TIMEOUT
  )
    .then(function(data) {
+      markUpdateChecked();
      if (!data.available) {
        stopUpdatePoll();
        _updateLog = "";
@@ -38,8 +118,8 @@ async function openUpdateModal() {
        _updateVisibleLogChars = 0;
        _updateFinished = true;
        _updateStatusUnavailable = false;
-        if ($modalLog) $modalLog.textContent = "";
-        if ($modalStatus) $modalStatus.textContent = "✓ System is already up to date";
+        if ($modalLog) $modalLog.innerHTML = '<span class="ok">✓ System is already up to date</span>';
+        _setUpdateStatus("✓ System is already up to date");
        if ($modalSpinner) $modalSpinner.classList.remove("spinning");
        if ($btnReboot) $btnReboot.style.display = "none";
        if ($btnSave) $btnSave.style.display = "none";
@@ -68,7 +148,7 @@ function prepareUpdateModal() {
  _updateStatusUnavailable = false;
  _updatePollFailures = 0;
  if ($modalLog) $modalLog.textContent = "";
-  if ($modalStatus) $modalStatus.textContent = "Starting update…";
+  _setUpdateStatus("Starting update…");
  if ($modalSpinner) $modalSpinner.classList.add("spinning");
  if ($btnReboot) $btnReboot.style.display = "none";
  if ($btnSave) $btnSave.style.display = "none";
@@ -89,7 +169,7 @@ function showExistingUpdate(data) {
  _updateLogOffset = Number(data.offset) || 0;

  if (data.running) {
-    if ($modalStatus) $modalStatus.textContent = "Updating…";
+    _setUpdateStatus("Updating…");
    startUpdatePoll();
    return;
  }
@@ -154,7 +234,8 @@ function startUpdate() {
  )
    .then(function(data) {
      if (data.status === "no_updates") {
-        if ($modalStatus) $modalStatus.textContent = "✓ System is already up to date";
+        if ($modalLog) $modalLog.innerHTML = '<span class="ok">✓ System is already up to date</span>';
+        _setUpdateStatus("✓ System is already up to date");
        if ($modalSpinner) $modalSpinner.classList.remove("spinning");
        if ($btnReboot) $btnReboot.style.display = "none";
        if ($btnSave) $btnSave.style.display = "none";
@@ -165,7 +246,7 @@ function startUpdate() {
        return;
      }
      if (data.status === "already_running") appendLog("[Update already in progress, attaching…]\n\n");
-      if ($modalStatus) $modalStatus.textContent = "Updating…";
+      _setUpdateStatus("Updating…");
      startUpdatePoll();
    })
    .catch(function(err) {
@@ -235,7 +316,7 @@ async function pollUpdateStatus() {
        return;
      }
      appendLog("[Update status reconnected]\n");
-      if ($modalStatus) $modalStatus.textContent = "Updating…";
+      _setUpdateStatus("Updating…");
    }
    if (data.log) appendLog(data.log);
    _updateLogOffset = data.offset;
@@ -258,7 +339,7 @@ async function pollUpdateStatus() {
    if (!_serverWasDown) {
      _serverWasDown = true;
      appendLog("\n[Update status connection interrupted — retrying…]\n");
-      if ($modalStatus) $modalStatus.textContent = "Reconnecting to update…";
+      _setUpdateStatus("Reconnecting to update…");
    }
  } finally {
    _updatePollInFlight = false;
@@ -270,7 +351,7 @@ function showUpdateStatusUnavailable() {
  _updateStatusUnavailable = true;
  stopUpdatePoll();
  if ($modalSpinner) $modalSpinner.classList.remove("spinning");
-  if ($modalStatus) $modalStatus.textContent = "Update status unavailable — update may still be running";
+  _setUpdateStatus("Update status unavailable — update may still be running");
  appendLog("\n[The Hub could not confirm update status. The background update was not stopped. Select Retry Status after reconnecting.]\n");
  if ($btnRetryUpdate) $btnRetryUpdate.style.display = "inline-flex";
  if ($btnCloseModal) $btnCloseModal.disabled = false;
@@ -283,7 +364,7 @@ function retryUpdateStatus() {
  _updatePollFailures = 0;
  _serverWasDown = true;
  if ($modalSpinner) $modalSpinner.classList.add("spinning");
-  if ($modalStatus) $modalStatus.textContent = "Reconnecting to update…";
+  _setUpdateStatus("Reconnecting to update…");
  if ($btnRetryUpdate) $btnRetryUpdate.style.display = "none";
  if ($btnCloseModal) $btnCloseModal.disabled = true;
  startUpdatePoll();
@@ -314,13 +395,13 @@ function onUpdateDone(result) {
  if ($btnRetryUpdate) $btnRetryUpdate.style.display = "none";
  if ($btnCloseModal) $btnCloseModal.disabled = false;
  if (result === true) {
-    if ($modalStatus) $modalStatus.textContent = "✓ Update complete";
+    _setUpdateStatus("✓ Update complete");
    if ($btnReboot) $btnReboot.style.display = "inline-flex";
  } else if (result === "reboot_required") {
-    if ($modalStatus) $modalStatus.textContent = "✓ Update complete — restart required";
+    _setUpdateStatus("✓ Update complete — restart required");
    if ($btnReboot) $btnReboot.style.display = "inline-flex";
  } else {
-    if ($modalStatus) $modalStatus.textContent = "✗ Update failed — your system was not changed. Run the update again or save the error report for support.";
+    _setUpdateStatus("✗ Update failed — your system was not changed. Run the update again or save the error report for support.");
    if ($btnRetryRun) $btnRetryRun.style.display = "inline-flex";
    if ($btnSave) $btnSave.style.display = "inline-flex";
    if ($btnReboot) $btnReboot.style.display = "none";
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Sovran_SystemsOS Hub</title>
+  <title>Sovran_SystemsOS — The Hub</title>
  <link rel="stylesheet" href="/static/css/base.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/buttons.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/header.css?v={{ asset_version }}" />
@@ -18,66 +18,324 @@
 </head>
 <body>

-  <!-- Header bar -->
-  <header class="header-bar">
-    <img src="/static/sovran-hub-icon.svg" alt="Sovran Hub" class="header-logo" />
+  <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">

-    <div class="title-group">
-      <span class="title">Sovran_SystemsOS Hub</span>
+    <!-- service glyphs -->
+    <!-- ═══ Real service logos — extracted verbatim from app/icons/*.svg ═══
+         (internal ids namespaced per icon to avoid collisions) -->

-      <!-- OS Version Badge — styled identically to the version badge in service modals -->
-      <span class="os-version-badge" id="os-version-badge" title="Sovran_SystemsOS Version">v{{ sovran_version }}</span>
+    <!-- symbolic helpers (nav + modal internals) -->
+    <!-- Bitcoin nav icon: the OFFICIAL logo silhouette (paths taken verbatim
+         from app/icons/bitcoin-core.svg) rendered monochrome in currentColor
+         so it matches the symbolic sidebar set -->
+    <symbol id="g-btc-sym" viewBox="-34 -34 580 580">
+      <path fill="currentColor" d="M317.871 7.656c-137.12-34.192-276.024 49.28-310.2 186.44-34.208 137.136 49.256 276.048 186.36 310.24 137.16 34.199 276.063-49.265 310.256-186.408 34.192-137.152-49.264-276.08-186.416-310.272m50.936 211.872c-3.688 24.936-17.512 37.008-35.864 41.24 25.2 13.12 38.024 33.239 25.809 68.12-15.16 43.319-51.176 46.976-99.072 37.912l-11.624 46.584-28.088-7 11.472-45.96a1076 1076 0 0 1-22.384-5.809l-11.512 46.177-28.056-7 11.624-46.673c-6.561-1.68-13.225-3.464-20.024-5.168l-36.552-9.111 13.943-32.152s20.696 5.504 20.416 5.096c7.952 1.969 11.48-3.216 12.872-6.672l18.368-73.64.048-.2 13.104-52.568c.344-5.968-1.712-13.496-13.088-16.336.439-.296-20.4-5.072-20.4-5.072l7.472-30 38.736 9.673-.032.144c5.824 1.448 11.824 2.824 17.937 4.216L245.423 89.2l28.072 7-11.28 45.224c7.536 1.721 15.12 3.456 22.504 5.297l11.2-44.929 28.088 7-11.504 46.145c35.464 12.215 61.401 30.527 56.304 64.591"/>
+      <path fill="currentColor" d="m254.647 174.6-13.983 56.08c15.855 3.951 64.735 20.071 72.656-11.656 8.248-33.096-42.817-40.472-58.673-44.424"/>
+      <path fill="currentColor" d="m233.608 258.984-15.425 61.832c19.04 4.729 77.769 23.584 86.448-11.296 9.072-36.376-51.984-45.784-71.023-50.536"/>
+    </symbol>
+
+    <symbol id="g-chat" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M20 5.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.2c-.6.5-1 .3-1-.5V5.5A2.5 2.5 0 0 1 7.5 3h10A2.5 2.5 0 0 1 20 5.5z"/>
+        <circle cx="8.7" cy="9.2" r="0.5" fill="currentColor"/><circle cx="12" cy="9.2" r="0.5" fill="currentColor"/><circle cx="15.3" cy="9.2" r="0.5" fill="currentColor"/>
+      </g>
+    </symbol>
+
+    <symbol id="g-antenna" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
+        <path d="M5.4 9.9a9.3 9.3 0 0 1 13.2 0"/>
+        <path d="M8.1 12.9a5.6 5.6 0 0 1 7.8 0"/>
+        <circle cx="12" cy="16.6" r="1.5" fill="currentColor" stroke="none"/>
+        <path d="M12 16.6V21"/>
+      </g>
+    </symbol>
+
+    <symbol id="g-lock" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="5.5" y="10.5" width="13" height="9.5" rx="2.6"/>
+        <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/>
+        <circle cx="12" cy="15" r="1.3" fill="currentColor" stroke="none"/>
+      </g>
+    </symbol>
+    <!-- nav + ui symbolic icons -->
+    <symbol id="g-home" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M4 11.2L12 4.5l8 6.7"/>
+        <path d="M6 10.5v8a1.2 1.2 0 0 0 1.2 1.2h9.6a1.2 1.2 0 0 0 1.2-1.2v-8"/>
+        <path d="M10 19.7v-5.4h4v5.4"/>
+      </g>
+    </symbol>
+    <symbol id="g-grid" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round">
+        <rect x="3.5" y="3.5" width="7.2" height="7.2" rx="2"/><rect x="13.3" y="3.5" width="7.2" height="7.2" rx="2"/>
+        <rect x="3.5" y="13.3" width="7.2" height="7.2" rx="2"/><rect x="13.3" y="13.3" width="7.2" height="7.2" rx="2"/>
+      </g>
+    </symbol>
+    <symbol id="g-server" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round">
+        <rect x="3.5" y="3.5" width="17" height="7.4" rx="2"/><rect x="3.5" y="13.1" width="17" height="7.4" rx="2"/>
+        <circle cx="7.2" cy="7.2" r="0.6" fill="currentColor"/><circle cx="7.2" cy="16.8" r="0.6" fill="currentColor"/>
+      </g>
+    </symbol>
+    <symbol id="g-dots" viewBox="0 0 24 24">
+      <g fill="currentColor">
+        <circle cx="5" cy="5" r="1.7"/><circle cx="12" cy="5" r="1.7"/><circle cx="19" cy="5" r="1.7"/>
+        <circle cx="5" cy="12" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="19" cy="12" r="1.7"/>
+        <circle cx="5" cy="19" r="1.7"/><circle cx="12" cy="19" r="1.7"/><circle cx="19" cy="19" r="1.7"/>
+      </g>
+    </symbol>
+    <symbol id="g-refresh" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <path d="M20 12a8 8 0 1 1-2.9-6.2"/>
+        <path d="M20.6 2.6l-.5 4.9-4.6-1.7z" fill="currentColor" stroke="none"/>
+      </g>
+    </symbol>
+    <!-- Update System: down arrow into a tray (get / install updates) -->
+    <symbol id="g-update" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 4v10.5"/>
+        <path d="M7.8 10.3L12 14.5l4.2-4.2"/>
+        <path d="M4.5 16.5v2a2.5 2.5 0 0 0 2.5 2.5h10a2.5 2.5 0 0 0 2.5-2.5v-2"/>
+      </g>
+    </symbol>
+    <symbol id="g-box" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="3.5" y="4" width="17" height="4.4" rx="1.6"/>
+        <path d="M5.2 8.4v9a2.4 2.4 0 0 0 2.4 2.4h8.8a2.4 2.4 0 0 0 2.4-2.4v-9"/>
+        <path d="M10 12.5h4"/>
+      </g>
+    </symbol>
+    <symbol id="g-shield-check" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 2.5 4.5 5.5v6c0 4.6 3.1 8 7.5 9.9 4.4-1.9 7.5-5.3 7.5-9.9v-6z"/>
+        <path d="M8.6 12l2.4 2.4 4.4-4.6"/>
+      </g>
+    </symbol>
+    <!-- Systems Operational: activity pulse (system health) — distinct from
+         the Security shield above -->
+    <symbol id="g-pulse" viewBox="0 0 24 24">
+      <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M3 12h4l3-7 4 14 3-7h4"/>
+    </symbol>
+    <symbol id="g-lifebuoy" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
+        <circle cx="12" cy="12" r="8.6"/><circle cx="12" cy="12" r="3.6"/>
+        <path d="M6 6l3.2 3.2M18 6l-3.2 3.2M6 18l3.2-3.2M18 18l-3.2-3.2"/>
+      </g>
+    </symbol>
+    <symbol id="g-power" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <path d="M7.2 6.1a7 7 0 1 0 9.6 0"/>
+        <path d="M12 2.8v8.4"/>
+      </g>
+    </symbol>
+    <symbol id="g-logout" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/>
+        <path d="M4 12h10M10.5 8.5 14 12l-3.5 3.5"/>
+      </g>
+    </symbol>
+    <symbol id="g-search" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+        <circle cx="11" cy="11" r="6.5"/>
+        <path d="M15.8 15.8 21 21"/>
+      </g>
+    </symbol>
+    <symbol id="g-copy" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="9" y="9" width="11" height="11" rx="2.2"/>
+        <path d="M5.5 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v.5"/>
+      </g>
+    </symbol>
+    <symbol id="g-check" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.5l5 5 10-11"/></symbol>
+    <symbol id="g-chev" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M9.5 5.5 16 12l-6.5 6.5"/></symbol>
+    <symbol id="g-x" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" d="M6 6l12 12M18 6 6 18"/></symbol>
+    <symbol id="g-wifi" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
+        <path d="M4.5 10.2a11 11 0 0 1 15 0"/>
+        <path d="M7.3 13.3a7 7 0 0 1 9.4 0"/>
+        <circle cx="12" cy="17" r="1.4" fill="currentColor" stroke="none"/>
+      </g>
+    </symbol>
+    <symbol id="g-key" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="7.5" cy="15.5" r="4"/>
+        <path d="M10.4 12.6 20 3M16.2 6.8l2.4 2.4M18.8 4.2l2.2 2.2"/>
+      </g>
+    </symbol>
+    <symbol id="g-alert" viewBox="0 0 24 24">
+      <g fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 3.6 22.2 20.4H1.8z"/>
+        <path d="M12 9.8v4.6"/><circle cx="12" cy="17.2" r="0.6" fill="currentColor" stroke="none"/>
+      </g>
+    </symbol>
+</svg>
+
+  <!-- ═══ BOOT SPLASH ═══ covers the shell while the first data loads;
+       dashboard.js lifts it once the welcome cards are rendered -->
+  <div id="app-splash" role="status" aria-live="polite">
+    <div class="splash-card">
+      <div class="splash-ring">
+        <img src="/static/sovran-hub-icon.svg" alt="" width="64" height="64" />
+        <span class="splash-ring-arc" aria-hidden="true"></span>
+      </div>
+      <div class="splash-title">Starting The Hub</div>
+      <div class="splash-sub" id="splash-sub">Gathering your services…</div>
+    </div>
+  </div>
+  <script>
+    (function () {
+      var splash = document.getElementById("app-splash");
+      var sub = document.getElementById("splash-sub");
+      var lifted = false;
+      function lift() {
+        if (lifted || !splash) return;
+        lifted = true;
+        splash.classList.add("done");
+        setTimeout(function () {
+          if (splash && splash.parentNode) splash.parentNode.removeChild(splash);
+        }, 500);
+      }
+      window.__liftAppSplash = lift;
+      // Reassure the user if the backend is slow (e.g. right after a reboot)
+      setTimeout(function () {
+        if (!lifted && sub) sub.textContent = "Still starting\u2026 this can take a moment after a reboot.";
+      }, 8000);
+      // Never trap the user behind the splash
+      setTimeout(lift, 25000);
+    })();
+  </script>
+
+  <div class="app">
+
+    <!-- ═══ SIDEBAR ═══ -->
+    <aside class="sidebar" id="sidebar">
+      <div class="brand">
+        <img src="/static/sovran-hub-icon.svg" class="brand-logo" alt="The Hub" />
+        <div class="brand-text">
+          <div class="brand-title">The <em>Hub</em></div>
+          <div class="brand-sub">Sovran_SystemsOS v{{ sovran_version }}</div>
+        </div>
+      </div>
+
+      <nav id="sidebar-nav" aria-label="Service categories"></nav>
+
+      <div class="nav-label">System</div>
+      <div id="sidebar-support"></div>
+
+      <!-- Feature Manager + Preferences (features.js) -->
+      <div id="sidebar-features"></div>
+
+      <div class="sidebar-spacer"></div>
+    </aside>
+
+    <!-- ═══ MAIN ═══ -->
+    <div class="main">
+      <header class="topbar">
+        <div class="page-title" id="page-title">Dashboard</div>
+
+        <div class="search-box">
+          <svg><use href="#g-search"/></svg>
+          <input id="search-input" type="text" placeholder="Search services…" autocomplete="off" />
+        </div>
+
+        <div class="top-actions">
+          <button class="btn btn-header-reboot" id="btn-header-reboot" title="Restart the entire computer">Reboot</button>
+          <button class="btn btn-logout" id="btn-logout" title="Sign out">Sign Out</button>
+        </div>
+      </header>
+
+      <main class="content" id="content">
+        <!-- ═══ WELCOME DASHBOARD (default view) ═══ -->
+        <section class="welcome" id="welcome-view">
+          <div class="welcome-bg" aria-hidden="true">
+            <div class="orb orb-a"></div>
+            <div class="orb orb-b"></div>
+            <div class="orb orb-c"></div>
+          </div>
+          <div class="welcome-inner">
+            <div class="welcome-greeting" id="welcome-greeting">Hello</div>
+            <h1 class="welcome-title">Welcome to Your <em>Sovereign</em> Digital &amp; Financial Life</h1>
+            <div class="welcome-meta">Sovran_SystemsOS v{{ sovran_version }}<span class="welcome-meta-sep">·</span><span id="welcome-role"></span></div>
+            <div class="welcome-cards" id="welcome-cards">
+              <div class="welcome-dyn" id="wc-systems"></div>
+              <div class="widget w-network" id="w-network">
+                <div class="widget-chip chip-green"><svg><use href="#g-wifi"/></svg></div>
+                <div class="w-body">
+                  <h3>Network</h3>
+                  <div class="net-row"><span class="net-k">LAN</span><span class="ip-value" id="ip-internal">…</span></div>
+                  <div class="net-row"><span class="net-k">WAN</span><span class="ip-value" id="ip-external">…</span></div>
+                  <div class="sub">sovransystemsos.local</div>
+                </div>
+              </div>
+              <div class="welcome-dyn" id="wc-more"></div>
+            </div>
+            <button class="btn btn-ghost welcome-browse" id="welcome-browse-btn">Browse all services →</button>
+          </div>
+        </section>
+
+        <!-- ═══ SERVICES GRID ═══ -->
+        <div id="tiles-area" style="display:none">
+          <div class="dashboard-loading" role="status" aria-live="polite">
+            <span class="dashboard-loading-spinner" aria-hidden="true"></span>
+            <span>Loading service status…</span>
+          </div>
+        </div>
+      </main>
    </div>

-    <div class="header-buttons">
-      <span class="role-badge" id="role-badge">Loading…</span>
-      <button class="btn btn-header-reboot" id="btn-header-reboot" title="Restart the entire computer">Reboot</button>
-      <button class="btn btn-logout" id="btn-logout" title="Sign out">Sign Out</button>
-    </div>
-  </header>
-
-  <!-- IP bar -->
-  <div class="ip-bar">
-    <span>
-      <span class="ip-label">Internal IP:</span>
-      <span class="ip-value" id="ip-internal">…</span>
-    </span>
-    <span class="ip-separator">|</span>
-    <span>
-      <span class="ip-label">External IP:</span>
-      <span class="ip-value" id="ip-external">…</span>
-    </span>
  </div>

-  <!-- Service tiles -->
-  <main class="main-content">
-    <aside class="sidebar" id="sidebar">
-      <div id="sidebar-support"></div>
-      <div id="sidebar-features"></div>
-    </aside>
-    <div id="tiles-area">
-      <div class="dashboard-loading" role="status" aria-live="polite">
-        <span class="dashboard-loading-spinner" aria-hidden="true"></span>
-        <span>Loading service status…</span>
+  <!-- ═══ SYSTEMS OPERATIONAL MODAL (dashboard.js) ═══ -->
+  <div class="modal-overlay" id="systems-modal" role="dialog" aria-modal="true" aria-labelledby="systems-modal-title">
+    <div class="creds-dialog">
+      <div class="creds-header">
+        <span class="creds-title" id="systems-modal-title">
+          <span class="widget-chip chip-green" style="width:54px;height:54px;border-radius:16px"><svg style="width:27px;height:27px"><use href="#g-pulse"/></svg></span>
+          <span>Systems Operational</span>
+        </span>
+        <button class="creds-close-btn" id="systems-close-btn" title="Close">✕</button>
      </div>
+      <div class="creds-body" id="systems-body">
+        <p class="creds-loading">Loading…</p>
+      </div>
+      <!-- Auto-launch preference (features.js) — moved here from the sidebar -->
+      <div class="sysprefs" id="autolaunch-slot"></div>
    </div>
-  </main>
+  </div>

  <!-- Update modal -->
  <div class="modal-overlay" id="update-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title-text">
    <div class="modal-dialog">
-      <div class="modal-header">
-        <span class="modal-title" id="modal-title-text">Sovran_SystemsOS Update</span>
-        <div class="modal-spinner" id="modal-spinner"></div>
-        <span class="modal-status" id="modal-status">Updating…</span>
+      <div class="upd-header">
+        <span class="widget-chip chip-sovran upd-chip"><svg class="upd-chip-svg"><use href="#g-update"/></svg></span>
+        <span class="upd-title-wrap">
+          <span class="upd-title" id="modal-title-text">Sovran_SystemsOS Update</span>
+          <span class="upd-sub">
+            <span class="ver-chip">Sovran_SystemsOS v{{ sovran_version }}</span>
+            <span class="upd-pill" id="upd-pill"></span>
+            <span class="modal-spinner" id="modal-spinner"></span>
+          </span>
+        </span>
+        <button class="creds-close-btn" id="update-close-btn" title="Close">✕</button>
+      </div>
+      <div class="modal-body-scroll">
+        <div class="sysmodal-card">
+          <div class="sysmodal-card-title"><svg><use href="#g-server"/></svg>System Details</div>
+          <div class="sysstep"><div class="sysnum">1</div><div class="sysstep-x"><div class="sysstep-t">Current version</div><div class="sysval"><span class="sysval-text">{{ sovran_version }}</span></div></div></div>
+          <div class="sysstep"><div class="sysnum">2</div><div class="sysstep-x"><div class="sysstep-t">Release channel</div><div class="sysval"><span class="sysval-text">stable</span></div></div></div>
+          <div class="sysstep"><div class="sysnum">3</div><div class="sysstep-x"><div class="sysstep-t">Last checked</div><div class="sysval"><span class="sysval-text" id="upd-last-checked">—</span></div></div></div>
+        </div>
+        <div class="update-status-msg" id="modal-status">Checking for updates…</div>
+        <div class="modal-log" id="modal-log" aria-live="polite"></div>
      </div>
-      <div class="modal-log" id="modal-log" aria-live="polite"></div>
      <div class="modal-footer">
        <button class="btn btn-save" id="btn-save-report" style="display:none">Save Error Report</button>
        <button class="btn btn-save" id="btn-retry-update-status" style="display:none">Retry Status</button>
        <button class="btn btn-reboot" id="btn-retry-update" style="display:none">Retry Update</button>
        <button class="btn btn-reboot" id="btn-reboot" style="display:none">Restart Entire System</button>
+        <span class="modal-footer-spacer"></span>
        <button class="btn btn-close-modal" id="btn-close-modal" disabled>Close</button>
+        <button class="btn btn-primary" id="btn-check-again"><svg><use href="#g-refresh"/></svg>Check again</button>
      </div>
    </div>
  </div>
@@ -99,7 +357,10 @@
  <div class="modal-overlay" id="support-modal" role="dialog" aria-modal="true" aria-labelledby="support-modal-title">
    <div class="creds-dialog">
      <div class="creds-header">
-        <span class="creds-title" id="support-modal-title">Tech Support</span>
+        <span class="creds-title">
+          <span class="widget-chip chip-neutral" id="support-modal-chip" style="width:54px;height:54px;border-radius:16px"><svg style="width:27px;height:27px"><use href="#g-lifebuoy"/></svg></span>
+          <span id="support-modal-title">Tech Support</span>
+        </span>
        <button class="creds-close-btn" id="support-close-btn" title="Close">✕</button>
      </div>
      <div class="creds-body" id="support-body">
@@ -171,15 +432,26 @@
  <!-- Rebuild Modal -->
  <div class="modal-overlay" id="rebuild-modal" role="dialog" aria-modal="true" aria-labelledby="rebuild-modal-title">
    <div class="modal-dialog">
-      <div class="modal-header">
-        <span class="modal-title" id="rebuild-modal-title">Sovran_SystemsOS Rebuild</span>
-        <div class="modal-spinner" id="rebuild-spinner"></div>
-        <span class="modal-status" id="rebuild-status">Rebuilding…</span>
+      <div class="upd-header">
+        <span class="widget-chip chip-sovran upd-chip"><svg class="upd-chip-svg"><use href="#g-server"/></svg></span>
+        <span class="upd-title-wrap">
+          <span class="upd-title" id="rebuild-modal-title">Sovran_SystemsOS Rebuild</span>
+          <span class="upd-sub">
+            <span class="ver-chip">Sovran_SystemsOS v{{ sovran_version }}</span>
+            <span class="upd-pill" id="rebuild-pill"></span>
+            <span class="modal-spinner" id="rebuild-spinner"></span>
+          </span>
+        </span>
+        <button class="creds-close-btn" id="rebuild-close-hdr" title="Close">✕</button>
+      </div>
+      <div class="modal-body-scroll">
+        <div class="update-status-msg" id="rebuild-status">Rebuilding…</div>
+        <div class="modal-log" id="rebuild-log" aria-live="polite" style="display:none"></div>
      </div>
-      <div class="modal-log" id="rebuild-log" aria-live="polite"></div>
      <div class="modal-footer">
        <button class="btn btn-save" id="rebuild-save-report" style="display:none">Save Error Report</button>
        <button class="btn btn-reboot" id="rebuild-reboot-btn" style="display:none">Restart Entire System</button>
+        <span class="modal-footer-spacer"></span>
        <button class="btn btn-close-modal" id="rebuild-close-btn" disabled>Close</button>
      </div>
    </div>
@@ -256,7 +528,7 @@
  <div class="reboot-overlay" id="reboot-overlay">
    <!-- Normal restarting card -->
    <div class="reboot-card" id="reboot-main-card">
-      <div class="reboot-icon" aria-hidden="true">↻</div>
+      <div class="reboot-icon" aria-hidden="true"></div>
      <h2 class="reboot-title">Restarting Entire System</h2>
      <p class="reboot-message">
        The entire computer is restarting, including the desktop and all hosted services.<br />
@@ -271,7 +543,7 @@
    </div>
    <!-- Error card (shown if restart request fails definitively) -->
    <div class="reboot-card" id="reboot-error-card" style="display:none">
-      <div class="reboot-icon" aria-hidden="true">⚠</div>
+      <div class="reboot-icon" aria-hidden="true"></div>
      <h2 class="reboot-title">Restart could not be started</h2>
      <p class="reboot-message">
        The computer did not begin restarting. No services were intentionally stopped. Please try again.
@@ -316,6 +588,7 @@
  <script src="/static/js/rebuild.js?v={{ asset_version }}"></script>
  <script src="/static/js/features.js?v={{ asset_version }}"></script>
  <script src="/static/js/security.js?v={{ asset_version }}"></script>
+  <script src="/static/js/dashboard.js?v={{ asset_version }}"></script>
  <script src="/static/js/events.js?v={{ asset_version }}"></script>
 </body>
 </html>
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Sovran Hub — Login</title>
+  <title>The Hub — Login</title>
  <link rel="stylesheet" href="/static/css/base.css?v={{ asset_version }}" />
  <link rel="stylesheet" href="/static/css/buttons.css?v={{ asset_version }}" />
 </head>
@@ -11,8 +11,9 @@
  <div class="login-wrapper">
    <div class="login-card">
      <div class="login-header">
-        <img src="/static/sovran-hub-icon.svg" alt="Sovran Hub" class="login-logo" />
-        <div class="login-title">Sovran Hub</div>
+        <img src="/static/sovran-hub-icon.svg" alt="The Hub" class="login-logo" />
+        <div class="login-title">The <em>Hub</em></div>
+        <div class="login-sub">Sovran_SystemsOS</div>
      </div>

      <form class="login-form" id="login-form" onsubmit="return false;">
@@ -50,10 +50,10 @@
          <p class="onboarding-body-text" style="text-align:center; margin-bottom:4px;">
            Your new login password is:
          </p>
-          <div id="migration-password-value" style="font-family:monospace; 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; padding:14px 24px; letter-spacing:0.04em; text-align:center; word-break:break-all; margin-bottom:8px;">
+          <div id="migration-password-value" style="font-family:monospace; font-size:1.35rem; font-weight:700; color:var(--text-primary); background:rgba(62, 207, 142, 0.10); border:1.5px solid rgba(62, 207, 142, 0.35); border-radius:8px; padding:14px 24px; letter-spacing:0.04em; text-align:center; word-break:break-all; margin-bottom:8px;">
            &nbsp;
          </div>
-          <div style="padding:10px 14px; background-color:rgba(229, 165, 10, 0.1); border:1px solid rgba(229, 165, 10, 0.35); border-radius:8px; font-size:0.92rem; color:var(--yellow); line-height:1.55;">
+          <div style="padding:10px 14px; background-color:rgba(233, 182, 74, 0.1); border:1px solid rgba(233, 182, 74, 0.35); border-radius:8px; font-size:0.92rem; color:var(--yellow); line-height:1.55;">
            ⚠ Write this password down! You will need it to log in next time. This is also your Sovran Hub login password.
          </div>
          <div id="migration-password-status" class="onboarding-save-status" style="margin-top:8px;"></div>
Author	SHA1	Message	Date
naturallaw777	4c22c2363b	Make dashboard cards uniform and symmetric; stop clipping update text The four welcome cards varied in shape and typography: the grid produced a 3+1 orphan layout at wide widths, sub text was single-line ellipsized (the updates card ended mid-sentence with "…"), the Network card's values used a different size than the other cards' sub text, and only the clickable cards carried a chevron circle. - Grid is now a symmetric 2×2 at wide widths (equal-height rows); the three-card Desktop-only role renders one balanced row - Card sub text wraps instead of being cut off — "Sovran_SystemsOS keeps itself current" is fully visible at every width - One type scale across all cards: 0.9rem titles, 0.8rem sub text (Network values aligned to it), 46px chips, uniform min-height - Chevron circles removed from the cards — hover/focus lift is the click affordance, and every card has the same shape - The updates card now reflects the real update state (failed, restart required, running) instead of only "updates available"; it can no longer claim up-to-date while a restart is pending	2026-09-08 20:08:52 -05:00
naturallaw777	bbf53d089a	Fix role fit-and-finish: Desktop-only router note, narrow-viewport layout Systems Operational on roles with no enabled domain services (a fresh Desktop-only install, or everything turned off) rendered no Router card but still showed a "Who uses these ports" note listing services the machine does not have. Any role with no enabled domain service now gets the calm "No router setup needed yet" card with role-appropriate wording, and the who-uses note only appears when a domain service is actually enabled. Narrow viewports (phones, half-screen RDP) had no layout at all: the sidebar and topbar forced ~900px of horizontal scroll on every role. The sidebar now collapses to a 76px icon rail below 920px, the topbar wraps its search onto a second row below 640px, and the welcome column reflows to one card per row. Legacy pre-redesign media rules in onboarding.css (which targeted the old DOM and set .sidebar{width:100%}) are removed — they silently overrode the new layout, and one shrank the Zeus QR to 200px; QR codes keep their repo-original 240px at every width.	2026-09-08 19:38:34 -05:00
naturallaw777	4476a5e0e2	Add boot splash; separate Systems Operational and Security icons Loading indicator: - Branded boot splash (Hub logo inside an accent spinner ring, "Starting The Hub") covers the shell while the first services data loads, then fades out once the welcome dashboard has rendered; never blocks longer than 25s and reassures the user after 8s (message about post-reboot delays) - Fire the network and update checks before the first services render so the dashboard cards are current at first paint - Sidebar Update button now adopts the last known update state when built (order-independent), and the welcome dashboard re-renders when the update state changes Icons: - New monochrome g-pulse glyph (activity line) for Systems Operational: welcome card, dialog header, and System Status section — the shield no longer doubles as Security - Tech Support / Security dialog header gets a standard chip; Security shows the shield chip with a plain "Security" title (no emoji), and the shared dialog title now resets correctly when reopening Tech Support after Security	2026-09-08 19:15:06 -05:00
naturallaw777	36b77e3f0a	Extend welcome dashboard background to the panel edges The drifting orb glow was clipped to the centered 1040px column, leaving visible walls where it met the content padding. Make the welcome section full-bleed instead: cancel the content-area padding with negative margins and stretch it to all four panel edges (sidebar border, topbar, viewport right edge, bottom). The heading, cards, and Browse button keep their centered 1040px column via .welcome-inner.	2026-09-08 18:58:48 -05:00
naturallaw777	78ae9e78ed	Add welcome dashboard as default view Replace the All Services grid as the landing view with a Nextcloud-style welcome dashboard: - Greeting (time-of-day), "Welcome to Your Sovereign Digital & Financial Life" headline, version + role meta line - Status cards: Systems Operational, Network (LAN/WAN/hostname), Bitcoin sync progress with ETA, and available-updates card - Calm drifting orb background animation (transform-only, disabled under prefers-reduced-motion) - Services grid stays mounted but hidden until the user browses (Browse button, search, or a nav category); Dashboard nav item returns to the welcome view - Move role badge and autolaunch preference out of the sidebar; autolaunch toggle now lives in the Systems Operational modal - Remove LAN/WAN chip from the topbar; IPs live on the Network card	2026-09-08 18:46:43 -05:00
naturallaw777	61ef286420	Monochrome updater glyph; fix oversized dialog header icon The colored updater icon broke the monochrome system-action set in the sidebar. Replace it with a new g-update glyph — a down arrow dropping into an open tray ("get / install updates") — drawn in the same 24×24, 2px round-cap stroke style as the other sidebar glyphs. - Sidebar Update System row: g-update glyph, currentColor like the rest. - Update dialog header: same glyph in the green chip, matching the rebuild dialog and Systems Operational header treatment. - Also fixes a latent sizing bug: the previous colored <img> had no CSS rule (the .upd-icon rule from the earlier patch never landed), so the dialog header icon rendered at the source file's intrinsic 128px. The chip markup uses the existing 54px .upd-chip rules.	2026-09-08 18:25:47 -05:00
naturallaw777	ca1a5c9eb8	Merge Bitcoin categories into one; rename Self-Hosted Apps to Personal Apps - One "Bitcoin" category: the service catalog distinguishes bitcoin-base from bitcoin-apps, which surfaced as two sidebar menus and two tile sections. The Hub now normalizes both into a single "Bitcoin" category (nav item with combined count, one tile section). CATEGORY_ALIASES in constants.js maps the catalog keys; server config sends one ("bitcoin", "Bitcoin") entry and the node role allowlist is updated to match. The nix catalog is unchanged. - "Self-Hosted Apps" is now "Personal Apps" — every service here is self-hosted, so the label added no distinction.	2026-09-08 18:18:36 -05:00
naturallaw777	6d32bebdc6	Neutral graphite theme; branded updater icon Coloring: the base surfaces were green-tinted darks, which read as a green-hued background rather than green highlights. Shift the whole surface ramp to neutral graphite (slightly cool, and lighter overall) and keep green strictly for highlights — brand, buttons, switches, status dots and pills, sync bars, focus rings. - Tokens: bg #17191d, surface #1c1f24, card #23272c, hover #292e34, elevated #26292e, inset #121417; text neutrals #e9edec/#a9b0b3/ #7a8388. Accent, borders, radii, shadows unchanged. - Remove the green ambient radial washes behind the app (and login). - Reboot / security-reset overlay gradients neutralized. Updater icon: restore the repo's branded Sovran updater icon (/static/icons/update.svg, true colors) in the sidebar Update System row and in the update dialog header, replacing the generic refresh glyph. The rebuild dialog keeps its glyph chip (no branded icon exists for it).	2026-09-08 18:09:15 -05:00
naturallaw777	e6078b9c89	Simplify Systems Operational, reword Domain Status, blue restart buttons - Restart and retry actions (topbar Reboot, Restart Entire System in the update and rebuild dialogs and the restart confirmation, Retry Update, Try Again) are now blue instead of amber — amber read as an error. Status pills keep their semantic colors (amber = restart required). - The service-modal domain section is no longer a checklist: it is titled "Domain Status" and shows a single green "Domain is active" line with the domain (or the backend's not-configured detail and Configure Domain action when there is no domain yet). No "Step 1" wording. - Systems Operational keeps the complexity hidden: the Router card now shows just a verdict — green "Ports 80 and 443 are open" or red "Ports 80 and 443 are not open" — derived from the same live backend diagnostics. Port-forwarding instructions are gone (onboarding covers them); on the Node-only role the card still explains that ports only matter once BTCPay Server or Lightning Wallet Connections (LNURL) is enabled.	2026-09-08 17:52:04 -05:00
naturallaw777	ea9d4f21d7	Polish pass: sysops wording, QR size, NWC toolbar, logo, diagnostics placement Eight fixes from live testing: Systems Operational modal: - Drop the "test from your phone on mobile data" (hairpin NAT) sentence from the router note — too technical for the intended audience. - Node-only role: when BTCPay Server and Lightning Wallet Connections (LNURL) are both off, the router card becomes a simple "No router setup needed yet" note explaining that ports 80/443 only matter if one of those services is turned on. When one is enabled, the card shows the same port steps and live domain/port diagnostics as the Desktop + Server role (diagnostics now poll only enabled services). Service modals: - The Domain Diagnostic Checklist now shows only the domain-active step (Domain Configured). DNS and port diagnostics live in Systems Operational, which shows the full checklist. - Node-only role: BTCPay Server and Lightning Wallet Connections modals gain a "Ports to Forward in Your Router" section with the standard 80/443 wording and this computer's LAN address. - Domain setup and reconfigure dialogs no longer contain router port-forwarding instructions (already handled during Desktop + Server onboarding and shown in Systems Operational). Lightning Wallet Connections: - Refresh and New Wallet toolbar buttons now share one height and baseline (a leftover 12px top margin on Refresh was offsetting it). - The header status chip has a proper gap between the status dot and its label. Zeus Connect / QR codes: - QR codes render at the original 240px with the white frame and pixelated upscaling, restoring scannability. Brand: - The sidebar logo loads via /static/sovran-hub-icon.svg (same as the login page) instead of an inline <use> symbol — the gradient-heavy symbol did not render reliably. The icon sprite is hidden with the browser-safe zero-size pattern instead of display:none.	2026-09-08 17:19:26 -05:00
naturallaw777	d164d423ad	Rework Update System dialog to the approved design; match rebuild dialog The update dialog kept the old bare title + spinner layout from the previous theme. Rework it (and the rebuild dialog, for consistency) to the approved The Hub dialog anatomy: - Header: green chip icon, title, version chip, status pill (Checking… / Up to date / Updating… / Restart required / Update failed / Status unknown) and a header close button. A spinner appears in the header while an update is starting or running. - System Details card: current version, release channel, and last checked (relative time, refreshed on every check). - The log renders as a console with green "ok" and dim hint lines; the up-to-date result shows as a single green console line exactly once (the redundant status line is hidden in that state). - Footer: Close plus a "Check again" primary action that re-runs the update check. Close and Check again are disabled while a check or update is in flight; all existing recovery actions (Save Error Report, Retry Status, Retry Update, Restart Entire System) keep their exact semantics. - Opening the dialog now shows a "Checking…" state immediately while the existing reattach-then-check logic runs; reattaching to an in-progress update (page reload, RDP reconnect) is unchanged. Sidebar Update System status tints now use the theme palette (red / amber / blue / green), and the periodic background check refreshes the dialog's "last checked" value. Rebuild dialog gets the same header (icon, version chip, Applying… / Done / Restart required / Failed pill, header close disabled while a rebuild runs); its log stays hidden as before. No API or state-machine changes: same endpoints, same polling, same reattach and recovery behavior.	2026-09-08 16:40:06 -05:00
naturallaw777	2013df55bd	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.	2026-09-08 15:52:49 -05:00