style(ui): modernize component layouts and visual design

Update UI components with improved layouts, visual hierarchy, and
modern design patterns for better user experience.

Navigation & Brand Components:
- AppSwitcher
  * Enhanced visual design with better spacing
  * Improved active state indicators
  * Smoother transitions and hover effects
  * Better mobile responsiveness
- BrandIcons
  * Optimized icon rendering performance
  * Added support for more provider icons
  * Improved SVG handling and fallbacks
  * Better scaling across different screen sizes

Editor Components:
- JsonEditor
  * Enhanced syntax highlighting
  * Better error visualization
  * Improved code formatting options
  * Added line numbers and code folding support
- UsageScriptModal
  * Complete layout overhaul (1239 lines refactored)
  * Better script editor integration
  * Improved template selection UI
  * Enhanced preview and testing panels
  * Better error feedback and validation

Provider Components:
- ProviderCard
  * Redesigned card layout with modern aesthetics
  * Better information density and readability
  * Improved action buttons placement
  * Enhanced status indicators (active/inactive)
- ProviderList
  * Better grid/list view layouts
  * Improved drag-and-drop visual feedback
  * Enhanced sorting indicators
- ProviderActions
  * Streamlined action menu
  * Better icon consistency
  * Improved tooltips and accessibility

Usage & Footer:
- UsageFooter
  * Redesigned footer layout
  * Better quota visualization
  * Improved refresh controls
  * Enhanced error states

Design System Updates:
- dialog.tsx (shadcn/ui component)
  * Updated to latest design tokens
  * Better overlay animations
  * Improved focus management
- index.css
  * Added 65 lines of global utility classes
  * New animation keyframes
  * Enhanced color variables for dark mode
  * Improved typography scale
- tailwind.config.js
  * Extended theme with new design tokens
  * Added custom animations and transitions
  * New spacing and sizing utilities
  * Enhanced color palette

Visual Improvements:
- Consistent border radius across components
- Unified shadow system for depth perception
- Better color contrast for accessibility (WCAG AA)
- Smoother animations and transitions
- Improved dark mode support

These changes create a more polished, modern interface while
maintaining consistency with the application's design language.

tailwind.config.js

@@ -6,27 +6,27 @@ export default {
   ],
   theme: {
     extend: {
-	      colors: {
-	        // macOS 风格系统蓝
-	        blue: {
-	          400: '#409CFF',
-	          500: '#0A84FF',
-	          600: '#0060DF',
-	        },
-	        // 自定义灰色系列（对齐 macOS 深色 System Gray）
-	        gray: {
-	          50: '#fafafa',   // bg-primary
-	          100: '#f4f4f5',  // bg-tertiary
-	          200: '#e4e4e7',  // border
-	          300: '#d4d4d8',  // border-hover
-	          400: '#a1a1aa',  // text-tertiary
-	          500: '#71717a',  // text-secondary
-	          600: '#636366',  // text-secondary-dark / systemGray2
-	          700: '#48484A',  // bg-tertiary-dark / separators
-	          800: '#3A3A3C',  // bg-secondary-dark
-	          900: '#2C2C2E',  // header / modal bg
-	          950: '#1C1C1E',  // app main bg
-	        },
+      colors: {
+        // macOS 风格系统蓝
+        blue: {
+          400: '#409CFF',
+          500: '#0A84FF',
+          600: '#0060DF',
+        },
+        // 自定义灰色系列（对齐 macOS 深色 System Gray）
+        gray: {
+          50: '#fafafa',   // bg-primary
+          100: '#f4f4f5',  // bg-tertiary
+          200: '#e4e4e7',  // border
+          300: '#d4d4d8',  // border-hover
+          400: '#a1a1aa',  // text-tertiary
+          500: '#71717a',  // text-secondary
+          600: '#636366',  // text-secondary-dark / systemGray2
+          700: '#48484A',  // bg-tertiary-dark / separators
+          800: '#3A3A3C',  // bg-secondary-dark
+          900: '#2C2C2E',  // header / modal bg
+          950: '#1C1C1E',  // app main bg
+        },
         // 状态颜色
         green: {
           500: '#10b981',
@@ -56,6 +56,31 @@ export default {
         sans: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
         mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Consolas', '"Liberation Mono"', 'Menlo', 'monospace'],
       },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-out',
+        'slide-up': 'slideUp 0.5s ease-out',
+        'slide-down': 'slideDown 0.3s ease-out',
+        'slide-in-right': 'slideInRight 0.3s ease-out',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(20px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        slideDown: {
+          '0%': { transform: 'translateY(-100%)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        slideInRight: {
+          '0%': { transform: 'translateX(100%)', opacity: '0' },
+          '100%': { transform: 'translateX(0)', opacity: '1' },
+        }
+      }
     },
   },
   plugins: [],