feat: Forge design system app-wide + Stacks i18n

Promotes the Forge visual language from the Stacks feature into a
global design system used across the app:

- app.css: Forge utilities (dot-grid backdrop, eyebrow, ember,
  display/lede, status pills, stat grid, panels, registration
  marks, alert, terminal, buttons). CSS variables alias the forge
  display font to the app's standard sans stack (Inter, now
  properly self-hosted via @fontsource/inter).
- +layout.svelte: reskinned sidebar brand, active nav rail,
  mobile top bar, global h1/h2 typography overrides, main dot-grid
  backdrop.
- Shared components reskinned: EmptyState (breathing-ember empty
  mark), StatusBadge (mono pills with pulse), ConfirmDialog
  (registration marks + forge buttons).
- Dashboard (+page.svelte): ForgeHero header, forge-stat-grid,
  Instrument-style section titles with accent.
- New ForgeHero component for reusable hero headers.

Stacks feature fully localized (EN + RU):
- 80+ keys under stacks.* covering list, new, detail, revisions,
  logs, errors, status labels, delete/rollback dialogs.
- Russian uses forge vocabulary (куются/наковальня/куём/etc).
- $t() wired through all three Stacks pages.

web/src/routes/+page.svelte

@@ -5,7 +5,8 @@
 	import SkeletonCard from '$lib/components/SkeletonCard.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import SystemHealthCard from '$lib/components/SystemHealthCard.svelte';
-	import { IconDeploy, IconBox, IconServer, IconAlert, IconClock, IconGlobe } from '$lib/components/icons';
+	import ForgeHero from '$lib/components/ForgeHero.svelte';
+	import { IconDeploy, IconAlert } from '$lib/components/icons';
 	import { t } from '$lib/i18n';
 
 	let projects = $state<Project[]>([]);
@@ -113,73 +114,53 @@
 	<title>{$t('dashboard.title')} - {$t('app.name')}</title>
 </svelte:head>
 
-<div class="space-y-6">
-	<!-- Header -->
-	<div class="flex items-center justify-between">
-		<h1 class="text-2xl font-bold text-[var(--text-primary)]">{$t('dashboard.title')}</h1>
-		<a
-			href="/deploy"
-			class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] active:animate-press"
-		>
-			<IconDeploy size={16} />
-			{$t('dashboard.quickDeploy')}
+<div class="space-y-6 dashboard">
+	<!-- Hero -->
+	{#snippet heroToolbar()}
+		<a href="/deploy" class="forge-btn">
+			<IconDeploy size={14} />
+			<span>{$t('dashboard.quickDeploy')}</span>
 		</a>
-	</div>
+	{/snippet}
+	<ForgeHero
+		eyebrow="THE FORGE"
+		eyebrowSuffix="DASHBOARD"
+		title={$t('dashboard.title')}
+		accent="."
+		size="lg"
+		toolbar={heroToolbar}
+	/>
 
-	<!-- Stats cards -->
-	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
-		<div class="flex items-center gap-4 rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)]">
-			<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--color-brand-50)] text-[var(--color-brand-600)]">
-				<IconBox size={24} />
-			</div>
-			<div>
-				<p class="text-sm text-[var(--text-secondary)]">{$t('dashboard.totalProjects')}</p>
-				<p class="mt-0.5 text-2xl font-bold text-[var(--text-primary)]">{totalProjects}</p>
-			</div>
+	<!-- Stats grid -->
+	<div class="forge-stat-grid">
+		<div class="forge-stat">
+			<span class="forge-stat-label">{$t('dashboard.totalProjects')}</span>
+			<span class="forge-stat-value">{String(totalProjects).padStart(2, '0')}</span>
+			<span class="forge-stat-sub">active</span>
 		</div>
-		<div class="flex items-center gap-4 rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)]">
-			<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-950/30 text-emerald-600">
-				<IconServer size={24} />
-			</div>
-			<div>
-				<p class="text-sm text-[var(--text-secondary)]">{$t('dashboard.runningInstances')}</p>
-				<p class="mt-0.5 text-2xl font-bold text-emerald-600">{totalRunning}</p>
-			</div>
+		<div class="forge-stat">
+			<span class="forge-stat-label">{$t('dashboard.runningInstances')}</span>
+			<span class="forge-stat-value accent">{String(totalRunning).padStart(2, '0')}</span>
+			<span class="forge-stat-sub">instances</span>
 		</div>
-		<div class="flex items-center gap-4 rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)]">
-			<div class="flex h-12 w-12 items-center justify-center rounded-xl {totalFailed > 0 ? 'bg-red-50 dark:bg-red-950/30 text-red-600' : 'bg-gray-50 dark:bg-gray-800/30 text-gray-400'}">
-				<IconAlert size={24} />
-			</div>
-			<div>
-				<p class="text-sm text-[var(--text-secondary)]">{$t('dashboard.failedInstances')}</p>
-				<p class="mt-0.5 text-2xl font-bold {totalFailed > 0 ? 'text-red-600' : 'text-[var(--text-primary)]'}">{totalFailed}</p>
-			</div>
+		<div class="forge-stat">
+			<span class="forge-stat-label">{$t('dashboard.failedInstances')}</span>
+			<span class="forge-stat-value" class:fail={totalFailed > 0}>{String(totalFailed).padStart(2, '0')}</span>
+			<span class="forge-stat-sub">need attention</span>
 		</div>
-		<a href="/containers/stale" class="flex items-center gap-4 rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--surface-card-hover)]">
-			<div class="flex h-12 w-12 items-center justify-center rounded-xl {totalStale > 0 ? 'bg-amber-50 text-amber-600' : 'bg-gray-50 text-gray-400'}">
-				<IconClock size={24} />
-			</div>
-			<div>
-				<p class="text-sm text-[var(--text-secondary)]">{$t('dashboard.staleContainers')}</p>
-				<p class="mt-0.5 text-2xl font-bold {totalStale > 0 ? 'text-amber-600' : 'text-[var(--text-primary)]'}">{totalStale}</p>
-			</div>
+		<a href="/containers/stale" class="forge-stat stat-link">
+			<span class="forge-stat-label">{$t('dashboard.staleContainers')}</span>
+			<span class="forge-stat-value" class:warn={totalStale > 0}>{String(totalStale).padStart(2, '0')}</span>
+			<span class="forge-stat-sub">stale →</span>
 		</a>
-		<a href="/sites" class="flex items-center gap-4 rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-5 shadow-[var(--shadow-sm)] transition-colors hover:bg-[var(--surface-card-hover)]">
-			<div class="flex h-12 w-12 items-center justify-center rounded-xl {totalSites > 0 ? 'bg-[var(--color-brand-50)] text-[var(--color-brand-600)]' : 'bg-gray-50 text-gray-400'}">
-				<IconGlobe size={24} />
-			</div>
-			<div>
-				<p class="text-sm text-[var(--text-secondary)]">{$t('dashboard.totalSites')}</p>
-				<p class="mt-0.5 text-2xl font-bold text-[var(--text-primary)]">
-					{totalSites}
-					{#if deployedSites > 0}
-						<span class="text-sm font-medium text-emerald-600">{deployedSites} {$t('dashboard.deployedSites')}</span>
-					{/if}
-					{#if failedSitesCount > 0}
-						<span class="text-sm font-medium text-red-600">{failedSitesCount} {$t('dashboard.failedSites')}</span>
-					{/if}
-				</p>
-			</div>
+		<a href="/sites" class="forge-stat stat-link">
+			<span class="forge-stat-label">{$t('dashboard.totalSites')}</span>
+			<span class="forge-stat-value">{String(totalSites).padStart(2, '0')}</span>
+			<span class="forge-stat-sub">
+				{#if deployedSites > 0}<span class="tag ok">{deployedSites} up</span>{/if}
+				{#if failedSitesCount > 0}<span class="tag bad">{failedSitesCount} fail</span>{/if}
+				{#if deployedSites === 0 && failedSitesCount === 0}static sites →{/if}
+			</span>
 		</a>
 	</div>
 
@@ -202,12 +183,12 @@
 
 	<!-- Static sites summary -->
 	{#if !loading}
-		<div>
-			<div class="flex items-center justify-between">
-				<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('dashboard.staticSites')}</h2>
+		<section class="section">
+			<div class="section-head">
+				<h2 class="section-title">{$t('dashboard.staticSites')}<span class="accent">.</span></h2>
 				{#if sites.length > 0}
-					<a href="/sites" class="text-sm font-medium text-[var(--color-brand-600)] hover:text-[var(--color-brand-700)]">
-						{$t('dashboard.viewAllSites')} &rarr;
+					<a href="/sites" class="section-more">
+						{$t('dashboard.viewAllSites')} <span class="arrow">→</span>
 					</a>
 				{/if}
 			</div>
@@ -244,12 +225,12 @@
 					{/each}
 				</div>
 			{/if}
-		</div>
+		</section>
 	{/if}
 
 	<!-- Project cards -->
-	<div>
-		<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('dashboard.projects')}</h2>
+	<section class="section">
+		<h2 class="section-title">{$t('dashboard.projects')}<span class="accent">.</span></h2>
 
 		{#if loading}
 			<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -285,5 +266,60 @@
 				{/each}
 			</div>
 		{/if}
-	</div>
+	</section>
 </div>
+
+<style>
+	.dashboard { position: relative; }
+
+	.stat-link {
+		text-decoration: none;
+		transition: background 150ms ease;
+	}
+	.stat-link:hover { background: var(--surface-card-hover); }
+	.stat-link .forge-stat-sub .tag {
+		display: inline-block;
+		padding: 0.05rem 0.4rem;
+		margin-right: 0.25rem;
+		border-radius: var(--radius-sm);
+		font-family: var(--forge-mono);
+		font-size: 0.62rem;
+		font-weight: 600;
+	}
+	.stat-link .tag.ok { background: var(--color-success-light); color: var(--color-success-dark); }
+	.stat-link .tag.bad { background: var(--color-danger-light); color: var(--color-danger-dark); }
+	:global([data-theme='dark']) .stat-link .tag.ok { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: #86efac; }
+	:global([data-theme='dark']) .stat-link .tag.bad { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: #fca5a5; }
+
+	.section { margin-top: 0.5rem; }
+	.section-head {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-end;
+		margin-bottom: 1rem;
+	}
+	.section-title {
+		font-family: var(--font-family-sans);
+		font-size: 1.35rem;
+		font-weight: 600;
+		line-height: 1.2;
+		letter-spacing: -0.01em;
+		color: var(--text-primary);
+		margin: 0 0 1rem;
+	}
+	.section-title .accent {
+		color: var(--color-brand-600);
+		font-weight: 700;
+	}
+	.section-more {
+		font-family: var(--forge-mono);
+		font-size: 0.7rem;
+		font-weight: 600;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--color-brand-600);
+		text-decoration: none;
+	}
+	.section-more .arrow { display: inline-block; transition: transform 150ms ease; }
+	.section-more:hover .arrow { transform: translateX(3px); }
+</style>