From 3cf5b368dd6e57dab48a8858fb25767f616a8df4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 19 May 2026 19:48:41 +0000
Subject: [PATCH] =?UTF-8?q?feat(ui):=20port=20v2=20redesign=20bundle=20?=
 =?UTF-8?q?=E2=80=94=20AttentionHero,=20HostPanel,=20KpiStrip,=20ServiceTi?=
 =?UTF-8?q?le=20v2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ports the design handoff bundle (handoff/reference/v2/) into the live frontend.
Markup structure and CSS class names are copied 1:1; component logic stays
wired to the existing API / polling architecture.

Tokens (frontend/src/styles/tokens.css)
- Deeper surface stack (bg-0/1, surface-1..4) and tighter borders.
- New: --grad-hero, --shadow-2, --shadow-pop, --ring-focus, --r-5,
  --t-med / --t-slow easing curves.
- Type pills, reach pills, status dots match the design palette.
- Light theme + density-cozy variant + data-reduce-motion override retained.

Layout (frontend/src/styles/layout.css)
- Full rewrite to the design's 12-col `.dash-main` grid.
- New: `.attention` (320px + 1fr), `.host-panel` (8-col, 3-col inner),
  `.quick-stats` (4-col, holds KpiStrip + Activity), `.kpi`, `.kpi-strip`,
  `.activity-row` with dashed-bottom rows, `.svc-tile` with the new
  4-row grid + status-color left-rule + status-tinted background.
- VM table sticky header + `.attn` / `.warn-row` row tinting.
- 1100px breakpoint collapses to 6-col, 700px to single-col with
  drawer becoming full-screen.

Layout-extra (NEW frontend/src/styles/layout-extra.css)
- `.grid-12` / `.col-N` helpers (used inside Network/Backup/Cloudflare).
- KV-stack, mini-table, device-card, port-grid, vlan-list.
- Backup heatmap (`.day-grid`, `.day-cell.{ok,half,fail}`), job-table.
- DNS-list, settings-nav, settings-row, seg-control, native-style switch.
- Drawer: backdrop, slide-in, `.drawer-summary` 4-col, `.drawer-section`,
  `.drawer-chart`, `.probe-history` heatmap, `.log-pre`, `.drawer-foot`.

Components
- Header — single-row global-status pill ("X kritisches Issue · Y degraded"),
  segmented hdr-group (refresh / pause / snapshot), theme + settings icons,
  removes the lastRefresh/StatusHistory crumb (moved into the Activity feed).
- AttentionHero (NEW) — 320px Health-Score card + alerts-list. Derives
  health from svc/ram/cpu/cert/backup signals client-side. Each alert
  is a button that opens the matching drawer.
- HostPanel (NEW) — 3-col grid: CPU (TrendBars), RAM (StackedBar by guest +
  legend), Disk (TrendBars). Header carries online badge, temp, disks-passed.
- KpiStrip (NEW) — 4 KPIs: Container Up · Services Healthy · Avg Response
  (with a sparkline of the worst offender) · SLA 30d.
- ServiceGrid — ServiceTileV2 markup: status-tinted bg, peach status-rail,
  3-col stats (Response / p95·24h / Uptime·30d) with dashed dividers,
  reach pills LEFT, "letzter Vorfall" RIGHT (was reversed).
- VMTable — switched section wrapper to `.vm-section` + `.dash-section-head`
  + `.vm-table-wrap` to pick up the new sticky-header + row-tinting styles.
- NetworkPanel / BackupsSection / CloudflareSection — section wrappers
  renamed to `.network-section` / `.backup-section` / `.cloudflare-section`
  + `.dash-section-head` so they sit cleanly in the 12-col main grid.
- SettingsPage — 2-col flat layout (3+9 inside dash-main). Native
  `<label class="switch">` instead of a custom button, `.settings-section-h`
  with h2 + description, `.seg-control` with icons for Theme picker.
- AuditLog — re-skinned as Activity feed with `.activity-row` + level icons.
- Primitives — added Reach, TrendBars, StackedBar (segment list), AreaChart,
  Ring; expanded the icon set (chevron, temp, wifi, router, shield, globe,
  filter, copy, trash, arrow_up/down, zap, settings/gear alias).

App.tsx
- Overview now renders AttentionHero → HostPanel + quick-stats (KpiStrip +
  Activity) → ServiceGrid, matching the design artboard.
- Server renders HostPanel + quick-stats + VMTable + ServiceGrid.
- Header gets servicesCritical + onOpenSettings + onToggleTheme; the old
  refreshInterval prop moved into Settings.

Cleanup
- Drop OverviewCards.tsx (replaced by AttentionHero + HostPanel + KpiStrip).
- Drop StatusHistory.tsx (no longer in the header; activity feed covers it).

Verified: tsc -b · eslint · 31 vitest · vite build all green;
backend pytest (54) + ruff still green.
---
 frontend/src/App.tsx                          |  122 +-
 frontend/src/components/AttentionHero.tsx     |  197 ++
 frontend/src/components/AuditLog.tsx          |   84 +-
 frontend/src/components/BackupsSection.tsx    |    2 +-
 frontend/src/components/CloudflareSection.tsx |    8 +-
 frontend/src/components/Header.tsx            |  165 +-
 frontend/src/components/HostPanel.tsx         |  113 ++
 frontend/src/components/KpiStrip.tsx          |   77 +
 frontend/src/components/NetworkPanel.tsx      |   10 +-
 frontend/src/components/OverviewCards.tsx     |  293 ---
 frontend/src/components/ServiceGrid.tsx       |   90 +-
 frontend/src/components/SettingsPage.tsx      |  345 ++--
 frontend/src/components/StatusHistory.tsx     |   98 -
 frontend/src/components/VMTable.tsx           |    8 +-
 frontend/src/components/primitives.tsx        |  245 ++-
 frontend/src/main.tsx                         |    1 +
 frontend/src/styles/layout-extra.css          |  359 ++++
 frontend/src/styles/layout.css                | 1782 +++++------------
 frontend/src/styles/tokens.css                |  247 +--
 19 files changed, 1916 insertions(+), 2330 deletions(-)
 create mode 100644 frontend/src/components/AttentionHero.tsx
 create mode 100644 frontend/src/components/HostPanel.tsx
 create mode 100644 frontend/src/components/KpiStrip.tsx
 delete mode 100644 frontend/src/components/OverviewCards.tsx
 delete mode 100644 frontend/src/components/StatusHistory.tsx
 create mode 100644 frontend/src/styles/layout-extra.css

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3af2921..5d0b542 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { api } from './api/client';
+import { AttentionHero } from './components/AttentionHero';
 import { AuditLog } from './components/AuditLog';
 import { BackupsSection } from './components/BackupsSection';
 import { CloudflareSection } from './components/CloudflareSection';
@@ -8,8 +9,9 @@ import { ConfirmModal } from './components/ConfirmModal';
 import { Drawer } from './components/Drawer';
 import { GuestDrawer } from './components/GuestDrawer';
 import { Header } from './components/Header';
+import { HostPanel } from './components/HostPanel';
+import { KpiStrip } from './components/KpiStrip';
 import { NetworkPanel } from './components/NetworkPanel';
-import { OverviewCards } from './components/OverviewCards';
 import { SectionNav } from './components/SectionNav';
 import { ServiceGrid } from './components/ServiceGrid';
 import { SettingsPage } from './components/SettingsPage';
@@ -42,8 +44,6 @@ export function App() {
     setTimeout(() => setToasts((s) => s.filter((x) => x.id !== id)), 4500);
   }, []);
 
-  // Cmd/Ctrl+K toggles the palette; "?" opens the keyboard cheatsheet;
-  // 1-6 jumps to sections (when not in an input).
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       const target = e.target as HTMLElement | null;
@@ -68,8 +68,6 @@ export function App() {
     return () => window.removeEventListener('keydown', onKey);
   }, [setSection]);
 
-  // Pause swaps polling intervals to 0 (no auto-refresh) while keeping the
-  // last known state in memory. Manual refresh still works.
   const pollFast = paused ? 0 : ui.refreshIntervalMs;
   const pollBackup = paused ? 0 : ui.pollBackupMs;
   const pollCerts = paused ? 0 : ui.pollCertsMs;
@@ -81,14 +79,6 @@ export function App() {
   const net = usePoll((sig) => api.network(sig), pollFast);
   const cer = usePoll((sig) => api.certs(sig), pollCerts);
 
-  const lastRefresh = Math.max(
-    sys.lastFetched,
-    svc.lastFetched,
-    tun.lastFetched,
-    bkp.lastFetched,
-    net.lastFetched,
-  );
-
   const refreshAll = useCallback(() => {
     sys.refresh();
     svc.refresh();
@@ -101,8 +91,8 @@ export function App() {
   const services = useMemo(() => svc.data ?? [], [svc.data]);
   const guests = useMemo(() => sys.data?.guests ?? [], [sys.data]);
   const servicesUp = services.filter((s) => s.status === 'ok').length;
+  const servicesCritical = services.filter((s) => s.status === 'err').length;
 
-  // Per-section alert counts shown as pills on the nav tabs.
   const alerts = useMemo<Record<Section, number>>(() => {
     const svcBad = services.filter((s) => s.status === 'err' || s.status === 'warn').length;
     const hostBad = sys.data?.host && !sys.data.host.online ? 1 : 0;
@@ -133,7 +123,6 @@ export function App() {
   );
 
   const onLogs = (g: Guest) => setLogsGuest(g);
-
   const onRestart = (g: Guest) => setConfirmGuest(g);
 
   const confirmRestart = async () => {
@@ -142,48 +131,30 @@ export function App() {
     setConfirmGuest(null);
     try {
       await api.restartGuest(guest.id, guest.type === 'VM' ? 'qemu' : 'lxc');
-      pushToast({
-        level: 'warn',
-        title: `${guest.name} restarting`,
-        body: `Container ${guest.id} wird neu gestartet`,
-      });
+      pushToast({ level: 'warn', title: `${guest.name} restarting`, body: `Container ${guest.id} wird neu gestartet` });
       setTimeout(refreshAll, 3000);
     } catch (e) {
-      pushToast({
-        level: 'err',
-        title: 'Restart fehlgeschlagen',
-        body: (e as Error).message,
-      });
+      pushToast({ level: 'err', title: 'Restart fehlgeschlagen', body: (e as Error).message });
     }
   };
 
   const onVerifyBackup = useCallback(
     async (snap: BackupSnapshot) => {
       const ok = window.confirm(
-        `Verifikation für ${snap.target} (${new Date(snap.backup_time * 1000).toLocaleString()}) starten?\n\nDer Job läuft asynchron auf dem PBS und kann bei großen Backups länger dauern.`,
+        `Verifikation für ${snap.target} (${new Date(snap.backup_time * 1000).toLocaleString()}) starten?`,
       );
       if (!ok) return;
       try {
         const r = await api.verifyBackup(snap.backup_type, snap.backup_id, snap.backup_time);
-        pushToast({
-          level: 'ok',
-          title: `Verify gestartet · ${snap.target}`,
-          body: `UPID: ${r.upid.slice(0, 32)}…`,
-        });
+        pushToast({ level: 'ok', title: `Verify gestartet · ${snap.target}`, body: `UPID: ${r.upid.slice(0, 32)}…` });
         setTimeout(bkp.refresh, 2000);
       } catch (e) {
-        pushToast({
-          level: 'err',
-          title: 'Verify fehlgeschlagen',
-          body: (e as Error).message,
-        });
+        pushToast({ level: 'err', title: 'Verify fehlgeschlagen', body: (e as Error).message });
       }
     },
     [pushToast, bkp],
   );
 
-  // Build a JSON snapshot of the current dashboard state and copy it to the
-  // clipboard. Useful for filing issues without having to screenshot.
   const onSnapshot = useCallback(async () => {
     const snapshot = {
       capturedAt: new Date().toISOString(),
@@ -198,19 +169,13 @@ export function App() {
     const text = JSON.stringify(snapshot, null, 2);
     try {
       await navigator.clipboard.writeText(text);
-      pushToast({ level: 'ok', title: 'Snapshot kopiert', body: `${text.length.toLocaleString()} Zeichen in der Zwischenablage` });
+      pushToast({ level: 'ok', title: 'Snapshot kopiert', body: `${text.length.toLocaleString()} Zeichen` });
     } catch (e) {
-      pushToast({
-        level: 'err',
-        title: 'Snapshot fehlgeschlagen',
-        body: (e as Error).message || 'Zwischenablage nicht verfügbar',
-      });
+      pushToast({ level: 'err', title: 'Snapshot fehlgeschlagen', body: (e as Error).message || 'Zwischenablage nicht verfügbar' });
     }
   }, [me.data, sys.data, svc.data, tun.data, bkp.data, net.data, cer.data, pushToast]);
 
   const anyError = sys.error || svc.error || tun.error;
-
-  // Surface persistent backend failures as a toast (once per error transition).
   const errSig = `${sys.error?.message ?? ''}|${svc.error?.message ?? ''}|${tun.error?.message ?? ''}|${bkp.error?.message ?? ''}|${net.error?.message ?? ''}`;
   const lastErrSig = useRef('');
   useEffect(() => {
@@ -224,13 +189,20 @@ export function App() {
       { name: 'Netzwerk', err: net.error },
     ];
     for (const { name, err } of errs) {
-      if (err) {
-        pushToast({ level: 'err', title: `${name}-API Fehler`, body: err.message });
-      }
+      if (err) pushToast({ level: 'err', title: `${name}-API Fehler`, body: err.message });
     }
   }, [errSig, sys.error, svc.error, tun.error, bkp.error, net.error, pushToast]);
 
-  const overallLoading = sys.loading || tun.loading || bkp.loading;
+  const onInspectGuest = (vmid: number) => {
+    const g = guests.find((x) => x.id === vmid);
+    if (g) setLogsGuest(g);
+  };
+
+  const onToggleTheme = useCallback(() => {
+    const order: ('dark' | 'light' | 'auto')[] = ['dark', 'light', 'auto'];
+    const next = order[(order.indexOf(ui.theme) + 1) % order.length];
+    setUI('theme', next);
+  }, [ui.theme, setUI]);
 
   return (
     <div
@@ -244,7 +216,7 @@ export function App() {
       <Header
         servicesUp={servicesUp}
         servicesTotal={services.length}
-        lastRefresh={lastRefresh}
+        servicesCritical={servicesCritical}
         onRefresh={refreshAll}
         refreshing={sys.loading || svc.loading}
         email={me.data?.email ?? null}
@@ -252,8 +224,9 @@ export function App() {
         paused={paused}
         onTogglePause={() => setPaused((p) => !p)}
         onSnapshot={onSnapshot}
-        refreshIntervalMs={ui.refreshIntervalMs}
-        onChangeRefreshInterval={(ms) => setUI('refreshIntervalMs', ms)}
+        onOpenSettings={() => setSection('settings')}
+        onToggleTheme={onToggleTheme}
+        isDarkTheme={resolvedTheme === 'dark'}
       />
       <SectionNav active={section} onChange={setSection} alerts={alerts} />
       {anyError && (
@@ -264,40 +237,41 @@ export function App() {
       {paused && (
         <div className="paused-banner" role="status">
           <span>Auto-Refresh pausiert — Daten werden nicht aktualisiert.</span>
-          <button className="btn" type="button" onClick={() => setPaused(false)}>
-            Fortsetzen
-          </button>
+          <button className="btn" type="button" onClick={() => setPaused(false)}>Fortsetzen</button>
         </div>
       )}
       <main className="dash-main" id={`section-${section}`} role="tabpanel" aria-label={section}>
         {section === 'overview' && (
           <>
-            <OverviewCards
-              host={sys.data?.host ?? null}
+            <AttentionHero
               guests={guests}
-              tunnel={tun.data}
+              services={services}
+              certs={cer.data?.certs ?? []}
               backups={bkp.data}
-              loading={overallLoading}
+              certWarnDays={ui.certWarnDays}
+              onInspectService={setSelectedSvc}
+              onInspectGuest={onInspectGuest}
             />
+            <HostPanel host={sys.data?.host ?? null} guests={guests} />
+            <div className="quick-stats">
+              <KpiStrip guests={guests} services={services} />
+              <AuditLog />
+            </div>
             <ServiceGrid
               services={services}
               onSelect={setSelectedSvc}
               showSpark={ui.showSparklines}
               loading={svc.loading}
             />
-            <AuditLog />
           </>
         )}
         {section === 'server' && (
           <>
-            <OverviewCards
-              host={sys.data?.host ?? null}
-              guests={guests}
-              tunnel={tun.data}
-              backups={bkp.data}
-              loading={overallLoading}
-              only={['host', 'guests']}
-            />
+            <HostPanel host={sys.data?.host ?? null} guests={guests} />
+            <div className="quick-stats">
+              <KpiStrip guests={guests} services={services} />
+              <AuditLog />
+            </div>
             <VMTable guests={guests} onLogs={onLogs} onRestart={onRestart} />
             <ServiceGrid
               services={services}
@@ -307,9 +281,7 @@ export function App() {
             />
           </>
         )}
-        {section === 'network' && (
-          <NetworkPanel network={net.data} tunnel={tun.data} />
-        )}
+        {section === 'network' && <NetworkPanel network={net.data} tunnel={tun.data} />}
         {section === 'backup' && (
           <BackupsSection
             backups={bkp.data}
@@ -368,11 +340,7 @@ export function App() {
         onSelectService={setSelectedSvc}
         onRestartGuest={(g) => setConfirmGuest(g)}
         onRefresh={refreshAll}
-        onToggleTheme={() => {
-          const order: ('dark' | 'light' | 'auto')[] = ['dark', 'light', 'auto'];
-          const next = order[(order.indexOf(ui.theme) + 1) % order.length];
-          setUI('theme', next);
-        }}
+        onToggleTheme={onToggleTheme}
         onJumpSection={setSection}
       />
       <ShortcutsHelp open={helpOpen} onClose={() => setHelpOpen(false)} />
diff --git a/frontend/src/components/AttentionHero.tsx b/frontend/src/components/AttentionHero.tsx
new file mode 100644
index 0000000..1ef3979
--- /dev/null
+++ b/frontend/src/components/AttentionHero.tsx
@@ -0,0 +1,197 @@
+import type { Guest, ServiceStatus, CertInfo, BackupSummary } from '../types';
+import { ICONS, fmtTimeAgo } from './primitives';
+
+export interface Alert {
+  id: string;
+  level: 'crit' | 'warn' | 'info';
+  target: string;
+  sub: string;
+  msg: string;
+  iso: string | null;
+  actions: ('inspect' | 'restart' | 'renew')[];
+  /** Optional click handler — opens the matching drawer. */
+  onClick?: () => void;
+}
+
+interface Props {
+  guests: Guest[];
+  services: ServiceStatus[];
+  certs: CertInfo[];
+  backups: BackupSummary | null;
+  certWarnDays: number;
+  onInspectService?: (id: string) => void;
+  onInspectGuest?: (id: number) => void;
+}
+
+const HEALTH_WEIGHTS = { svc_err: 15, svc_warn: 6, ram_crit: 12, ram_warn: 5, cert_crit: 10, cert_warn: 4, backup_fail: 8 } as const;
+
+function deriveAlerts(p: Props): Alert[] {
+  const out: Alert[] = [];
+  for (const g of p.guests) {
+    const ramPct = g.ram_total_b > 0 ? (g.ram_used_b / g.ram_total_b) * 100 : 0;
+    if (ramPct > 95) {
+      out.push({
+        id: `ram-${g.id}`,
+        level: 'crit',
+        target: g.name,
+        sub: g.ip ?? `CT/VM ${g.id}`,
+        msg: `RAM-Auslastung bei ${Math.round(ramPct)}%`,
+        iso: null,
+        actions: ['inspect', 'restart'],
+        onClick: () => p.onInspectGuest?.(g.id),
+      });
+    } else if (g.cpu_pct > 90) {
+      out.push({
+        id: `cpu-${g.id}`,
+        level: 'warn',
+        target: g.name,
+        sub: g.ip ?? `CT/VM ${g.id}`,
+        msg: `CPU dauerhaft bei ${Math.round(g.cpu_pct)}%`,
+        iso: null,
+        actions: ['inspect'],
+        onClick: () => p.onInspectGuest?.(g.id),
+      });
+    }
+  }
+  for (const s of p.services) {
+    if (s.status === 'err') {
+      out.push({
+        id: `svc-${s.id}`,
+        level: 'crit',
+        target: s.name,
+        sub: s.sub,
+        msg: s.note ?? `${s.code_ext ? `HTTP ${s.code_ext}` : 'Probe fehlgeschlagen'} — Origin nicht erreichbar`,
+        iso: s.last_incident_iso,
+        actions: ['inspect'],
+        onClick: () => p.onInspectService?.(s.id),
+      });
+    } else if (s.status === 'warn') {
+      out.push({
+        id: `svc-${s.id}`,
+        level: 'warn',
+        target: s.name,
+        sub: s.sub,
+        msg: s.note ?? `Externe Probe fehlgeschlagen — ${s.ms}ms`,
+        iso: s.last_incident_iso,
+        actions: ['inspect'],
+        onClick: () => p.onInspectService?.(s.id),
+      });
+    }
+  }
+  for (const c of p.certs) {
+    if (c.days_left <= 0) {
+      out.push({ id: `cert-${c.domain}`, level: 'crit', target: c.domain, sub: c.issuer, msg: 'Cert abgelaufen', iso: null, actions: ['renew'] });
+    } else if (c.days_left < p.certWarnDays) {
+      out.push({
+        id: `cert-${c.domain}`,
+        level: c.days_left < 7 ? 'crit' : 'warn',
+        target: c.domain,
+        sub: c.issuer,
+        msg: `Cert läuft in ${c.days_left} Tagen ab`,
+        iso: null,
+        actions: ['renew'],
+      });
+    }
+  }
+  if (p.backups && !p.backups.reachable) {
+    out.push({ id: 'backup-unreach', level: 'crit', target: 'PBS', sub: 'backup', msg: p.backups.error ?? 'Datastore nicht erreichbar', iso: null, actions: ['inspect'] });
+  }
+  // Order: crit before warn before info, then alphabetical.
+  out.sort((a, b) => {
+    const order = { crit: 0, warn: 1, info: 2 } as const;
+    if (order[a.level] !== order[b.level]) return order[a.level] - order[b.level];
+    return a.target.localeCompare(b.target);
+  });
+  return out;
+}
+
+function computeHealth(p: Props, alerts: Alert[]): number {
+  let penalty = 0;
+  for (const a of alerts) {
+    if (a.id.startsWith('svc-')) penalty += a.level === 'crit' ? HEALTH_WEIGHTS.svc_err : HEALTH_WEIGHTS.svc_warn;
+    else if (a.id.startsWith('ram-')) penalty += HEALTH_WEIGHTS.ram_crit;
+    else if (a.id.startsWith('cpu-')) penalty += HEALTH_WEIGHTS.ram_warn;
+    else if (a.id.startsWith('cert-')) penalty += a.level === 'crit' ? HEALTH_WEIGHTS.cert_crit : HEALTH_WEIGHTS.cert_warn;
+    else if (a.id.startsWith('backup-')) penalty += HEALTH_WEIGHTS.backup_fail;
+  }
+  void p;
+  return Math.max(0, 100 - penalty);
+}
+
+export function AttentionHero(p: Props) {
+  const alerts = deriveAlerts(p);
+  const crit = alerts.filter((a) => a.level === 'crit');
+  const warn = alerts.filter((a) => a.level === 'warn');
+  const visible = [...crit, ...warn].slice(0, 4);
+  const health = computeHealth(p, alerts);
+  const scoreClass = health < 70 ? 'err' : health < 90 ? 'warn' : '';
+  const desc = crit.length > 0
+    ? `${crit.length} Service${crit.length === 1 ? '' : 's'} benötigen sofortige Aufmerksamkeit.${visible[0] ? ` Beginne mit ${visible[0].target}.` : ''}`
+    : warn.length > 0
+      ? `${warn.length} Auffälligkeit${warn.length === 1 ? '' : 'en'} — nichts kritisches.`
+      : 'Alle Systeme nominal.';
+
+  return (
+    <div className="attention">
+      <div className="health-score">
+        <span className="health-score-label">System Health</span>
+        <div className="health-score-value">
+          <span className={`health-score-num ${scoreClass}`}>{health}</span>
+          <span className="health-score-out">/ 100</span>
+        </div>
+        {health < 100 && (
+          <span className={`health-score-delta ${scoreClass || 'ok'}`}>
+            {ICONS.warn}
+            −{100 - health} · {crit.length} kritisch
+          </span>
+        )}
+        <p className="health-score-desc">{desc}</p>
+        <div className="health-score-meter" aria-hidden="true">
+          <div style={{ width: `${health}%` }} />
+          <span className="marker" style={{ left: `${health}%` }} />
+        </div>
+      </div>
+
+      <div className="alerts-stack">
+        <div className="alerts-stack-head">
+          <span>{ICONS.bell} Active Alerts <span className="dim">· {alerts.length}</span></span>
+          {alerts.length > visible.length && (
+            <span className="dim mono" style={{ textTransform: 'none', letterSpacing: 0 }}>
+              {alerts.length - visible.length} weitere
+            </span>
+          )}
+        </div>
+        <div className="alerts-list" role="list">
+          {visible.length === 0 ? (
+            <div className="empty">Keine offenen Alerts — wir machen weiter, ihr macht weiter.</div>
+          ) : (
+            visible.map((a) => (
+              <button
+                key={a.id}
+                type="button"
+                className={`alert-row ${a.level}`}
+                onClick={a.onClick}
+                role="listitem"
+              >
+                <span className="alert-icon" style={{ color: a.level === 'crit' ? 'var(--err)' : a.level === 'warn' ? 'var(--warn)' : 'var(--info)' }}>
+                  {a.level === 'crit' ? ICONS.warn : a.level === 'warn' ? ICONS.warn : ICONS.info}
+                </span>
+                <span className="alert-target">
+                  {a.target}
+                  <span className="alert-sub">{a.sub}</span>
+                </span>
+                <span className="alert-msg">{a.msg}</span>
+                <span className="alert-time">{fmtTimeAgo(a.iso)}</span>
+                <span className="alert-actions">
+                  {a.actions.includes('inspect') && <span className="btn sm ghost" aria-hidden="true">Inspect</span>}
+                  {a.actions.includes('restart') && <span className="btn sm danger" aria-hidden="true">Restart</span>}
+                  {a.actions.includes('renew') && <span className="btn sm" aria-hidden="true">Renew</span>}
+                </span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/AuditLog.tsx b/frontend/src/components/AuditLog.tsx
index 9626487..2a5d0f4 100644
--- a/frontend/src/components/AuditLog.tsx
+++ b/frontend/src/components/AuditLog.tsx
@@ -1,14 +1,31 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { api } from '../api/client';
-import { fmtTimeAgo } from './primitives';
+import { ICONS, fmtTimeAgo } from './primitives';
 
 type Event = Record<string, unknown> & { ts: number; event: string };
 
+function level(event: string): 'ok' | 'warn' | 'err' | 'info' {
+  if (event.endsWith('.failure') || event.includes('.error')) return 'err';
+  if (event.endsWith('.warn') || event.includes('.degraded')) return 'warn';
+  if (event.endsWith('.result') || event.endsWith('.success') || event.endsWith('.recovered')) return 'ok';
+  return 'info';
+}
+
+function describe(e: Event): { strong?: string; tag?: string; text: string } {
+  const target = (e.target as string | undefined) ?? (e.guest as string | undefined) ?? (e.service as string | undefined);
+  const action = e.event.replace(/^(guest|service|backup|cert|cloudflare|system)\./, '');
+  const status = e.status as string | undefined;
+  const tag = e.event;
+  if (target) {
+    return { strong: target, tag, text: status ? `${action} → ${status}` : action };
+  }
+  return { tag, text: action };
+}
+
 export function AuditLog() {
   const [events, setEvents] = useState<Event[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
-  const lastFetchRef = useRef(0);
 
   useEffect(() => {
     let cancelled = false;
@@ -18,7 +35,6 @@ export function AuditLog() {
         if (cancelled) return;
         setEvents(r.events as Event[]);
         setError(false);
-        lastFetchRef.current = Date.now();
       } catch {
         if (!cancelled) setError(true);
       } finally {
@@ -34,52 +50,38 @@ export function AuditLog() {
   }, []);
 
   return (
-    <section className="dash-section" aria-labelledby="audit-heading">
-      <div className="section-head">
-        <h2 id="audit-heading">
-          Audit-Log <span className="dim">· letzte {events.length}</span>
-        </h2>
+    <div className="activity-card">
+      <div className="card-h">
+        <h3>Activity <span className="h3-sub">letzte 24h</span></h3>
         <span className="dimmer mono" style={{ fontSize: 11 }}>
           {error ? 'Fehler beim Laden' : 'auto · 30s'}
         </span>
       </div>
-      <div className="card flat" style={{ padding: 0, overflow: 'hidden' }}>
+      <div className="activity-list">
         {loading && events.length === 0 ? (
-          <div className="dimmer mono" style={{ fontSize: 12, padding: 14 }}>
-            Lade…
-          </div>
+          <div className="dim" style={{ fontSize: 12, padding: 14 }}>Lade…</div>
         ) : events.length === 0 ? (
-          <div className="dimmer mono" style={{ fontSize: 12, padding: 14 }}>
-            Noch keine Audit-Events seit Backend-Start.
-          </div>
+          <div className="dim" style={{ fontSize: 12, padding: 14 }}>Noch keine Events.</div>
         ) : (
-          <ul className="audit-list">
-            {events.map((e, i) => (
-              <li key={`${e.ts}-${i}`} className="audit-row">
-                <span className={`audit-tag ${classify(e.event)}`}>{e.event}</span>
-                <span className="audit-fields mono">{formatFields(e)}</span>
-                <span className="dim mono audit-time">
-                  {fmtTimeAgo(new Date((e.ts as number) * 1000).toISOString())}
+          events.slice(0, 12).map((e, i) => {
+            const lvl = level(e.event);
+            const d = describe(e);
+            return (
+              <div key={`${e.ts}-${i}`} className="activity-row">
+                <span className={`a-icon ${lvl}`} aria-hidden="true">
+                  {lvl === 'ok' ? ICONS.check : lvl === 'err' ? ICONS.x : lvl === 'warn' ? ICONS.warn : ICONS.info}
+                </span>
+                <span className="a-text" title={JSON.stringify(e)}>
+                  {d.strong && <strong>{d.strong} </strong>}
+                  {d.tag && <span className="a-tag">{d.tag}</span>}
+                  {d.text}
                 </span>
-              </li>
-            ))}
-          </ul>
+                <span className="a-time">{fmtTimeAgo(new Date((e.ts as number) * 1000).toISOString())}</span>
+              </div>
+            );
+          })
         )}
       </div>
-    </section>
+    </div>
   );
 }
-
-function classify(event: string): string {
-  if (event.endsWith('.result')) return 'result';
-  if (event.startsWith('guest.')) return 'guest';
-  return 'other';
-}
-
-function formatFields(e: Event): string {
-  const omit = new Set(['ts', 'event']);
-  return Object.entries(e)
-    .filter(([k]) => !omit.has(k))
-    .map(([k, v]) => `${k}=${typeof v === 'string' ? v : JSON.stringify(v)}`)
-    .join(' ');
-}
diff --git a/frontend/src/components/BackupsSection.tsx b/frontend/src/components/BackupsSection.tsx
index f2f126d..b114264 100644
--- a/frontend/src/components/BackupsSection.tsx
+++ b/frontend/src/components/BackupsSection.tsx
@@ -54,7 +54,7 @@ export function BackupsSection({ backups, guests, onVerify, onOpenGuest }: Props
     usedPct > 85 ? 'var(--err)' : usedPct > 70 ? 'var(--warn)' : 'var(--accent)';
 
   return (
-    <section className="dash-section">
+    <section className="backup-section">
       <div className="grid-12" style={{ marginBottom: 14 }}>
         <div className="col-5 card">
           <div className="card-h">
diff --git a/frontend/src/components/CloudflareSection.tsx b/frontend/src/components/CloudflareSection.tsx
index b178746..31ecad8 100644
--- a/frontend/src/components/CloudflareSection.tsx
+++ b/frontend/src/components/CloudflareSection.tsx
@@ -51,10 +51,10 @@ export function CloudflareSection({
   }, [certs, services]);
 
   return (
-    <section className="dash-section" aria-labelledby="cloudflare-heading">
-      <h2 id="cloudflare-heading" className="dimmer mono" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.6, margin: '0 0 12px' }}>
-        Cloudflare
-      </h2>
+    <section className="cloudflare-section" aria-labelledby="cloudflare-heading">
+      <div className="dash-section-head" style={{ marginBottom: 12 }}>
+        <h2 id="cloudflare-heading">Cloudflare</h2>
+      </div>
 
       <div className="grid-12" style={{ marginBottom: 14 }}>
         <div className="col-5 card">
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 68fe1db..9d75c32 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,11 +1,9 @@
-import { REFRESH_INTERVALS_MS } from '../hooks/useTheme';
-import { ICONS, fmtClock } from './primitives';
-import { StatusHistory } from './StatusHistory';
+import { ICONS } from './primitives';
 
 interface HeaderProps {
   servicesUp: number;
   servicesTotal: number;
-  lastRefresh: number;
+  servicesCritical: number;
   onRefresh: () => void;
   refreshing: boolean;
   email: string | null;
@@ -13,19 +11,22 @@ interface HeaderProps {
   paused: boolean;
   onTogglePause: () => void;
   onSnapshot: () => void;
-  refreshIntervalMs: number;
-  onChangeRefreshInterval: (ms: number) => void;
-}
-
-function refreshLabel(ms: number): string {
-  if (ms === 0) return 'aus';
-  if (ms < 60_000) return `${ms / 1000}s`;
-  return `${ms / 60_000}min`;
+  onOpenSettings: () => void;
+  onToggleTheme: () => void;
+  isDarkTheme: boolean;
 }
 
 export function Header(p: HeaderProps) {
-  const allUp = p.servicesUp === p.servicesTotal && p.servicesTotal > 0;
-  const initials = (p.email ?? '?').slice(0, 2).toUpperCase();
+  const degraded = p.servicesTotal - p.servicesUp;
+  const status: 'ok' | 'warn' | 'err' = p.servicesCritical > 0 ? 'err' : degraded > 0 ? 'warn' : 'ok';
+  const label = p.servicesTotal === 0
+    ? 'Initialisierung…'
+    : p.servicesCritical > 0
+      ? `${p.servicesCritical} kritisches Issue${p.servicesCritical === 1 ? '' : 's'} · ${degraded} degraded`
+      : degraded > 0
+        ? `${degraded} von ${p.servicesTotal} Services degraded`
+        : 'Alle Systeme operational';
+  const initials = (p.email ?? 'RF').replace(/[^A-Za-z]/g, '').slice(0, 2).toUpperCase() || 'RF';
   return (
     <header className="dash-header">
       <div className="hdr-left">
@@ -33,19 +34,13 @@ export function Header(p: HeaderProps) {
           <span className="logo-mark" aria-hidden="true">
             <svg viewBox="0 0 24 24" width="22" height="22">
               <defs>
-                <linearGradient id="lg1" x1="0" y1="0" x2="1" y2="1">
+                <linearGradient id="lg-header" x1="0" y1="0" x2="1" y2="1">
                   <stop offset="0%" stopColor="var(--indigo)" />
                   <stop offset="100%" stopColor="var(--peach)" />
                 </linearGradient>
               </defs>
-              <rect x="2" y="2" width="20" height="20" rx="5" fill="url(#lg1)" />
-              <path
-                d="M7 8h6a3 3 0 0 1 0 6H10l4 4M7 8v10"
-                stroke="#fff"
-                strokeWidth="2"
-                fill="none"
-                strokeLinecap="round"
-              />
+              <rect x="2" y="2" width="20" height="20" rx="5" fill="url(#lg-header)" />
+              <path d="M7 8h6a3 3 0 0 1 0 6H10l4 4M7 8v10" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" />
             </svg>
           </span>
           <div className="logo-text">
@@ -53,106 +48,82 @@ export function Header(p: HeaderProps) {
             <span className="logo-sub">admin</span>
           </div>
         </div>
-        <span className="hdr-sep" />
+        <span className="hdr-sep" aria-hidden="true" />
         <span className="hdr-crumb mono">admin.rxf-sys.de</span>
       </div>
 
       <div className="hdr-mid">
-        <div
-          className={`global-status ${allUp ? 'ok' : 'warn'}`}
-          role="status"
-          aria-live="polite"
-        >
-          <span className={`dot ${allUp ? 'ok' : 'warn'}`} aria-hidden="true" />
-          <span className="gs-label">
-            {p.servicesTotal === 0
-              ? 'Initialisierung…'
-              : allUp
-                ? 'Alle Systeme operational'
-                : `${p.servicesTotal - p.servicesUp} von ${p.servicesTotal} Services degraded`}
-          </span>
+        <div className={`global-status ${status}`} role="status" aria-live="polite">
+          <span className={`dot ${status}`} aria-hidden="true" />
+          <span className="gs-label">{label}</span>
+          {p.servicesTotal > 0 && (
+            <span className="gs-count">· {p.servicesUp}/{p.servicesTotal} healthy</span>
+          )}
         </div>
-        <StatusHistory
-          pollTs={p.lastRefresh}
-          servicesUp={p.servicesUp}
-          servicesTotal={p.servicesTotal}
-        />
       </div>
 
       <div className="hdr-right">
-        <div className="hdr-meta">
-          <span className="dimmer" style={{ fontSize: 11, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
-            {p.refreshing && (
-              <span className="poll-pulse" aria-label="Daten werden aktualisiert" />
-            )}
-            Last refresh
-          </span>
-          <span className="mono" style={{ fontSize: 12, color: 'var(--text-2)' }}>
-            {fmtClock(p.lastRefresh)}
-          </span>
-        </div>
         <button
-          className="btn cmdk-trigger"
+          className="cmdk-trigger"
           onClick={p.onOpenPalette}
-          title="Befehlspalette öffnen"
           aria-label="Befehlspalette öffnen"
           type="button"
         >
           {ICONS.search}
-          <span className="cmdk-trigger-label">Suche</span>
+          <span>Suchen, springen, ausführen…</span>
           <kbd>⌘K</kbd>
         </button>
-        <label className="refresh-select" title="Auto-Refresh-Intervall">
-          <span className="dimmer" aria-hidden="true">⟳</span>
-          <select
-            value={p.refreshIntervalMs}
-            onChange={(e) => p.onChangeRefreshInterval(Number(e.target.value))}
-            aria-label="Auto-Refresh-Intervall"
+        <div className="hdr-group">
+          <button
+            className={`btn ${p.refreshing ? 'spin' : ''}`}
+            onClick={p.onRefresh}
+            title="Aktualisieren"
+            aria-label="Jetzt aktualisieren"
+            type="button"
           >
-            {REFRESH_INTERVALS_MS.map((ms) => (
-              <option key={ms} value={ms}>
-                {refreshLabel(ms)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <button
-          className={`btn icon ${p.refreshing ? 'spin' : ''}`}
-          onClick={p.onRefresh}
-          title="Jetzt aktualisieren"
-          aria-label={p.refreshing ? 'Daten werden aktualisiert' : 'Daten jetzt aktualisieren'}
-          type="button"
-        >
-          {ICONS.refresh}
-        </button>
+            {ICONS.refresh}
+          </button>
+          <span className="sep" aria-hidden="true" />
+          <button
+            className={`btn ${p.paused ? 'active' : ''}`}
+            onClick={p.onTogglePause}
+            title={p.paused ? 'Auto-Refresh fortsetzen' : 'Auto-Refresh pausieren'}
+            aria-label={p.paused ? 'Auto-Refresh fortsetzen' : 'Auto-Refresh pausieren'}
+            aria-pressed={p.paused}
+            type="button"
+          >
+            {p.paused ? ICONS.play : ICONS.pause}
+          </button>
+          <span className="sep" aria-hidden="true" />
+          <button
+            className="btn"
+            onClick={p.onSnapshot}
+            title="Snapshot kopieren"
+            aria-label="Snapshot kopieren"
+            type="button"
+          >
+            {ICONS.download}
+          </button>
+        </div>
         <button
-          className={`btn icon ${p.paused ? 'active' : ''}`}
-          onClick={p.onTogglePause}
-          title={p.paused ? 'Auto-Refresh fortsetzen' : 'Auto-Refresh pausieren'}
-          aria-label={p.paused ? 'Auto-Refresh fortsetzen' : 'Auto-Refresh pausieren'}
-          aria-pressed={p.paused}
+          className="btn icon"
+          onClick={p.onToggleTheme}
+          title={p.isDarkTheme ? 'Hell-Modus' : 'Dunkel-Modus'}
+          aria-label="Theme wechseln"
           type="button"
         >
-          {p.paused ? ICONS.play : ICONS.pause}
+          {p.isDarkTheme ? ICONS.sun : ICONS.moon}
         </button>
         <button
           className="btn icon"
-          onClick={p.onSnapshot}
-          title="Aktuellen Zustand als JSON in die Zwischenablage kopieren"
-          aria-label="Snapshot kopieren"
+          onClick={p.onOpenSettings}
+          title="Einstellungen"
+          aria-label="Einstellungen"
           type="button"
         >
-          {ICONS.download}
+          {ICONS.settings}
         </button>
-        <div className="hdr-user">
-          <div className="avatar">{initials}</div>
-          <div className="hdr-user-meta">
-            <span style={{ fontSize: 12, color: 'var(--text-2)' }}>{p.email ?? 'unknown'}</span>
-            <span className="dimmer mono" style={{ fontSize: 10 }}>
-              via Cloudflare Access
-            </span>
-          </div>
-        </div>
+        <div className="avatar" title={p.email ?? 'unbekannt'}>{initials}</div>
       </div>
     </header>
   );
diff --git a/frontend/src/components/HostPanel.tsx b/frontend/src/components/HostPanel.tsx
new file mode 100644
index 0000000..0f7f228
--- /dev/null
+++ b/frontend/src/components/HostPanel.tsx
@@ -0,0 +1,113 @@
+import type { Guest, HostStatus } from '../types';
+import { Dot, ICONS, StackedBar, TrendBars, fmtBytes, fmtUptime, type StackedSegment } from './primitives';
+
+interface Props {
+  host: HostStatus | null;
+  guests: Guest[];
+  /** CPU trend samples (most recent last). Falls back to a flat line. */
+  cpuTrend?: number[];
+  /** Disk growth trend. */
+  diskTrend?: number[];
+}
+
+// Stable peach→indigo→info palette for stacked-bar segments.
+const SEG_COLORS = [
+  '#ffb17a', '#5a608a', '#4f9eff', '#00d97e', '#ffd6b1',
+  '#424769', '#7d83b3', '#3acf86', '#ff7a59', '#a8aed5',
+];
+
+function ramByGuest(guests: Guest[]): StackedSegment[] {
+  const consumers = guests
+    .filter((g) => g.ram_used_b > 0)
+    .map((g) => ({ name: g.name, gb: g.ram_used_b / 1024 ** 3 }))
+    .sort((a, b) => b.gb - a.gb);
+  return consumers.map((c, i) => ({ ...c, color: SEG_COLORS[i % SEG_COLORS.length] }));
+}
+
+export function HostPanel({ host, guests, cpuTrend, diskTrend }: Props) {
+  if (!host) {
+    return (
+      <section className="host-panel">
+        <header className="host-panel-head">
+          <div className="title-block">
+            <h2>Proxmox Host</h2>
+            <span className="badge"><Dot status="idle" /> WAITING</span>
+          </div>
+        </header>
+        <div className="host-metric"><span className="dim">Initialisierung…</span></div>
+      </section>
+    );
+  }
+  const ramPct = host.ram_total_b > 0 ? (host.ram_used_b / host.ram_total_b) * 100 : 0;
+  const diskPct = host.disk_total_b > 0 ? (host.disk_used_b / host.disk_total_b) * 100 : 0;
+  const status = host.online ? 'ok' : 'err';
+  const segments = ramByGuest(guests);
+  const cpuData = cpuTrend && cpuTrend.length > 0 ? cpuTrend : Array.from({ length: 48 }, () => host.cpu_pct);
+  const diskData = diskTrend && diskTrend.length > 0 ? diskTrend : Array.from({ length: 48 }, (_, i) => diskPct - (47 - i) * 0.01);
+  const cpuMax = Math.max(...cpuData);
+  const cpuAvg = cpuData.reduce((a, b) => a + b, 0) / cpuData.length;
+  const disksLabel = host.disks.length === 0
+    ? 'keine Disks'
+    : `${host.disks.length} disks · ${host.disks.every((d) => d.health === 'PASSED') ? 'PASSED' : 'CHECK'}`;
+  return (
+    <section className="host-panel">
+      <header className="host-panel-head">
+        <div className="title-block">
+          <h2>Proxmox Host</h2>
+          <span className={`badge ${status}`}>
+            <Dot status={status} /> {host.online ? 'ONLINE' : 'OFFLINE'}
+          </span>
+          {host.cpu_temp_c != null && (
+            <span className="host-stat-inline">{ICONS.temp}<span className="mono">{host.cpu_temp_c}°C</span></span>
+          )}
+          <span className="host-stat-inline">{ICONS.disk}<span className="mono">{disksLabel}</span></span>
+        </div>
+        <span className="meta">
+          {host.node}
+          {host.pve_version && ` · PVE ${host.pve_version}`}
+          {host.kernel && ` · ${host.kernel}`}
+          {host.uptime_s > 0 && ` · up ${fmtUptime(host.uptime_s)}`}
+        </span>
+      </header>
+
+      <div className="host-metric">
+        <div className="host-metric-head"><span>CPU</span><span className="mono dimmer">last 48h</span></div>
+        <div className="host-metric-value">
+          {host.cpu_pct.toFixed(1)}<span className="pct">%</span>
+          <span className="unit-sm">· {host.cpu_cores} cores</span>
+        </div>
+        <span className="host-metric-sub">avg {Math.round(cpuAvg)}% · peak {Math.round(cpuMax)}%</span>
+        <TrendBars data={cpuData} color="var(--accent)" threshold={cpuMax * 0.85} />
+      </div>
+
+      <div className="host-metric">
+        <div className="host-metric-head"><span>RAM</span><span className="mono dimmer">by guest</span></div>
+        <div className="host-metric-value">
+          {(host.ram_used_b / 1024 ** 3).toFixed(1)}<span className="unit-sm">/ {(host.ram_total_b / 1024 ** 3).toFixed(1)} GB</span>
+          <span className="pct">· {Math.round(ramPct)}%</span>
+        </div>
+        <span className="host-metric-sub">{segments.length} consumers · {fmtBytes(host.ram_used_b)} used</span>
+        <StackedBar segments={segments} />
+        <div className="stacked-legend">
+          {segments.slice(0, 5).map((s) => (
+            <span key={s.name} className="item">
+              <span className="swatch-sm" style={{ background: s.color }} />
+              {s.name}
+              <span className="item-val">{s.gb.toFixed(1)} GB</span>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div className="host-metric">
+        <div className="host-metric-head"><span>Disk · rpool</span><span className="mono dimmer">usage</span></div>
+        <div className="host-metric-value">
+          {(host.disk_used_b / 1024 ** 3).toFixed(1)}<span className="unit-sm">/ {(host.disk_total_b / 1024 ** 3).toFixed(1)} GB</span>
+          <span className="pct">· {Math.round(diskPct)}%</span>
+        </div>
+        <span className="host-metric-sub">{fmtBytes(host.disk_total_b - host.disk_used_b)} frei</span>
+        <TrendBars data={diskData} color="var(--ok)" />
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/KpiStrip.tsx b/frontend/src/components/KpiStrip.tsx
new file mode 100644
index 0000000..7fa9979
--- /dev/null
+++ b/frontend/src/components/KpiStrip.tsx
@@ -0,0 +1,77 @@
+import type { Guest, ServiceStatus } from '../types';
+import { Sparkline } from './primitives';
+
+interface Props {
+  guests: Guest[];
+  services: ServiceStatus[];
+  /** Optional sparkline series for the worst-offender service's response-time. */
+  worstSpark?: number[];
+}
+
+export function KpiStrip({ guests, services, worstSpark }: Props) {
+  const running = guests.filter((g) => g.running).length;
+  const total = guests.length;
+  const svcOk = services.filter((s) => s.status === 'ok').length;
+  const svcTotal = services.length;
+  const avgMs = svcTotal > 0
+    ? Math.round(services.reduce((a, s) => a + s.ms, 0) / svcTotal)
+    : 0;
+  const uptimeValues = services.map((s) => s.uptime_pct).filter((v): v is number => v != null);
+  const sla = uptimeValues.length > 0
+    ? (uptimeValues.reduce((a, b) => a + b, 0) / uptimeValues.length).toFixed(2)
+    : '—';
+  const containersHealthy = total > 0 && running === total;
+  const servicesHealthy = svcTotal > 0 && svcOk === svcTotal;
+  const worst = services
+    .filter((s) => s.status !== 'ok')
+    .sort((a, b) => b.ms - a.ms)[0];
+  const spark = worstSpark && worstSpark.length > 0
+    ? worstSpark
+    : worst
+      ? [worst.ms * 0.7, worst.ms * 0.8, worst.ms * 0.95, worst.ms]
+      : null;
+
+  return (
+    <div className="kpi-strip">
+      <div className="kpi">
+        <span className="kpi-label">Container Up</span>
+        <span className={`kpi-value ${containersHealthy ? '' : 'warn'}`}>
+          {running}<span className="unit">/ {total}</span>
+        </span>
+        <span className="kpi-meta">
+          {containersHealthy
+            ? <><span className="pct-up">▲ 100%</span> running</>
+            : <><span className="pct-down">{total - running} down</span></>}
+        </span>
+      </div>
+      <div className="kpi">
+        <span className="kpi-label">Services Healthy</span>
+        <span className={`kpi-value ${servicesHealthy ? '' : svcOk < svcTotal / 2 ? 'err' : 'warn'}`}>
+          {svcOk}<span className="unit">/ {svcTotal}</span>
+        </span>
+        <span className="kpi-meta">
+          {servicesHealthy ? 'alle OK' : `${svcTotal - svcOk} betroffen`}
+        </span>
+      </div>
+      <div className="kpi">
+        <span className="kpi-label">Avg Response</span>
+        <span className={`kpi-value ${avgMs > 1000 ? 'err' : avgMs > 300 ? 'warn' : ''}`}>
+          {avgMs}<span className="unit">ms</span>
+        </span>
+        <span className="kpi-meta">
+          {worst ? <>spike: {worst.name}</> : 'stabil'}
+        </span>
+        {spark && (
+          <span className="kpi-spark" aria-hidden="true">
+            <Sparkline data={spark} color={worst?.status === 'err' ? 'var(--err)' : 'var(--warn)'} width={60} height={20} stroke={1} />
+          </span>
+        )}
+      </div>
+      <div className="kpi">
+        <span className="kpi-label">SLA · 30d</span>
+        <span className="kpi-value">{sla}<span className="unit">%</span></span>
+        <span className="kpi-meta">Target: 99.9%</span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/NetworkPanel.tsx b/frontend/src/components/NetworkPanel.tsx
index c970b75..8a74e58 100644
--- a/frontend/src/components/NetworkPanel.tsx
+++ b/frontend/src/components/NetworkPanel.tsx
@@ -44,8 +44,8 @@ export function NetworkPanel({ network, tunnel }: Props) {
   const devices = network?.devices ?? [];
 
   return (
-    <section className="dash-section" aria-labelledby="network-heading">
-      <div className="section-head">
+    <section className="network-section" aria-labelledby="network-heading">
+      <div className="dash-section-head" style={{ marginBottom: 12 }}>
         <h2 id="network-heading">Netzwerk</h2>
         <div className="section-tools">
           <span className="dimmer mono" style={{ fontSize: 11 }}>
@@ -117,10 +117,8 @@ export function NetworkPanel({ network, tunnel }: Props) {
 
           {devices.length > 0 && (
             <div style={{ marginBottom: 14 }}>
-              <div className="section-head">
-                <h3 style={{ margin: 0, fontSize: 13, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: 0.3 }}>
-                  UniFi Devices · {devices.length} online
-                </h3>
+              <div className="dash-section-head">
+                <h2>UniFi Devices <span className="count">· {devices.length} online</span></h2>
               </div>
               <div className="grid-12">
                 {devices.map((d) => (
diff --git a/frontend/src/components/OverviewCards.tsx b/frontend/src/components/OverviewCards.tsx
deleted file mode 100644
index a5c14d6..0000000
--- a/frontend/src/components/OverviewCards.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import type { BackupSummary, Guest, HostStatus, TunnelStatus } from '../types';
-import { Donut, Dot, Num, fmtBytes, fmtTimeAgo, fmtUptime } from './primitives';
-
-export type OverviewCard = 'host' | 'guests' | 'tunnel' | 'backup';
-
-interface Props {
-  host: HostStatus | null;
-  guests: Guest[];
-  tunnel: TunnelStatus | null;
-  backups: BackupSummary | null;
-  loading?: boolean;
-  /**
-   * Restrict the rendered set of cards. ``undefined`` renders all four (the
-   * default overview tab); a list lets a section tab show only the cards
-   * relevant to it (e.g. just the host card on the Server tab).
-   */
-  only?: OverviewCard[];
-}
-
-export function OverviewCards({ host, guests, tunnel, backups, loading, only }: Props) {
-  const initialLoad = loading && !host && !tunnel && !backups && guests.length === 0;
-  if (initialLoad) {
-    const count = only?.length ?? 4;
-    return (
-      <div className="overview-grid" aria-busy="true" aria-label="Übersicht lädt">
-        {Array.from({ length: count }).map((_, i) => (
-          <div key={i} className="card overview-card skeleton-card" aria-hidden="true">
-            <div className="skeleton skeleton-h" />
-            <div className="skeleton skeleton-body" />
-            <div className="skeleton skeleton-line" />
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  const upCount = guests.filter((v) => v.running).length;
-  const ramPct = host && host.ram_total_b ? (host.ram_used_b / host.ram_total_b) * 100 : 0;
-  const diskPct = host && host.disk_total_b ? (host.disk_used_b / host.disk_total_b) * 100 : 0;
-
-  const tunnelStatus = tunnel?.status ?? 'unknown';
-  const tunnelBadgeClass =
-    tunnelStatus === 'healthy' ? 'ok' : tunnelStatus === 'unknown' ? 'warn' : 'err';
-
-  const dsPct = backups?.datastore?.used_pct ?? 0;
-  const dsFreeB = backups?.datastore ? backups.datastore.total_b - backups.datastore.used_b : 0;
-
-  const wants = (k: OverviewCard) => !only || only.includes(k);
-
-  return (
-    <div className="overview-grid" data-cards={only?.length ?? 4}>
-      {wants('host') && (
-      <div className="card overview-card">
-        <div className="card-h">
-          <h3>Proxmox Host</h3>
-          <span className={`badge ${host?.online ? 'ok' : 'err'}`}>
-            <span className={`dot ${host?.online ? 'ok' : 'err'}`} /> {host?.online ? 'ONLINE' : 'OFFLINE'}
-          </span>
-        </div>
-        <div className="ov-body">
-          <Donut value={host?.cpu_pct ?? 0} label="CPU" sublabel={host ? `${host.cpu_cores} Cores` : ''} />
-          <Donut
-            value={ramPct}
-            label="RAM"
-            sublabel={host ? `${fmtBytes(host.ram_used_b)} / ${fmtBytes(host.ram_total_b)}` : ''}
-          />
-          <Donut
-            value={diskPct}
-            label="DISK"
-            sublabel={host ? `${fmtBytes(host.disk_used_b)} / ${fmtBytes(host.disk_total_b)}` : ''}
-          />
-        </div>
-        <HardwareHealth host={host} />
-        <div className="ov-foot mono">
-          {host?.node ?? '—'} · {host?.pve_version ?? '—'} · kernel {host?.kernel ?? '—'}
-        </div>
-      </div>
-      )}
-
-      {wants('guests') && (
-      <div className="card overview-card">
-        <div className="card-h">
-          <h3>Container & VMs</h3>
-          <span className="badge ok">
-            <Num value={`${upCount}/${guests.length}`} size="sm" /> RUNNING
-          </span>
-        </div>
-        <div className="ov-big">
-          <Num value={upCount} size="xl" />
-          <span className="dim" style={{ fontSize: 13 }}>
-            von {guests.length} laufen
-          </span>
-        </div>
-        <div className="ov-mini-list">
-          {guests.slice(0, 4).map((v) => (
-            <div key={v.id} className="mini-row">
-              <Dot status={v.status} />
-              <span className="mono dim" style={{ fontSize: 11 }}>
-                {v.id}
-              </span>
-              <span style={{ fontSize: 12 }}>{v.name}</span>
-              <span className="mono dimmer" style={{ fontSize: 11, marginLeft: 'auto' }}>
-                {fmtUptime(v.uptime_s)}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-      )}
-
-      {wants('tunnel') && (
-      <div className="card overview-card">
-        <div className="card-h">
-          <h3>Cloudflare Tunnel</h3>
-          <span className={`badge ${tunnelBadgeClass}`}>
-            <span className={`dot ${tunnelBadgeClass}`} /> {tunnelStatus.toUpperCase()}
-          </span>
-        </div>
-        <div className="ov-rows">
-          <div className="ov-row">
-            <span className="dim">Connections</span>
-            <Num value={tunnel?.connections ?? 0} unit="active" size="md" />
-          </div>
-          <div className="ov-row">
-            <span className="dim">Region</span>
-            <span className="mono" style={{ fontSize: 13 }}>
-              {tunnel?.regions?.join(' · ') || '—'}
-            </span>
-          </div>
-          <div className="ov-row">
-            <span className="dim">WAN-IP</span>
-            <span className="mono" style={{ fontSize: 13, color: 'var(--text-1)' }}>
-              {tunnel?.wan_ip ?? '—'}
-            </span>
-          </div>
-          <div className="ov-row">
-            <span className="dim">cloudflared</span>
-            <span className="mono dim" style={{ fontSize: 12 }}>
-              {tunnel?.cloudflared_version ?? '—'}
-            </span>
-          </div>
-        </div>
-      </div>
-      )}
-
-      {wants('backup') && (
-      <div className="card overview-card">
-        <div className="card-h">
-          <h3>Backup (PBS)</h3>
-          <BackupBadge backups={backups} />
-        </div>
-        {backups && backups.reachable === false ? (
-          <div className="ov-empty" role="status">
-            <span className="dot err" aria-hidden="true" />
-            <div>
-              <div style={{ fontSize: 13, fontWeight: 600 }}>PBS nicht erreichbar</div>
-              <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>
-                {backups.error ?? 'Token oder Netzwerk prüfen'}
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className="ov-rows">
-            <div className="ov-row">
-              <span className="dim">Letzter Erfolg</span>
-              <span className="mono" style={{ fontSize: 13 }}>
-                {fmtTimeAgo(backups?.last_success_iso ?? null)}
-              </span>
-            </div>
-            <div className="ov-row">
-              <span className="dim">Datastore</span>
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, justifyContent: 'flex-end' }}>
-                <div
-                  className="bar"
-                  role="progressbar"
-                  aria-valuenow={dsPct}
-                  aria-valuemin={0}
-                  aria-valuemax={100}
-                  aria-label="Datastore Auslastung"
-                >
-                  <div
-                    className="bar-fill"
-                    style={{
-                      width: `${dsPct}%`,
-                      background: dsPct > 85 ? 'var(--err)' : dsPct > 70 ? 'var(--warn)' : 'var(--ok)',
-                    }}
-                  />
-                </div>
-                <span className="mono" style={{ fontSize: 12 }}>
-                  {dsPct}%
-                </span>
-              </div>
-            </div>
-            <div className="ov-row">
-              <span className="dim">Frei</span>
-              <Num value={fmtBytes(dsFreeB)} size="md" />
-            </div>
-            <div className="ov-row">
-              <span className="dim">Name</span>
-              <span className="mono dim" style={{ fontSize: 12 }}>
-                {backups?.datastore?.name ?? '—'}
-              </span>
-            </div>
-          </div>
-        )}
-      </div>
-      )}
-    </div>
-  );
-}
-
-function HardwareHealth({ host }: { host: HostStatus | null }) {
-  if (!host || (!host.disks?.length && host.cpu_temp_c == null)) return null;
-  const failed = host.disks.filter((d) => d.health === 'FAILED').length;
-  const unknown = host.disks.filter((d) => d.health === 'UNKNOWN').length;
-  const passed = host.disks.length - failed - unknown;
-  const tempColor =
-    host.cpu_temp_c == null
-      ? 'var(--text-3)'
-      : host.cpu_temp_c >= 85
-        ? 'var(--err)'
-        : host.cpu_temp_c >= 70
-          ? 'var(--warn)'
-          : 'var(--text-2)';
-
-  return (
-    <div className="hw-health" role="group" aria-label="Hardware-Gesundheit">
-      {host.cpu_temp_c != null && (
-        <span className="hw-pill" title="CPU-Temperatur">
-          <span className="dim">CPU</span>
-          <span className="mono" style={{ color: tempColor }}>
-            {Math.round(host.cpu_temp_c)}°C
-          </span>
-        </span>
-      )}
-      {host.disks.length > 0 && (
-        <span
-          className="hw-pill"
-          title={
-            failed
-              ? `${failed} Disk(s) FAILED`
-              : unknown && !passed
-                ? 'SMART-Status unbekannt'
-                : 'Alle Disks PASSED'
-          }
-        >
-          <span className="dim">Disks</span>
-          <span
-            className="mono"
-            style={{
-              color: failed ? 'var(--err)' : passed ? 'var(--ok)' : 'var(--text-3)',
-            }}
-          >
-            {passed}
-            {failed > 0 && (
-              <span style={{ color: 'var(--err)' }}>
-                {' '}
-                · {failed} FAIL
-              </span>
-            )}
-          </span>
-        </span>
-      )}
-    </div>
-  );
-}
-
-function BackupBadge({ backups }: { backups: BackupSummary | null }) {
-  if (!backups) {
-    return (
-      <span className="badge" aria-label="Backup-Status lädt">
-        <span className="dot" aria-hidden="true" /> — / —
-      </span>
-    );
-  }
-  if (backups.reachable === false) {
-    return (
-      <span className="badge err" aria-label="Backup-Server nicht erreichbar">
-        <span className="dot err" aria-hidden="true" /> OFFLINE
-      </span>
-    );
-  }
-  const success = backups.success_today;
-  const total = backups.total_today;
-  const cls = total === 0 ? 'warn' : success === total ? 'ok' : success > 0 ? 'warn' : 'err';
-  const label = total === 0 ? 'Heute keine Jobs' : `${success} von ${total} Jobs erfolgreich`;
-  return (
-    <span className={`badge ${cls}`} aria-label={label}>
-      <span className={`dot ${cls}`} aria-hidden="true" />
-      {success}/{total} HEUTE
-    </span>
-  );
-}
diff --git a/frontend/src/components/ServiceGrid.tsx b/frontend/src/components/ServiceGrid.tsx
index c0e73f5..14654da 100644
--- a/frontend/src/components/ServiceGrid.tsx
+++ b/frontend/src/components/ServiceGrid.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import type { ServiceStatus } from '../types';
-import { Dot, ICONS, Sparkline } from './primitives';
+import { Dot, ICONS, Reach, Sparkline, fmtTimeAgo } from './primitives';
 
 interface Props {
   services: ServiceStatus[];
@@ -10,9 +10,6 @@ interface Props {
 }
 
 const HISTORY_LEN = 60;
-
-// Tracks per-service rolling response-time history client-side, since the
-// backend exposes only the current measurement. Updated each refresh.
 const history: Record<string, number[]> = {};
 
 function pushHistory(id: string, ms: number): number[] {
@@ -23,36 +20,34 @@ function pushHistory(id: string, ms: number): number[] {
 }
 
 export function ServiceGrid({ services, onSelect, showSpark, loading }: Props) {
-  const lastIds = useRef<string>('');
+  const lastSig = useRef('');
   const sig = services.map((s) => `${s.id}:${s.ms}`).join('|');
-
   useEffect(() => {
-    if (sig === lastIds.current) return;
-    lastIds.current = sig;
+    if (sig === lastSig.current) return;
+    lastSig.current = sig;
     services.forEach((s) => pushHistory(s.id, s.ms));
   }, [sig, services]);
 
+  const affected = services.filter((s) => s.status !== 'ok').length;
   const isInitialLoad = loading && services.length === 0;
 
   return (
-    <section className="dash-section" aria-labelledby="services-heading">
-      <div className="section-head">
+    <section className="svc-section" aria-labelledby="services-heading">
+      <div className="dash-section-head" style={{ marginBottom: 12 }}>
         <h2 id="services-heading">
-          Services <span className="dim">· {services.length}</span>
+          Services <span className="count">· {services.length} · {affected} affected</span>
         </h2>
         <div className="section-tools">
-          <span className="dimmer mono" style={{ fontSize: 11 }}>
-            Antwortzeit · live
-          </span>
+          <span className="dimmer mono" style={{ fontSize: 11 }}>Antwortzeit · letzte 60 min</span>
         </div>
       </div>
       <div className="svc-grid" aria-busy={isInitialLoad ? 'true' : undefined}>
         {isInitialLoad
           ? Array.from({ length: 8 }).map((_, i) => (
-              <div key={i} className="svc-tile skeleton-tile" aria-hidden="true">
-                <div className="skeleton skeleton-h" />
-                <div className="skeleton skeleton-line" />
-                <div className="skeleton skeleton-line" />
+              <div key={i} className="svc-tile" aria-hidden="true">
+                <div className="skel" style={{ height: 20, width: '60%' }} />
+                <div className="skel" style={{ height: 28 }} />
+                <div className="skel" style={{ height: 16 }} />
               </div>
             ))
           : services.map((s) => (
@@ -76,8 +71,8 @@ export function ServiceTile({ svc, onClick, showSpark }: TileProps) {
   const statusWord =
     svc.status === 'ok' ? 'erreichbar' : svc.status === 'warn' ? 'eingeschränkt' : svc.status === 'err' ? 'nicht erreichbar' : 'inaktiv';
   const uptime = svc.uptime_pct;
-  const uptimeClass =
-    uptime == null ? '' : uptime >= 99.5 ? 'ok' : uptime >= 95 ? 'warn' : 'err';
+  const uptimeClass = uptime == null ? '' : uptime >= 99.9 ? 'ok' : uptime >= 99 ? 'warn' : 'err';
+  const msClass = svc.ms > 1000 ? 'err' : svc.ms > 300 ? 'warn' : '';
   return (
     <button
       className={`svc-tile status-${svc.status}`}
@@ -93,69 +88,46 @@ export function ServiceTile({ svc, onClick, showSpark }: TileProps) {
         </div>
         <Dot status={svc.status} />
       </div>
-      <div className="svc-mid">
+      <div className="svc-spark" aria-hidden="true">
         {showSpark && data.length > 1 && (
-          <Sparkline data={data} color={sparkColor} width={140} height={26} />
+          <Sparkline data={data} color={sparkColor} width={260} height={28} area stroke={1.2} />
         )}
       </div>
-      <div className="svc-stats" aria-hidden="true">
+      <div className="svc-stats">
         <div className="svc-stat">
           <span className="svc-stat-label">Response</span>
-          <span className="svc-stat-value mono">
-            {Math.round(svc.ms)}
-            <span className="svc-stat-unit">ms</span>
+          <span className={`svc-stat-value ${msClass}`}>
+            {Math.round(svc.ms)}<span className="svc-stat-unit">ms</span>
           </span>
         </div>
         <div className="svc-stat">
           <span className="svc-stat-label">p95 · 24h</span>
-          <span className="svc-stat-value mono">
-            {svc.p95_ms == null ? '—' : `${svc.p95_ms}`}
-            <span className="svc-stat-unit">{svc.p95_ms == null ? '' : 'ms'}</span>
+          <span className="svc-stat-value dim">
+            {svc.p95_ms == null ? '—' : svc.p95_ms}
+            {svc.p95_ms != null && <span className="svc-stat-unit">ms</span>}
           </span>
         </div>
         <div className="svc-stat">
           <span className="svc-stat-label">Uptime · 30d</span>
-          <span className={`svc-stat-value mono ${uptimeClass}`}>
-            {uptime == null ? '—' : `${uptime.toFixed(2)}`}
-            <span className="svc-stat-unit">{uptime == null ? '' : '%'}</span>
+          <span className={`svc-stat-value ${uptimeClass}`}>
+            {uptime == null ? '—' : uptime.toFixed(2)}
+            {uptime != null && <span className="svc-stat-unit">%</span>}
           </span>
         </div>
       </div>
       <div className="svc-foot">
-        <span className="dimmer mono" style={{ fontSize: 10 }}>
-          {svc.last_incident_iso
-            ? `Letzter Vorfall ${fmtIncidentAgo(svc.last_incident_iso)}`
-            : 'Keine Vorfälle aufgezeichnet'}
-        </span>
         <div className="svc-reach">
-          <span
-            className={`reach ${svc.ext ? 'ok' : 'off'}`}
-            title={`Extern ${svc.ext ? 'erreichbar' : 'nicht erreichbar'}`}
-          >
-            EXT
-          </span>
-          <span
-            className={`reach ${svc.internal ? 'ok' : 'off'}`}
-            title={`Intern ${svc.internal ? 'erreichbar' : 'nicht erreichbar'}`}
-          >
-            INT
-          </span>
+          <Reach ok={svc.ext} label="EXT" />
+          <Reach ok={svc.internal} label="INT" />
         </div>
+        <span className="svc-time">
+          {svc.last_incident_iso ? `Letzter Vorfall ${fmtTimeAgo(svc.last_incident_iso)}` : 'keine Vorfälle'}
+        </span>
       </div>
     </button>
   );
 }
 
-function fmtIncidentAgo(iso: string): string {
-  const d = new Date(iso).getTime();
-  if (!Number.isFinite(d)) return iso;
-  const diff = (Date.now() - d) / 1000;
-  if (diff < 60) return 'gerade';
-  if (diff < 3600) return `vor ${Math.round(diff / 60)} min`;
-  if (diff < 86400) return `vor ${Math.round(diff / 3600)} h`;
-  return `vor ${Math.round(diff / 86400)} d`;
-}
-
 export function getServiceHistory(id: string): number[] {
   return history[id] ?? [];
 }
diff --git a/frontend/src/components/SettingsPage.tsx b/frontend/src/components/SettingsPage.tsx
index d306346..f39d138 100644
--- a/frontend/src/components/SettingsPage.tsx
+++ b/frontend/src/components/SettingsPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import {
   BACKUP_INTERVALS_MS,
   CERT_INTERVALS_MS,
@@ -8,12 +8,7 @@ import {
 } from '../hooks/useTheme';
 import { ICONS } from './primitives';
 
-type SettingsSection =
-  | 'appearance'
-  | 'polling'
-  | 'notifications'
-  | 'identity'
-  | 'about';
+type SettingsSection = 'appearance' | 'polling' | 'notifications' | 'identity' | 'about';
 
 interface Props {
   settings: UISettings;
@@ -25,18 +20,18 @@ interface Props {
 }
 
 const NAV: { id: SettingsSection; label: string; icon: keyof typeof ICONS }[] = [
-  { id: 'appearance', label: 'Erscheinungsbild', icon: 'palette' },
+  { id: 'appearance', label: 'Appearance', icon: 'palette' },
   { id: 'polling', label: 'Polling', icon: 'refresh' },
-  { id: 'notifications', label: 'Benachrichtigungen', icon: 'bell' },
-  { id: 'identity', label: 'Identität', icon: 'user' },
-  { id: 'about', label: 'Über', icon: 'info' },
+  { id: 'notifications', label: 'Notifications', icon: 'bell' },
+  { id: 'identity', label: 'Identity', icon: 'user' },
+  { id: 'about', label: 'About', icon: 'info' },
 ];
 
 function fmtInterval(ms: number): string {
   if (ms === 0) return 'aus';
-  if (ms < 60_000) return `${ms / 1000} s`;
-  if (ms < 3_600_000) return `${ms / 60_000} min`;
-  return `${ms / 3_600_000} h`;
+  if (ms < 60_000) return `${ms / 1000}s`;
+  if (ms < 3_600_000) return `${ms / 60_000}min`;
+  return `${ms / 3_600_000}h`;
 }
 
 function fmtSessionExp(exp: number | null | undefined): string {
@@ -44,18 +39,13 @@ function fmtSessionExp(exp: number | null | undefined): string {
   const date = new Date(exp * 1000);
   const diffMin = Math.round((date.getTime() - Date.now()) / 60_000);
   if (diffMin <= 0) return 'abgelaufen';
-  if (diffMin < 60) return `läuft in ${diffMin} min ab`;
+  if (diffMin < 60) return `in ${diffMin}min`;
   const h = Math.floor(diffMin / 60);
   const m = diffMin % 60;
-  return `läuft in ${h}h ${m}m ab (${date.toLocaleString()})`;
+  return `in ${h}h ${m}min`;
 }
 
-interface RowProps {
-  title: string;
-  desc?: string;
-  children: React.ReactNode;
-}
-function Row({ title, desc, children }: RowProps) {
+function Row({ title, desc, children }: { title: string; desc?: string; children: ReactNode }) {
   return (
     <div className="settings-row">
       <div className="settings-row-info">
@@ -69,7 +59,7 @@ function Row({ title, desc, children }: RowProps) {
 
 interface SegProps<T extends string | number> {
   value: T;
-  options: { value: T; label: string }[];
+  options: { value: T; label: string; icon?: ReactNode }[];
   onChange: (v: T) => void;
   ariaLabel: string;
 }
@@ -85,6 +75,7 @@ function Seg<T extends string | number>({ value, options, onChange, ariaLabel }:
           className={`seg-btn ${o.value === value ? 'active' : ''}`}
           onClick={() => onChange(o.value)}
         >
+          {o.icon}
           {o.label}
         </button>
       ))}
@@ -92,44 +83,36 @@ function Seg<T extends string | number>({ value, options, onChange, ariaLabel }:
   );
 }
 
-function Switch({
-  checked,
-  onChange,
-  ariaLabel,
-}: {
-  checked: boolean;
-  onChange: (v: boolean) => void;
-  ariaLabel: string;
-}) {
+function Switch({ checked, onChange, ariaLabel }: { checked: boolean; onChange: (v: boolean) => void; ariaLabel: string }) {
+  return (
+    <label className="switch">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        aria-label={ariaLabel}
+      />
+      <span />
+    </label>
+  );
+}
+
+function SectionHead({ title, desc }: { title: string; desc?: string }) {
   return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      aria-label={ariaLabel}
-      className={`switch ${checked ? 'on' : ''}`}
-      onClick={() => onChange(!checked)}
-    >
-      <span className="switch-knob" />
-    </button>
+    <div className="settings-section-h">
+      <h2>{title}</h2>
+      {desc && <p>{desc}</p>}
+    </div>
   );
 }
 
-export function SettingsPage({
-  settings,
-  update,
-  email,
-  identitySession,
-  onLogout,
-  appVersion,
-}: Props) {
+export function SettingsPage({ settings, update, email, identitySession, onLogout, appVersion }: Props) {
   const [active, setActive] = useState<SettingsSection>('appearance');
   const [notifPerm, setNotifPerm] = useState<NotificationPermission | 'unsupported'>(
     typeof Notification === 'undefined' ? 'unsupported' : Notification.permission,
   );
 
   useEffect(() => {
-    // re-poll permission state when the user comes back from the browser prompt
     if (notifPerm === 'unsupported') return;
     const onFocus = () => setNotifPerm(Notification.permission);
     window.addEventListener('focus', onFocus);
@@ -156,43 +139,44 @@ export function SettingsPage({
   );
 
   return (
-    <div className="settings-page" id="section-settings" role="tabpanel" aria-label="Einstellungen">
-      <aside className="settings-nav" aria-label="Einstellungs-Bereiche">
-        {NAV.map((n) => {
-          const isActive = n.id === active;
-          return (
-            <button
-              key={n.id}
-              type="button"
-              className={`settings-nav-item ${isActive ? 'active' : ''}`}
-              onClick={() => setActive(n.id)}
-              aria-current={isActive ? 'true' : undefined}
-            >
-              <span className="settings-nav-icon" aria-hidden="true">
-                {ICONS[n.icon] ?? '·'}
-              </span>
-              <span>{n.label}</span>
-            </button>
-          );
-        })}
-      </aside>
-      <div className="settings-panes">
+    <>
+      <div className="settings-nav-col">
+        <nav className="settings-nav" aria-label="Einstellungs-Bereiche">
+          {NAV.map((n) => {
+            const isActive = n.id === active;
+            return (
+              <button
+                key={n.id}
+                type="button"
+                className={`settings-nav-item ${isActive ? 'active' : ''}`}
+                onClick={() => setActive(n.id)}
+                aria-current={isActive ? 'true' : undefined}
+              >
+                {ICONS[n.icon] ?? null}
+                <span>{n.label}</span>
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+
+      <div className="settings-content-col">
         {active === 'appearance' && (
-          <section className="card">
-            <h3 className="settings-section-h">Erscheinungsbild</h3>
-            <Row title="Theme" desc="Wähle das Farbschema oder folge den Systemeinstellungen.">
+          <div className="card">
+            <SectionHead title="Appearance" desc="Visuelle Darstellung des Dashboards." />
+            <Row title="Theme" desc="Wechsel zwischen hellem und dunklem Modus.">
               <Seg
                 value={settings.theme}
                 options={[
-                  { value: 'dark', label: 'Dunkel' },
-                  { value: 'light', label: 'Hell' },
-                  { value: 'auto', label: 'System' },
+                  { value: 'dark', label: 'Dark', icon: ICONS.moon },
+                  { value: 'light', label: 'Light', icon: ICONS.sun },
+                  { value: 'auto', label: 'System', icon: ICONS.monitor },
                 ]}
                 onChange={(v) => update('theme', v as UISettings['theme'])}
                 ariaLabel="Theme"
               />
             </Row>
-            <Row title="Dichte" desc="Compact spart Platz, Cozy gibt den Karten mehr Luft.">
+            <Row title="Density" desc="Wie dicht Informationen gepackt werden.">
               <Seg
                 value={settings.density}
                 options={[
@@ -200,106 +184,95 @@ export function SettingsPage({
                   { value: 'cozy', label: 'Cozy' },
                 ]}
                 onChange={(v) => update('density', v as UISettings['density'])}
-                ariaLabel="Dichte"
+                ariaLabel="Density"
               />
             </Row>
-            <Row title="Sparklines anzeigen" desc="Kleine Verlaufsgrafiken in Service-Kacheln.">
-              <Switch
-                checked={settings.showSparklines}
-                onChange={(v) => update('showSparklines', v)}
-                ariaLabel="Sparklines anzeigen"
-              />
+            <Row title="Sparklines" desc="Mini-Charts in Service-Kacheln anzeigen.">
+              <Switch checked={settings.showSparklines} onChange={(v) => update('showSparklines', v)} ariaLabel="Sparklines anzeigen" />
             </Row>
-            <Row title="Animationen reduzieren" desc="Deaktiviert Pulse-, Shimmer- und Slide-In-Effekte.">
-              <Switch
-                checked={settings.reduceMotion}
-                onChange={(v) => update('reduceMotion', v)}
-                ariaLabel="Animationen reduzieren"
-              />
+            <Row title="Reduce motion" desc="Pulsing-Animationen für Alerts deaktivieren.">
+              <Switch checked={settings.reduceMotion} onChange={(v) => update('reduceMotion', v)} ariaLabel="Animationen reduzieren" />
             </Row>
-          </section>
+          </div>
         )}
 
         {active === 'polling' && (
-          <section className="card">
-            <h3 className="settings-section-h">Polling-Intervalle</h3>
-            <Row
-              title="Live-Status"
-              desc="Services, System-Auslastung, Tunnel, Netzwerk. Niedriger = mehr Last."
-            >
-              <Seg
+          <div className="card">
+            <SectionHead title="Polling & Auto-Refresh" desc="Wie oft das Frontend Daten vom Backend lädt." />
+            <Row title="Live-Status Intervall" desc="Services, Host, Container, Tunnel.">
+              <select
+                className="input"
+                style={{ width: 120 }}
                 value={settings.refreshIntervalMs}
-                options={intervalsLabel.fast}
-                onChange={(v) => update('refreshIntervalMs', v as number)}
-                ariaLabel="Live-Status-Intervall"
-              />
+                onChange={(e) => update('refreshIntervalMs', Number(e.target.value))}
+                aria-label="Live-Status-Intervall"
+              >
+                {intervalsLabel.fast.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
             </Row>
-            <Row title="Backup-Übersicht" desc="PBS-Snapshots, Datastore-Auslastung.">
-              <Seg
+            <Row title="Backup-Polling" desc="PBS-Daten ändern sich selten.">
+              <select
+                className="input"
+                style={{ width: 120 }}
                 value={settings.pollBackupMs}
-                options={intervalsLabel.backup}
-                onChange={(v) => update('pollBackupMs', v as number)}
-                ariaLabel="Backup-Polling-Intervall"
-              />
+                onChange={(e) => update('pollBackupMs', Number(e.target.value))}
+                aria-label="Backup-Polling"
+              >
+                {intervalsLabel.backup.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
             </Row>
-            <Row title="SSL-Zertifikate" desc="Ändern sich selten; lange Intervalle sparen API-Calls.">
-              <Seg
+            <Row title="Cert-Polling" desc="Ablaufdaten ändern sich nur täglich.">
+              <select
+                className="input"
+                style={{ width: 120 }}
                 value={settings.pollCertsMs}
-                options={intervalsLabel.certs}
-                onChange={(v) => update('pollCertsMs', v as number)}
-                ariaLabel="Cert-Polling-Intervall"
-              />
+                onChange={(e) => update('pollCertsMs', Number(e.target.value))}
+                aria-label="Cert-Polling"
+              >
+                {intervalsLabel.certs.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
             </Row>
-          </section>
+          </div>
         )}
 
         {active === 'notifications' && (
-          <section className="card">
-            <h3 className="settings-section-h">Benachrichtigungen</h3>
-            <Row
-              title="Status-Wechsel"
-              desc="Toast anzeigen, wenn ein Service in einen anderen Status wechselt."
-            >
-              <Switch
-                checked={settings.notifyStatusChange}
-                onChange={(v) => update('notifyStatusChange', v)}
-                ariaLabel="Status-Wechsel-Toast"
-              />
+          <div className="card">
+            <SectionHead title="Notifications" desc="Wann Toast-Benachrichtigungen erscheinen." />
+            <Row title="Status-Änderungen" desc="Toast wenn ein Service von OK → degraded → down wechselt.">
+              <Switch checked={settings.notifyStatusChange} onChange={(v) => update('notifyStatusChange', v)} ariaLabel="Status-Wechsel" />
             </Row>
-            <Row
-              title="Backup-Fehler"
-              desc="Toast anzeigen, wenn ein PBS-Job fehlschlägt."
-            >
-              <Switch
-                checked={settings.notifyBackupFail}
-                onChange={(v) => update('notifyBackupFail', v)}
-                ariaLabel="Backup-Fehler-Toast"
-              />
+            <Row title="Backup-Fehler" desc="Toast bei fehlgeschlagenen PBS-Jobs.">
+              <Switch checked={settings.notifyBackupFail} onChange={(v) => update('notifyBackupFail', v)} ariaLabel="Backup-Fehler" />
             </Row>
-            <Row
-              title="Cert-Warnung ab"
-              desc="Toast/Pill wenn ein Zertifikat in weniger als N Tagen abläuft."
-            >
-              <Seg
+            <Row title="Cert-Warnungen" desc="Toast wenn ein Cert in weniger als N Tagen abläuft.">
+              <select
+                className="input"
+                style={{ width: 100 }}
                 value={settings.certWarnDays}
-                options={CERT_WARN_DAYS.map((d) => ({
-                  value: d,
-                  label: d === 0 ? 'aus' : `${d} Tage`,
-                }))}
-                onChange={(v) => update('certWarnDays', v as UISettings['certWarnDays'])}
-                ariaLabel="Cert-Warn-Schwelle"
-              />
+                onChange={(e) => update('certWarnDays', Number(e.target.value) as UISettings['certWarnDays'])}
+                aria-label="Cert-Warn-Schwelle"
+              >
+                {CERT_WARN_DAYS.map((d) => (
+                  <option key={d} value={d}>{d === 0 ? 'Aus' : `${d} Tage`}</option>
+                ))}
+              </select>
             </Row>
             <Row
-              title="Browser-Benachrichtigungen"
+              title="Browser-Notifications"
               desc={
                 notifPerm === 'unsupported'
                   ? 'Browser unterstützt keine Notifications.'
                   : notifPerm === 'granted'
-                    ? 'Erlaubt — Toasts werden zusätzlich als System-Notification gezeigt (sofern aktiv).'
+                    ? 'Erlaubt.'
                     : notifPerm === 'denied'
-                      ? 'Verweigert — im Browser-Site-Setting freigeben.'
-                      : 'Aktivieren, um Toasts auch außerhalb des Tabs zu sehen.'
+                      ? 'Verweigert — im Browser freigeben.'
+                      : 'Native OS-Benachrichtigungen für kritische Alerts.'
               }
             >
               <button
@@ -308,61 +281,41 @@ export function SettingsPage({
                 disabled={notifPerm === 'unsupported' || notifPerm === 'granted' || notifPerm === 'denied'}
                 onClick={requestBrowserNotifs}
               >
-                {notifPerm === 'granted' ? 'Erlaubt' : notifPerm === 'denied' ? 'Verweigert' : 'Aktivieren'}
+                {ICONS.bell}
+                {notifPerm === 'granted' ? 'Erlaubt' : notifPerm === 'denied' ? 'Verweigert' : 'Berechtigung anfordern'}
               </button>
             </Row>
-          </section>
+          </div>
         )}
 
         {active === 'identity' && (
-          <section className="card">
-            <h3 className="settings-section-h">Identität</h3>
-            <Row title="E-Mail" desc="Aus dem Cloudflare-Access-JWT.">
-              <span className="mono" style={{ fontSize: 13 }}>{email ?? '—'}</span>
+          <div className="card">
+            <SectionHead title="Identity" desc="Eingeloggt via Cloudflare Access · Email-OTP." />
+            <Row title="Email" desc="Aus dem Cf-Access-Jwt-Assertion-Token.">
+              <span className="mono">{email ?? '—'}</span>
             </Row>
-            <Row title="Session" desc="Gültigkeit des Cloudflare-Access-Tokens.">
-              <span className="mono" style={{ fontSize: 13 }}>
-                {fmtSessionExp(identitySession?.exp ?? null)}
-              </span>
+            <Row title="Session läuft ab" desc="Cloudflare Access Session-Dauer.">
+              <span className="mono dim">{fmtSessionExp(identitySession?.exp ?? null)}</span>
             </Row>
-            <Row title="Abmelden" desc="Beendet die Cloudflare-Access-Session.">
-              <button type="button" className="btn danger" onClick={onLogout}>
-                Logout
-              </button>
+            <Row title="Logout" desc="Beendet die Cloudflare-Access-Session.">
+              <button type="button" className="btn danger" onClick={onLogout}>Logout</button>
             </Row>
-          </section>
+          </div>
         )}
 
         {active === 'about' && (
-          <section className="card">
-            <h3 className="settings-section-h">Über diese Instanz</h3>
-            <Row title="Version" desc="Stand des Frontends.">
-              <span className="mono" style={{ fontSize: 13 }}>{appVersion ?? 'dev'}</span>
-            </Row>
-            <Row title="Backend" desc="FastAPI · Python 3.12.">
-              <span className="mono" style={{ fontSize: 13 }}>FastAPI / httpx / SQLite</span>
-            </Row>
-            <Row title="Frontend" desc="React · TypeScript · Vite.">
-              <span className="mono" style={{ fontSize: 13 }}>React 18 / TS 5 / Vite 5</span>
-            </Row>
-            <Row title="API-Docs" desc="OpenAPI-Schema des Backends.">
-              <a className="btn" href="/api/docs" target="_blank" rel="noreferrer">
-                /api/docs
-              </a>
-            </Row>
-            <Row title="Repository" desc="Quellcode auf GitHub.">
-              <a
-                className="btn"
-                href="https://github.com/rxf-sys/admin.rxf-sys.de"
-                target="_blank"
-                rel="noreferrer"
-              >
-                rxf-sys/admin.rxf-sys.de
-              </a>
-            </Row>
-          </section>
+          <div className="card">
+            <SectionHead title="About" />
+            <div className="kv-stack">
+              <div className="kv-row"><span className="kv-k">Version</span><span className="kv-v mono">{appVersion ?? 'dev'}</span></div>
+              <div className="kv-row"><span className="kv-k">Backend</span><span className="kv-v mono">FastAPI · Python 3.12</span></div>
+              <div className="kv-row"><span className="kv-k">Frontend</span><span className="kv-v mono">React 19 · Vite 8 · TypeScript 6</span></div>
+              <div className="kv-row"><span className="kv-k">OpenAPI</span><a className="kv-v mono" style={{ color: 'var(--accent)' }} href="/api/docs" target="_blank" rel="noreferrer">/api/docs</a></div>
+              <div className="kv-row"><span className="kv-k">Repository</span><a className="kv-v mono" style={{ color: 'var(--accent)' }} href="https://github.com/rxf-sys/admin.rxf-sys.de" target="_blank" rel="noreferrer">github.com/rxf-sys/admin.rxf-sys.de</a></div>
+            </div>
+          </div>
         )}
       </div>
-    </div>
+    </>
   );
 }
diff --git a/frontend/src/components/StatusHistory.tsx b/frontend/src/components/StatusHistory.tsx
deleted file mode 100644
index 8ab3369..0000000
--- a/frontend/src/components/StatusHistory.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useEffect, useReducer, useRef } from 'react';
-
-type SnapStatus = 'ok' | 'warn' | 'err' | 'idle';
-
-interface Snapshot {
-  ts: number;
-  status: SnapStatus;
-  upCount: number;
-  total: number;
-}
-
-const STORAGE_KEY = 'rxf-admin-status-history';
-const MAX_ENTRIES = 30;
-
-function load(): Snapshot[] {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw) as Snapshot[];
-    if (!Array.isArray(parsed)) return [];
-    return parsed.slice(-MAX_ENTRIES);
-  } catch {
-    return [];
-  }
-}
-
-function save(entries: Snapshot[]): void {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
-  } catch {
-    // localStorage may be disabled or full — non-fatal.
-  }
-}
-
-interface Props {
-  /** Captures a new snapshot when this changes (typically lastFetched). */
-  pollTs: number;
-  servicesUp: number;
-  servicesTotal: number;
-}
-
-/**
- * Strip of the last 30 dashboard-wide status snapshots, anchored next to the
- * global status pill in the header. Persists to localStorage so a reload
- * doesn't wipe the recent history. Each cell is roughly one poll interval.
- */
-export function StatusHistory({ pollTs, servicesUp, servicesTotal }: Props) {
-  const historyRef = useRef<Snapshot[]>(load());
-  const lastTsRef = useRef<number>(0);
-  const [, bump] = useReducer((x: number) => x + 1, 0);
-
-  useEffect(() => {
-    if (!pollTs || pollTs === lastTsRef.current || servicesTotal === 0) return;
-    lastTsRef.current = pollTs;
-
-    const status: SnapStatus = servicesTotal === 0
-      ? 'idle'
-      : servicesUp === servicesTotal
-        ? 'ok'
-        : servicesUp >= servicesTotal * 0.5
-          ? 'warn'
-          : 'err';
-    const next: Snapshot[] = [...historyRef.current, { ts: pollTs, status, upCount: servicesUp, total: servicesTotal }];
-    while (next.length > MAX_ENTRIES) next.shift();
-    historyRef.current = next;
-    save(next);
-    bump();
-  }, [pollTs, servicesUp, servicesTotal]);
-
-  const history = historyRef.current;
-  if (history.length === 0) return null;
-
-  return (
-    <div
-      className="status-history"
-      role="img"
-      aria-label={`Health-Verlauf: ${history.length} Snapshots, ${history.filter((h) => h.status === 'ok').length} OK`}
-      title="Letzte Polls — grün = alle OK, gelb = teilweise degraded, rot = >50 % down"
-    >
-      {Array.from({ length: MAX_ENTRIES }).map((_, i) => {
-        const idx = history.length - MAX_ENTRIES + i;
-        const entry = idx >= 0 ? history[idx] : null;
-        if (!entry) {
-          return <span key={i} className="status-cell empty" aria-hidden="true" />;
-        }
-        const at = new Date(entry.ts);
-        const stamp = `${String(at.getHours()).padStart(2, '0')}:${String(at.getMinutes()).padStart(2, '0')}:${String(at.getSeconds()).padStart(2, '0')}`;
-        return (
-          <span
-            key={i}
-            className={`status-cell ${entry.status}`}
-            title={`${stamp} — ${entry.upCount}/${entry.total} OK`}
-          />
-        );
-      })}
-    </div>
-  );
-}
diff --git a/frontend/src/components/VMTable.tsx b/frontend/src/components/VMTable.tsx
index 26a6445..557b0d5 100644
--- a/frontend/src/components/VMTable.tsx
+++ b/frontend/src/components/VMTable.tsx
@@ -63,10 +63,10 @@ export function VMTable({ guests, onLogs, onRestart }: Props) {
   );
 
   return (
-    <section className="dash-section">
-      <div className="section-head">
+    <section className="vm-section">
+      <div className="dash-section-head" style={{ marginBottom: 12 }}>
         <h2>
-          Container & VMs <span className="dim">· {sorted.length} / {guests.length}</span>
+          Container &amp; VMs <span className="count">· {sorted.length} / {guests.length}</span>
         </h2>
         <div className="section-tools">
           <label className="toggle-pill" title="Nur laufende Container anzeigen">
@@ -87,7 +87,7 @@ export function VMTable({ guests, onLogs, onRestart }: Props) {
           />
         </div>
       </div>
-      <div className="card flat" style={{ padding: 0, overflow: 'hidden' }}>
+      <div className="vm-table-wrap">
         <table className="vm-table">
           <thead>
             <tr>
diff --git a/frontend/src/components/primitives.tsx b/frontend/src/components/primitives.tsx
index 0f1d874..531fa77 100644
--- a/frontend/src/components/primitives.tsx
+++ b/frontend/src/components/primitives.tsx
@@ -3,37 +3,53 @@ import type { Status } from '../types';
 
 export const ICONS: Record<string, ReactNode> = {
   server: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="4" width="18" height="6" rx="1.5" /><rect x="3" y="14" width="18" height="6" rx="1.5" /><circle cx="6.5" cy="7" r="0.8" fill="currentColor" /><circle cx="6.5" cy="17" r="0.8" fill="currentColor" /></svg>,
-  cpu: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="6" y="6" width="12" height="12" rx="1.5" /><rect x="9" y="9" width="6" height="6" rx="0.5" /><path d="M9 3v2M12 3v2M15 3v2M9 19v2M12 19v2M15 19v2M3 9h2M3 12h2M3 15h2M19 9h2M19 12h2M19 15h2" /></svg>,
+  cpu: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="6" y="6" width="12" height="12" rx="1.5" /><rect x="9" y="9" width="6" height="6" /><path d="M9 3v2M12 3v2M15 3v2M9 19v2M12 19v2M15 19v2M3 9h2M3 12h2M3 15h2M19 9h2M19 12h2M19 15h2" /></svg>,
+  ram: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="8" width="18" height="9" rx="1" /><path d="M7 13v-2M11 13v-2M15 13v-2M19 13v-2" /></svg>,
+  disk: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><ellipse cx="12" cy="6" rx="8" ry="2.5" /><path d="M4 6v12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5V6" /><path d="M4 12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5" /></svg>,
   cloud: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6.5 18a4.5 4.5 0 0 1-.7-8.95 6 6 0 0 1 11.7 2.45 4 4 0 0 1-.5 7.95H6.5z" /></svg>,
   archive: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="4" width="18" height="4" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4" /></svg>,
-  refresh: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M21 12a9 9 0 1 1-3-6.7L21 8M21 4v4h-4" /></svg>,
-  sun: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="4" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" /></svg>,
-  moon: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z" /></svg>,
-  close: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 6l12 12M18 6L6 18" /></svg>,
-  external: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4h6v6M20 4l-9 9M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6" /></svg>,
-  restart: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5" /></svg>,
-  logs: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 6h16M4 10h12M4 14h16M4 18h10" /></svg>,
   lock: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="5" y="11" width="14" height="9" rx="1.5" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>,
   photo: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="1.5" /><circle cx="8.5" cy="10" r="1.5" /><path d="M3 17l5-4 4 3 3-2 6 4" /></svg>,
   doc: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M7 3h8l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" /><path d="M14 3v5h5M9 13h6M9 17h4" /></svg>,
   media: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="1.5" /><path d="M10 9l5 3-5 3V9z" fill="currentColor" /></svg>,
   home: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-9z" /></svg>,
   monitor: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="4" width="18" height="12" rx="1.5" /><path d="M8 20h8M12 16v4" /></svg>,
-  check: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l5 5 9-11" /></svg>,
-  warn: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 4l10 17H2L12 4z" /><path d="M12 10v5M12 18v.5" /></svg>,
-  x: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9" /><path d="M9 9l6 6M15 9l-6 6" /></svg>,
-  search: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="11" cy="11" r="6" /><path d="M16 16l4 4" strokeLinecap="round" /></svg>,
-  grid: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>,
   network: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="5" r="2.5" /><circle cx="5" cy="19" r="2.5" /><circle cx="19" cy="19" r="2.5" /><path d="M12 7.5v4M12 11.5L5.8 17M12 11.5L18.2 17" /></svg>,
+  grid: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg>,
+  refresh: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M21 12a9 9 0 1 1-3-6.7L21 8M21 4v4h-4" /></svg>,
+  sun: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="4" /><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" /></svg>,
+  moon: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z" /></svg>,
+  search: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="11" cy="11" r="6" /><path d="M16 16l4 4" strokeLinecap="round" /></svg>,
   pause: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="6" y="5" width="4" height="14" rx="0.8" /><rect x="14" y="5" width="4" height="14" rx="0.8" /></svg>,
   play: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor"><path d="M7 5v14l12-7L7 5z" /></svg>,
+  restart: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12a9 9 0 1 0 3-6.7M3 4v5h5" /></svg>,
+  logs: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 6h16M4 10h12M4 14h16M4 18h10" /></svg>,
+  ext: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4h6v6M20 4l-9 9M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6" /></svg>,
+  external: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 4h6v6M20 4l-9 9M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6" /></svg>,
+  check: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12l5 5 9-11" /></svg>,
+  close: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 6l12 12M18 6L6 18" /></svg>,
+  x: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M6 18L18 6" /></svg>,
+  warn: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 4l10 17H2L12 4z" /><path d="M12 10v5M12 18v.5" /></svg>,
+  chevron: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6" /></svg>,
+  bell: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 9a6 6 0 1 1 12 0v5l2 3H4l2-3V9zM10 20a2 2 0 1 0 4 0" /></svg>,
+  info: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8v.5" strokeLinecap="round" /></svg>,
+  temp: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 5a2 2 0 1 1 4 0v9.3a4 4 0 1 1-4 0V5z" /><circle cx="12" cy="17" r="1.5" fill="currentColor" /></svg>,
   download: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M12 4v11M7 11l5 5 5-5M5 20h14" /></svg>,
+  zap: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" /></svg>,
+  filter: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 5h16l-6 8v6l-4-2v-4L4 5z" /></svg>,
+  settings: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="3" /><circle cx="12" cy="12" r="9" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></svg>,
+  gear: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="3" /><circle cx="12" cy="12" r="9" /><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></svg>,
   density: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg>,
-  gear: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></svg>,
-  bell: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10 21a2 2 0 0 0 4 0" /></svg>,
-  key: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><circle cx="8" cy="15" r="4" /><path d="M10.85 12.15L19 4M18 5l2 2M16 7l2 2" /></svg>,
-  info: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><circle cx="12" cy="12" r="9" /><path d="M12 11v6M12 8v.5" /></svg>,
-  user: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4 4-6 8-6s8 2 8 6" /></svg>,
+  copy: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="9" y="9" width="11" height="11" rx="1.5" /><path d="M5 15V5a1 1 0 0 1 1-1h10" /></svg>,
+  trash: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 7h16M9 7V4h6v3M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" /></svg>,
+  arrow_up: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 19V5M5 12l7-7 7 7" strokeLinecap="round" strokeLinejoin="round" /></svg>,
+  arrow_down: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 5v14M5 12l7 7 7-7" strokeLinecap="round" strokeLinejoin="round" /></svg>,
+  wifi: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M5 12.5a10 10 0 0 1 14 0M8 16a5 5 0 0 1 8 0" /><circle cx="12" cy="19.5" r="1.2" fill="currentColor" stroke="none" /></svg>,
+  router: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="13" width="18" height="6" rx="1.5" /><circle cx="7" cy="16" r="0.8" fill="currentColor" /><circle cx="10" cy="16" r="0.8" fill="currentColor" /><path d="M12 13V9M8 9V7M16 9V7M12 9V5" strokeLinecap="round" /></svg>,
+  shield: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" /></svg>,
+  globe: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>,
+  user: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" /></svg>,
+  key: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="8" cy="15" r="4" /><path d="M11 12l9-9M16 7l3 3" /></svg>,
   palette: <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M12 3a9 9 0 1 0 0 18c1 0 1.5-.5 1.5-1.3 0-.4-.2-.7-.4-1-.3-.4-.5-.7-.5-1.2 0-.8.7-1.5 1.5-1.5H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8z" /><circle cx="7.5" cy="11.5" r="1" fill="currentColor" /><circle cx="11.5" cy="7.5" r="1" fill="currentColor" /><circle cx="16.5" cy="11.5" r="1" fill="currentColor" /></svg>,
 };
 
@@ -42,6 +58,8 @@ interface SparklineProps {
   color?: string;
   width?: number;
   height?: number;
+  area?: boolean;
+  stroke?: number;
   showMinMax?: boolean;
 }
 
@@ -50,7 +68,9 @@ export function Sparkline({
   color = 'var(--accent)',
   width = 120,
   height = 28,
-  showMinMax = true,
+  area = false,
+  stroke = 1.4,
+  showMinMax = false,
 }: SparklineProps) {
   if (!data || data.length === 0) return null;
   const min = Math.min(...data);
@@ -63,6 +83,8 @@ export function Sparkline({
     return [x, y];
   });
   const path = points.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  const areaPath = `${path} L${width.toFixed(1)},${height} L0,${height} Z`;
+  const lastPt = points[points.length - 1];
   const minIdx = data.indexOf(min);
   const maxIdx = data.indexOf(max);
   return (
@@ -73,7 +95,9 @@ export function Sparkline({
       role="img"
       aria-label={`Verlauf: min ${Math.round(min)}, max ${Math.round(max)}`}
     >
-      <path d={path} fill="none" stroke={color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
+      {area && <path d={areaPath} fill={color} opacity="0.12" />}
+      <path d={path} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" />
+      {lastPt && <circle cx={lastPt[0]} cy={lastPt[1]} r={Math.max(1.6, stroke + 0.6)} fill={color} />}
       {showMinMax && points[minIdx] && points[maxIdx] && (
         <>
           <circle cx={points[minIdx][0]} cy={points[minIdx][1]} r="1.8" fill="var(--text-3)" />
@@ -84,6 +108,99 @@ export function Sparkline({
   );
 }
 
+interface AreaChartProps {
+  series: number[];
+  secondary?: number[];
+  color?: string;
+  secondaryColor?: string;
+  height?: number;
+  max?: number;
+  gridLines?: number;
+}
+
+export function AreaChart({
+  series,
+  secondary,
+  color = 'var(--accent)',
+  secondaryColor = 'var(--info)',
+  height = 130,
+  max,
+  gridLines = 3,
+}: AreaChartProps) {
+  if (!series || series.length === 0) return null;
+  const all = secondary ? [...series, ...secondary] : series;
+  const m = max || Math.max(...all) * 1.15 || 1;
+  const w = 800;
+  const path = (data: number[]) => {
+    const stepX = w / Math.max(1, data.length - 1);
+    const pts = data.map((v, i): [number, number] => [i * stepX, height - (v / m) * (height - 8) - 4]);
+    const line = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+    const areaP = `${line} L${w},${height} L0,${height} Z`;
+    return { line, area: areaP };
+  };
+  const a = path(series);
+  const b = secondary ? path(secondary) : null;
+  return (
+    <svg viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" style={{ width: '100%', height, display: 'block' }} aria-hidden="true">
+      {Array.from({ length: gridLines }).map((_, i) => {
+        const y = (height / (gridLines + 1)) * (i + 1);
+        return <line key={i} x1="0" x2={w} y1={y} y2={y} stroke="var(--border)" strokeWidth="1" strokeDasharray="3 5" />;
+      })}
+      {b && (
+        <>
+          <path d={b.area} fill={secondaryColor} opacity="0.12" />
+          <path d={b.line} fill="none" stroke={secondaryColor} strokeWidth="1.5" />
+        </>
+      )}
+      <path d={a.area} fill={color} opacity="0.16" />
+      <path d={a.line} fill="none" stroke={color} strokeWidth="1.6" />
+    </svg>
+  );
+}
+
+interface RingProps {
+  value: number;
+  label?: string;
+  sub?: string;
+  color?: string;
+  size?: number;
+  stroke?: number;
+}
+
+export function Ring({ value, label, sub, color, size = 80, stroke = 7 }: RingProps) {
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  const v = Math.min(100, Math.max(0, value));
+  const offset = c - (v / 100) * c;
+  const ringColor = color || (v > 90 ? 'var(--err)' : v > 75 ? 'var(--warn)' : 'var(--ok)');
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+      <div style={{ position: 'relative', width: size, height: size }}>
+        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }} aria-hidden="true">
+          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-4)" strokeWidth={stroke} />
+          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={ringColor} strokeWidth={stroke}
+            strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round"
+            style={{ transition: 'stroke-dashoffset 600ms ease' }} />
+        </svg>
+        <div style={{
+          position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
+          alignItems: 'center', justifyContent: 'center',
+          fontFamily: 'var(--font-mono)', fontWeight: 700,
+        }}>
+          <span style={{ fontSize: 15, color: 'var(--text-1)', letterSpacing: '-0.5px' }}>{Math.round(v)}</span>
+          <span style={{ fontSize: 8.5, color: 'var(--text-4)', letterSpacing: 0.5, marginTop: -2 }}>%</span>
+        </div>
+      </div>
+      {(label || sub) && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          {label && <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', color: 'var(--text-3)' }}>{label}</span>}
+          {sub && <span className="mono" style={{ fontSize: 11, color: 'var(--text-4)' }}>{sub}</span>}
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface DonutProps {
   value: number;
   label: string;
@@ -93,59 +210,77 @@ interface DonutProps {
   stroke?: number;
 }
 
+// Centered variant retained for legacy callers (OverviewCards etc).
 export function Donut({ value, label, sublabel, color, size = 64, stroke = 6 }: DonutProps) {
   const r = (size - stroke) / 2;
   const c = 2 * Math.PI * r;
   const offset = c - (value / 100) * c;
-  const trackColor = 'var(--surface-4)';
   const ringColor = color || (value > 85 ? 'var(--err)' : value > 70 ? 'var(--warn)' : 'var(--ok)');
   return (
-    <div
-      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}
-      role="img"
-      aria-label={`${label}: ${Math.round(value)} Prozent${sublabel ? `, ${sublabel}` : ''}`}
-    >
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}
+      role="img" aria-label={`${label}: ${Math.round(value)} Prozent${sublabel ? `, ${sublabel}` : ''}`}>
       <div style={{ position: 'relative', width: size, height: size }}>
         <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }} aria-hidden="true">
-          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={trackColor} strokeWidth={stroke} />
-          <circle
-            cx={size / 2}
-            cy={size / 2}
-            r={r}
-            fill="none"
-            stroke={ringColor}
-            strokeWidth={stroke}
-            strokeDasharray={c}
-            strokeDashoffset={offset}
-            strokeLinecap="round"
-            style={{ transition: 'stroke-dashoffset 600ms ease' }}
-          />
+          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-4)" strokeWidth={stroke} />
+          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={ringColor} strokeWidth={stroke}
+            strokeDasharray={c} strokeDashoffset={offset} strokeLinecap="round"
+            style={{ transition: 'stroke-dashoffset 600ms ease' }} />
         </svg>
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontFamily: 'var(--font-mono)',
-            fontSize: 13,
-            fontWeight: 600,
-            color: 'var(--text-1)',
-          }}
-        >
+        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--text-1)' }}>
           {Math.round(value)}
           <span style={{ fontSize: 9, opacity: 0.5, marginLeft: 1 }}>%</span>
         </div>
       </div>
-      <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>
-        {label}
-      </div>
+      <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>{label}</div>
       {sublabel && <div className="mono" style={{ fontSize: 10, color: 'var(--text-4)' }}>{sublabel}</div>}
     </div>
   );
 }
 
+interface TrendBarsProps {
+  data: number[];
+  color?: string;
+  max?: number;
+  height?: number;
+  threshold?: number;
+}
+
+export function TrendBars({ data, color = 'var(--accent)', max, height = 36, threshold }: TrendBarsProps) {
+  if (!data || data.length === 0) return null;
+  const m = max || Math.max(...data) || 1;
+  return (
+    <div className="host-metric-trend">
+      {data.map((v, i) => {
+        const h = Math.max(2, (v / m) * height);
+        const isHi = threshold != null ? v > threshold : i === data.length - 1;
+        return (
+          <span key={i} className={`tick ${isHi ? 'hi' : ''}`} style={{ height: `${h}px`, background: isHi ? color : undefined }} />
+        );
+      })}
+    </div>
+  );
+}
+
+export interface StackedSegment {
+  name: string;
+  gb: number;
+  color: string;
+}
+
+export function StackedBar({ segments }: { segments: StackedSegment[] }) {
+  return (
+    <div className="stacked-bar">
+      {segments.map((s, i) => (
+        <span key={`${s.name}-${i}`} className="seg" style={{ flex: s.gb, background: s.color }} title={`${s.name}: ${s.gb.toFixed(1)} GB`} />
+      ))}
+    </div>
+  );
+}
+
+export function Reach({ ok, label }: { ok: boolean; label: string }) {
+  return <span className={`reach ${ok ? 'ok' : 'off'}`}>{label}</span>;
+}
+
 const STATUS_LABEL: Record<Status, string> = {
   ok: 'Status OK',
   warn: 'Status Warnung',
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 730f490..c20dbd3 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import './styles/tokens.css';
 import './styles/layout.css';
+import './styles/layout-extra.css';
 import './styles/app.css';
 
 const rootEl = document.getElementById('root');
diff --git a/frontend/src/styles/layout-extra.css b/frontend/src/styles/layout-extra.css
new file mode 100644
index 0000000..2cbd2da
--- /dev/null
+++ b/frontend/src/styles/layout-extra.css
@@ -0,0 +1,359 @@
+/* v2 sections + drawer + settings — 1:1 from handoff/reference/v2/layout-extra.css */
+
+/* ============ GRID HELPERS — for nested 12-col layouts inside sections ============ */
+.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
+.col-1  { grid-column: span 1; }
+.col-2  { grid-column: span 2; }
+.col-3  { grid-column: span 3; }
+.col-4  { grid-column: span 4; }
+.col-5  { grid-column: span 5; }
+.col-6  { grid-column: span 6; }
+.col-7  { grid-column: span 7; }
+.col-8  { grid-column: span 8; }
+.col-9  { grid-column: span 9; }
+.col-10 { grid-column: span 10; }
+.col-11 { grid-column: span 11; }
+.col-12 { grid-column: span 12; }
+
+@media (max-width: 1100px) {
+  .grid-12 { grid-template-columns: repeat(6, 1fr); }
+  .col-5, .col-6, .col-7, .col-8 { grid-column: span 6; }
+}
+@media (max-width: 700px) {
+  .grid-12 { grid-template-columns: 1fr; }
+  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 1; }
+}
+
+/* ============ KV STACK ============ */
+.kv-stack { display: flex; flex-direction: column; gap: 8px; }
+.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; }
+.kv-k { font-size: 11px; color: var(--text-3); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; }
+.kv-v { font-size: 13px; color: var(--text-1); }
+
+/* ============ MINI TABLE ============ */
+.mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+.mini-table th {
+  text-align: left;
+  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
+  color: var(--text-4);
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+.mini-table td { padding: 8px 0; border-bottom: 1px solid var(--border); }
+.mini-table tbody tr:last-child td { border-bottom: 0; }
+.mini-table tbody tr:hover td { background: var(--surface-3); }
+
+/* ============ NETWORK · device card ============ */
+.device-card { padding: 18px 20px; }
+.device-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
+.device-icon {
+  width: 38px; height: 38px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-radius: var(--r-3);
+}
+.device-icon svg { width: 20px; height: 20px; }
+.device-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
+.dev-metric { display: flex; flex-direction: column; gap: 4px; }
+.dev-metric-label { font-size: 10px; color: var(--text-3); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
+
+.port-grid { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
+.port { width: 14px; height: 14px; border-radius: 2px; background: var(--surface-4); border: 1px solid var(--border-2); }
+.port.on  { background: var(--ok); border-color: transparent; box-shadow: 0 0 0 1px rgba(0,217,126,0.3); }
+
+.vlan-list { display: flex; flex-direction: column; gap: 8px; }
+.vlan-row { display: grid; grid-template-columns: 10px 90px 1fr 100px 28px; align-items: center; gap: 10px; padding: 4px 0; }
+.vlan-swatch { width: 10px; height: 10px; border-radius: 50%; }
+.vlan-name { font-size: 13px; font-weight: 600; }
+.vlan-bar { height: 6px; background: var(--surface-4); border-radius: 3px; overflow: hidden; }
+.vlan-bar > div { height: 100%; border-radius: 3px; transition: width var(--t-med); }
+
+/* Network / Backup / Cloudflare section column shorthands */
+.network-section, .backup-section, .cloudflare-section { grid-column: span 12; }
+
+/* Throughput chart legend */
+.throughput-legend { display: flex; gap: 14px; font-size: 11px; }
+.throughput-legend .item { display: flex; align-items: center; gap: 6px; }
+.throughput-legend .dash { width: 10px; height: 3px; border-radius: 1px; }
+.throughput-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-4); font-family: var(--font-mono); margin-top: 4px; }
+
+/* ============ BACKUP heatmap ============ */
+.day-grid {
+  display: grid;
+  grid-template-columns: repeat(15, 1fr);
+  gap: 4px;
+  padding: 8px 0;
+}
+.day-cell {
+  aspect-ratio: 1;
+  border-radius: 3px;
+  background: var(--surface-4);
+  display: flex; align-items: center; justify-content: center;
+  border: 1px solid var(--border);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-4);
+}
+.day-cell.ok   { background: var(--ok); border-color: transparent; color: rgba(0,0,0,0.5); }
+.day-cell.half { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
+.day-cell.low  { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
+.day-cell.fail { background: var(--err-soft); border-color: var(--err); color: var(--err); }
+.day-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
+.day-legend .swatch-inline { width: 10px; height: 10px; display: inline-block; margin-right: 4px; vertical-align: middle; border-radius: 2px; }
+
+.job-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+.job-table thead th {
+  text-align: left;
+  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
+  color: var(--text-4);
+  padding: 10px 14px;
+  background: var(--surface-1);
+  border-bottom: 1px solid var(--border);
+}
+.job-table tbody td { padding: 8px 14px; border-bottom: 1px solid var(--border); }
+.job-table tbody tr:last-child td { border-bottom: 0; }
+.job-table tbody tr.attn td { background: rgba(255, 71, 87, 0.05); }
+.job-table tbody tr.attn td:first-child { box-shadow: inset 2px 0 0 var(--err); }
+.job-table tbody tr { cursor: pointer; }
+.job-table tbody tr:hover td { background: var(--surface-3); }
+
+.verify {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 10.5px; color: var(--text-3); font-weight: 500;
+}
+.verify.ok { color: var(--ok); }
+.verify.warn { color: var(--warn); }
+.verify svg { width: 12px; height: 12px; }
+
+/* ============ CLOUDFLARE DNS list ============ */
+.dns-list { display: flex; flex-direction: column; gap: 2px; }
+.dns-row {
+  display: grid;
+  grid-template-columns: 10px 1fr auto auto auto;
+  align-items: center; gap: 10px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  transition: background var(--t-fast);
+  cursor: pointer;
+}
+.dns-row:hover { background: var(--surface-3); }
+
+/* ============ SETTINGS ============ */
+.settings-layout { display: contents; }
+.settings-nav-col { grid-column: span 3; }
+.settings-content-col { grid-column: span 9; display: flex; flex-direction: column; gap: 16px; }
+
+.settings-nav {
+  display: flex; flex-direction: column; gap: 2px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-3);
+  padding: 8px;
+  position: sticky; top: 110px;
+}
+.settings-nav-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 12px;
+  border: 0; background: transparent;
+  border-radius: var(--r-2);
+  font: inherit; font-size: 13px; font-weight: 500;
+  color: var(--text-3); text-align: left;
+  cursor: pointer;
+  width: 100%;
+}
+.settings-nav-item svg { width: 15px; height: 15px; }
+.settings-nav-item:hover { background: var(--surface-3); color: var(--text-1); }
+.settings-nav-item.active { background: var(--surface-3); color: var(--text-1); box-shadow: inset 2px 0 0 var(--accent); }
+
+.settings-section-h { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
+.settings-section-h h2 { margin: 0; font-size: 16px; font-weight: 700; }
+.settings-section-h p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); }
+
+.settings-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border);
+}
+.settings-row:last-child { border-bottom: 0; padding-bottom: 0; }
+.settings-row-info h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-1); }
+.settings-row-info p  { margin: 2px 0 0; font-size: 12px; color: var(--text-3); }
+.settings-row-control { display: flex; align-items: center; gap: 10px; }
+
+/* Segmented control */
+.seg-control {
+  display: inline-flex;
+  background: var(--surface-3);
+  border: 1px solid var(--border-2);
+  border-radius: var(--r-2);
+  padding: 2px;
+}
+.seg-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 12px;
+  border: 0; background: transparent;
+  border-radius: 4px;
+  font: inherit; font-size: 12px; font-weight: 500;
+  color: var(--text-3); cursor: pointer;
+}
+.seg-btn:hover { color: var(--text-1); }
+.seg-btn.active { background: var(--surface-4); color: var(--text-1); box-shadow: var(--shadow-1); }
+.seg-btn svg { width: 13px; height: 13px; }
+
+/* Switch */
+.switch { display: inline-block; position: relative; width: 36px; height: 20px; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.switch span {
+  position: absolute; inset: 0;
+  background: var(--surface-4);
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background var(--t-fast);
+}
+.switch span::before {
+  content: '';
+  position: absolute; top: 3px; left: 3px;
+  width: 14px; height: 14px;
+  background: var(--text-2);
+  border-radius: 50%;
+  transition: transform var(--t-fast), background var(--t-fast);
+}
+.switch input:checked + span { background: var(--accent); }
+.switch input:checked + span::before { transform: translateX(16px); background: #fff; }
+
+/* ============ DRAWER ============ */
+.drawer-backdrop {
+  position: fixed; inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  opacity: 0; pointer-events: none;
+  transition: opacity var(--t-med);
+  z-index: 100;
+  backdrop-filter: blur(2px);
+}
+.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
+
+.drawer {
+  position: fixed; top: 0; right: 0; bottom: 0;
+  width: min(680px, 95vw);
+  background: var(--bg-1);
+  border-left: 1px solid var(--border);
+  box-shadow: -24px 0 60px rgba(0,0,0,0.4);
+  transform: translateX(100%);
+  transition: transform var(--t-slow);
+  z-index: 101;
+  display: flex; flex-direction: column;
+}
+.drawer.open { transform: translateX(0); }
+.drawer-h {
+  display: flex; align-items: center; gap: 14px;
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--border);
+}
+.drawer-h h2 { margin: 0; font-size: 20px; font-weight: 700; }
+.drawer-link {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 11.5px; color: var(--text-3); text-decoration: none;
+  font-family: var(--font-mono);
+}
+.drawer-link:hover { color: var(--accent); }
+.drawer-link svg { width: 11px; height: 11px; }
+.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 26px; }
+
+.drawer-summary {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--border);
+}
+.drawer-summary > div { display: flex; flex-direction: column; gap: 4px; }
+
+.drawer-section h3 {
+  margin: 0 0 12px;
+  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
+  text-transform: uppercase; color: var(--text-3);
+}
+.drawer-section h3 .h3-sub { font-size: 11px; color: var(--text-4); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; font-family: var(--font-mono); }
+.drawer-chart {
+  background: var(--bg-0);
+  border: 1px solid var(--border);
+  border-radius: var(--r-3);
+  padding: 16px;
+}
+.drawer-chart svg { width: 100%; height: auto; display: block; }
+.drawer-chart-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; font-family: var(--font-mono); }
+
+.probe-history { display: flex; gap: 2px; padding: 8px 0; }
+.probe-tick {
+  flex: 1; height: 20px;
+  background: var(--surface-4);
+  border-radius: 1px;
+}
+.probe-tick.ok { background: var(--ok); }
+.probe-tick.warn { background: var(--warn); }
+.probe-tick.err { background: var(--err); }
+.probe-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--text-4); font-family: var(--font-mono); }
+
+.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 13px; }
+.kv-grid > div { display: flex; flex-direction: column; gap: 2px; }
+.kv-grid .kv-k { font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase; }
+
+.log-pre {
+  background: var(--bg-0);
+  border: 1px solid var(--border);
+  border-radius: var(--r-3);
+  padding: 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.7;
+  color: var(--text-2);
+  margin: 0;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.event-list { display: flex; flex-direction: column; gap: 6px; }
+.event-row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--r-3);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+}
+.event-row .e-text { flex: 1; font-size: 13px; color: var(--text-2); }
+.event-row .e-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
+
+.drawer-foot {
+  padding: 14px 24px;
+  border-top: 1px solid var(--border);
+  display: flex; gap: 8px;
+  justify-content: flex-end;
+  background: var(--surface-1);
+}
+.drawer-foot .btn { height: 34px; }
+.drawer-foot .btn svg { width: 14px; height: 14px; }
+
+/* ============ JOB / BACKUP list shared ============ */
+.job-list { display: flex; flex-direction: column; gap: 2px; }
+.job-row {
+  display: grid;
+  grid-template-columns: 14px 1fr auto auto;
+  align-items: center; gap: 12px;
+  padding: 8px 8px;
+  border-radius: 4px;
+  transition: background var(--t-fast);
+  font-size: 12.5px;
+}
+.job-row:hover { background: var(--surface-3); }
+
+@media (max-width: 700px) {
+  .drawer { width: 100vw; }
+  .drawer-summary { grid-template-columns: 1fr 1fr; }
+  .settings-nav-col, .settings-content-col { grid-column: span 1; }
+  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
+  .kv-grid { grid-template-columns: 1fr; }
+  .day-grid { grid-template-columns: repeat(10, 1fr); }
+  .vlan-row { grid-template-columns: 10px 1fr auto; }
+  .vlan-row .vlan-bar, .vlan-row .mono { display: none; }
+}
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
index 4959384..2a720b2 100644
--- a/frontend/src/styles/layout.css
+++ b/frontend/src/styles/layout.css
@@ -1,14 +1,14 @@
-/* Dashboard layout + component styles */
+/* v2 layout — 1:1 from handoff/reference/v2/layout.css */
 
 .dashboard {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  min-height: 100vh;
   background: var(--bg-0);
   color: var(--text-1);
 }
 
-/* HEADER */
+/* ============ HEADER (refined: cleaner grouping) ============ */
 .dash-header {
   position: sticky;
   top: 0;
@@ -17,22 +17,64 @@
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 16px;
-  padding: 10px 24px;
+  padding: 10px 28px;
   background: color-mix(in srgb, var(--bg-1) 92%, transparent);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border);
 }
 .hdr-left  { display: flex; align-items: center; gap: 14px; }
-.hdr-mid   { display: flex; justify-content: center; }
-.hdr-right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
+.hdr-mid   { display: flex; justify-content: center; align-items: center; gap: 10px; }
+.hdr-right { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
 
 .logo { display: flex; align-items: center; gap: 10px; }
 .logo-mark { display: inline-flex; }
 .logo-text { display: flex; flex-direction: column; line-height: 1.05; }
 .logo-title { font-weight: 700; font-size: 14px; letter-spacing: -0.2px; }
-.logo-sub { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
+.logo-sub { font-size: 9px; color: var(--accent); text-transform: uppercase; letter-spacing: 1.8px; font-weight: 700; }
 .hdr-sep { width: 1px; height: 22px; background: var(--border-2); }
-.hdr-crumb { color: var(--text-3); font-size: 12px; }
+.hdr-crumb { color: var(--text-3); font-size: 11px; }
+
+.hdr-group {
+  display: inline-flex;
+  align-items: center;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-2);
+  padding: 2px;
+  gap: 0;
+}
+.hdr-group .btn {
+  height: 26px; border-radius: 4px; border: 0; background: transparent;
+  padding: 0 8px;
+}
+.hdr-group .btn:hover { background: var(--surface-4); }
+.hdr-group .btn.active { background: var(--surface-4); color: var(--accent); }
+.hdr-group .sep { width: 1px; height: 14px; background: var(--border-2); margin: 0 2px; }
+
+.cmdk-trigger {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 10px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-2);
+  font-size: 11.5px;
+  color: var(--text-3);
+  cursor: pointer;
+  min-width: 180px;
+  font-family: inherit;
+}
+.cmdk-trigger:hover { background: var(--surface-3); border-color: var(--border-2); }
+.cmdk-trigger svg { width: 13px; height: 13px; }
+.cmdk-trigger kbd {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 2px 5px;
+  background: var(--surface-4);
+  border-radius: 3px;
+  color: var(--text-3);
+  border: 1px solid var(--border-2);
+}
 
 .global-status {
   display: inline-flex; align-items: center; gap: 8px;
@@ -42,92 +84,365 @@
   border: 1px solid var(--border);
   font-size: 12px; font-weight: 500;
 }
-.global-status.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
-.global-status.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
-.gs-label { color: var(--text-2); }
-.global-status.ok .gs-label { color: var(--text-1); }
+.global-status.ok   { border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
+.global-status.warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
+.global-status.err  { border-color: color-mix(in srgb, var(--err) 30%, var(--border)); }
+.global-status .gs-label { color: var(--text-1); }
+.global-status .gs-count { color: var(--text-3); font-family: var(--font-mono); margin-left: 4px; font-size: 11px; }
 
-.hdr-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
-.hdr-user { display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--border); margin-left: 4px; }
-.hdr-user-meta { display: flex; flex-direction: column; line-height: 1.15; }
 .avatar {
   width: 28px; height: 28px; border-radius: 50%;
   background: var(--grad-brand);
   display: flex; align-items: center; justify-content: center;
   font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.5px;
+  margin-left: 6px;
+  border: 0;
+  cursor: default;
 }
 
 .spin svg { animation: spin 0.8s linear infinite; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-.poll-pulse {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 0 0 var(--accent-ring);
-  animation: pollPulse 1.4s ease-out infinite;
-  display: inline-block;
+/* Section tabs */
+.section-nav {
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-1);
+  padding: 0 24px;
+  position: sticky;
+  top: 53px;
+  z-index: 40;
+}
+.section-nav-list { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
+.section-tab {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 12px 18px;
+  background: transparent;
+  border: 0;
+  color: var(--text-3);
+  font: inherit; font-size: 13px; font-weight: 500;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color var(--t-fast), border-color var(--t-fast);
+  position: relative;
 }
-@keyframes pollPulse {
-  0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
-  70%  { box-shadow: 0 0 0 6px transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+.section-tab:hover { color: var(--text-1); }
+.section-tab.active {
+  color: var(--text-1);
+  border-bottom-color: var(--accent);
 }
-@media (prefers-reduced-motion: reduce) {
-  .poll-pulse { animation: none; }
+.section-tab-icon { display: inline-flex; }
+.section-tab-icon svg { width: 14px; height: 14px; }
+.section-tab-alerts {
+  font-size: 10px; font-family: var(--font-mono); font-weight: 700;
+  padding: 1px 6px;
+  background: var(--err);
+  color: #fff;
+  border-radius: 999px;
+  min-width: 18px;
+  text-align: center;
 }
 
-/* MAIN */
-.dash-main { padding: 20px 24px 60px; max-width: 1600px; margin: 0 auto; width: 100%; }
+/* ============ MAIN GRID ============ */
+.dash-main {
+  padding: 24px 28px 60px;
+  max-width: 1680px;
+  margin: 0 auto;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 20px;
+}
 
-.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
-.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-1); }
+.dash-section-head {
+  display: flex; align-items: baseline; justify-content: space-between;
+  margin: 8px 0 0;
+  grid-column: span 12;
+}
+.dash-section-head h2 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--text-2);
+}
+.dash-section-head h2 .count { color: var(--text-4); font-weight: 400; margin-left: 8px; }
 .section-tools { display: flex; align-items: center; gap: 8px; }
-.dash-section { margin-bottom: 28px; }
 
-/* OVERVIEW CARDS */
-.overview-grid {
+/* ============ ATTENTION HERO ============ */
+.attention {
+  grid-column: span 12;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 14px;
-  margin-bottom: 28px;
+  grid-template-columns: 320px 1fr;
+  gap: 16px;
+  padding: 20px 24px;
+  background: var(--surface-2);
+  background-image: var(--grad-hero);
+  border: 1px solid var(--border);
+  border-radius: var(--r-5);
+  position: relative;
+  overflow: hidden;
+}
+.attention::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 50%, transparent 100%);
+  opacity: 0.05;
+  pointer-events: none;
 }
-.overview-card { display: flex; flex-direction: column; gap: 12px; min-height: 180px; }
-.ov-body { display: flex; justify-content: space-around; padding: 4px 0; }
-.ov-foot { font-size: 11px; color: var(--text-4); padding-top: 8px; border-top: 1px dashed var(--border); margin-top: auto; }
-.ov-big { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
-.ov-mini-list { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--border); }
-.mini-row { display: flex; align-items: center; gap: 8px; height: 22px; }
-.ov-rows { display: flex; flex-direction: column; gap: 8px; }
-.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
 
-.bar { height: 4px; background: var(--surface-4); border-radius: 2px; overflow: hidden; min-width: 60px; flex: 1; }
-.bar-fill { height: 100%; transition: width 600ms ease; border-radius: 2px; }
+.health-score { display: flex; flex-direction: column; gap: 4px; }
+.health-score-label {
+  font-size: 10.5px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  color: var(--text-3);
+  font-weight: 600;
+}
+.health-score-value {
+  display: flex; align-items: baseline; gap: 8px;
+  font-family: var(--font-display);
+}
+.health-score-num {
+  font-size: 56px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -2px;
+  color: var(--text-1);
+  font-variant-numeric: tabular-nums;
+}
+.health-score-num.warn { color: var(--warn); }
+.health-score-num.err { color: var(--err); }
+.health-score-out { color: var(--text-4); font-size: 14px; font-family: var(--font-mono); }
+.health-score-delta {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 11px; font-family: var(--font-mono);
+  padding: 2px 6px; border-radius: 4px;
+  background: var(--err-soft); color: var(--err);
+  margin-top: 2px; align-self: flex-start;
+}
+.health-score-delta.ok { background: var(--ok-soft); color: var(--ok); }
+.health-score-delta svg { width: 12px; height: 12px; }
+.health-score-desc { color: var(--text-3); font-size: 12px; margin-top: 6px; max-width: 280px; line-height: 1.5; }
+.health-score-meter {
+  margin-top: 12px;
+  height: 6px;
+  background: var(--surface-4);
+  border-radius: 3px;
+  position: relative;
+  overflow: hidden;
+}
+.health-score-meter > div {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  border-radius: 3px;
+  background: linear-gradient(90deg, var(--err) 0%, var(--warn) 50%, var(--ok) 100%);
+  transition: width 600ms ease;
+}
+.health-score-meter > .marker {
+  position: absolute; top: -2px; bottom: -2px;
+  width: 2px;
+  background: var(--text-1);
+  box-shadow: 0 0 0 2px var(--bg-0);
+  border-radius: 1px;
+}
+
+.alerts-stack { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
+.alerts-stack-head {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase;
+  color: var(--text-3); font-weight: 600;
+}
+.alerts-stack-head svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
+.alerts-list { display: flex; flex-direction: column; gap: 6px; }
+.alerts-list .empty { padding: 16px; text-align: center; font-size: 12px; color: var(--text-4); }
+.alert-row {
+  display: grid;
+  grid-template-columns: 16px 110px 1fr auto auto;
+  align-items: center; gap: 12px;
+  padding: 10px 14px;
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-left: 3px solid transparent;
+  border-radius: var(--r-3);
+  transition: background var(--t-fast);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  width: 100%;
+}
+.alert-row:hover { background: var(--surface-3); }
+.alert-row.crit { border-left-color: var(--err); }
+.alert-row.warn { border-left-color: var(--warn); }
+.alert-row.info { border-left-color: var(--info); }
+.alert-row .alert-icon { display: inline-flex; align-items: center; justify-content: center; }
+.alert-row .alert-icon svg { width: 14px; height: 14px; }
+.alert-row .alert-target { font-weight: 600; font-size: 13px; min-width: 0; overflow: hidden; }
+.alert-row .alert-target .alert-sub { color: var(--text-3); font-weight: 400; font-size: 11px; margin-left: 6px; font-family: var(--font-mono); }
+.alert-row .alert-msg { color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alert-row .alert-msg em { color: var(--warn); font-style: normal; font-family: var(--font-mono); font-weight: 600; }
+.alert-row .alert-msg em.err { color: var(--err); }
+.alert-row .alert-time { font-family: var(--font-mono); color: var(--text-4); font-size: 11px; white-space: nowrap; }
+.alert-row .alert-actions { display: flex; gap: 4px; }
+
+/* ============ HOST PANEL ============ */
+.host-panel {
+  grid-column: span 8;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-4);
+  padding: 20px 24px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 24px;
+}
+.host-panel-head {
+  grid-column: 1 / -1;
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 4px;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.host-panel-head .title-block { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.host-panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.host-panel-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
+.host-panel-head .host-stat-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
+.host-panel-head .host-stat-inline svg { width: 13px; height: 13px; }
 
-.hw-health {
-  display: flex; gap: 8px; flex-wrap: wrap;
-  padding-top: 4px;
-  border-top: 1px dashed var(--border);
-  margin-top: -2px;
+.host-metric { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
+.host-metric-head {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: 11px; color: var(--text-3); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600;
 }
-.hw-pill {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 3px 8px;
-  background: var(--surface-3);
+.host-metric-value {
+  display: flex; align-items: baseline; gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  color: var(--text-1);
+}
+.host-metric-value .pct { font-size: 13px; font-weight: 500; color: var(--text-3); }
+.host-metric-value .unit-sm { font-size: 14px; color: var(--text-3); font-weight: 500; }
+.host-metric-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-4); }
+.host-metric-trend {
+  display: flex; align-items: flex-end; gap: 2px;
+  height: 36px;
+  margin-top: 2px;
+}
+.host-metric-trend .tick {
+  flex: 1;
+  background: var(--surface-4);
+  border-radius: 1px;
+  min-height: 2px;
+  transition: background var(--t-fast);
+}
+.host-metric-trend .tick.hi { background: var(--accent); opacity: 0.6; }
+.host-metric-trend .tick.hi:last-child { opacity: 1; }
+
+/* Stacked bar (RAM by guest) */
+.stacked-bar {
+  display: flex; height: 10px;
+  background: var(--surface-4);
+  border-radius: 4px;
+  overflow: hidden;
   border: 1px solid var(--border);
-  border-radius: var(--r-pill);
+}
+.stacked-bar .seg {
+  transition: flex var(--t-med);
+  border-right: 1px solid var(--bg-0);
+}
+.stacked-bar .seg:last-child { border-right: 0; }
+.stacked-legend {
+  display: flex; flex-wrap: wrap; gap: 8px 14px;
+  margin-top: 8px;
   font-size: 11px;
 }
-.hw-pill .dim { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
+.stacked-legend .item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); }
+.stacked-legend .swatch-sm { width: 8px; height: 8px; border-radius: 2px; }
+.stacked-legend .item-val { font-family: var(--font-mono); color: var(--text-2); }
+
+/* ============ SIDE COLUMN: KPI strip + Activity ============ */
+.quick-stats {
+  grid-column: span 4;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 16px;
+  min-width: 0;
+}
 
-/* SERVICE GRID */
+.kpi-strip {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.kpi {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-3);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+  overflow: hidden;
+}
+.kpi-label { font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
+.kpi-value {
+  font-family: var(--font-mono);
+  font-size: 22px; font-weight: 700;
+  color: var(--text-1);
+  line-height: 1.1;
+  letter-spacing: -0.5px;
+}
+.kpi-value.warn { color: var(--warn); }
+.kpi-value.err { color: var(--err); }
+.kpi-value .unit { font-size: 12px; color: var(--text-4); font-weight: 500; margin-left: 4px; }
+.kpi-meta { font-size: 11px; color: var(--text-4); display: flex; align-items: center; gap: 6px; }
+.kpi-meta .pct-up { color: var(--ok); }
+.kpi-meta .pct-down { color: var(--err); }
+.kpi-spark { position: absolute; right: 8px; bottom: 8px; opacity: 0.6; pointer-events: none; }
+
+/* ============ ACTIVITY TIMELINE ============ */
+.activity-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-3); padding: 18px; }
+.activity-list { display: flex; flex-direction: column; gap: 0; }
+.activity-row {
+  display: grid;
+  grid-template-columns: 14px 1fr auto;
+  align-items: center; gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12.5px;
+}
+.activity-row:last-child { border-bottom: 0; }
+.activity-row .a-icon {
+  width: 14px; height: 14px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--text-3);
+}
+.activity-row .a-icon svg { width: 14px; height: 14px; }
+.activity-row .a-icon.ok { color: var(--ok); }
+.activity-row .a-icon.warn { color: var(--warn); }
+.activity-row .a-icon.err { color: var(--err); }
+.activity-row .a-icon.info { color: var(--info); }
+.activity-row .a-text { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.activity-row .a-text strong { color: var(--text-1); font-weight: 600; }
+.activity-row .a-text .a-tag { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; margin: 0 4px; }
+.activity-row .a-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-4); white-space: nowrap; }
+
+/* ============ SERVICE GRID — richer tiles ============ */
+.svc-section { grid-column: span 12; }
 .svc-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
 }
 .svc-tile {
-  display: flex; flex-direction: column; gap: 10px;
-  padding: var(--tile-pad);
+  display: grid;
+  grid-template-rows: auto auto 1fr auto;
+  gap: 10px;
+  padding: 16px;
   background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: var(--r-3);
@@ -136,15 +451,25 @@
   font: inherit; color: inherit;
   position: relative;
   transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
+  overflow: hidden;
+}
+.svc-tile::before {
+  content: '';
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 2px;
+  background: transparent;
 }
+.svc-tile.status-ok::before    { background: var(--ok); }
+.svc-tile.status-warn::before  { background: var(--warn); }
+.svc-tile.status-err::before   { background: var(--err); }
 .svc-tile:hover { background: var(--surface-3); border-color: var(--border-2); }
-.svc-tile.status-warn { border-left: 2px solid var(--warn); }
-.svc-tile.status-err  { border-left: 2px solid var(--err); }
-.svc-tile.status-ok   { border-left: 2px solid transparent; }
+.svc-tile.status-err { background: linear-gradient(180deg, color-mix(in srgb, var(--err-soft) 100%, var(--surface-2)) 0%, var(--surface-2) 100%); }
+.svc-tile.status-warn { background: linear-gradient(180deg, color-mix(in srgb, var(--warn-soft) 50%, var(--surface-2)) 0%, var(--surface-2) 100%); }
 
 .svc-head { display: flex; align-items: center; gap: 10px; }
 .svc-icon {
-  width: 28px; height: 28px; flex-shrink: 0;
+  width: 30px; height: 30px; flex-shrink: 0;
   display: inline-flex; align-items: center; justify-content: center;
   background: var(--surface-3);
   color: var(--accent);
@@ -152,1250 +477,141 @@
   border: 1px solid var(--border);
 }
 .svc-icon svg { width: 16px; height: 16px; }
-.svc-name { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
+.svc-tile.status-warn .svc-icon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); }
+.svc-tile.status-err .svc-icon { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, var(--border)); }
+.svc-name { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
 .svc-title { font-weight: 600; font-size: 14px; }
-.svc-sub { font-size: 11px; color: var(--text-3); }
-.svc-mid { padding: 2px 0; min-height: 28px; }
-.svc-foot { display: flex; align-items: center; justify-content: space-between; }
-.svc-reach { display: flex; gap: 4px; }
-.reach {
-  font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
-  padding: 2px 6px; border-radius: 3px;
+.svc-sub { font-size: 10.5px; color: var(--text-3); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.svc-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 10px;
+  padding: 4px 0;
+  border-top: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border);
+}
+.svc-stat { display: flex; flex-direction: column; gap: 1px; }
+.svc-stat-label { font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-4); font-weight: 600; }
+.svc-stat-value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-1); }
+.svc-stat-value.dim { color: var(--text-3); font-weight: 500; }
+.svc-stat-value.warn { color: var(--warn); }
+.svc-stat-value.err  { color: var(--err); }
+.svc-stat-value.ok   { color: var(--ok); }
+.svc-stat-unit { font-size: 9px; color: var(--text-4); margin-left: 2px; }
+
+.svc-spark { padding: 2px 0; min-height: 28px; }
+.svc-spark svg { width: 100%; height: 28px; display: block; }
+
+.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.svc-foot .svc-reach { display: flex; gap: 4px; }
+.svc-foot .svc-time {
   font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text-4);
 }
-.reach.ok { background: var(--ok-soft); color: var(--ok); }
-.reach.off { background: var(--surface-4); color: var(--text-4); }
 
-/* VM TABLE */
+/* ============ VM TABLE — sticky header, problem rows ============ */
+.vm-section { grid-column: span 12; }
+.vm-table-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
 .vm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .vm-table thead th {
   text-align: left;
-  font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
+  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
   color: var(--text-3);
-  padding: 10px 12px;
-  background: var(--surface-3);
+  padding: 10px 14px;
+  background: var(--surface-1);
   border-bottom: 1px solid var(--border);
-  position: sticky; top: 0;
   user-select: none;
+  position: sticky; top: 0; z-index: 2;
 }
-.vm-table tbody td { padding: 0 12px; height: var(--row-h); border-bottom: 1px solid var(--border); }
-.vm-table tbody tr:hover td { background: var(--surface-3); }
+.vm-table tbody td { padding: 0 14px; height: var(--row-h); border-bottom: 1px solid var(--border); }
 .vm-table tbody tr:last-child td { border-bottom: 0; }
-
-.type-pill {
-  display: inline-block; padding: 1px 7px; border-radius: 3px;
-  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
-  font-family: var(--font-mono);
-}
-.type-pill.type-host { background: rgba(255,177,122,0.14); color: var(--accent); }
-.type-pill.type-lxc  { background: rgba(79,158,255,0.14); color: var(--info); }
-.type-pill.type-vm   { background: rgba(0,217,126,0.14); color: var(--ok); }
+.vm-table tbody tr.attn td { background: rgba(255, 71, 87, 0.05); }
+.vm-table tbody tr.attn td:first-child { box-shadow: inset 2px 0 0 var(--err); }
+.vm-table tbody tr.warn-row td { background: rgba(255, 176, 32, 0.04); }
+.vm-table tbody tr.warn-row td:first-child { box-shadow: inset 2px 0 0 var(--warn); }
+.vm-table tbody tr { cursor: pointer; }
+.vm-table tbody tr:hover td { background: var(--surface-3); }
+.vm-table tbody tr.attn:hover td { background: color-mix(in srgb, var(--err-soft) 50%, var(--surface-3)); }
 
 .cell-bar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
-.row-actions { display: inline-flex; gap: 4px; }
+.row-actions { display: inline-flex; gap: 4px; opacity: 0.4; transition: opacity var(--t-fast); }
+.vm-table tbody tr:hover .row-actions { opacity: 1; }
 .row-actions .btn.icon { width: 26px; height: 26px; }
 .row-actions .btn.icon svg { width: 13px; height: 13px; }
 
-/* NETWORK */
-.net-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
-.net-rows { display: flex; flex-direction: column; gap: 10px; }
-.net-row { display: flex; align-items: center; gap: 10px; height: 22px; }
-.net-dot { width: 8px; height: 8px; border-radius: 50%; }
-
-/* BACKUPS / CERTS */
-.bc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
-.job-list { display: flex; flex-direction: column; gap: 4px; }
-.job-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px; transition: background var(--t-fast); }
-.job-row:hover { background: var(--surface-3); }
-.job-target { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
-.verify { display: inline-flex; align-items: center; gap: 0; min-width: 80px; font-size: 11px; color: var(--text-3); }
-.verify.ok { color: var(--ok); }
-.verify.ok svg { width: 12px; height: 12px; }
-.verify.warn { color: var(--warn); }
-.verify.idle { color: var(--text-4); }
-
-.cert-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-.cert-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
-.cert-table td { padding: 9px 0; border-bottom: 1px solid var(--border); }
-.cert-table tr:last-child td { border-bottom: 0; }
-
-/* DRAWER */
-.drawer-backdrop {
-  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
-  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
-  z-index: 100;
-}
-.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
-.drawer {
-  position: fixed; top: 0; right: 0; bottom: 0;
-  width: min(640px, 92vw);
-  background: var(--bg-1);
-  border-left: 1px solid var(--border);
-  transform: translateX(100%); transition: transform 220ms ease;
-  z-index: 101;
-  display: flex; flex-direction: column;
-}
-.drawer.open { transform: translateX(0); }
-.drawer-h {
-  display: flex; align-items: center; gap: 12px;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border);
-}
-.drawer-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); text-decoration: none; }
-.drawer-link:hover { color: var(--accent); }
-.drawer-link svg { width: 11px; height: 11px; }
-.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 22px; }
-.drawer-section h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-3); }
-.drawer-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
-.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; font-size: 13px; }
-.kv-grid > div { display: flex; flex-direction: column; gap: 2px; }
-.kv-grid .dim { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
-
-.event-list { display: flex; flex-direction: column; gap: 4px; }
-.event-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); }
-
-.task-row {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.task-row-head {
-  display: flex; align-items: center; gap: 10px;
-  width: 100%;
-  padding: 6px 8px;
-  background: transparent;
-  border: 0; cursor: pointer;
-  font: inherit; color: inherit;
-  text-align: left;
-}
-.task-row-head:hover:not(:disabled) { background: var(--surface-3); }
-.task-row-head:disabled { cursor: default; opacity: 0.7; }
-.task-chevron { color: var(--text-3); font-size: 11px; width: 12px; }
-.task-log {
-  margin: 0;
-  padding: 10px 12px;
-  background: var(--bg-0);
-  border-top: 1px solid var(--border);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--text-2);
-  max-height: 320px;
-  overflow: auto;
-  white-space: pre-wrap;
-}
-
-.log-pre { background: var(--bg-0); border: 1px solid var(--border); border-radius: 6px; padding: 12px; font-size: 11px; line-height: 1.6; color: var(--text-2); overflow-x: auto; margin: 0; }
-
-.drawer-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
-.drawer-foot .btn { height: 32px; }
-.drawer-foot .btn.primary { color: #1a1d2e; }
-.drawer-foot .btn svg { width: 13px; height: 13px; }
-
-/* MODAL */
-.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; }
-.modal { background: var(--bg-1); border: 1px solid var(--border-2); border-radius: 10px; padding: 22px; width: 380px; display: flex; flex-direction: column; gap: 14px; }
-.shortcuts-modal { width: 460px; }
-.shortcuts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
-.shortcuts-row { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 13px; }
-.shortcuts-keys { display: inline-flex; gap: 4px; min-width: 90px; }
-.shortcuts-keys kbd {
-  font-family: var(--font-mono);
-  font-size: 11px; padding: 2px 7px;
-  background: var(--surface-3); border: 1px solid var(--border-2);
-  border-radius: 4px; color: var(--text-2);
-  min-width: 22px; text-align: center;
-}
-.shortcuts-desc { color: var(--text-2); }
-
-/* AUDIT LOG */
-.audit-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
-.audit-row {
-  display: flex; align-items: center; gap: 12px;
-  padding: 8px 14px;
-  font-size: 12px;
-  border-bottom: 1px solid var(--border);
-}
-.audit-row:last-child { border-bottom: 0; }
-.audit-row:hover { background: var(--surface-3); }
-.audit-tag {
-  display: inline-block;
-  font-family: var(--font-mono);
-  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
-  padding: 2px 8px; border-radius: 3px;
-  background: var(--surface-3); color: var(--text-2);
-  min-width: 130px;
-}
-.audit-tag.guest { background: rgba(79,158,255,0.14); color: var(--info); }
-.audit-tag.result { background: rgba(0,217,126,0.14); color: var(--ok); }
-.audit-fields { color: var(--text-3); flex: 1; word-break: break-all; }
-.audit-time { white-space: nowrap; }
-
-/* COMMAND PALETTE */
-.cmdk-trigger {
-  display: inline-flex; align-items: center; gap: 8px;
-  height: 28px; padding: 0 10px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  color: var(--text-3);
-  font-size: 12px;
-}
-.cmdk-trigger:hover { background: var(--surface-3); color: var(--text-2); }
-.cmdk-trigger svg { width: 13px; height: 13px; }
-.cmdk-trigger kbd {
-  font-family: var(--font-mono);
-  font-size: 10px; padding: 1px 5px;
-  background: var(--surface-4); border: 1px solid var(--border-2);
-  border-radius: 3px; color: var(--text-3);
-}
-@media (max-width: 900px) {
-  .cmdk-trigger-label { display: none; }
+/* ============ ERROR & PAUSED BANNERS ============ */
+.error-banner, .paused-banner {
+  padding: 10px 28px;
+  font-size: 12.5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
+.error-banner { background: var(--err-soft); color: var(--err); border-bottom: 1px solid color-mix(in srgb, var(--err) 30%, var(--border)); }
+.paused-banner { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border)); }
 
-.cmdk-backdrop {
+/* ============ COMMAND PALETTE / HELP modal shared ============ */
+.modal-backdrop {
   position: fixed; inset: 0;
-  background: rgba(0,0,0,0.55);
-  display: flex; justify-content: center;
-  padding-top: 12vh;
-  z-index: 250;
-  animation: cmdkBackdropIn 140ms ease-out;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+  z-index: 200;
+  display: flex; align-items: center; justify-content: center;
+  padding: 80px 16px;
 }
-.cmdk {
-  width: min(620px, 92vw);
-  max-height: 70vh;
+.modal {
   background: var(--bg-1);
-  border: 1px solid var(--border-2);
-  border-radius: 10px;
-  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
+  border: 1px solid var(--border);
+  border-radius: var(--r-4);
+  box-shadow: var(--shadow-pop);
+  width: min(560px, 100%);
+  max-height: 80vh;
   display: flex; flex-direction: column;
   overflow: hidden;
-  animation: cmdkIn 140ms ease-out;
-}
-.cmdk-input-wrap {
-  display: flex; align-items: center; gap: 10px;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border);
-}
-.cmdk-search-icon { color: var(--text-3); display: inline-flex; }
-.cmdk-search-icon svg { width: 16px; height: 16px; }
-.cmdk-input {
-  flex: 1;
-  background: transparent;
-  border: 0;
-  outline: 0;
-  color: var(--text-1);
-  font-size: 14px;
-  font-family: var(--font-sans);
-}
-.cmdk-input::placeholder { color: var(--text-4); }
-.cmdk-kbd {
-  font-family: var(--font-mono);
-  font-size: 10px; padding: 2px 6px;
-  background: var(--surface-3); border: 1px solid var(--border);
-  border-radius: 3px; color: var(--text-3);
-}
-.cmdk-empty {
-  padding: 28px;
-  text-align: center;
-  color: var(--text-4);
-  font-size: 13px;
-}
-.cmdk-list {
-  list-style: none; margin: 0; padding: 6px 0;
-  overflow-y: auto;
-  flex: 1;
-}
-.cmdk-list ul { list-style: none; margin: 0; padding: 0; }
-.cmdk-group { padding: 4px 0; }
-.cmdk-group-label {
-  padding: 6px 16px 4px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--text-4);
-  font-weight: 600;
-}
-.cmdk-row {
-  display: flex; align-items: center; gap: 10px;
-  padding: 8px 16px;
-  font-size: 13px;
-  cursor: pointer;
-  border-left: 2px solid transparent;
-}
-.cmdk-row.active {
-  background: var(--surface-3);
-  border-left-color: var(--accent);
-}
-.cmdk-mark {
-  width: 8px; height: 8px;
-  display: inline-flex; align-items: center; justify-content: center;
-  color: var(--text-4);
-  font-size: 11px;
-}
-.cmdk-title { color: var(--text-1); font-weight: 500; }
-.cmdk-hint { margin-left: auto; color: var(--text-4); font-size: 11px; font-family: var(--font-mono); }
-.cmdk-foot {
-  display: flex; gap: 14px;
-  padding: 8px 16px;
-  border-top: 1px solid var(--border);
-  font-size: 11px;
-  color: var(--text-4);
-  background: var(--surface-2);
-}
-.cmdk-foot kbd {
-  font-family: var(--font-mono);
-  font-size: 10px; padding: 1px 5px; margin-right: 4px;
-  background: var(--surface-4); border: 1px solid var(--border-2);
-  border-radius: 3px; color: var(--text-3);
-}
-@keyframes cmdkBackdropIn {
-  from { opacity: 0; }
-  to   { opacity: 1; }
 }
-@keyframes cmdkIn {
-  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .cmdk-backdrop, .cmdk { animation: none; }
+.modal-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
+.modal-h h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
+.modal-b { padding: 14px 18px; overflow-y: auto; }
+
+.cmdk-input { width: 100%; }
+.cmdk-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
+.cmdk-list li { padding: 8px 12px; border-radius: var(--r-2); cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
+.cmdk-list li.active, .cmdk-list li:hover { background: var(--surface-3); color: var(--text-1); }
+.cmdk-list .cmdk-section { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-4); padding: 8px 12px 4px; }
+
+.kbd-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; font-size: 12.5px; }
+.kbd-grid kbd { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 6px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 3px; }
+
+/* Toasts */
+.toast-stack { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 300; max-width: 360px; }
+.toast { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-3); padding: 10px 14px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; }
+.toast.ok { border-left: 3px solid var(--ok); }
+.toast.warn { border-left: 3px solid var(--warn); }
+.toast.err { border-left: 3px solid var(--err); }
+.toast.info { border-left: 3px solid var(--info); }
+.toast strong { font-size: 13px; }
+.toast small { font-size: 11.5px; color: var(--text-3); }
+
+/* Tablet breakpoint */
+@media (max-width: 1100px) {
+  .dash-main { grid-template-columns: repeat(6, 1fr); }
+  .attention { grid-template-columns: 1fr; grid-column: span 6; }
+  .host-panel { grid-column: span 6; grid-template-columns: 1fr 1fr; }
+  .quick-stats { grid-column: span 6; }
+  .svc-section, .vm-section { grid-column: span 6; }
+  .svc-grid { grid-template-columns: repeat(2, 1fr); }
 }
 
-/* TOASTS */
-.toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 150; pointer-events: none; }
-.toast {
-  display: flex; align-items: flex-start; gap: 10px;
-  padding: 12px 14px; min-width: 280px;
-  background: var(--bg-1);
-  border: 1px solid var(--border-2);
-  border-radius: 8px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
-  animation: toastIn 200ms ease;
-  pointer-events: auto;
-}
-.toast-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
-.toast-icon svg { width: 16px; height: 16px; }
-.toast-ok   { border-left: 3px solid var(--ok); }
-.toast-ok .toast-icon { color: var(--ok); }
-.toast-warn { border-left: 3px solid var(--warn); }
-.toast-warn .toast-icon { color: var(--warn); }
-.toast-err  { border-left: 3px solid var(--err); }
-.toast-err .toast-icon { color: var(--err); }
-@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-
-/* CANVAS-ARTBOARD WRAPPING */
-.artboard-frame {
-  background: var(--bg-0);
-  width: 100%; height: 100%;
-  overflow: auto;
-  font-family: var(--font-sans);
-}
-.mobile-frame {
-  width: 100%; height: 100%;
-  overflow: auto;
-  background: var(--bg-0);
-}
-
-/* MOBILE */
-.mobile-dashboard .overview-grid { grid-template-columns: 1fr; }
-.mobile-dashboard .svc-grid { grid-template-columns: 1fr 1fr; }
-.mobile-dashboard .net-grid { grid-template-columns: 1fr; }
-.mobile-dashboard .bc-grid { grid-template-columns: 1fr; }
-.mobile-dashboard .dash-header { grid-template-columns: 1fr auto; gap: 8px; padding: 10px 14px; }
-.mobile-dashboard .hdr-mid { display: none; }
-.mobile-dashboard .hdr-meta, .mobile-dashboard .hdr-user-meta { display: none; }
-.mobile-dashboard .hdr-user { padding-left: 0; border: 0; margin-left: 0; }
-.mobile-dashboard .hdr-crumb, .mobile-dashboard .hdr-sep { display: none; }
-.mobile-dashboard .dash-main { padding: 14px; }
-.mobile-dashboard .vm-table thead th:nth-child(4),
-.mobile-dashboard .vm-table tbody td:nth-child(4),
-.mobile-dashboard .vm-table thead th:nth-child(6),
-.mobile-dashboard .vm-table tbody td:nth-child(6),
-.mobile-dashboard .vm-table thead th:nth-child(8),
-.mobile-dashboard .vm-table tbody td:nth-child(8) { display: none; }
-
-/* SKELETON LOADING STATES */
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--surface-3) 0%,
-    var(--surface-4) 50%,
-    var(--surface-3) 100%
-  );
-  background-size: 200% 100%;
-  border-radius: 4px;
-  animation: skeletonShimmer 1.4s ease-in-out infinite;
-}
-.skeleton-card { gap: 14px; }
-.skeleton-card .skeleton-h { height: 18px; width: 60%; }
-.skeleton-card .skeleton-body { height: 64px; width: 100%; }
-.skeleton-card .skeleton-line { height: 11px; width: 75%; }
-.skeleton-tile { gap: 8px; cursor: default; }
-.skeleton-tile .skeleton-h { height: 28px; width: 70%; }
-.skeleton-tile .skeleton-line { height: 10px; width: 100%; }
-.skeleton-tile:hover { background: var(--surface-2); border-color: var(--border); }
-@keyframes skeletonShimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .skeleton { animation: none; }
-  .spin svg { animation: none; }
-}
-
-.ov-empty {
-  display: flex; align-items: flex-start; gap: 10px;
-  padding: 14px 4px;
-  flex: 1;
-}
-.ov-empty .dot { margin-top: 5px; }
-
-/* TABLET */
-@media (max-width: 1100px) {
-  .overview-grid { grid-template-columns: repeat(2, 1fr); }
-  .svc-grid { grid-template-columns: repeat(2, 1fr); }
-  .net-grid { grid-template-columns: 1fr; }
-  .bc-grid { grid-template-columns: 1fr; }
-}
-
-/* MOBILE */
-@media (max-width: 640px) {
-  .dash-header {
-    grid-template-columns: 1fr auto;
-    gap: 8px;
-    padding: 10px 14px;
-  }
+@media (max-width: 700px) {
+  .dash-header { grid-template-columns: 1fr auto; padding: 10px 14px; }
   .hdr-mid { display: none; }
-  .hdr-meta, .hdr-user-meta { display: none; }
-  .hdr-user { padding-left: 0; border: 0; margin-left: 0; }
-  .hdr-crumb, .hdr-sep { display: none; }
-  .dash-main { padding: 14px; }
-  .overview-grid { grid-template-columns: 1fr; }
+  .dash-main { grid-template-columns: 1fr; padding: 16px 14px 40px; }
+  .host-panel { grid-template-columns: 1fr; padding: 16px; }
   .svc-grid { grid-template-columns: 1fr; }
-  .drawer-summary { grid-template-columns: 1fr 1fr; }
-  /* Hide secondary table columns on mobile */
-  .vm-table thead th:nth-child(4),
-  .vm-table tbody td:nth-child(4),
-  .vm-table thead th:nth-child(6),
-  .vm-table tbody td:nth-child(6),
-  .vm-table thead th:nth-child(8),
-  .vm-table tbody td:nth-child(8) { display: none; }
-}
-
-/* FOCUS-VISIBLE: keyboard nav clarity */
-.svc-tile:focus-visible,
-.btn:focus-visible,
-.swatch:focus-visible,
-.input:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: var(--r-2);
-}
-
-/* SHOWCASE */
-.showcase-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 22px;
-  padding: 28px;
-  background: var(--bg-0);
-  min-height: 100%;
-}
-.showcase-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 22px; }
-.showcase-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); margin-bottom: 14px; font-weight: 600; }
-
-/* TOKENS */
-.tokens-doc { padding: 36px 44px; max-width: 1100px; margin: 0 auto; color: var(--text-1); font-family: var(--font-sans); }
-.tokens-doc h1 { font-size: 22px; margin: 0 0 4px; }
-.tokens-doc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3); margin: 28px 0 12px; font-weight: 600; }
-.tokens-doc .lead { color: var(--text-3); font-size: 13px; margin-bottom: 24px; }
-.tok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
-.tok-swatch { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }
-.tok-chip { height: 36px; border-radius: 4px; }
-.tok-name { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); }
-.tok-val  { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }
-.tok-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
-.tok-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
-.tok-table td:first-child { color: var(--text-2); width: 240px; }
-.tok-table td:last-child { color: var(--text-4); }
-.tok-pre { background: var(--bg-0); border: 1px solid var(--border); border-radius: 6px; padding: 16px; font-size: 11px; color: var(--text-2); overflow-x: auto; line-height: 1.5; white-space: pre; }
-
-/* ============================================================ */
-/* SECTION NAV                                                  */
-/* ============================================================ */
-.section-nav {
-  position: sticky;
-  top: 48px;
-  z-index: 40;
-  background: color-mix(in srgb, var(--bg-0) 92%, transparent);
-  backdrop-filter: blur(6px);
-  border-bottom: 1px solid var(--border);
-  padding: 6px 24px;
-}
-.section-nav-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  gap: 4px;
-  max-width: 1600px;
-  margin: 0 auto;
-  overflow-x: auto;
-  scrollbar-width: thin;
-}
-.section-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--text-3);
-  padding: 8px 14px;
-  border-radius: var(--r-2);
-  font: 500 13px/1 var(--font-sans);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 120ms, color 120ms, border-color 120ms;
-}
-.section-tab:hover {
-  color: var(--text-1);
-  background: var(--surface-2);
-}
-.section-tab.active {
-  color: var(--text-1);
-  background: var(--surface-3);
-  border-color: var(--border);
-}
-.section-tab.active .section-tab-icon {
-  color: var(--accent);
-}
-.section-tab-icon {
-  display: inline-flex;
-  width: 16px;
-  height: 16px;
-  color: var(--text-3);
-}
-.section-tab-icon svg {
-  width: 100%;
-  height: 100%;
-}
-.section-tab-alerts {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
-  border-radius: 9px;
-  background: var(--warn);
-  color: var(--bg-0);
-  font: 700 10px/1 var(--font-mono);
-}
-
-/* ============================================================ */
-/* PAUSE BANNER                                                 */
-/* ============================================================ */
-.paused-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  margin: 12px 24px 0;
-  padding: 8px 14px;
-  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
-  background: color-mix(in srgb, var(--warn) 10%, transparent);
-  color: var(--text-1);
-  border-radius: 6px;
-  font-size: 12px;
-}
-.paused-banner .btn {
-  height: 26px;
-  padding: 0 10px;
-  font-size: 11px;
-}
-
-/* ============================================================ */
-/* TOGGLE PILL (checkbox-as-pill)                               */
-/* ============================================================ */
-.toggle-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--r-pill);
-  font-size: 11px;
-  color: var(--text-3);
-  cursor: pointer;
-  user-select: none;
-  transition: background 120ms, color 120ms, border-color 120ms;
-}
-.toggle-pill:hover { color: var(--text-1); }
-.toggle-pill input {
-  margin: 0;
-  accent-color: var(--accent);
-  width: 12px;
-  height: 12px;
-}
-.toggle-pill:has(input:checked) {
-  color: var(--text-1);
-  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
-  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
-}
-
-/* ============================================================ */
-/* HEADER BUTTON .active STATE                                  */
-/* ============================================================ */
-.btn.icon.active {
-  color: var(--accent);
-  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
-  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
-}
-
-/* ============================================================ */
-/* OVERVIEW GRID DYNAMIC COLUMNS                                */
-/* ============================================================ */
-.overview-grid[data-cards="1"] { grid-template-columns: minmax(0, 480px); }
-.overview-grid[data-cards="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.overview-grid[data-cards="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-
-/* ============================================================ */
-/* BACKUPS/CERTS SPLIT MODES                                    */
-/* ============================================================ */
-.bc-grid-backup,
-.bc-grid-certs { grid-template-columns: minmax(0, 1fr) !important; }
-
-/* ============================================================ */
-/* COZY DENSITY OVERRIDES                                       */
-/* ============================================================ */
-.dashboard[data-density="cozy"] .dash-main { padding: 28px 32px 80px; }
-.dashboard[data-density="cozy"] .dash-section { margin-bottom: 40px; }
-.dashboard[data-density="cozy"] .overview-grid { gap: 20px; }
-.dashboard[data-density="cozy"] .svc-grid { gap: 14px; }
-.dashboard[data-density="cozy"] .section-tab { padding: 10px 16px; }
-
-/* Mobile tweaks for the section nav */
-@media (max-width: 760px) {
-  .section-nav { padding: 6px 12px; top: 56px; }
-  .section-tab-label { display: none; }
-  .section-tab { padding: 8px 10px; }
-}
-
-/* ============================================================ */
-/* STATUS HISTORY STRIP                                         */
-/* ============================================================ */
-.status-history {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px 6px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--r-pill);
-}
-.status-cell {
-  width: 5px;
-  height: 14px;
-  border-radius: 1.5px;
-  background: var(--surface-4);
-  flex-shrink: 0;
-  transition: background 180ms;
-}
-.status-cell.empty   { background: color-mix(in srgb, var(--surface-4) 50%, transparent); }
-.status-cell.ok      { background: var(--ok); }
-.status-cell.warn    { background: var(--warn); }
-.status-cell.err     { background: var(--err); }
-.status-cell.idle    { background: var(--text-4); }
-@media (max-width: 1000px) { .status-history { display: none; } }
-
-/* ============================================================ */
-/* REFRESH INTERVAL SELECT                                      */
-/* ============================================================ */
-.refresh-select {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 4px 0 8px;
-  height: 28px;
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--r-2);
-  font-size: 11px;
-  color: var(--text-3);
-}
-.refresh-select select {
-  background: transparent;
-  border: 0;
-  color: var(--text-1);
-  font: 500 12px/1 var(--font-mono);
-  padding: 0 18px 0 2px;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
-                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
-  background-position: calc(100% - 9px) center, calc(100% - 5px) center;
-  background-size: 4px 4px;
-  background-repeat: no-repeat;
-}
-.refresh-select select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-@media (max-width: 760px) { .refresh-select { display: none; } }
-
-/* ============================================================ */
-/* DRAWER · HISTORY VIEW                                        */
-/* ============================================================ */
-.drawer-section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-.drawer-section-head h3 { margin: 0; }
-.hours-select {
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  border-radius: var(--r-2);
-  color: var(--text-1);
-  font: 500 12px var(--font-mono);
-  padding: 3px 6px;
-  cursor: pointer;
-}
-.hours-select:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-.history-stripe {
-  display: grid;
-  grid-template-columns: repeat(60, 1fr);
-  gap: 2px;
-  background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 8px;
-}
-.history-stripe .status-cell {
-  width: auto;
-  height: 22px;
-  border-radius: 2px;
-}
-
-/* ============================================================ */
-/* GUEST DRAWER · HOST JOURNAL                                  */
-/* ============================================================ */
-.journal-pre {
-  max-height: 320px;
-  overflow: auto;
-  background: var(--bg-0);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 10px 12px;
-  font: 11px/1.5 var(--font-mono);
-  color: var(--text-2);
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.journal-line {
-  padding: 1px 0;
-}
-.journal-line + .journal-line {
-  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
-}
-
-/* Compact icon button for table-row actions */
-.btn.icon-sm {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--r-2);
-}
-.btn.icon-sm svg { width: 14px; height: 14px; }
-
-/* ============================================================ */
-/* SETTINGS PAGE                                                */
-/* ============================================================ */
-.settings-page {
-  display: grid;
-  grid-template-columns: minmax(180px, 220px) 1fr;
-  gap: 22px;
-  align-items: start;
-}
-.settings-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  position: sticky;
-  top: 110px;
-}
-.settings-nav-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--text-3);
-  padding: 9px 12px;
-  border-radius: var(--r-2);
-  font: 500 13px/1 var(--font-sans);
-  cursor: pointer;
-  text-align: left;
-  transition: background 120ms, color 120ms, border-color 120ms;
-}
-.settings-nav-item:hover {
-  color: var(--text-1);
-  background: var(--surface-2);
-}
-.settings-nav-item.active {
-  color: var(--text-1);
-  background: var(--surface-3);
-  border-color: var(--border);
-}
-.settings-nav-item.active .settings-nav-icon { color: var(--accent); }
-.settings-nav-icon {
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  color: var(--text-3);
-}
-.settings-nav-icon svg { width: 100%; height: 100%; }
-
-.settings-panes {
-  display: flex;
-  flex-direction: column;
-  gap: 22px;
-  min-width: 0;
-}
-.settings-section-h {
-  margin: 0 0 14px;
-  font-size: var(--fs-14);
-  font-weight: 600;
-  letter-spacing: 0.3px;
-  text-transform: uppercase;
-  color: var(--text-3);
-}
-.settings-row {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 18px;
-  align-items: center;
-  padding: 14px 0;
-  border-top: 1px solid var(--border);
-}
-.settings-row:first-of-type { border-top: 0; padding-top: 4px; }
-.settings-row-info h4 {
-  margin: 0 0 3px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-1);
-}
-.settings-row-info p {
-  margin: 0;
-  font-size: 12px;
-  color: var(--text-3);
-  line-height: 1.45;
-}
-.settings-row-control {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-/* Segmented control */
-.seg-control {
-  display: inline-flex;
-  background: var(--surface-3);
-  border: 1px solid var(--border);
-  border-radius: var(--r-2);
-  padding: 2px;
-  gap: 2px;
-}
-.seg-btn {
-  background: transparent;
-  border: 0;
-  padding: 6px 12px;
-  font: 500 12px/1 var(--font-sans);
-  color: var(--text-3);
-  cursor: pointer;
-  border-radius: 4px;
-  transition: color 120ms, background 120ms;
-}
-.seg-btn:hover { color: var(--text-1); }
-.seg-btn.active {
-  background: var(--surface-1);
-  color: var(--text-1);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
-}
-.seg-btn:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-/* Toggle switch */
-.switch {
-  width: 36px;
-  height: 20px;
-  padding: 2px;
-  background: var(--surface-4);
-  border: 1px solid var(--border-2);
-  border-radius: 999px;
-  cursor: pointer;
-  position: relative;
-  transition: background 160ms, border-color 160ms;
-}
-.switch-knob {
-  display: block;
-  width: 14px;
-  height: 14px;
-  background: var(--text-2);
-  border-radius: 50%;
-  transition: transform 160ms ease, background 160ms;
-}
-.switch.on {
-  background: color-mix(in srgb, var(--accent) 30%, var(--surface-4));
-  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-2));
-}
-.switch.on .switch-knob {
-  transform: translateX(16px);
-  background: var(--accent);
-}
-.switch:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
-
-@media (max-width: 760px) {
-  .settings-page { grid-template-columns: 1fr; gap: 14px; }
-  .settings-nav { position: static; flex-direction: row; overflow-x: auto; }
-}
-
-/* ============================================================ */
-/* REDUCE MOTION (user-toggled setting)                         */
-/* ============================================================ */
-.dashboard[data-reduce-motion="1"] *,
-.dashboard[data-reduce-motion="1"] *::before,
-.dashboard[data-reduce-motion="1"] *::after {
-  animation-duration: 0.001ms !important;
-  animation-iteration-count: 1 !important;
-  transition-duration: 0.001ms !important;
-  scroll-behavior: auto !important;
-}
-
-/* ============================================================ */
-/* 12-COL HELPER (used by Network/Backup/Cloudflare rebuilds)   */
-/* ============================================================ */
-.grid-12 {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: 14px;
-}
-.col-3  { grid-column: span 3; }
-.col-4  { grid-column: span 4; }
-.col-5  { grid-column: span 5; }
-.col-6  { grid-column: span 6; }
-.col-7  { grid-column: span 7; }
-.col-8  { grid-column: span 8; }
-.col-9  { grid-column: span 9; }
-.col-12 { grid-column: span 12; }
-@media (max-width: 1100px) {
-  .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-  .col-3, .col-4 { grid-column: span 3; }
-  .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 6; }
-}
-@media (max-width: 640px) {
-  .grid-12 { grid-template-columns: 1fr; }
-  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 1; }
-}
-
-/* ============================================================ */
-/* SERVICE TILE — stats strip (3-col grid below sparkline)      */
-/* ============================================================ */
-.svc-stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 4px;
-  padding: 8px 0;
-  border-top: 1px dashed var(--border);
-}
-.svc-stat {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-}
-.svc-stat-label {
-  font-size: 9px;
-  color: var(--text-4);
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  font-weight: 600;
-}
-.svc-stat-value {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-1);
-}
-.svc-stat-value.ok    { color: var(--ok); }
-.svc-stat-value.warn  { color: var(--warn); }
-.svc-stat-value.err   { color: var(--err); }
-.svc-stat-unit {
-  font-size: 9px;
-  opacity: 0.55;
-  font-weight: 500;
-  margin-left: 2px;
-}
-
-/* ============================================================ */
-/* VM TABLE — attn / warn row tinting + clickable feedback      */
-/* ============================================================ */
-.vm-table tr.attn td {
-  background: color-mix(in srgb, var(--err) 8%, transparent);
-  box-shadow: inset 3px 0 0 var(--err);
-}
-.vm-table tr.attn:hover td {
-  background: color-mix(in srgb, var(--err) 12%, var(--surface-3));
-}
-.vm-table tr.warn-row td {
-  background: color-mix(in srgb, var(--warn) 6%, transparent);
-  box-shadow: inset 3px 0 0 var(--warn);
-}
-.vm-table tr.warn-row:hover td {
-  background: color-mix(in srgb, var(--warn) 10%, var(--surface-3));
-}
-.vm-table tbody tr:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-}
-
-/* ============================================================ */
-/* DRAWER — probe history strip + trends grid + mini-table      */
-/* ============================================================ */
-.probe-history {
-  display: grid;
-  grid-template-columns: repeat(40, 1fr);
-  gap: 2px;
-  padding: 8px;
-  background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-}
-.probe-history .status-cell {
-  width: auto;
-  height: 22px;
-  border-radius: 2px;
-}
-
-.drawer-chart {
-  background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 14px;
-}
-.drawer-chart-foot {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  font-size: 11px;
-  color: var(--text-3);
-}
-
-.trends-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-.trend-card {
-  background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.trend-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-}
-
-.mini-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-.mini-table td {
-  padding: 6px 8px;
-  border-bottom: 1px solid var(--border);
-  vertical-align: middle;
-}
-.mini-table tr:last-child td { border-bottom: 0; }
-.mini-table tr:hover td { background: var(--surface-3); }
-
-.btn.btn-primary,
-.drawer-foot .btn.btn-primary {
-  background: var(--accent);
-  color: #1a1d2e;
-  border-color: transparent;
-}
-.btn.btn-primary:hover { background: var(--accent-2); }
-
-@media (max-width: 760px) {
-  .trends-grid { grid-template-columns: 1fr; }
-  .drawer { width: 100vw; }
-}
-
-/* ============================================================ */
-/* NETWORK SECTION — device cards + VLAN list                   */
-/* ============================================================ */
-.device-card { display: flex; flex-direction: column; gap: 12px; }
-.dev-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.dev-metrics {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px dashed var(--border);
-}
-.dev-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-
-.vlan-list { display: flex; flex-direction: column; gap: 6px; }
-.vlan-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  transition: background var(--t-fast);
-}
-.vlan-row:hover { background: var(--surface-3); }
-.vlan-swatch {
-  width: 10px;
-  height: 22px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-/* ============================================================ */
-/* BACKUPS — 30-day heatmap                                     */
-/* ============================================================ */
-.day-grid {
-  display: grid;
-  grid-template-columns: repeat(30, 1fr);
-  gap: 3px;
-  margin-bottom: 10px;
-}
-.day-cell {
-  height: 26px;
-  border-radius: 3px;
-  background: var(--surface-4);
-  transition: background var(--t-fast);
-}
-.day-cell.day-empty   { background: color-mix(in srgb, var(--surface-4) 60%, transparent); }
-.day-cell.day-ok      { background: var(--ok); }
-.day-cell.day-partial { background: var(--warn); }
-.day-cell.day-err     { background: var(--err); }
-.heatmap-legend {
-  display: flex;
-  gap: 14px;
-  font-size: 11px;
-  color: var(--text-3);
-}
-.heatmap-legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-/* ============================================================ */
-/* BACKUPS — stacked storage bar                                */
-/* ============================================================ */
-.stacked-bar {
-  display: flex;
-  height: 16px;
-  border-radius: 4px;
-  overflow: hidden;
-  background: var(--surface-4);
-  margin: 8px 0 12px;
-}
-.stacked-seg {
-  height: 100%;
-  transition: opacity var(--t-fast);
-}
-.stacked-seg:hover { opacity: 0.85; }
-.stacked-legend {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 4px 14px;
-}
-.stacked-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.stacked-swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-/* ============================================================ */
-/* BACKUPS — job table                                          */
-/* ============================================================ */
-.job-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-.job-table thead th {
-  text-align: left;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.4px;
-  text-transform: uppercase;
-  color: var(--text-3);
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--border);
-}
-.job-table tbody td {
-  padding: 8px 10px;
-  border-bottom: 1px solid var(--border);
-}
-.job-table tbody tr:last-child td { border-bottom: 0; }
-.job-table tbody tr:hover td { background: var(--surface-3); }
-.job-table tbody tr.attn td {
-  background: color-mix(in srgb, var(--err) 8%, transparent);
-  box-shadow: inset 3px 0 0 var(--err);
-}
-.job-table tbody tr.attn:hover td {
-  background: color-mix(in srgb, var(--err) 12%, var(--surface-3));
-}
-
-/* ============================================================ */
-/* CLOUDFLARE — DNS list                                        */
-/* ============================================================ */
-.dns-list { display: flex; flex-direction: column; gap: 4px; }
-.dns-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  transition: background var(--t-fast);
+  .kpi-strip { grid-template-columns: 1fr 1fr; }
+  .alert-row { grid-template-columns: 16px 1fr auto; }
+  .alert-row .alert-msg, .alert-row .alert-time { display: none; }
 }
-.dns-row:hover { background: var(--surface-3); }
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index 6902e2e..2e8e453 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -1,34 +1,23 @@
-/* ============================================================================
-   rxf-sys admin — Design Tokens
-   Adapted from Robin Frank Design System for an admin/data-density context.
-   Surface stack lifted from RF dark mode; Peach kept as brand accent.
-   ============================================================================ */
+/* rxf-sys admin · v2 redesign tokens
+   1:1 from handoff/reference/v2/tokens.css — extended with light theme + density variants */
 :root {
-  /* Surface stack (deeper for v2 dashboard) */
-  --bg-0:        #07090e;   /* page background — OLED-friendly */
-  --bg-1:        #0c0f17;   /* elevated background */
-  --surface-1:   #11141f;   /* solid base card */
-  --surface-2:   #1a1d2e;   /* RF dark card */
-  --surface-3:   #22253a;
-  --surface-4:   #2a2d3e;   /* RF dark elev */
-  --border:      #262a3d;
-  --border-2:    #3a3d4e;   /* RF dark border */
-  --border-strong: #4a4e63;
-
-  /* Shadows */
-  --shadow-1:    0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-pop:  0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
-
-  /* Hero gradient (AttentionHero etc.) */
-  --grad-hero:
-    radial-gradient(ellipse at top right, rgba(255, 177, 122, 0.06), transparent 60%),
-    radial-gradient(ellipse at bottom left, rgba(66, 71, 105, 0.10), transparent 55%);
+  /* Page → surface stack with a touch more depth */
+  --bg-0:        #07090e;
+  --bg-1:        #0c0f17;
+  --surface-1:   #11141f;
+  --surface-2:   #161a26;
+  --surface-3:   #1c2030;
+  --surface-4:   #252a3d;
+  --border:      #1e2233;
+  --border-2:    #2e3346;
+  --border-strong: #4a4f63;
 
   /* Text */
   --text-1:      #f0f1f5;
   --text-2:      #c5cad6;
   --text-3:      #8a8f9d;
   --text-4:      #5a5f70;
+  --text-5:      #3e4254;
 
   /* Brand (RF) */
   --indigo:      #424769;
@@ -38,7 +27,7 @@
   --peach-2:     #ffd6b1;
   --peach-press: #ff9d55;
 
-  /* Accent — baked-in brand peach (no longer user-selectable) */
+  /* Accent — baked-in brand peach */
   --accent:      var(--peach);
   --accent-2:    var(--peach-2);
   --accent-soft: rgba(255, 177, 122, 0.12);
@@ -46,62 +35,59 @@
 
   /* Status */
   --ok:          #00d97e;
+  --ok-2:        #4fe9a4;
   --ok-soft:     rgba(0, 217, 126, 0.12);
+  --ok-glow:     rgba(0, 217, 126, 0.25);
   --warn:        #ffb020;
   --warn-soft:   rgba(255, 176, 32, 0.14);
+  --warn-glow:   rgba(255, 176, 32, 0.3);
   --err:         #ff4757;
   --err-soft:    rgba(255, 71, 87, 0.14);
+  --err-glow:    rgba(255, 71, 87, 0.3);
   --info:        #4f9eff;
   --info-soft:   rgba(79, 158, 255, 0.14);
 
-  /* Brand gradient (signature — used very sparingly) */
-  --grad-brand:  linear-gradient(135deg, var(--indigo), var(--peach));
-  --grad-brand-90: linear-gradient(90deg, var(--indigo), var(--peach));
+  /* Signature gradients */
+  --grad-brand:    linear-gradient(135deg, var(--indigo), var(--peach));
+  --grad-brand-90: linear-gradient(90deg,  var(--indigo), var(--peach));
+  --grad-card:     linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 100%, transparent) 0%, color-mix(in srgb, var(--surface-1) 100%, transparent) 100%);
+  --grad-hero:     radial-gradient(ellipse at top right, rgba(255,177,122,0.06), transparent 60%),
+                   radial-gradient(ellipse at bottom left, rgba(66,71,105,0.10), transparent 55%);
 
   /* Type */
-  --font-sans:   'Inter', 'Segoe UI', 'Open Sans', system-ui, sans-serif;
-  --font-mono:   'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
-
-  --fs-12: 11px;
-  --fs-13: 12px;
-  --fs-14: 13px;
-  --fs-15: 14px;
-  --fs-16: 15px;
-  --fs-h:  16px;
-  --fs-lg: 18px;
-  --fs-xl: 22px;
-  --fs-2xl: 28px;
+  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
+  --font-display: 'Inter', sans-serif;
 
   /* Spacing */
-  --sp-0: 4px;
-  --sp-1: 8px;
-  --sp-2: 12px;
-  --sp-3: 16px;
-  --sp-4: 20px;
-  --sp-5: 24px;
-  --sp-6: 32px;
+  --sp-0: 4px;  --sp-1: 8px;  --sp-2: 12px;
+  --sp-3: 16px; --sp-4: 20px; --sp-5: 24px;
+  --sp-6: 32px; --sp-7: 48px;
 
   /* Radius */
-  --r-1: 4px;
-  --r-2: 6px;
-  --r-3: 8px;
-  --r-4: 12px;
-  --r-pill: 999px;
+  --r-1: 4px;  --r-2: 6px;  --r-3: 8px;
+  --r-4: 12px; --r-5: 16px; --r-pill: 999px;
 
   /* Density (compact default) */
-  --row-h:   32px;
-  --tile-pad: 14px;
-  --card-pad: 18px;
+  --row-h:   34px;
+  --tile-pad: 16px;
+  --card-pad: 20px;
 
-  /* Transitions */
   --t-fast: 120ms ease;
-  --t-med:  200ms ease;
+  --t-med:  220ms cubic-bezier(0.22, 0.36, 0.18, 1);
+  --t-slow: 380ms cubic-bezier(0.22, 0.36, 0.18, 1);
+
+  /* Shadows */
+  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-pop: 0 12px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
+  --ring-focus: 0 0 0 3px var(--accent-ring);
 }
 
 [data-density="cozy"] {
   --row-h:   40px;
-  --tile-pad: 18px;
-  --card-pad: 22px;
+  --tile-pad: 20px;
+  --card-pad: 24px;
 }
 
 [data-theme="light"] {
@@ -118,28 +104,36 @@
   --text-2:      #424769;
   --text-3:      #6b7180;
   --text-4:      #9aa0ad;
-  --shadow-1:    0 1px 0 rgba(0, 0, 0, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.06);
-  --shadow-pop:  0 12px 32px rgba(20, 30, 60, 0.10), 0 2px 8px rgba(20, 30, 60, 0.06);
+  --text-5:      #c0c5d0;
+  --shadow-1:    0 1px 0 rgba(0,0,0,0.04) inset, 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-pop:  0 12px 32px rgba(20,30,60,0.10), 0 2px 8px rgba(20,30,60,0.06);
   --grad-hero:
     radial-gradient(ellipse at top right, rgba(255, 177, 122, 0.10), transparent 60%),
     radial-gradient(ellipse at bottom left, rgba(66, 71, 105, 0.06), transparent 55%);
 }
 
+[data-reduce-motion="1"] *,
+[data-reduce-motion="1"] *::before,
+[data-reduce-motion="1"] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+
 * { box-sizing: border-box; }
 
-body, html {
-  margin: 0;
-  padding: 0;
+html, body {
+  margin: 0; padding: 0;
   background: var(--bg-0);
   color: var(--text-1);
   font-family: var(--font-sans);
-  font-size: var(--fs-15);
+  font-size: 14px;
   line-height: 1.45;
   -webkit-font-smoothing: antialiased;
   font-feature-settings: 'cv11', 'ss01', 'ss03';
 }
 
-.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
 .dim  { color: var(--text-3); }
 .dimmer { color: var(--text-4); }
 
@@ -151,109 +145,110 @@ body, html {
   flex-shrink: 0;
   position: relative;
 }
-.dot.ok    { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
-.dot.warn  { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); animation: pulse-warn 1.6s ease-in-out infinite; }
-.dot.err   { background: var(--err); box-shadow: 0 0 0 2px var(--err-soft); animation: pulse-err 1.2s ease-in-out infinite; }
+.dot.ok    { background: var(--ok);   box-shadow: 0 0 0 2px var(--ok-soft); }
+.dot.warn  { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft); animation: pulse-warn 1.8s ease-in-out infinite; }
+.dot.err   { background: var(--err);  box-shadow: 0 0 0 2px var(--err-soft);  animation: pulse-err 1.2s ease-in-out infinite; }
 .dot.idle  { background: var(--text-4); }
 
 @keyframes pulse-warn {
-  0%, 100% { box-shadow: 0 0 0 0 var(--warn-soft); }
-  50%      { box-shadow: 0 0 0 6px transparent; }
+  0%, 100% { box-shadow: 0 0 0 0 var(--warn-glow); }
+  70%      { box-shadow: 0 0 0 6px transparent; }
 }
 @keyframes pulse-err {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0.5); }
-  50%      { box-shadow: 0 0 0 6px transparent; }
+  0%, 100% { box-shadow: 0 0 0 0 var(--err-glow); }
+  70%      { box-shadow: 0 0 0 8px transparent; }
 }
 
 /* Card */
 .card {
   background: var(--surface-2);
   border: 1px solid var(--border);
-  border-radius: var(--r-3);
+  border-radius: var(--r-4);
   padding: var(--card-pad);
-  transition: background var(--t-fast), border-color var(--t-fast);
+  transition: border-color var(--t-fast), background var(--t-fast);
+  position: relative;
+}
+.card.elev { box-shadow: var(--shadow-1); }
+.card.hero {
+  background: var(--surface-2);
+  background-image: var(--grad-hero);
 }
-.card:hover { background: var(--surface-3); }
-.card.flat:hover { background: var(--surface-2); }
-
 .card-h {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
+  display: flex; align-items: center; justify-content: space-between;
+  margin-bottom: 14px;
 }
 .card-h h3 {
   margin: 0;
-  font-size: var(--fs-14);
+  font-size: 11px;
   font-weight: 600;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.6px;
   text-transform: uppercase;
   color: var(--text-3);
 }
+.card-h .h3-sub { font-size: 11px; color: var(--text-4); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
 
 /* Badges */
 .badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
+  display: inline-flex; align-items: center; gap: 5px;
   padding: 2px 8px;
   border-radius: var(--r-pill);
-  font-size: var(--fs-12);
+  font-size: 10.5px;
   font-weight: 600;
-  letter-spacing: 0.3px;
+  letter-spacing: 0.4px;
   text-transform: uppercase;
   border: 1px solid var(--border-2);
   background: var(--surface-3);
   color: var(--text-2);
+  white-space: nowrap;
 }
-.badge.ok    { color: var(--ok);   background: var(--ok-soft);   border-color: transparent; }
-.badge.warn  { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
-.badge.err   { color: var(--err);  background: var(--err-soft);  border-color: transparent; }
-.badge.info  { color: var(--info); background: var(--info-soft); border-color: transparent; }
+.badge.ok   { color: var(--ok);   background: var(--ok-soft);   border-color: transparent; }
+.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
+.badge.err  { color: var(--err);  background: var(--err-soft);  border-color: transparent; }
+.badge.info { color: var(--info); background: var(--info-soft); border-color: transparent; }
 
 /* Buttons */
 .btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 30px;
-  padding: 0 12px;
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 12px;
   border-radius: var(--r-2);
   border: 1px solid var(--border-2);
   background: var(--surface-3);
   color: var(--text-2);
-  font: inherit;
-  font-size: var(--fs-13);
-  font-weight: 500;
+  font: inherit; font-size: 12px; font-weight: 500;
   cursor: pointer;
   transition: all var(--t-fast);
+  text-decoration: none;
 }
-.btn:hover { background: var(--surface-4); color: var(--text-1); }
-.btn.primary {
-  background: var(--accent);
-  color: #1a1d2e;
-  border-color: transparent;
-}
-.btn.primary:hover { background: var(--accent-2); }
+.btn:hover { background: var(--surface-4); color: var(--text-1); border-color: var(--border-strong); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn.primary { background: var(--accent); color: #1a1d2e; border-color: transparent; font-weight: 600; }
+.btn.primary:hover { background: var(--accent-2); color: #1a1d2e; }
 .btn.icon { width: 30px; padding: 0; justify-content: center; }
+.btn.icon svg { width: 15px; height: 15px; }
 .btn.danger:hover { background: var(--err-soft); color: var(--err); border-color: var(--err); }
+.btn.ghost { background: transparent; border-color: transparent; }
+.btn.ghost:hover { background: var(--surface-3); }
+.btn.sm { height: 24px; font-size: 11px; padding: 0 8px; }
 
 /* Inputs */
 .input {
-  height: 30px;
-  padding: 0 10px;
+  height: 30px; padding: 0 10px;
   border-radius: var(--r-2);
   border: 1px solid var(--border-2);
   background: var(--bg-1);
   color: var(--text-1);
-  font: inherit;
-  font-size: var(--fs-13);
+  font: inherit; font-size: 12px;
   outline: none;
   transition: border-color var(--t-fast), box-shadow var(--t-fast);
 }
-.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+.input:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
 
-/* Skeleton shimmer */
+/* Bar */
+.bar { height: 4px; background: var(--surface-4); border-radius: 2px; overflow: hidden; min-width: 60px; flex: 1; position: relative; }
+.bar-fill { height: 100%; transition: width 600ms ease; border-radius: 2px; }
+.bar.thick { height: 6px; }
+
+/* Skeleton shimmer (legacy support) */
 .skel {
   background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-4) 50%, var(--surface-3) 100%);
   background-size: 200% 100%;
@@ -274,7 +269,27 @@ body, html {
   border: 2px solid transparent;
   background-clip: padding-box;
 }
-::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; border: 2px solid transparent; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
 
-/* Focus */
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+
+/* Reach pill (EXT/INT) */
+.reach {
+  font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
+  padding: 2px 6px; border-radius: 3px;
+  font-family: var(--font-mono);
+  display: inline-flex; align-items: center; gap: 3px;
+}
+.reach.ok { background: var(--ok-soft); color: var(--ok); }
+.reach.off { background: var(--err-soft); color: var(--err); }
+.reach.idle { background: var(--surface-4); color: var(--text-4); }
+
+/* Type pills */
+.type-pill {
+  display: inline-block; padding: 1px 7px; border-radius: 3px;
+  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
+  font-family: var(--font-mono);
+}
+.type-pill.type-lxc  { background: rgba(79,158,255,0.14); color: var(--info); }
+.type-pill.type-vm   { background: rgba(0,217,126,0.14); color: var(--ok); }
+.type-pill.type-host { background: rgba(255,177,122,0.14); color: var(--accent); }