style(dashboard): KPITile primitive + gradient PageHeader + tile skeletons

Replaces flat Card-based KPI rendering with KPITile (gradient-brand-soft + accent
stripe). Adds polished gradient PageHeader to DashboardShell with eyebrow, KPI
sub-line, description. Tile-shaped skeletons replace the four CardSkeletons during
KPI load.

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

src/components/dashboard/dashboard-shell.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { PageHeader } from '@/components/shared/page-header';
 import { KpiCardsWithBoundary } from './kpi-cards';
 import { PipelineChart } from './pipeline-chart';
 import { RevenueForecast } from './revenue-forecast';
@@ -8,13 +9,27 @@ import { ActivityFeed } from './activity-feed';
 
 export function DashboardShell() {
   useRealtimeInvalidation({
-    'interest:stageChanged': [['dashboard', 'pipeline'], ['dashboard', 'forecast']],
+    'interest:stageChanged': [
+      ['dashboard', 'pipeline'],
+      ['dashboard', 'forecast'],
+    ],
     'client:created': [['dashboard', 'kpis']],
-    'berth:statusChanged': [['dashboard', 'kpis'], ['dashboard', 'forecast']],
+    'berth:statusChanged': [
+      ['dashboard', 'kpis'],
+      ['dashboard', 'forecast'],
+    ],
   });
 
   return (
     <div className="space-y-6">
+      <PageHeader
+        title="Dashboard"
+        eyebrow="Overview"
+        description="Live snapshot of your marina activity"
+        kpiLine={<span>Last 30 days</span>}
+        variant="gradient"
+      />
+
       {/* Row 1: KPI cards */}
       <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
         <KpiCardsWithBoundary />