Upgrade Tailwind CSS from 3 to 4 with CSS-first config migration

Migrate tailwind.config.js to @theme in CSS, replace PostCSS plugins
with @tailwindcss/postcss, add @reference to 12 Vue scoped styles using
@apply, and remove autoprefixer (now built into Tailwind 4).

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

src/assets/tailwind.css

@@ -1,17 +1,75 @@
 /* 引入 Google fonts */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss" layer(tailwind-base);
 
-@layer  tailwind-base, primevue;
+@layer tailwind-base, primevue;
 
-@layer tailwind-base {
-    @tailwind base;
+@theme {
+  --color-*: initial;
+  --breakpoint-*: initial;
+  --font-size-*: initial;
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-primary: #0099FF;
+  --color-secondary: #FFAA44;
+  --color-cfm-primary: #0099FF;
+  --color-cfm-secondary: #FFAA44;
+  --color-neutral-10: #ffffff;
+  --color-neutral-50: #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  --color-danger: #FF3366;
+
+  --container-center: true;
+  --container-padding: 16px;
+
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 1;
+  --font-size-sm: 14px;
+  --font-size-sm--line-height: 1;
+  --font-size-base: 16px;
+  --font-size-base--line-height: 1;
+  --font-size-lg: 18px;
+  --font-size-lg--line-height: 1;
+  --font-size-xl: 20px;
+  --font-size-xl--line-height: 1;
+  --font-size-2xl: 24px;
+  --font-size-2xl--line-height: 1;
+  --font-size-3xl: 30px;
+  --font-size-3xl--line-height: 1;
+  --font-size-4xl: 36px;
+  --font-size-4xl--line-height: 1;
+
+  --breakpoint-2xl: 1536px;
+
+  --animate-fadein: fadein 1s ease-in-out;
+  --animate-fadeout: fadeout 1s ease-in-out;
+  --animate-edit: edit 0.6s ease;
 }
 
-@layer tailwind-utilities {
-    @tailwind components;
-    @tailwind utilities;
+@keyframes fadein {
+  0% { opacity: 0; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+
+@keyframes fadeout {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 0; }
+}
+
+@keyframes edit {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(9deg); }
+  75% { transform: rotate(-9deg); }
 }