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/projects/[id]/+page.svelte

@@ -7,7 +7,8 @@
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import Skeleton from '$lib/components/Skeleton.svelte';
-	import { IconTrash, IconKey, IconHardDrive, IconDeploy, IconChevronRight, IconClock, IconTag, IconLoader, IconPlus, IconEdit, IconCheck, IconX } from '$lib/components/icons';
+	import { IconTrash, IconKey, IconHardDrive, IconDeploy, IconClock, IconLoader, IconPlus, IconEdit, IconCheck, IconX } from '$lib/components/icons';
+	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
 	import FormField from '$lib/components/FormField.svelte';
 	import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
 	import { toasts } from '$lib/stores/toast';
@@ -111,7 +112,7 @@
 	const projectId = $derived($page.params.id);
 
 	async function loadProject() {
-		loading = true;
+		if (!project) loading = true;
 		error = '';
 		try {
 			const detail = await api.getProject(projectId);
@@ -229,10 +230,7 @@
 		<!-- Header -->
 		<div class="flex items-start justify-between">
 			<div>
-				<div class="flex items-center gap-1.5 text-sm text-[var(--text-tertiary)]">
-					<a href="/projects" class="hover:text-[var(--text-link)] transition-colors">{$t('projects.title')}</a>
-					<IconChevronRight size={14} />
-				</div>
+				<Breadcrumb items={[{ label: $t('projects.title'), href: '/projects' }]} />
 				<h1 class="mt-1 text-2xl font-bold text-[var(--text-primary)]">{project.name}</h1>
 				<p class="mt-1 font-mono text-sm text-[var(--text-tertiary)]">{project.image}</p>
 			</div>
@@ -385,13 +383,13 @@
 									<h3 class="text-base font-semibold text-[var(--text-primary)]">{stage.name}</h3>
 									<span class="rounded-md bg-[var(--surface-card-hover)] px-2 py-0.5 font-mono text-xs text-[var(--text-tertiary)]">{stage.tag_pattern}</span>
 									{#if stage.auto_deploy}
-										<span class="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">{$t('projectDetail.autoDeploy')}</span>
+										<span class="rounded-full badge-success rounded-full px-2 py-0.5 text-xs font-medium">{$t('projectDetail.autoDeploy')}</span>
 									{/if}
 									{#if stage.confirm}
-										<span class="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">{$t('projectDetail.requiresConfirm')}</span>
+										<span class="rounded-full badge-warning rounded-full px-2 py-0.5 text-xs font-medium">{$t('projectDetail.requiresConfirm')}</span>
 									{/if}
 									{#if !stage.enable_proxy}
-										<span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">{$t('projectDetail.noProxy')}</span>
+										<span class="rounded-full badge-gray rounded-full px-2 py-0.5 text-xs font-medium">{$t('projectDetail.noProxy')}</span>
 									{/if}
 								</div>
 								<div class="flex items-center gap-3">