diff --git a/apps/dashboard/dashboard.html b/apps/dashboard/dashboard.html
index dbc8c21..77483ac 100644
--- a/apps/dashboard/dashboard.html
+++ b/apps/dashboard/dashboard.html
@@ -1,1180 +1,431 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>KalliLab Control Panel</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@500;600;700;800&family=Share+Tech+Mono&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-0: #040806;
-      --bg-1: #060b09;
-      --bg-2: #08120f;
-      --bg-3: #0d1c18;
-      --panel: rgba(7, 18, 15, 0.68);
-      --panel-strong: rgba(8, 20, 17, 0.82);
-      --panel-soft: rgba(10, 26, 21, 0.54);
-      --panel-border: rgba(0, 220, 140, 0.18);
-      --panel-border-strong: rgba(0, 220, 140, 0.3);
-      --text: #c6e0d8;
-      --text-dim: #7da397;
-      --text-soft: #58766b;
-      --white: #e9fff7;
-      --teal: #00dc8c;
-      --teal-strong: #00ffaa;
-      --teal-deep: #009c66;
-      --green: #67ffb3;
-      --red: #ff5a73;
-      --yellow: #ffca57;
-      --blue: #55b8ff;
-      --blue-soft: #85d5ff;
-      --glow: 0 0 20px rgba(0, 220, 140, 0.18);
-      --glow-strong: 0 0 32px rgba(0, 220, 140, 0.28);
-      --radius-lg: 20px;
-      --radius-md: 14px;
-      --radius-sm: 10px;
-      --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
-      --font-display: "Orbitron", monospace;
-      --font-mono: "Share Tech Mono", monospace;
-      --font-body: "Exo 2", sans-serif;
-    }
-
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    html {
-      color-scheme: dark;
-      font-size: 14px;
-    }
-
-    body {
-      min-height: 100vh;
-      font-family: var(--font-body);
-      color: var(--text);
-      background:
-        radial-gradient(circle at top left, rgba(0, 255, 170, 0.12), transparent 28%),
-        radial-gradient(circle at 85% 18%, rgba(0, 220, 140, 0.12), transparent 24%),
-        radial-gradient(circle at 50% 110%, rgba(0, 135, 100, 0.18), transparent 35%),
-        linear-gradient(160deg, rgba(9, 30, 24, 0.86), rgba(3, 8, 6, 0.96)),
-        linear-gradient(180deg, var(--bg-2), var(--bg-0));
-      overflow-x: hidden;
-      position: relative;
-    }
-
-    body::before {
-      content: "";
-      position: fixed;
-      inset: 0;
-      background:
-        linear-gradient(rgba(0, 220, 140, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0, 220, 140, 0.03) 1px, transparent 1px);
-      background-size: 46px 46px;
-      mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
-      pointer-events: none;
-      z-index: 0;
-    }
-
-    body::after {
-      content: "";
-      position: fixed;
-      inset: 0;
-      background:
-        radial-gradient(circle at 30% 20%, rgba(0, 255, 170, 0.08), transparent 18%),
-        radial-gradient(circle at 80% 28%, rgba(0, 255, 170, 0.05), transparent 24%),
-        linear-gradient(transparent, rgba(0, 0, 0, 0.18));
-      pointer-events: none;
-      z-index: 0;
-    }
-
-    .hud-noise,
-    .hud-vignette {
-      position: fixed;
-      inset: 0;
-      pointer-events: none;
-      z-index: 0;
-    }
-
-    .hud-noise {
-      opacity: 0.08;
-      background-image:
-        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.2) 1px, transparent 0);
-      background-size: 16px 16px;
-      mix-blend-mode: soft-light;
-    }
-
-    .hud-vignette {
-      box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.7);
-    }
-
-    .app-shell {
-      position: relative;
-      z-index: 1;
-      max-width: 1800px;
-      margin: 0 auto;
-      padding: 16px 16px 20px;
-    }
-
-    .top-frame {
-      display: grid;
-      grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.78fr);
-      gap: 12px;
-      margin-bottom: 12px;
-    }
-
-    .panel {
-      position: relative;
-      background: linear-gradient(180deg, rgba(10, 23, 20, 0.78), rgba(6, 14, 12, 0.66));
-      border: 1px solid var(--panel-border);
-      border-radius: var(--radius-lg);
-      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03);
-      backdrop-filter: blur(18px) saturate(1.22);
-      -webkit-backdrop-filter: blur(18px) saturate(1.22);
-      overflow: hidden;
-    }
-
-    .panel::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background:
-        linear-gradient(130deg, rgba(255, 255, 255, 0.045), transparent 24%),
-        radial-gradient(circle at top right, rgba(0, 255, 170, 0.08), transparent 22%);
-      pointer-events: none;
-    }
-
-    .panel-inner {
-      position: relative;
-      z-index: 1;
-      padding: 18px 20px;
-    }
-
-    .hero {
-      min-height: 192px;
-    }
-
-    .hero-grid {
-      display: grid;
-      grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.95fr);
-      gap: 12px;
-      align-items: stretch;
-    }
-
-    .eyebrow,
-    .section-label,
-    .card-label {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      font-family: var(--font-display);
-      font-size: 11px;
-      letter-spacing: 0.28em;
-      text-transform: uppercase;
-      color: var(--teal);
-    }
-
-    .eyebrow::before,
-    .section-label::before,
-    .card-label::before {
-      content: "";
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background: var(--teal-strong);
-      box-shadow: 0 0 14px rgba(0, 255, 170, 0.7);
-    }
-
-    .hero h1 {
-      margin-top: 18px;
-      font-family: var(--font-display);
-      font-size: clamp(2.6rem, 4.4vw, 4.8rem);
-      line-height: 0.90;
-      letter-spacing: 0.06em;
-      color: var(--white);
-      text-shadow: 0 0 36px rgba(0, 255, 170, 0.16);
-    }
-
-    .hero-copy {
-      margin-top: 12px;
-      max-width: 66ch;
-      color: var(--text-dim);
-      font-size: 0.92rem;
-      line-height: 1.42;
-    }
-
-    .hero-meta {
-      margin-top: 18px;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .meta-chip {
-      padding: 6px 10px;
-      border-radius: 999px;
-      border: 1px solid rgba(0, 220, 140, 0.2);
-      background: rgba(5, 17, 13, 0.54);
-      color: var(--text);
-      font-family: var(--font-mono);
-      font-size: 0.72rem;
-      letter-spacing: 0.05em;
-    }
-
-    .status-stack {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 8px;
-      align-content: start;
-    }
-
-    .status-tile {
-      padding: 14px 15px;
-      border-radius: 14px;
-      background: linear-gradient(180deg, rgba(8, 20, 17, 0.84), rgba(5, 14, 11, 0.8));
-      border: 1px solid rgba(0, 220, 140, 0.18);
-      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), var(--glow);
-    }
-
-    .status-tile strong {
-      display: block;
-      margin-top: 8px;
-      font-family: var(--font-display);
-      font-size: 1.16rem;
-      color: var(--white);
-      letter-spacing: 0.06em;
-    }
-
-    .status-tile span {
-      display: block;
-      margin-top: 5px;
-      color: var(--text-dim);
-      font-size: 0.82rem;
-    }
-
-    .clock-panel {
-      min-height: 156px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-    }
-
-    .clock-readout {
-      display: flex;
-      flex-direction: column;
-      gap: 5px;
-    }
-
-    .clock-time {
-      font-family: var(--font-display);
-      font-size: clamp(2.15rem, 3.2vw, 3.2rem);
-      font-weight: 800;
-      line-height: 0.95;
-      letter-spacing: 0.16em;
-      color: var(--teal-strong);
-      text-shadow: 0 0 26px rgba(0, 255, 170, 0.28);
-    }
-
-    .clock-date,
-    .clock-meta {
-      font-family: var(--font-mono);
-      color: var(--text-dim);
-      font-size: 0.78rem;
-      letter-spacing: 0.08em;
-    }
-
-    .clock-grid {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 8px;
-      margin-top: 12px;
-    }
-
-    .mini-cell {
-      border-radius: 12px;
-      padding: 10px 12px;
-      background: rgba(5, 16, 13, 0.7);
-      border: 1px solid rgba(0, 220, 140, 0.12);
-    }
-
-    .mini-cell dt {
-      font-family: var(--font-display);
-      font-size: 0.6rem;
-      letter-spacing: 0.18em;
-      text-transform: uppercase;
-      color: var(--text-soft);
-    }
-
-    .mini-cell dd {
-      margin-top: 5px;
-      font-family: var(--font-mono);
-      font-size: 0.88rem;
-      color: var(--white);
-    }
-
-    .section {
-      margin-top: 13px;
-    }
-
-    .section-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 14px;
-      margin-bottom: 8px;
-      padding: 0 4px;
-    }
-
-    .section-head p {
-      color: var(--text-soft);
-      font-family: var(--font-mono);
-      font-size: 0.72rem;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-
-    .stats-grid,
-    .storage-grid,
-    .service-grid,
-    .quick-grid {
-      display: grid;
-      gap: 12px;
-    }
-
-    .stats-grid {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .storage-grid {
-      grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1.2fr);
-    }
-
-    .service-grid {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-      gap: 16px;
-    }
-
-    .quick-grid {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .net-health-grid {
-      display: grid;
-      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
-      gap: 12px;
-    }
-
-    .card {
-      position: relative;
-      min-height: 168px;
-      background: linear-gradient(180deg, rgba(8, 19, 16, 0.8), rgba(5, 12, 10, 0.76));
-      border: 1px solid rgba(0, 220, 140, 0.16);
-      border-radius: var(--radius-md);
-      overflow: hidden;
-      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
-      backdrop-filter: blur(16px) saturate(1.18);
-      -webkit-backdrop-filter: blur(16px) saturate(1.18);
-    }
-
-    .card::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background:
-        linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 24%),
-        radial-gradient(circle at 100% 0, rgba(0, 255, 170, 0.08), transparent 28%);
-      pointer-events: none;
-    }
-
-    .card:hover {
-      border-color: var(--panel-border-strong);
-      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4), var(--glow-strong);
-    }
-
-    .card-inner {
-      position: relative;
-      z-index: 1;
-      height: 100%;
-      padding: 18px 20px 20px;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .card-head {
-      display: flex;
-      align-items: start;
-      justify-content: space-between;
-      gap: 14px;
-    }
-
-    .signal {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      box-shadow: 0 0 16px currentColor;
-      flex: 0 0 auto;
-      margin-top: 4px;
-    }
-
-    .signal.online { color: var(--teal-strong); background: var(--teal-strong); }
-    .signal.warning { color: var(--yellow); background: var(--yellow); }
-    .signal.offline { color: var(--red); background: var(--red); }
-    .signal.info { color: var(--blue-soft); background: var(--blue-soft); }
-
-    .card-title {
-      margin-top: 11px;
-      font-family: var(--font-display);
-      font-size: 1.04rem;
-      line-height: 1.1;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--white);
-    }
-
-    .card-value {
-      margin-top: auto;
-      font-family: var(--font-display);
-      font-size: clamp(2.3rem, 3.1vw, 3.2rem);
-      line-height: 0.95;
-      letter-spacing: 0.06em;
-      color: var(--teal-strong);
-      text-shadow: 0 0 22px rgba(0, 255, 170, 0.18);
-    }
-
-    .value-online {
-      color: var(--green);
-      text-shadow: 0 0 22px rgba(103, 255, 179, 0.18);
-    }
-
-    .value-warning {
-      color: var(--yellow);
-      text-shadow: 0 0 22px rgba(255, 202, 87, 0.16);
-    }
-
-    .value-danger {
-      color: var(--red);
-      text-shadow: 0 0 22px rgba(255, 90, 115, 0.16);
-    }
-
-    .value-info {
-      color: var(--blue-soft);
-      text-shadow: 0 0 22px rgba(85, 184, 255, 0.16);
-    }
-
-    .card-subvalue {
-      margin-top: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      color: var(--text-dim);
-      font-family: var(--font-mono);
-      font-size: 0.76rem;
-      letter-spacing: 0.05em;
-    }
-
-    .metric-accent {
-      color: var(--white);
-    }
-
-    .metric-accent.online {
-      color: var(--green);
-    }
-
-    .metric-accent.warning {
-      color: var(--yellow);
-    }
-
-    .metric-accent.danger {
-      color: var(--red);
-    }
-
-    .metric-accent.info {
-      color: var(--blue-soft);
-    }
-
-    .metric-bar {
-      margin-top: 14px;
-      height: 7px;
-      border-radius: 999px;
-      background: rgba(255, 255, 255, 0.05);
-      overflow: hidden;
-      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
-    }
-
-    .metric-bar > span {
-      display: block;
-      height: 100%;
-      border-radius: inherit;
-      background: linear-gradient(90deg, var(--teal-deep), var(--teal-strong));
-      box-shadow: 0 0 18px rgba(0, 255, 170, 0.28);
-    }
-
-    .metric-bar.warning > span {
-      background: linear-gradient(90deg, #b88d2a, var(--yellow));
-      box-shadow: 0 0 18px rgba(255, 202, 87, 0.25);
-    }
-
-    .metric-bar.danger > span {
-      background: linear-gradient(90deg, #b93d58, var(--red));
-      box-shadow: 0 0 18px rgba(255, 90, 115, 0.24);
-    }
-
-    .metric-bar.info > span {
-      background: linear-gradient(90deg, #2679c6, var(--blue-soft));
-      box-shadow: 0 0 18px rgba(85, 184, 255, 0.22);
-    }
-
-    .root-card .card-value {
-      font-size: clamp(2.6rem, 3.4vw, 3.6rem);
-    }
-
-    .storage-list {
-      margin-top: 12px;
-      display: grid;
-      gap: 9px;
-    }
-
-    .storage-row {
-      display: grid;
-      grid-template-columns: minmax(110px, 140px) minmax(70px, 90px) 1fr minmax(70px, 80px);
-      gap: 12px;
-      align-items: center;
-      padding: 9px 11px;
-      border-radius: 12px;
-      background: rgba(5, 16, 13, 0.6);
-      border: 1px solid rgba(0, 220, 140, 0.11);
-      font-family: var(--font-mono);
-    }
-
-    .storage-row strong {
-      color: var(--white);
-      font-size: 0.84rem;
-      letter-spacing: 0.05em;
-    }
-
-    .storage-row span {
-      color: var(--text-dim);
-      font-size: 0.74rem;
-    }
-
-    .storage-row .status-pill {
-      justify-self: end;
-    }
-
-    .service-card {
-      min-height: 196px;
-    }
-
-    .service-card.primary {
-      grid-column: span 2;
-    }
-
-    .service-card.secondary {
-      grid-column: span 2;
-    }
-
-    .service-card.standard {
-      grid-column: span 2;
-    }
-
-    .service-card .card-copy {
-      margin-top: 10px;
-      color: var(--text-dim);
-      line-height: 1.42;
-      font-size: 0.82rem;
-    }
-
-    .service-meta {
-      margin-top: auto;
-      display: grid;
-      gap: 7px;
-      padding-top: 12px;
-    }
-
-    .service-meta-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      font-family: var(--font-mono);
-      font-size: 0.74rem;
-      color: var(--text-dim);
-    }
-
-    .service-meta-row strong {
-      color: var(--white);
-      font-weight: 400;
-    }
-
-    .service-meta-row strong.online {
-      color: var(--green);
-    }
-
-    .service-meta-row strong.warning {
-      color: var(--yellow);
-    }
-
-    .service-meta-row strong.offline {
-      color: var(--red);
-    }
-
-    .service-meta-row strong.info {
-      color: var(--blue-soft);
-    }
-
-    .status-pill {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 5px 8px;
-      border-radius: 999px;
-      background: rgba(7, 18, 15, 0.78);
-      border: 1px solid rgba(0, 220, 140, 0.14);
-      font-family: var(--font-display);
-      font-size: 0.58rem;
-      letter-spacing: 0.18em;
-      text-transform: uppercase;
-      color: var(--text);
-    }
-
-    .status-pill::before {
-      content: "";
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background: currentColor;
-      box-shadow: 0 0 14px currentColor;
-    }
-
-    .status-pill.online {
-      color: var(--teal-strong);
-    }
-
-    .status-pill.warning {
-      color: var(--yellow);
-    }
-
-    .status-pill.offline {
-      color: var(--red);
-    }
-
-    .status-pill.info {
-      color: var(--blue-soft);
-    }
-
-    .quick-card {
-      min-height: 98px;
-    }
-
-    .quick-card a {
-      margin-top: auto;
-      text-decoration: none;
-      color: inherit;
-      display: inline-flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-      padding: 8px 10px;
-      border-radius: 12px;
-      border: 1px solid rgba(0, 220, 140, 0.12);
-      background: rgba(4, 12, 10, 0.55);
-      font-family: var(--font-mono);
-      font-size: 0.74rem;
-      letter-spacing: 0.05em;
-    }
-
-    .quick-card .card-title {
-      font-size: 0.94rem;
-      margin-top: 9px;
-    }
-
-    .quick-card a span:last-child {
-      color: var(--teal-strong);
-    }
-
-    .section:last-of-type {
-      margin-top: 32px;
-    }
-
-    .footer-note {
-      margin-top: 12px;
-      padding: 0 4px;
-      color: var(--text-soft);
-      font-family: var(--font-mono);
-      font-size: 0.68rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-    }
-
-    .api-error {
-      color: var(--yellow);
-    }
-
-    @media (max-width: 1220px) {
-      .top-frame,
-      .hero-grid,
-      .storage-grid,
-      .net-health-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .stats-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-
-      .quick-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-
-      .status-stack {
-        grid-template-columns: 1fr;
-      }
-
-      .clock-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-
-      .service-card.primary,
-      .service-card.secondary,
-      .service-card.standard {
-        grid-column: span 2;
-      }
-    }
-
-    @media (max-width: 860px) {
-      .app-shell {
-        padding: 16px 14px 26px;
-      }
-
-      .stats-grid,
-      .quick-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .service-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .service-card.primary,
-      .service-card.secondary,
-      .service-card.standard {
-        grid-column: span 1;
-      }
-
-      .storage-row {
-        grid-template-columns: 1fr;
-      }
-
-      .clock-grid {
-        grid-template-columns: 1fr 1fr;
-      }
-
-      .status-stack {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>KalliLab Control Panel</title>
+<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #060b09;
+    --bg2: #0a1210;
+    --card: rgba(8, 18, 15, 0.88);
+    --card-border: rgba(0, 220, 140, 0.18);
+    --card-hover: rgba(0, 220, 140, 0.28);
+    --teal: #00dc8c;
+    --teal-dim: #009e65;
+    --teal-bright: #00ffaa;
+    --teal-glow: rgba(0, 220, 140, 0.4);
+    --text: #b8d4cc;
+    --text-dim: #5a8a7a;
+    --text-bright: #d8f0e8;
+    --clr-warn: #ff4466;
+    --red: #ff4466;
+    --yellow: #ffcc44;
+    --blue: #44aaff;
+    --graph: #00cc88;
+    --font-display: 'Orbitron', monospace;
+    --font-mono: 'Share Tech Mono', monospace;
+    --font-body: 'Exo 2', sans-serif;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-body);
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+  }
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(0, 220, 140, 0.025) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0, 220, 140, 0.025) 1px, transparent 1px);
+    background-size: 40px 40px;
+    z-index: 0;
+    pointer-events: none;
+  }
+  @keyframes scanline {
+    0% { top: -5%; }
+    100% { top: 105%; }
+  }
+  .scanline {
+    position: fixed;
+    left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(0,220,140,0.06), rgba(0,220,140,0.10), rgba(0,220,140,0.06), transparent);
+    z-index: 1;
+    animation: scanline 8s linear infinite;
+    pointer-events: none;
+  }
+  .wrapper {
+    position: relative;
+    z-index: 2;
+    max-width: 1340px;
+    margin: 0 auto;
+    padding: 0 10px 32px;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0 8px;
+    border-bottom: 1px solid var(--card-border);
+    margin-bottom: 10px;
+    gap: 12px;
+  }
+  .header-logo { display: flex; align-items: center; gap: 10px; }
+  .logo-text {
+    font-family: var(--font-display);
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--teal-bright);
+    text-shadow: 0 0 20px var(--teal-glow);
+    letter-spacing: 2px;
+  }
+  .logo-sub {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    color: var(--text-dim);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+  .header-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+  .overall-status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--teal-dim); }
+  .status-indicator {
+    display: flex; align-items: center; gap: 6px;
+    font-family: var(--font-display); font-size: 11px;
+    color: var(--teal-bright); text-shadow: 0 0 10px var(--teal-glow);
+  }
+  .status-dot-main { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal-glow); }
+  .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
+  .clock {
+    font-family: var(--font-display); font-size: 24px; font-weight: 700;
+    color: var(--teal-bright); text-shadow: 0 0 20px var(--teal-glow), 0 0 40px rgba(0,220,140,0.2);
+    letter-spacing: 2px;
+  }
+  .date-str { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-align: right; }
+  #last-updated { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); text-align: right; }
+  .section-header {
+    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
+    font-family: var(--font-display); font-size: 8px; font-weight: 600;
+    letter-spacing: 3px; text-transform: uppercase; color: var(--teal-dim);
+  }
+  .section-header::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--card-border), transparent); }
+  .widget-row { display: grid; gap: 8px; margin-bottom: 8px; }
+  .row-5 { grid-template-columns: repeat(5, 1fr); }
+  .row-4 { grid-template-columns: repeat(4, 1fr); }
+  .row-3 { grid-template-columns: repeat(3, 1fr); }
+  .row-2 { grid-template-columns: repeat(2, 1fr); }
+  .row-2-1 { grid-template-columns: 2fr 1fr; }
+  .row-1-2 { grid-template-columns: 1fr 2fr; }
+  .row-3-2 { grid-template-columns: 3fr 2fr; }
+  .card {
+    background: rgba(6, 14, 11, 0.78);
+    border: 1px solid var(--card-border);
+    border-radius: 8px;
+    padding: 8px 10px;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    backdrop-filter: blur(14px) saturate(1.4);
+    -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  }
+  .card:hover { border-color: rgba(0,220,140,0.32); box-shadow: 0 0 16px rgba(0,220,140,0.07), inset 0 0 20px rgba(0,220,140,0.02); }
+  .card-title {
+    font-family: var(--font-display); font-size: 8px; font-weight: 600;
+    letter-spacing: 2px; text-transform: uppercase; color: var(--teal-dim);
+    margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
+  }
+  .card-title-left { display: flex; align-items: center; gap: 6px; }
+  .card-title .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 5px var(--teal-glow); flex-shrink: 0; }
+  .stats-grid { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; }
+  .stat-block { text-align: center; min-width: 40px; }
+  .stat-num { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--teal-bright); text-shadow: 0 0 10px var(--teal-glow); line-height: 1.1; }
+  .stat-num.dim { color: var(--teal-dim); text-shadow: none; font-size: 14px; }
+  .stat-num.warn { color: var(--yellow); text-shadow: 0 0 10px rgba(255,204,68,0.4); }
+  .stat-num.danger { color: var(--red); text-shadow: 0 0 10px rgba(255,68,102,0.4); }
+  .stat-num.blue { color: var(--blue); text-shadow: 0 0 10px rgba(68,170,255,0.4); }
+  .stat-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }
+  .status-pill { font-family: var(--font-mono); font-size: 7px; letter-spacing: 1px; padding: 1px 5px; border-radius: 3px; font-weight: 700; }
+  .pill-online { background: rgba(0,220,140,0.12); color: var(--teal); border: 1px solid rgba(0,220,140,0.3); }
+  .pill-offline { background: rgba(255,68,102,0.1); color: var(--red); border: 1px solid rgba(255,68,102,0.25); }
+  .pill-degraded { background: rgba(255,204,68,0.1); color: var(--yellow); border: 1px solid rgba(255,204,68,0.25); }
+  .progress-wrap { margin-top: 5px; }
+  .progress-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); margin-bottom: 2px; }
+  .progress-bar { height: 3px; background: rgba(0,220,140,0.1); border-radius: 2px; overflow: hidden; }
+  .progress-fill { height: 100%; background: linear-gradient(90deg, var(--teal-dim), var(--teal-bright)); border-radius: 2px; box-shadow: 0 0 5px var(--teal-glow); transition: width 1s ease; }
+  .progress-fill.warn { background: linear-gradient(90deg, #cc8800, var(--yellow)); }
+  .progress-fill.danger { background: linear-gradient(90deg, #cc2244, var(--red)); }
+  .service-header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
+  .service-icon { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
+  .service-name { font-family: var(--font-display); font-size: 9px; font-weight: 600; color: var(--text-bright); letter-spacing: 1px; flex: 1; }
+  .service-version { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); }
+  .sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; font-family: var(--font-mono); font-size: 10px; }
+  .sys-row { display: flex; justify-content: space-between; padding: 1px 0; }
+  .sys-key { color: var(--text-dim); }
+  .sys-val { color: var(--teal); }
+  .disk-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
+  .disk-name { font-family: var(--font-display); font-size: 9px; color: var(--text-bright); letter-spacing: 1px; }
+  .disk-usage { font-family: var(--font-mono); font-size: 9px; color: var(--teal); }
+  .disk-sub { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); margin-bottom: 4px; }
+  .scrutiny-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-family: var(--font-mono); font-size: 9px; border-bottom: 1px solid rgba(0,220,140,0.05); }
+  .scrutiny-row:last-child { border-bottom: none; }
+  .disk-icon { font-size: 10px; font-weight: bold; width: 12px; text-align: center; }
+  .disk-ok { color: var(--teal); }
+  .disk-fail { color: var(--red); }
+  .disk-unk { color: var(--text-dim); }
+  .disk-name-col { flex: 1; color: var(--text-bright); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .disk-model { color: var(--text-dim); font-size: 8px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .disk-temp { color: var(--teal-dim); font-size: 8px; white-space: nowrap; }
+  .scrutiny-offline { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); padding: 4px 0; }
+  .uk-monitor-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
+  .uk-monitor-name { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); min-width: 70px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .uk-bar { display: flex; gap: 1px; flex: 1; }
+  .hb-seg { height: 7px; flex: 1; border-radius: 1px; }
+  .hb-up { background: var(--teal); box-shadow: 0 0 3px var(--teal-glow); opacity: 0.85; }
+  .hb-down { background: var(--red); box-shadow: 0 0 3px rgba(255,68,102,0.4); opacity: 0.85; }
+  .uk-down-name { display: block; font-family: var(--font-mono); font-size: 8px; color: var(--red); padding: 1px 0; }
+  .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+  .dot-ok { background: var(--teal); box-shadow: 0 0 5px var(--teal-glow); }
+  .dot-err { background: var(--red); box-shadow: 0 0 5px rgba(255,68,102,0.4); }
+  .dot-unk { background: var(--text-dim); }
+  .adguard-bar-wrap { margin-top: 5px; }
+  .adguard-bar { height: 3px; background: rgba(0,220,140,0.1); border-radius: 2px; overflow: hidden; position: relative; }
+  .adguard-bar-fill { height: 100%; background: linear-gradient(90deg, var(--teal-dim), var(--teal-bright)); border-radius: 2px; box-shadow: 0 0 5px var(--teal-glow); width: 0%; transition: width 1s ease; }
+  .net-health-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  #quick-access-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
+  .quick-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; background: rgba(6, 14, 11, 0.72); border: 1px solid var(--card-border); border-radius: 7px; cursor: pointer; transition: all 0.18s; text-decoration: none; color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
+  .quick-tile:hover { border-color: rgba(0,220,140,0.4); background: rgba(0,220,140,0.05); transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,220,140,0.10); }
+  .quick-tile-icon { font-size: 18px; line-height: 1; }
+  .quick-tile-label { font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); text-align: center; line-height: 1.2; }
+  .quick-tile:hover .quick-tile-label { color: var(--teal); }
+  .docker-row { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 9px; margin-top: 4px; flex-wrap: wrap; }
+  .docker-chip { padding: 2px 6px; border-radius: 3px; background: rgba(0,220,140,0.07); border: 1px solid rgba(0,220,140,0.15); color: var(--teal-dim); }
+  .docker-chip.running { color: var(--teal); border-color: rgba(0,220,140,0.3); }
+  .docker-chip.stopped { color: var(--yellow); border-color: rgba(255,204,68,0.3); background: rgba(255,204,68,0.06); }
+  .docker-chip.unhealthy { color: var(--red); border-color: rgba(255,68,102,0.3); background: rgba(255,68,102,0.06); }
+  @media (max-width: 1100px) {
+    .row-5 { grid-template-columns: repeat(3, 1fr); }
+    .row-4 { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 780px) {
+    .row-5, .row-4, .row-3 { grid-template-columns: repeat(2, 1fr); }
+    .row-2, .row-2-1, .row-1-2, .row-3-2 { grid-template-columns: 1fr; }
+    .net-health-grid { grid-template-columns: 1fr; }
+    #quick-access-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
+  }
+</style>
 </head>
 <body>
-  <div class="hud-noise"></div>
-  <div class="hud-vignette"></div>
+<div class="scanline"></div>
+<div class="wrapper">
 
-  <main class="app-shell">
-    <section class="top-frame">
-      <article class="panel hero">
-        <div class="panel-inner hero-grid">
-          <div>
-            <span class="eyebrow">Homelab Command Surface</span>
-            <h1>KALLILAB<br>CONTROL PANEL</h1>
-            <p class="hero-copy" id="hero-copy">
-              Eigenstaendiges MVP-v1 Frontend-Mockup mit voller visueller Praesenz:
-              atmosphaerischer Dark-Tech-Look, neon teal Highlights, technische Typografie,
-              Glass Panels und dichte Control-Surface-Stimmung.
-            </p>
-            <div class="hero-meta">
-              <span class="meta-chip">MVP-V1 SCOPE LOCKED</span>
-              <span class="meta-chip">FASTAPI AGGREGATOR READY</span>
-              <span class="meta-chip">VANILLA JS FRONTEND</span>
-            </div>
-          </div>
-
-          <div class="status-stack">
-            <div class="status-tile" id="overall-status-tile">
-              <span class="card-label">Overall Cluster State</span>
-              <strong id="overall-status-label">NOMINAL</strong>
-              <span id="overall-status-summary">8 Services online, 2 degraded, 1 offline</span>
-            </div>
-            <div class="status-tile" id="home-assistant-tile">
-              <span class="card-label">Home Assistant</span>
-              <strong id="ha-status-label">ONLINE</strong>
-              <span id="ha-status-summary">Basisstatus aktiv, API-Mapping fuer MVP vorbereitet</span>
-            </div>
-          </div>
-        </div>
-      </article>
-
-      <aside class="panel clock-panel">
-        <div class="panel-inner">
-          <span class="eyebrow">Local Time Sync</span>
-          <div class="clock-readout">
-            <div class="clock-time" id="clock-time">00:00</div>
-            <div class="clock-date" id="clock-date">SAMSTAG / 04 APR 2026</div>
-            <div class="clock-meta" id="last-refresh">LAST RENDER 12:00:00 CET</div>
-          </div>
-
-          <dl class="clock-grid">
-            <div class="mini-cell">
-              <dt>Mode</dt>
-              <dd>CONTROL</dd>
-            </div>
-            <div class="mini-cell">
-              <dt>Refresh</dt>
-              <dd>15 SEC</dd>
-            </div>
-            <div class="mini-cell">
-              <dt>Theme</dt>
-              <dd>ATMOS DARK</dd>
-            </div>
-            <div class="mini-cell">
-              <dt>Profile</dt>
-              <dd>MVP-V1</dd>
-            </div>
-          </dl>
-        </div>
-      </aside>
-    </section>
-
-    <section class="section">
-      <div class="section-head">
-        <span class="section-label">System Stats</span>
-        <p>Beszel-backed host telemetry</p>
+  <!-- HEADER -->
+  <header class="header" id="header">
+    <div class="header-logo">
+      <div>
+        <div class="logo-text">KALLILAB</div>
+        <div class="logo-sub">Control Panel</div>
       </div>
+    </div>
+    <div class="header-center">
+      <div class="overall-status">SYSTEM STATUS</div>
+      <div class="status-indicator">
+        <span class="status-dot-main" id="overall-dot"></span>
+        <span id="overall-status-text">LOADING</span>
+      </div>
+    </div>
+    <div class="header-right">
+      <div class="clock" id="clock">--:--:--</div>
+      <div class="date-str" id="date-str">---</div>
+      <div id="last-updated">never updated</div>
+    </div>
+  </header>
 
+  <!-- SYSTEM STATS ROW -->
+  <div class="section-header"><span>&#x2B21;</span> SYSTEM</div>
+  <div class="widget-row row-5" id="stats-row" style="margin-bottom:8px;">
+    <div class="card">
+      <div class="card-title"><span class="dot"></span>CPU</div>
       <div class="stats-grid">
-        <article class="card" id="cpu-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">CPU</span>
-              <span class="signal online" id="cpu-signal"></span>
-            </div>
-            <h2 class="card-title">Compute Load</h2>
-            <div class="card-value value-online" id="cpu-value">23%</div>
-            <div class="card-subvalue" id="cpu-subvalue">
-              <span><span class="metric-accent online" id="cpu-cores">8 CORES</span> ACTIVE</span>
-              <span><span class="metric-accent info">L1</span> <span id="cpu-load">0.82</span></span>
-            </div>
-            <div class="metric-bar" id="cpu-bar"><span id="cpu-bar-fill" style="width:23%"></span></div>
-          </div>
-        </article>
-
-        <article class="card" id="ram-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">RAM</span>
-              <span class="signal warning" id="ram-signal"></span>
-            </div>
-            <h2 class="card-title">Memory Pressure</h2>
-            <div class="card-value value-warning" id="ram-value">61%</div>
-            <div class="card-subvalue" id="ram-subvalue">
-              <span><span class="metric-accent warning" id="ram-used">19.6 GB</span> USED</span>
-              <span><span class="metric-accent info" id="ram-free">12.4 GB</span> FREE</span>
-            </div>
-            <div class="metric-bar warning" id="ram-bar"><span id="ram-bar-fill" style="width:61%"></span></div>
-          </div>
-        </article>
-
-        <article class="card" id="network-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Network</span>
-              <span class="signal info" id="network-signal"></span>
-            </div>
-            <h2 class="card-title">Traffic Flow</h2>
-            <div class="card-value value-info" id="network-value">12.4</div>
-            <div class="card-subvalue" id="network-subvalue">
-              <span><span class="metric-accent info">RX</span> MBPS</span>
-              <span><span class="metric-accent online">TX</span> <span id="network-tx">3.1 MBPS</span></span>
-            </div>
-            <div class="metric-bar info" id="network-bar"><span id="network-bar-fill" style="width:48%"></span></div>
-          </div>
-        </article>
-
-        <article class="card" id="uptime-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Uptime</span>
-              <span class="signal online" id="uptime-signal"></span>
-            </div>
-            <h2 class="card-title">Host Runtime</h2>
-            <div class="card-value value-online" id="uptime-value">10D</div>
-            <div class="card-subvalue" id="uptime-subvalue">
-              <span><span class="metric-accent info">NODE</span> <span id="uptime-host">HOMELAB-01</span></span>
-              <span><span class="metric-accent online" id="uptime-hours">240</span> HRS</span>
-            </div>
-            <div class="metric-bar" id="uptime-bar"><span id="uptime-bar-fill" style="width:84%"></span></div>
-          </div>
-        </article>
+        <div class="stat-block"><div class="stat-num" id="cpu-percent">&#x2014;</div><div class="stat-label">Usage %</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="cpu-cores">&#x2014;</div><div class="stat-label">Cores</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="cpu-load">&#x2014;</div><div class="stat-label">Load 5m</div></div>
       </div>
-    </section>
-
-    <section class="section">
-      <div class="section-head">
-        <span class="section-label">Storage</span>
-        <p>Root capacity plus disk overview</p>
+    </div>
+    <div class="card">
+      <div class="card-title"><span class="dot"></span>MEMORY</div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="ram-percent">&#x2014;</div><div class="stat-label">Usage %</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="ram-used">&#x2014;</div><div class="stat-label">Used GB</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="ram-total">&#x2014;</div><div class="stat-label">Total GB</div></div>
       </div>
-
-      <div class="storage-grid">
-        <article class="card root-card" id="root-storage-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Root Storage</span>
-              <span class="status-pill online" id="root-storage-pill">Stable</span>
-            </div>
-            <h2 class="card-title">Primary Volume</h2>
-            <div class="card-value value-online" id="root-storage-value">48.7%</div>
-            <div class="card-subvalue" id="root-storage-subvalue">
-              <span><span class="metric-accent warning" id="root-storage-used">233.8 GB</span> USED</span>
-              <span><span class="metric-accent info" id="root-storage-free">246.2 GB</span> FREE</span>
-            </div>
-            <div class="metric-bar" id="root-storage-bar"><span id="root-storage-bar-fill" style="width:49%"></span></div>
-          </div>
-        </article>
-
-        <article class="card" id="disk-matrix-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Disk Matrix</span>
-              <span class="signal warning" id="disk-matrix-signal"></span>
-            </div>
-            <h2 class="card-title">Mounted Volumes</h2>
-            <div class="storage-list" id="storage-list">
-              <div class="storage-row">
-                <strong>rootfs</strong>
-                <span>/</span>
-                <div class="metric-bar"><span style="width:49%"></span></div>
-                <span class="status-pill online">49%</span>
-              </div>
-              <div class="storage-row">
-                <strong>data</strong>
-                <span>/data</span>
-                <div class="metric-bar warning"><span style="width:71%"></span></div>
-                <span class="status-pill warning">71%</span>
-              </div>
-              <div class="storage-row">
-                <strong>backup</strong>
-                <span>/backup</span>
-                <div class="metric-bar info"><span style="width:10%"></span></div>
-                <span class="status-pill online">10%</span>
-              </div>
-            </div>
-          </div>
-        </article>
+    </div>
+    <div class="card">
+      <div class="card-title"><span class="dot"></span>NETWORK</div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="net-rx">&#x2014;</div><div class="stat-label">&#x2193; Mbps</div></div>
+        <div class="stat-block"><div class="stat-num" id="net-tx">&#x2014;</div><div class="stat-label">&#x2191; Mbps</div></div>
       </div>
-    </section>
-
-    <section class="section">
-      <div class="section-head">
-        <span class="section-label">Service Grid</span>
-        <p>Core runtime and monitored services</p>
+    </div>
+    <div class="card">
+      <div class="card-title"><span class="dot"></span>HOST</div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="uptime-days">&#x2014;</div><div class="stat-label">Uptime d</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="host-platform">&#x2014;</div><div class="stat-label">OS</div></div>
       </div>
-
-      <div class="service-grid" id="service-grid">
-        <article class="card service-card primary">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Docker Summary</span>
-              <span class="status-pill online" id="docker-summary-pill">Online</span>
-            </div>
-            <h2 class="card-title">Container Runtime</h2>
-            <p class="card-copy">Secure proxy-backed Docker state for the MVP service layer.</p>
-            <div class="service-meta">
-              <div class="service-meta-row"><span>Running</span><strong class="online" id="docker-running">18</strong></div>
-              <div class="service-meta-row"><span>Stopped</span><strong class="offline" id="docker-stopped">2</strong></div>
-              <div class="service-meta-row"><span>Unhealthy</span><strong class="warning" id="docker-unhealthy">1</strong></div>
-            </div>
-          </div>
-        </article>
-
-        <article class="card service-card primary">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Uptime Kuma</span>
-              <span class="status-pill online" id="kuma-summary-pill">Synced</span>
-            </div>
-            <h2 class="card-title">Monitor Surface</h2>
-            <p class="card-copy">Availability layer for service health, latency and incident signals.</p>
-            <div class="service-meta">
-              <div class="service-meta-row"><span>Monitors Up</span><strong class="online" id="kuma-up">8</strong></div>
-              <div class="service-meta-row"><span>Monitors Down</span><strong class="offline" id="kuma-down">1</strong></div>
-              <div class="service-meta-row"><span>Paused</span><strong class="warning" id="kuma-paused">1</strong></div>
-            </div>
-          </div>
-        </article>
-
-        <article class="card service-card primary">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Home Assistant</span>
-              <span class="status-pill online" id="service-ha-pill">Reachable</span>
-            </div>
-            <h2 class="card-title">Core Automation Hub</h2>
-            <p class="card-copy">MVP scope limited to online and basis status, no entity rendering yet.</p>
-            <div class="service-meta">
-              <div class="service-meta-row"><span>Version</span><strong class="info" id="service-ha-version">2026.3.4</strong></div>
-              <div class="service-meta-row"><span>Latency</span><strong class="online" id="service-ha-latency">142 MS</strong></div>
-              <div class="service-meta-row"><span>Last Check</span><strong id="service-ha-last-check">11:59:58</strong></div>
-            </div>
-          </div>
-        </article>
-
-        <article class="card service-card secondary" id="service-card-fallback-1">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Immich</span>
-              <span class="status-pill warning">Degraded</span>
-            </div>
-            <h2 class="card-title">Photo Pipeline</h2>
-            <p class="card-copy">Container active, response times elevated beyond nominal threshold.</p>
-            <div class="service-meta">
-              <div class="service-meta-row"><span>Latency</span><strong class="warning">821 MS</strong></div>
-              <div class="service-meta-row"><span>Docker</span><strong class="online">RUNNING</strong></div>
-            </div>
-          </div>
-        </article>
-
-        <article class="card service-card secondary" id="service-card-fallback-2">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Gitea</span>
-              <span class="status-pill online">Healthy</span>
-            </div>
-            <h2 class="card-title">Git Platform</h2>
-            <p class="card-copy">Service healthy across monitor and container state layers.</p>
-            <div class="service-meta">
-              <div class="service-meta-row"><span>Latency</span><strong class="online">98 MS</strong></div>
-              <div class="service-meta-row"><span>Docker</span><strong class="online">RUNNING</strong></div>
-            </div>
-          </div>
-        </article>
-
-        <article class="card service-card secondary" id="service-card-fallback-3">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">AdGuard</span>
-              <span class="status-pill offline">Offline</span>
-            </div>
-            <h2 class="card-title">DNS Layer</h2>
-            <p class="card-copy">Placeholder service card within MVP grid and future optional adapter set.</p>
-            <div class="service-meta">
-              <div class="service-meta-row"><span>Latency</span><strong class="offline">N/A</strong></div>
-              <div class="service-meta-row"><span>Docker</span><strong class="offline">STOPPED</strong></div>
-            </div>
-          </div>
-        </article>
+    </div>
+    <div class="card">
+      <div class="card-title"><span class="dot"></span>DOCKER</div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="docker-running">&#x2014;</div><div class="stat-label">Running</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="docker-stopped">&#x2014;</div><div class="stat-label">Stopped</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="docker-total">&#x2014;</div><div class="stat-label">Total</div></div>
       </div>
-    </section>
+    </div>
+  </div>
 
-    <section class="section">
-      <div class="section-head">
-        <span class="section-label">Network &amp; Health</span>
-        <p>AdGuard DNS stats · Scrutiny SMART disk health</p>
+  <!-- STORAGE + SCRUTINY ROW -->
+  <div class="section-header"><span>&#x2B21;</span> STORAGE &amp; HEALTH</div>
+  <div style="display:grid; grid-template-columns: 1fr 280px; gap:8px; margin-bottom:8px;">
+    <div>
+      <div class="widget-row row-3" id="storage-grid">
+        <!-- Disk cards injected by renderer -->
       </div>
-
-      <div class="net-health-grid">
-        <article class="card" id="adguard-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">AdGuard Home</span>
-              <span class="status-pill offline" id="adguard-pill">Offline</span>
-            </div>
-            <h2 class="card-title">DNS Filter Layer</h2>
-            <div class="card-subvalue" style="margin-top:14px">
-              <span>Total Queries</span>
-              <strong class="metric-accent" id="adguard-total">0</strong>
-            </div>
-            <div class="card-subvalue" style="margin-top:8px">
-              <span>Blocked &nbsp;<span id="adguard-blocked-pct" class="metric-accent online">0%</span></span>
-              <strong class="metric-accent online" id="adguard-blocked">0</strong>
-            </div>
-            <div class="metric-bar" id="adguard-bar" style="margin-top:14px">
-              <span id="adguard-bar-fill" style="width:0%"></span>
-            </div>
-            <div class="card-subvalue" style="margin-top:10px">
-              <span>Avg. Processing</span>
-              <strong class="metric-accent online" id="adguard-latency">N/A</strong>
-            </div>
-          </div>
-        </article>
-
-        <article class="card" id="scrutiny-card">
-          <div class="card-inner">
-            <div class="card-head">
-              <span class="card-label">Scrutiny</span>
-              <span class="status-pill offline" id="scrutiny-pill">Offline</span>
-            </div>
-            <h2 class="card-title">Disk SMART Health</h2>
-            <div class="storage-list" id="scrutiny-list" style="margin-top:14px">
-              <div class="storage-row">
-                <strong style="color:var(--text-dim)">Loading…</strong>
-                <span>—</span>
-                <span></span>
-                <span></span>
-              </div>
-            </div>
-          </div>
-        </article>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left"><span class="dot"></span>SCRUTINY</div>
+        <span class="status-pill pill-offline" id="scrutiny-pill">OFFLINE</span>
       </div>
-    </section>
-
-    <section class="section">
-      <div class="section-head">
-        <span class="section-label">Quick Access</span>
-        <p>Supplemental launch surface only</p>
+      <div class="stats-grid" style="margin-bottom:5px;">
+        <div class="stat-block"><div class="stat-num" id="scrutiny-total">&#x2014;</div><div class="stat-label">Disks</div></div>
+        <div class="stat-block"><div class="stat-num" id="scrutiny-passed">&#x2014;</div><div class="stat-label">Passed</div></div>
+        <div class="stat-block"><div class="stat-num danger" id="scrutiny-failed">&#x2014;</div><div class="stat-label">Failed</div></div>
       </div>
+      <div id="scrutiny-list"></div>
+    </div>
+  </div>
 
-      <div class="quick-grid" id="quick-grid">
-        <article class="card quick-card">
-          <div class="card-inner">
-            <span class="card-label">Core</span>
-            <h2 class="card-title">Home Assistant</h2>
-            <a href="#"><span>OPEN CONTROL HUB</span><span>&gt;</span></a>
-          </div>
-        </article>
-
-        <article class="card quick-card">
-          <div class="card-inner">
-            <span class="card-label">Ops</span>
-            <h2 class="card-title">Uptime Kuma</h2>
-            <a href="#"><span>OPEN MONITORS</span><span>&gt;</span></a>
-          </div>
-        </article>
-
-        <article class="card quick-card">
-          <div class="card-inner">
-            <span class="card-label">Containers</span>
-            <h2 class="card-title">Portainer</h2>
-            <a href="#"><span>OPEN RUNTIME</span><span>&gt;</span></a>
-          </div>
-        </article>
-
-        <article class="card quick-card">
-          <div class="card-inner">
-            <span class="card-label">Media</span>
-            <h2 class="card-title">Immich</h2>
-            <a href="#"><span>OPEN GALLERY</span><span>&gt;</span></a>
-          </div>
-        </article>
+  <!-- SERVICE WIDGETS ROW 1 -->
+  <div class="section-header"><span>&#x2B21;</span> SERVICES</div>
+  <div class="widget-row row-3" style="margin-bottom:8px;">
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left">
+          <span class="service-icon" style="background:rgba(65,105,225,0.15);">&#x1F3E0;</span>
+          <span class="service-name">HOME ASSISTANT</span>
+        </div>
+        <span class="status-pill pill-offline" id="ha-pill">OFFLINE</span>
       </div>
-    </section>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="ha-lights">&#x2014;</div><div class="stat-label">Lights</div></div>
+        <div class="stat-block"><div class="stat-num" id="ha-climate">&#x2014;</div><div class="stat-label">Climate</div></div>
+        <div class="stat-block"><div class="stat-num" id="ha-doors">&#x2014;</div><div class="stat-label">Doors</div></div>
+        <div class="stat-block"><div class="stat-num danger" id="ha-alerts">&#x2014;</div><div class="stat-label">Alerts</div></div>
+      </div>
+      <div style="margin-top:4px; font-family:var(--font-mono); font-size:8px; color:var(--text-dim);" id="ha-version"></div>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left">
+          <span class="service-icon" style="background:rgba(0,220,140,0.12);">&#x1F43B;</span>
+          <span class="service-name">UPTIME KUMA</span>
+        </div>
+        <span class="status-pill pill-offline" id="uk-pill">OFFLINE</span>
+      </div>
+      <div class="stats-grid" style="margin-bottom:5px;">
+        <div class="stat-block"><div class="stat-num" id="uk-up">&#x2014;</div><div class="stat-label">Up</div></div>
+        <div class="stat-block"><div class="stat-num danger" id="uk-down">&#x2014;</div><div class="stat-label">Down</div></div>
+        <div class="stat-block"><div class="stat-num" id="uk-uptime">&#x2014;</div><div class="stat-label">24h %</div></div>
+      </div>
+      <div id="uk-down-list"></div>
+      <div id="uk-bars"></div>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left">
+          <span class="service-icon" style="background:rgba(255,204,68,0.12);">&#x1F4F7;</span>
+          <span class="service-name">IMMICH</span>
+        </div>
+        <span class="status-pill pill-offline" id="immich-pill">OFFLINE</span>
+      </div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="immich-photos">&#x2014;</div><div class="stat-label">Photos</div></div>
+        <div class="stat-block"><div class="stat-num" id="immich-videos">&#x2014;</div><div class="stat-label">Videos</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="immich-storage">&#x2014;</div><div class="stat-label">Storage</div></div>
+      </div>
+    </div>
+  </div>
 
-    <div class="footer-note" id="footer-note">Live dashboard connected to aggregator API.</div>
-  </main>
+  <!-- SERVICE WIDGETS ROW 2 -->
+  <div class="widget-row row-3" style="margin-bottom:8px;">
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left">
+          <span class="service-icon" style="background:rgba(68,170,255,0.12);">&#x1F4BE;</span>
+          <span class="service-name">BACKREST</span>
+          <span class="status-dot dot-unk" id="backrest-status-dot" title="unknown"></span>
+        </div>
+        <span class="status-pill pill-offline" id="backrest-pill">OFFLINE</span>
+      </div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num dim" id="backrest-last">&#x2014;</div><div class="stat-label">Last Backup</div></div>
+        <div class="stat-block"><div class="stat-num" id="backrest-repos">&#x2014;</div><div class="stat-label">Repos</div></div>
+        <div class="stat-block"><div class="stat-num danger" id="backrest-errors">&#x2014;</div><div class="stat-label">Errors</div></div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left">
+          <span class="service-icon" style="background:rgba(0,220,140,0.12);">&#x1F6E1;&#xFE0F;</span>
+          <span class="service-name">ADGUARD DNS</span>
+        </div>
+        <span class="status-pill pill-offline" id="adguard-pill">OFFLINE</span>
+      </div>
+      <div class="stats-grid" style="margin-bottom:5px;">
+        <div class="stat-block"><div class="stat-num" id="adguard-total">&#x2014;</div><div class="stat-label">Queries</div></div>
+        <div class="stat-block"><div class="stat-num" id="adguard-blocked">&#x2014;</div><div class="stat-label">Blocked</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="adguard-blocked-pct">&#x2014;</div><div class="stat-label">Block %</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="adguard-latency">&#x2014;</div><div class="stat-label">Latency</div></div>
+      </div>
+      <div class="adguard-bar-wrap"><div class="adguard-bar"><div class="adguard-bar-fill" id="adguard-bar-fill"></div></div></div>
+    </div>
+    <div class="card">
+      <div class="card-title">
+        <div class="card-title-left"><span class="dot"></span>SERVICES OVERVIEW</div>
+        <span class="status-pill pill-offline" id="services-pill">&#x2014;</span>
+      </div>
+      <div class="stats-grid">
+        <div class="stat-block"><div class="stat-num" id="svc-online">&#x2014;</div><div class="stat-label">Online</div></div>
+        <div class="stat-block"><div class="stat-num warn" id="svc-degraded">&#x2014;</div><div class="stat-label">Degraded</div></div>
+        <div class="stat-block"><div class="stat-num danger" id="svc-offline">&#x2014;</div><div class="stat-label">Offline</div></div>
+        <div class="stat-block"><div class="stat-num dim" id="svc-total">&#x2014;</div><div class="stat-label">Total</div></div>
+      </div>
+    </div>
+  </div>
 
-  <script type="module" src="./assets/js/app.js"></script>
+  <!-- QUICK ACCESS -->
+  <div class="section-header"><span>&#x2B21;</span> QUICK ACCESS</div>
+  <div id="quick-access-grid"></div>
+
+</div><!-- /wrapper -->
+
+<script type="module" src="/assets/js/app.js"></script>
+<script>
+  // Clock
+  function updateClock() {
+    const now = new Date();
+    const pad = n => String(n).padStart(2, '0');
+    document.getElementById('clock').textContent =
+      `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+    document.getElementById('date-str').textContent =
+      now.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' });
+  }
+  updateClock();
+  setInterval(updateClock, 1000);
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
