feat: Upgrade to Tailwind CSS v4.1.18

- Migrate from tailwindcss v3.3 to v4.1.18
- Replace @tailwind directives with @import 'tailwindcss'
- Move custom colors to @theme block in globals.css
- Convert custom utilities to @utility syntax
- Update PostCSS config to use @tailwindcss/postcss
- Remove autoprefixer (now built-in)

src/app/page.tsx

@@ -185,7 +185,7 @@ export default function Home() {
 
     // Authenticated Home View - New Layout
     return (
-        <div className="flex flex-col min-h-screen bg-[var(--background)] relative">
+        <div className="flex flex-col min-h-screen bg-(--background) relative">
             {/* Scrollable Content Area */}
             <div className="flex-1 overflow-y-auto pb-24">
                 {/* 1. Header */}
@@ -244,7 +244,7 @@ export default function Home() {
                                 placeholder={t('home.searchPlaceholder') || 'Search collection...'}
                                 value={searchQuery}
                                 onChange={(e) => setSearchQuery(e.target.value)}
-                                className="w-full pl-9 pr-4 py-2.5 bg-zinc-900 border border-zinc-800 rounded-xl text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600/50 focus:ring-1 focus:ring-orange-600/20"
+                                className="w-full pl-9 pr-4 py-2.5 bg-zinc-900 border border-zinc-800 rounded-xl text-sm text-white placeholder-zinc-600 focus:outline-hidden focus:border-orange-600/50 focus:ring-1 focus:ring-orange-600/20"
                             />
                         </div>
                         <button className="p-2.5 bg-zinc-900 border border-zinc-800 rounded-xl text-zinc-500 hover:text-white hover:border-zinc-700 transition-colors">