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/lib/styles/tokens.css

@@ -210,6 +210,13 @@
   animation: button-press 150ms ease-in-out;
 }
 
+/* ── Disabled Buttons ────────────────────────────────────────────── */
+
+button:disabled,
+a[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
 /* ── Skeleton Loader ──────────────────────────────────────────────── */
 
 .skeleton {
@@ -226,6 +233,32 @@
 
 /* ── Toggle Switch ────────────────────────────────────────────────── */
 
+/* ── Badge Tokens ────────────────────────────────────────────────── */
+
+.badge-success { background: #ecfdf5; color: #047857; }
+.badge-warning { background: #fffbeb; color: #b45309; }
+.badge-danger  { background: #fef2f2; color: #dc2626; }
+.badge-info    { background: #eff6ff; color: #2563eb; }
+.badge-purple  { background: #faf5ff; color: #7c3aed; }
+.badge-cyan    { background: #ecfeff; color: #0e7490; }
+.badge-gray    { background: #f3f4f6; color: #4b5563; }
+.badge-amber   { background: #fffbeb; color: #b45309; }
+.badge-indigo  { background: #eef2ff; color: #4f46e5; }
+.badge-rose    { background: #fff1f2; color: #e11d48; }
+
+[data-theme="dark"] .badge-success { background: rgba(6, 78, 59, 0.3); color: #34d399; }
+[data-theme="dark"] .badge-warning { background: rgba(120, 53, 15, 0.3); color: #fbbf24; }
+[data-theme="dark"] .badge-danger  { background: rgba(127, 29, 29, 0.3); color: #f87171; }
+[data-theme="dark"] .badge-info    { background: rgba(30, 58, 138, 0.3); color: #60a5fa; }
+[data-theme="dark"] .badge-purple  { background: rgba(76, 29, 149, 0.3); color: #a78bfa; }
+[data-theme="dark"] .badge-cyan    { background: rgba(14, 116, 144, 0.3); color: #22d3ee; }
+[data-theme="dark"] .badge-gray    { background: rgba(55, 65, 81, 0.5); color: #9ca3af; }
+[data-theme="dark"] .badge-amber   { background: rgba(120, 53, 15, 0.3); color: #fbbf24; }
+[data-theme="dark"] .badge-indigo  { background: rgba(67, 56, 202, 0.3); color: #818cf8; }
+[data-theme="dark"] .badge-rose    { background: rgba(159, 18, 57, 0.3); color: #fb7185; }
+
+/* ── Toggle Switch ────────────────────────────────────────────────── */
+
 .toggle-switch {
   position: relative;
   width: 2.75rem;