fix(#103): align chart grid with KPI band (top gap + outer edges)

The KPI band has no outer inset on its cards (Tailwind grid + gap-3),
so its leftmost card sits flush with the page-content edge. The
chart grid below was 6px inset on left/right and 22px below the KPI
band (16px from KPI's mb-4 + 6px GridStack first-row inset). The
result was a 6px shift right + a too-large vertical gap that broke
the consistent 12px rhythm.

Fix: pull #charts-grid outward with negative margins that absorb
GridStack's outer inset:
  margin-left:  -6   → first column visible-left aligns with KPI
  margin-right: -6   → last column visible-right aligns with KPI
  margin-top:   -10  → 16 (KPI mb-4) - 10 + 6 (gs marginTop) = 12px gap

Verified via Chrome MCP:
  kpiContainer.left  = chart first-inner.left  (280 = 280)
  kpiContainer.right = chart last-inner.right  (1428.5 = 1428.5)
  topGap             = 12

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: sarg3nt

gearbox/internal/framework/templates/pages/metrics.templ

@@ -443,6 +443,19 @@ templ Metrics(user *models.User, servers []models.BoxConfig) {
 		   per row. Edit-mode visual cue (dashed outline) mirrors
 		   Home's .home-grid-edit class so the affordance reads
 		   consistently across pages. */
+		/* Absorb GridStack's 6px outer inset (from marginLeft/Right/Top
+		   = 6) so the grid's first column/row aligns with the KPI
+		   band above and the page-content edges. Without these
+		   negative margins the chart grid floats 6px in from every
+		   outer edge while the KPI band sits flush — visually
+		   inconsistent. The -10px top compensates for the KPI's
+		   mb-4 (16px) so the gap from KPI bottom to first chart-tile
+		   visible-top is 12px, matching the inter-tile rhythm. */
+		#charts-grid {
+			margin-left: -6px;
+			margin-right: -6px;
+			margin-top: -10px;
+		}
 		#charts-grid.metrics-grid-edit .grid-stack-item-content {
 			outline: 2px dashed rgba(59, 130, 246, 0.5);
 			outline-offset: -4px;