fix: UI/UX consistency overhaul — fix 8 bugs, standardize design system

Bug fixes:
- Backup refresh no longer re-renders entire page (separate refreshing state)
- SSL cert button no longer flickers when no certs available
- Volume mode selector rewritten to use proper scope system (7 scopes)
- Navigation flicker eliminated when returning from env/volumes pages
- Logout button moved to sidebar footer near theme/locale controls
- Subdomain pattern now shows variable hint tooltip ({project}, {stage}, etc.)
- SSL certificate selector moved to Credentials page with auto-save
- Projects page now has search/filter by name, image, or registry

Consistency improvements:
- New Breadcrumb component replaces 5 inline implementations
- New IconArrowLeft, IconChevronDown components replace inline SVGs
- All inline spinners replaced with IconLoader component
- 10 semantic badge classes with dark mode variants in tokens.css
- Global disabled button cursor-not-allowed rule
- Raw inputs in auth page replaced with FormField components
- Missing aria-labels added to icon-only buttons
- Error panels standardized to use design tokens

web/src/routes/+layout.svelte

@@ -6,7 +6,7 @@
 	import Toast from '$lib/components/Toast.svelte';
 	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 	import LocaleSwitcher from '$lib/components/LocaleSwitcher.svelte';
-	import { IconDashboard, IconProjects, IconDeploy, IconSettings, IconMenu, IconX, IconLogout } from '$lib/components/icons';
+	import { IconDashboard, IconProjects, IconDeploy, IconSettings, IconMenu, IconX, IconLogout, IconChevronDown } from '$lib/components/icons';
 	import { goto } from '$app/navigation';
 	import { connectGlobalEvents, type SSEConnection } from '$lib/sse';
 	import { instanceStatusStore } from '$lib/stores/instance-status';
@@ -142,24 +142,9 @@
 			</div>
 			<span class="text-base font-bold text-[var(--text-primary)]">{$t('app.name')}</span>
 
-			<!-- Logout button -->
-			<button
-				type="button"
-				title={$t('nav.logout')}
-				aria-label={$t('nav.logout')}
-				onclick={async () => {
-					try { await apiLogout(); } catch { /* best effort */ }
-					clearAuth();
-					goto('/login');
-				}}
-				class="ml-auto rounded-md p-1.5 text-[var(--text-tertiary)] hover:text-[var(--color-danger)] transition-colors"
-			>
-				<IconLogout size={18} />
-			</button>
-
 			<!-- Close sidebar (mobile) -->
 			<button
-				class="rounded-md p-1 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] lg:hidden"
+				class="ml-auto rounded-md p-1 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] lg:hidden"
 				onclick={() => { sidebarOpen = false; }}
 				aria-label="Close sidebar"
 			>
@@ -213,7 +198,7 @@
 						</span>
 						<span class="flex-1 text-left">Docker {dockerConnected ? $t('health.connected') : $t('health.disconnected')}</span>
 						{#if !dockerConnected && dockerHealth?.error}
-							<svg class="h-3 w-3 transition-transform {hintsExpanded ? 'rotate-180' : ''}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+							<IconChevronDown size={12} class="transition-transform {hintsExpanded ? 'rotate-180' : ''}" />
 						{/if}
 					</button>
 					{#if !dockerConnected && hintsExpanded && dockerHealth?.error}
@@ -240,6 +225,19 @@
 			<div class="flex items-center justify-between">
 				<ThemeToggle />
 				<LocaleSwitcher />
+				<button
+					type="button"
+					title={$t('nav.logout')}
+					aria-label={$t('nav.logout')}
+					onclick={async () => {
+						try { await apiLogout(); } catch { /* best effort */ }
+						clearAuth();
+						goto('/login');
+					}}
+					class="rounded-md p-1.5 text-[var(--text-tertiary)] hover:text-[var(--color-danger)] transition-colors"
+				>
+					<IconLogout size={16} />
+				</button>
 			</div>
 			<p class="text-xs text-[var(--text-tertiary)]">{$t('app.name')} {$t('app.version')}</p>
 		</div>