diff --git a/src/components/common/badge.tsx b/src/components/common/badge.tsx
index b4dcfc4..5305bf6 100644
--- a/src/components/common/badge.tsx
+++ b/src/components/common/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@components/common/lib/utils';
 
 const badgeVariants = cva(
-    'inline-flex items-center rounded-lg border px-3 py-1 text-sm font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    'inline-flex items-center rounded-lg border px-3 py-1 text-sm font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
     {
         variants: {
             variant: {
@@ -15,17 +15,21 @@ const badgeVariants = cva(
                 destructive:
                     'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
                 outline: 'text-foreground',
-                flat: 'border-transparent bg-opacity-20',
+                flat: 'backdrop-blur-md shadow-sm',
             },
             colorScheme: {
                 default: '',
-                primary: 'bg-blue-500/20 text-blue-700 dark:text-blue-300',
-                secondary: 'bg-gray-500/20 text-gray-700 dark:text-gray-300',
-                success: 'bg-green-500/20 text-green-700 dark:text-green-300',
-                warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-300',
-                info: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300',
-                purple: 'bg-purple-500/20 text-purple-700 dark:text-purple-300',
-                rose: 'bg-rose-500/20 text-rose-700 dark:text-rose-300',
+                primary:
+                    'bg-blue-500/30 text-blue-50 border-blue-300/40 dark:bg-blue-500/25 dark:text-blue-100 dark:border-blue-400/30',
+                secondary:
+                    'bg-gray-500/30 text-gray-50 border-gray-300/40 dark:bg-gray-500/25 dark:text-gray-100 dark:border-gray-400/30',
+                success:
+                    'bg-green-500/30 text-green-50 border-green-300/40 dark:bg-green-500/25 dark:text-green-100 dark:border-green-400/30',
+                warning:
+                    'bg-amber-500/30 text-amber-50 border-amber-300/40 dark:bg-amber-500/25 dark:text-amber-100 dark:border-amber-400/30',
+                info: 'bg-cyan-500/30 text-cyan-50 border-cyan-300/40 dark:bg-cyan-500/25 dark:text-cyan-100 dark:border-cyan-400/30',
+                purple: 'bg-purple-500/30 text-purple-50 border-purple-300/40 dark:bg-purple-500/25 dark:text-purple-100 dark:border-purple-400/30',
+                rose: 'bg-rose-500/30 text-rose-50 border-rose-300/40 dark:bg-rose-500/25 dark:text-rose-100 dark:border-rose-400/30',
             },
         },
         defaultVariants: {
diff --git a/src/components/home/PostsShowcaseCarousel.tsx b/src/components/home/PostsShowcaseCarousel.tsx
index f8c73eb..733252c 100644
--- a/src/components/home/PostsShowcaseCarousel.tsx
+++ b/src/components/home/PostsShowcaseCarousel.tsx
@@ -95,7 +95,10 @@ function ShowcaseCard({
                 'w-56 sm:w-64 md:w-72 lg:w-80',
                 'aspect-[16/11] cursor-pointer',
                 'focus-visible:ring-ring focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-                'shadow-lg',
+                // 玻璃态效果：半透明边框 + 阴影 + 内高光
+                'border border-white/25 dark:border-white/15',
+                'shadow-lg shadow-black/20',
+                'ring-1 ring-white/10 ring-inset',
             )}
             initial={{ opacity: 0, x: 50 }}
             animate={{
@@ -256,7 +259,10 @@ function ViewMoreCard({
                 'w-56 sm:w-64 md:w-72 lg:w-80',
                 'aspect-[16/11] cursor-pointer',
                 'focus-visible:ring-ring focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-                'shadow-lg',
+                // 玻璃态效果：半透明边框 + 阴影 + 内高光
+                'border border-white/25 dark:border-white/15',
+                'shadow-lg shadow-black/20',
+                'ring-1 ring-white/10 ring-inset',
             )}
             initial={{ opacity: 0, x: 50 }}
             animate={{