Match the Technitium canvas: palette, shell, KPI strips, framed tables

The live UI did not follow the canvas because its base layer differed: dark
palette in hex (now the canvas oklch values), 13 px body text, flat Frame panels.

- Tokens: canvas palette, 14 px body, 1.4 line height; Frame without `dense`
  gets the 3 px ring; Panel takes a description line.
- Shell: 56 px brand button with version, 11 px group headings, user card at the
  foot, versions moved into the header status popover, Home / group / section
  crumbs, amber "Attention" status when blocking is off or paused.
- New KpiStrip and PageTabs; Dashboard KPIs in three frames and a Refresh button.
- Zones: KPI strip, tab with count, views, framed table with the canvas columns.
- Apps: Installed / App Store tabs and a grid instead of cards (store inline).
- Blocking: state banner and tab counts; one "Blocking" title.
- Settings: actions in the header, label-and-help rows with the control on the right.
- DHCP, Administration, DNS Client, Logs, Cache, About: subtitles, framed tables,
  KPI strips where the data exists; Login cover with the three-point list.
- docs/compose.shnt.example.yaml: production compose with the console image.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/ui/Form.module.css

@@ -189,3 +189,22 @@ and the 39 rows stay aligned.
 */
 .dependent { box-shadow: inset 2px 0 0 0 var(--acc-ink); }
 .withPill { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
+
+/*
+The canvas's row (`.frow`): the label with its help under it on the left, the control
+on the right, a hairline between rows. The help stays a sibling of the control, so
+the grid puts it under the label without moving it in the DOM.
+*/
+.row {
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 440px);
+  grid-template-areas: 'label ctl' 'help ctl';
+  gap: var(--s-1) var(--s-10);
+  padding: 14px var(--s-10);
+  align-items: center;
+}
+.row > .rowLabel { grid-area: label; padding-top: 0; font-weight: 500; font-size: 14px; }
+.row > .rowCtl { grid-area: ctl; align-self: center; }
+.row > .rowHelp { grid-area: help; grid-column: auto; max-width: 640px; font-size: 13px; color: var(--mute); }
+@media (max-width: 900px) {
+  .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'label' 'help' 'ctl'; }
+}