chore: Tailwind CSS v3 → v4 migration (#99)

* chore: run Tailwind v4 upgrade tool (Phase 1)

- Upgraded tailwindcss v3 → v4.2.1, postcss plugin to @tailwindcss/postcss
- Deleted tailwind.config.js, migrated theme to CSS @theme block in index.css
- Replaced @tailwind directives with @import 'tailwindcss'
- Added @custom-variant dark, @utility blocks for custom utilities
- Updated class names across 128 files (shadow-sm → shadow-xs, etc.)
- Removed autoprefixer (built into v4)
- Added migration plan doc

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* chore: switch from @tailwindcss/postcss to @tailwindcss/vite (Phase 2)

- Replaced @tailwindcss/postcss with @tailwindcss/vite plugin
- Deleted postcss.config.js (no longer needed)
- Tailwind now runs as a native Vite plugin for faster HMR

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: convert to OKLCH colors, move keyframes into @theme (Phase 3-4)

- Replaced all HSL color indirection with direct OKLCH values in @theme
- Moved all keyframes inside @theme block (v4 pattern)
- Eliminated hsl(var(--x)) double-indirection across 17 component files
- Replaced hsl() inline styles with var(--color-*) theme references
- Cleaned up redundant rdp-* utility blocks
- Fixed @custom-variant dark syntax to use :where()
- Added sidebar/glass/shadow vars as OKLCH in :root

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/QuickStartPage.tsx

@@ -316,7 +316,7 @@ export function QuickStartPage() {
                 className={cn('glass-card p-4 flex flex-col justify-between fade-in', stat.glow && 'active-glow')}
                 style={{ animationDelay: `${500 + i * 70}ms` }}
               >
-                <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
+                <p className="font-label text-[0.625rem] font-medium uppercase tracking-widest text-muted-foreground">
                   {stat.label}
                 </p>
                 <p className={cn('font-heading text-2xl font-extrabold tracking-tight', stat.gradient && 'text-gradient-brand')}>
@@ -343,7 +343,7 @@ export function QuickStartPage() {
             onChange={(e) => setQuery(e.target.value)}
             onFocus={() => query.length >= 2 && setShowResults(true)}
             placeholder="Search flows, sessions, tags…"
-            className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-border bg-card py-2.5 pl-9 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
           {showResults && (
             <div className="absolute z-10 mt-1 w-full rounded-lg border border-border bg-card shadow-xl overflow-hidden">
@@ -566,7 +566,7 @@ export function QuickStartPage() {
                         const val = e.target.value
                         setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
                       }}
-                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-hidden"
                     >
                       {pageSizeOptions.map((opt) => (
                         <option key={String(opt)} value={String(opt)}>
@@ -587,7 +587,7 @@ export function QuickStartPage() {
                         const val = e.target.value
                         setPageSize(val === 'all' ? 'all' : parseInt(val, 10))
                       }}
-                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none"
+                      className="rounded-md border border-border bg-card px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-hidden"
                     >
                       {pageSizeOptions.map((opt) => (
                         <option key={String(opt)} value={String(opt)}>
@@ -605,7 +605,7 @@ export function QuickStartPage() {
 
       {/* Fork Modal */}
       {forkTarget && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-xs">
           <div className="w-full max-w-sm rounded-xl border border-border bg-card p-5 shadow-xl">
             <h3 className="mb-1 text-sm font-semibold text-foreground">Fork this flow?</h3>
             <p className="mb-4 text-xs text-muted-foreground">
@@ -620,7 +620,7 @@ export function QuickStartPage() {
               onChange={(e) => setForkReason(e.target.value)}
               placeholder="e.g. Adding Cisco Meraki steps for our network"
               maxLength={255}
-              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
+              className="mb-4 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               onKeyDown={(e) => e.key === 'Enter' && handleFork()}
             />
             <div className="flex gap-2">