feat(webui): Enhance dashboard, global styles, and settings module

## Dashboard Enhancements
- Add Request Volume trend chart with Chart.js line graph
  - Support Family/Model display modes for aggregation levels
  - Show Total/Today/1H usage statistics
  - Hierarchical filter dropdown with Smart select (Top 5 by 24h usage)
  - Persist chart preferences to localStorage
- Improve account health detection logic
  - Core models (sonnet/opus/pro/flash) require >5% quota to be healthy
  - Dynamic quota ring chart supporting any model family
- Unify table styles with standard-table class

## Global Style Refactoring
- Add CSS variable system for theming
  - Space color scale (950/900/850/800/border)
  - Neon accent colors (purple/green/cyan/yellow/red)
  - Text hierarchy (main/dim/muted/bright)
  - Chart palette (16 colors)
- Add unified component classes
  - .view-container for consistent page layouts
  - .section-header/.section-title/.section-desc
  - .standard-table for table styling
- Update scrollbar, nav-item, progress-bar to use theme variables

## Settings Module Extensions
- Add model mapping column in Models tab
- Enhance model selectors with family color indicators
- Support horizontal scroll for tabs on narrow screens
- Add defaultCooldownMs and maxWaitBeforeErrorMs config options

## New Module
- Add src/modules/usage-stats.js for request tracking
  - Track /v1/messages and /v1/chat/completions endpoints
  - Hierarchical storage: { hour: { family: { model: count } } }
  - Auto-save every minute, 30-day retention
  - GET /api/stats/history endpoint for dashboard chart

## Backend Changes
- Add direct account manipulation helpers (bypass AccountManager)
- Add POST /api/config/password endpoint for WebUI password change
- Auto-reload AccountManager after account operations
- Use CSS variables in OAuth callback pages

## Other
- Update .gitignore for runtime data directory
- Add i18n keys for new UI elements (EN/zh_CN)

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

public/css/style.css

@@ -1,3 +1,43 @@
+:root {
+    --color-space-950: #050505;
+    --color-space-900: #0a0a0a;
+    --color-space-850: #121212;
+    --color-space-800: #171717;
+    --color-space-border: #27272a;
+    --color-neon-purple: #a855f7;
+    --color-neon-green: #22c55e;
+    --color-neon-cyan: #06b6d4;
+    --color-neon-yellow: #eab308;
+    --color-neon-red: #ef4444;
+    --color-text-main: #d1d5db; /* gray-300 */
+    --color-text-dim: #71717a;  /* zinc-400 */
+    --color-text-muted: #6b7280; /* gray-500 */
+    --color-text-bright: #ffffff;
+
+    /* Gradient Accents */
+    --color-green-400: #4ade80;
+    --color-yellow-400: #facc15;
+    --color-red-400: #f87171;
+
+    /* Chart Colors */
+    --color-chart-1: #a855f7;
+    --color-chart-2: #c084fc;
+    --color-chart-3: #e879f9;
+    --color-chart-4: #d946ef;
+    --color-chart-5: #22c55e;
+    --color-chart-6: #4ade80;
+    --color-chart-7: #86efac;
+    --color-chart-8: #10b981;
+    --color-chart-9: #06b6d4;
+    --color-chart-10: #f59e0b;
+    --color-chart-11: #ef4444;
+    --color-chart-12: #ec4899;
+    --color-chart-13: #8b5cf6;
+    --color-chart-14: #14b8a6;
+    --color-chart-15: #f97316;
+    --color-chart-16: #6366f1;
+}
+
 [x-cloak] {
     display: none !important;
 }
@@ -13,12 +53,11 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #3f3f46;
-    border-radius: 3px;
+    @apply bg-space-800 rounded-full;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #52525b;
+    @apply bg-space-border;
 }
 
 /* Animations */
@@ -43,32 +82,30 @@
 
 /* Utility */
 .glass-panel {
-    background: rgba(23, 23, 23, 0.7);
+    background: theme('colors.space.900 / 70%');
     backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid theme('colors.white / 8%');
 }
 
 .nav-item.active {
-    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15) 0%, transparent 100%);
-    border-left: 3px solid #a855f7;
-    color: #fff;
+    background: linear-gradient(90deg, theme('colors.neon.purple / 15%') 0%, transparent 100%);
+    @apply border-l-4 border-neon-purple text-white;
 }
 
 .nav-item {
-    border-left: 3px solid transparent;
-    transition: all 0.2s;
+    @apply border-l-4 border-transparent transition-all duration-200;
 }
 
 .progress-gradient-success::-webkit-progress-value {
-    background-image: linear-gradient(to right, #22c55e, #4ade80);
+    background-image: linear-gradient(to right, var(--color-neon-green), var(--color-green-400));
 }
 
 .progress-gradient-warning::-webkit-progress-value {
-    background-image: linear-gradient(to right, #eab308, #facc15);
+    background-image: linear-gradient(to right, var(--color-neon-yellow), var(--color-yellow-400));
 }
 
 .progress-gradient-error::-webkit-progress-value {
-    background-image: linear-gradient(to right, #dc2626, #f87171);
+    background-image: linear-gradient(to right, var(--color-neon-red), var(--color-red-400));
 }
 
 /* Dashboard Grid */
@@ -80,13 +117,40 @@
 
 /* Tooltip Customization */
 .tooltip:before {
-    background-color: #171717 !important; /* space-800 */
-    border: 1px solid #27272a; /* space-border */
-    color: #e5e7eb !important;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.75rem;
+    @apply bg-space-800 border border-space-border text-gray-200 font-mono text-xs;
 }
 
 .tooltip-left:before {
     margin-right: 0.5rem;
+}
+
+/* -------------------------------------------------------------------------- */
+/* Refactored Global Utilities                                                */
+/* -------------------------------------------------------------------------- */
+
+/* View Containers */
+.view-container {
+    @apply max-w-7xl mx-auto p-6 space-y-6 animate-fade-in;
+}
+
+/* Section Headers */
+.section-header {
+    @apply flex justify-between items-center mb-6;
+}
+.section-title {
+    @apply text-2xl font-bold text-white tracking-tight;
+}
+.section-desc {
+    @apply text-gray-500 text-sm;
+}
+
+/* Component Unification */
+.standard-table {
+    @apply table w-full border-separate border-spacing-0;
+}
+.standard-table thead {
+    @apply bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border;
+}
+.standard-table tbody tr {
+    @apply hover:bg-white/5 transition-colors border-b border-space-border/30 last:border-0;
 }