feat(ui): port v2 redesign bundle — AttentionHero, HostPanel, KpiStrip, ServiceTile v2

[rxf-sys]

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.