/* ==================== 默认主题（aurora-light 回退） ==================== */
        :root {
            --bg-page: linear-gradient(160deg, #e8f4f8 0%, #f0e8f5 40%, #e8f0f8 70%, #f5f0e8 100%);
            --bg-surface: rgba(255, 255, 255, 0.82);
            --bg-hover: rgba(0, 212, 170, 0.1);
            --bg-active: rgba(168, 85, 247, 0.12);
            --border: rgba(0, 212, 170, 0.2);
            --text-primary: #1a2a3a;
            --text-secondary: #4a5a6a;
            --text-muted: #7a8a9a;
            --accent: #00d4aa;
            --accent-secondary: #a855f7;
            --accent-tertiary: #3b82f6;
            --accent-hover: #00b894;
            --card-shadow: 0 8px 32px rgba(0, 180, 148, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
            --card-shadow-hover: 0 16px 48px rgba(0, 212, 170, 0.15), 0 4px 16px rgba(168, 85, 247, 0.1);
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.3px;
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
            --transition-fast: 0.15s ease;
            --transition-normal: 0.25s ease;
            --transition-slow: 0.4s ease;
            --glass-blur: blur(20px);
            --sidebar-width: 280px;
            --edit-bg: rgba(255, 200, 50, 0.08);
            --edit-border: #ff9800;
        }

        /* ==================== 极光流光主题 Aurora Gradient ==================== */

        [data-theme="aurora-light"] {
            --theme-name: 'aurora';
            
            --bg-page: linear-gradient(160deg, #e8f4f8 0%, #f0e8f5 40%, #e8f0f8 70%, #f5f0e8 100%);
            --bg-surface: rgba(255, 255, 255, 0.82);
            --bg-hover: rgba(0, 212, 170, 0.1);
            --bg-active: rgba(168, 85, 247, 0.12);
            --border: rgba(0, 212, 170, 0.2);
            --text-primary: #1a2a3a;
            --text-secondary: #4a5a6a;
            --text-muted: #7a8a9a;
            --accent: #00d4aa;
            --accent-secondary: #a855f7;
            --accent-tertiary: #3b82f6;
            --accent-hover: #00b894;
            --card-shadow: 0 8px 32px rgba(0, 180, 148, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
            --card-shadow-hover: 0 16px 48px rgba(0, 212, 170, 0.15), 0 4px 16px rgba(168, 85, 247, 0.1);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.3px;
            
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            
            --theme-card-gap: 20px;
            --theme-card-padding: 18px;
            --theme-icon-size: 50px;
            
            --glass-blur: blur(20px) saturate(160%);
            --glass-opacity: 0.82;
            
            --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            
            --white-10: rgba(255, 255, 255, 0.1);
            --white-15: rgba(255, 255, 255, 0.15);
            --white-20: rgba(255, 255, 255, 0.2);
            --white-30: rgba(255, 255, 255, 0.3);
            --white-40: rgba(255, 255, 255, 0.4);
            --white-50: rgba(255, 255, 255, 0.5);
            --white-60: rgba(255, 255, 255, 0.6);
            --white-80: rgba(255, 255, 255, 0.8);
            --white-solid: #ffffff;
            
            --text-on-white: #1a2a3a;
            --overlay-light: rgba(255, 255, 255, 0.6);
            --overlay-dark: rgba(0, 0, 0, 0.06);
            
            --aurora-1: rgba(0, 212, 170, 0.5);
            --aurora-2: rgba(168, 85, 247, 0.4);
            --aurora-3: rgba(59, 130, 246, 0.45);
        }

        [data-theme="aurora-dark"] {
            --theme-name: 'aurora';
            
            --bg-page: linear-gradient(160deg, #0a1628 0%, #1a0a28 40%, #0a1a28 70%, #0f1a0a 100%);
            --bg-surface: rgba(20, 25, 40, 0.88);
            --bg-hover: rgba(0, 212, 170, 0.12);
            --bg-active: rgba(168, 85, 247, 0.15);
            --border: rgba(0, 212, 170, 0.25);
            --text-primary: #e8f0f5;
            --text-secondary: #a0b0c0;
            --text-muted: #607080;
            --accent: #00ffcc;
            --accent-secondary: #c084fc;
            --accent-tertiary: #60a5fa;
            --accent-hover: #00e6b8;
            --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
            --card-shadow-hover: 0 16px 48px rgba(0, 255, 204, 0.12), 0 4px 16px rgba(192, 132, 252, 0.1);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.3px;
            
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            
            --theme-card-gap: 20px;
            --theme-card-padding: 18px;
            --theme-icon-size: 50px;
            
            --glass-blur: blur(20px) saturate(160%);
            --glass-opacity: 0.75;
            
            --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            
            --white-10: rgba(255, 255, 255, 0.06);
            --white-15: rgba(255, 255, 255, 0.1);
            --white-20: rgba(255, 255, 255, 0.15);
            --white-30: rgba(255, 255, 255, 0.22);
            --white-40: rgba(255, 255, 255, 0.3);
            --white-50: rgba(255, 255, 255, 0.45);
            --white-60: rgba(255, 255, 255, 0.55);
            --white-80: rgba(255, 255, 255, 0.75);
            --white-solid: #ffffff;
            
            --text-on-white: #e8f0f5;
            --overlay-light: rgba(255, 255, 255, 0.1);
            --overlay-dark: rgba(0, 0, 0, 0.3);
            
            --aurora-1: rgba(0, 255, 204, 0.55);
            --aurora-2: rgba(192, 132, 252, 0.5);
            --aurora-3: rgba(96, 165, 250, 0.5);
        }

        /* ==================== 方案二：简约商务主题 Minimal Business ==================== */

        [data-theme="minimal-light"] {
            --theme-name: 'minimal';
            
            --bg-page: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
            --bg-surface: rgba(255, 255, 255, 0.95);
            --bg-hover: rgba(59, 130, 246, 0.08);
            --bg-active: rgba(59, 130, 246, 0.12);
            --border: rgba(148, 163, 184, 0.25);
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --accent: #3b82f6;
            --accent-secondary: #10b981;
            --accent-tertiary: #f59e0b;
            --accent-hover: #2563eb;
            --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.2px;
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            
            --theme-card-gap: 16px;
            --theme-card-padding: 16px;
            --theme-icon-size: 48px;
            
            --glass-blur: blur(16px) saturate(140%);
            --glass-opacity: 0.95;
            
            --transition-fast: 0.15s ease;
            --transition-normal: 0.25s ease;
            --transition-slow: 0.35s ease;
            
            --white-10: rgba(255, 255, 255, 0.1);
            --white-15: rgba(255, 255, 255, 0.15);
            --white-20: rgba(255, 255, 255, 0.2);
            --white-30: rgba(255, 255, 255, 0.3);
            --white-40: rgba(255, 255, 255, 0.4);
            --white-50: rgba(255, 255, 255, 0.5);
            --white-60: rgba(255, 255, 255, 0.6);
            --white-80: rgba(255, 255, 255, 0.8);
            --white-solid: #ffffff;
            
            --text-on-white: #1e293b;
            --overlay-light: rgba(255, 255, 255, 0.8);
            --overlay-dark: rgba(0, 0, 0, 0.04);
        }

        [data-theme="minimal-dark"] {
            --theme-name: 'minimal';
            
            --bg-page: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            --bg-surface: rgba(30, 41, 59, 0.9);
            --bg-hover: rgba(59, 130, 246, 0.12);
            --bg-active: rgba(59, 130, 246, 0.18);
            --border: rgba(148, 163, 184, 0.15);
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent: #60a5fa;
            --accent-secondary: #34d399;
            --accent-tertiary: #fbbf24;
            --accent-hover: #3b82f6;
            --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
            --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.2px;
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            
            --theme-card-gap: 16px;
            --theme-card-padding: 16px;
            --theme-icon-size: 48px;
            
            --glass-blur: blur(16px) saturate(140%);
            --glass-opacity: 0.9;
            
            --transition-fast: 0.15s ease;
            --transition-normal: 0.25s ease;
            --transition-slow: 0.35s ease;
            
            --white-10: rgba(255, 255, 255, 0.05);
            --white-15: rgba(255, 255, 255, 0.08);
            --white-20: rgba(255, 255, 255, 0.12);
            --white-30: rgba(255, 255, 255, 0.18);
            --white-40: rgba(255, 255, 255, 0.25);
            --white-50: rgba(255, 255, 255, 0.35);
            --white-60: rgba(255, 255, 255, 0.45);
            --white-80: rgba(255, 255, 255, 0.7);
            --white-solid: #ffffff;
            
            --text-on-white: #f1f5f9;
            --overlay-light: rgba(255, 255, 255, 0.08);
            --overlay-dark: rgba(0, 0, 0, 0.4);
        }

        /* ==================== 方案三：优雅质感主题 Elegance ==================== */

        [data-theme="elegance-light"] {
            --theme-name: 'elegance';
            
            --bg-page: linear-gradient(135deg, #e8e4f0 0%, #d4d0e4 50%, #c8c4dc 100%);
            --bg-surface: rgba(255, 255, 255, 0.88);
            --bg-hover: rgba(102, 126, 234, 0.15);
            --bg-active: rgba(102, 126, 234, 0.2);
            --border: rgba(102, 126, 234, 0.25);
            --text-primary: #1a1a2e;
            --text-secondary: #4a5568;
            --text-muted: #718096;
            --accent: #667eea;
            --accent-secondary: #764ba2;
            --accent-tertiary: #9f7aea;
            --accent-hover: #5a67d8;
            --card-shadow: 0 8px 32px rgba(102, 126, 234, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
            --card-shadow-hover: 0 16px 48px rgba(102, 126, 234, 0.25), 0 4px 16px rgba(118, 75, 162, 0.15);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.3px;
            
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            
            --theme-card-gap: 24px;
            --theme-card-padding: 18px;
            --theme-icon-size: 50px;
            
            --glass-blur: blur(24px) saturate(180%);
            --glass-opacity: 0.88;
            
            --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            
            --white-10: rgba(255, 255, 255, 0.1);
            --white-15: rgba(255, 255, 255, 0.15);
            --white-20: rgba(255, 255, 255, 0.2);
            --white-30: rgba(255, 255, 255, 0.3);
            --white-40: rgba(255, 255, 255, 0.4);
            --white-50: rgba(255, 255, 255, 0.5);
            --white-60: rgba(255, 255, 255, 0.6);
            --white-80: rgba(255, 255, 255, 0.8);
            --white-solid: #ffffff;
            
            --text-on-white: #1a1a2e;
            --overlay-light: rgba(255, 255, 255, 0.7);
            --overlay-dark: rgba(0, 0, 0, 0.06);
            
            --aurora-1: rgba(120, 119, 198, 0.4);
            --aurora-2: rgba(255, 119, 198, 0.25);
            --aurora-3: rgba(255, 200, 124, 0.2);
        }

        [data-theme="elegance-dark"] {
            --theme-name: 'elegance';
            
            --bg-page: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            --bg-surface: rgba(30, 41, 59, 0.85);
            --bg-hover: rgba(148, 163, 184, 0.15);
            --bg-active: rgba(148, 163, 184, 0.22);
            --border: rgba(148, 163, 184, 0.18);
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --text-muted: #64748b;
            --accent: #818cf8;
            --accent-secondary: #a78bfa;
            --accent-tertiary: #c084fc;
            --accent-hover: #6366f1;
            --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
            --card-shadow-hover: 0 20px 56px rgba(129, 140, 248, 0.18), 0 4px 16px rgba(167, 139, 250, 0.12);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.3px;
            
            --radius-sm: 12px;
            --radius-md: 16px;
            --radius-lg: 20px;
            --radius-xl: 24px;
            
            --theme-card-gap: 24px;
            --theme-card-padding: 18px;
            --theme-icon-size: 50px;
            
            --glass-blur: blur(24px) saturate(180%);
            --glass-opacity: 0.85;
            
            --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
            
            --white-10: rgba(255, 255, 255, 0.06);
            --white-15: rgba(255, 255, 255, 0.1);
            --white-20: rgba(255, 255, 255, 0.15);
            --white-30: rgba(255, 255, 255, 0.22);
            --white-40: rgba(255, 255, 255, 0.3);
            --white-50: rgba(255, 255, 255, 0.4);
            --white-60: rgba(255, 255, 255, 0.5);
            --white-80: rgba(255, 255, 255, 0.75);
            --white-solid: #ffffff;
            
            --text-on-white: #f1f5f9;
            --overlay-light: rgba(255, 255, 255, 0.08);
            --overlay-dark: rgba(0, 0, 0, 0.45);
            
            --aurora-1: rgba(129, 140, 248, 0.3);
            --aurora-2: rgba(167, 139, 250, 0.25);
            --aurora-3: rgba(192, 132, 252, 0.2);
        }

        /* ==================== 方案四：石板灰 Slate ==================== */

        [data-theme="slate-light"] {
            --theme-name: 'slate';
            
            --bg-page: linear-gradient(165deg, #f5f6f8 0%, #eef0f4 40%, #f3f4f6 100%);
            --bg-surface: rgba(255, 255, 255, 0.92);
            --bg-hover: rgba(100, 116, 139, 0.08);
            --bg-active: rgba(100, 116, 139, 0.12);
            --border: rgba(148, 163, 184, 0.22);
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --accent: #64748b;
            --accent-secondary: #475569;
            --accent-tertiary: #334155;
            --accent-hover: #475569;
            --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.2px;
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            
            --theme-card-gap: 18px;
            --theme-card-padding: 18px;
            --theme-icon-size: 48px;
            
            --glass-blur: blur(16px) saturate(130%);
            --glass-opacity: 0.92;
            
            --transition-fast: 0.15s ease;
            --transition-normal: 0.2s ease;
            --transition-slow: 0.35s ease;
            
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            
            --text-on-white: #1e293b;
            --overlay-light: rgba(255,255,255,0.7);
            --overlay-dark: rgba(0,0,0,0.04);
        }

        [data-theme="slate-dark"] {
            --theme-name: 'slate';
            
            --bg-page: linear-gradient(165deg, #18181b 0%, #1a1a1e 40%, #18181b 100%);
            --bg-surface: rgba(39, 39, 42, 0.88);
            --bg-hover: rgba(161, 161, 170, 0.1);
            --bg-active: rgba(161, 161, 170, 0.15);
            --border: rgba(113, 113, 122, 0.2);
            --text-primary: #f4f4f5;
            --text-secondary: #a1a1aa;
            --text-muted: #71717a;
            --accent: #a1a1aa;
            --accent-secondary: #d4d4d8;
            --accent-tertiary: #e4e4e7;
            --accent-hover: #d4d4d8;
            --card-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
            --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.2px;
            
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            
            --theme-card-gap: 18px;
            --theme-card-padding: 18px;
            --theme-icon-size: 48px;
            
            --glass-blur: blur(16px) saturate(130%);
            --glass-opacity: 0.88;
            
            --transition-fast: 0.15s ease;
            --transition-normal: 0.2s ease;
            --transition-slow: 0.35s ease;
            
            --white-10: rgba(255,255,255,0.05);
            --white-15: rgba(255,255,255,0.08);
            --white-20: rgba(255,255,255,0.12);
            --white-30: rgba(255,255,255,0.18);
            --white-40: rgba(255,255,255,0.24);
            --white-50: rgba(255,255,255,0.35);
            --white-60: rgba(255,255,255,0.45);
            --white-80: rgba(255,255,255,0.65);
            --white-solid: #ffffff;
            
            --text-on-white: #f4f4f5;
            --overlay-light: rgba(255,255,255,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
        }

        /* ==================== 方案八：极地冰原 Arctic ==================== */

        [data-theme="arctic-light"] {
            --theme-name: 'arctic';
            
            --bg-page: linear-gradient(155deg, #f0f7fc 0%, #e3f0f8 30%, #eef6fb 60%, #f2f8fc 100%);
            --bg-surface: rgba(255, 255, 255, 0.9);
            --bg-hover: rgba(125, 211, 252, 0.12);
            --bg-active: rgba(103, 232, 249, 0.1);
            --border: rgba(125, 211, 252, 0.25);
            --text-primary: #0c4a6e;
            --text-secondary: #0e7490;
            --text-muted: #22d3ee;
            --accent: #38bdf8;
            --accent-secondary: #06b6d4;
            --accent-tertiary: #67e8f9;
            --accent-hover: #0ea5e9;
            --card-shadow: 0 4px 20px rgba(56,189,248,0.08), 0 1px 4px rgba(6,182,212,0.04);
            --card-shadow-hover: 0 12px 36px rgba(56,189,248,0.12), 0 3px 12px rgba(103,232,249,0.08);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.25px;
            
            --radius-sm: 14px;
            --radius-md: 18px;
            --radius-lg: 22px;
            --radius-xl: 26px;
            
            --theme-card-gap: 20px;
            --theme-card-padding: 18px;
            --theme-icon-size: 50px;
            
            --glass-blur: blur(18px) saturate(150%);
            --glass-opacity: 0.85;
            
            --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
            --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1);
            --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
            
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            
            --text-on-white: #0c4a6e;
            --overlay-light: rgba(255,255,255,0.7);
            --overlay-dark: rgba(0,0,0,0.04);
        }

        [data-theme="arctic-dark"] {
            --theme-name: 'arctic';
            
            --bg-page: linear-gradient(155deg, #0a1628 0%, #0c1a2e 30%, #0a1828 60%, #0c1a30 100%);
            --bg-surface: rgba(15, 28, 50, 0.85);
            --bg-hover: rgba(56, 189, 248, 0.12);
            --bg-active: rgba(6, 182, 212, 0.1);
            --border: rgba(56, 189, 248, 0.22);
            --text-primary: #e0f2fe;
            --text-secondary: #7dd3fc;
            --text-muted: #38bdf8;
            --accent: #7dd3fc;
            --accent-secondary: #22d3ee;
            --accent-tertiary: #67e8f9;
            --accent-hover: #38bdf8;
            --card-shadow: 0 4px 20px rgba(125,211,252,0.06), 0 2px 8px rgba(0,0,0,0.4);
            --card-shadow-hover: 0 12px 36px rgba(125,211,252,0.1), 0 4px 16px rgba(34,211,238,0.06);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.25px;
            
            --radius-sm: 14px;
            --radius-md: 18px;
            --radius-lg: 22px;
            --radius-xl: 26px;
            
            --theme-card-gap: 20px;
            --theme-card-padding: 18px;
            --theme-icon-size: 50px;
            
            --glass-blur: blur(18px) saturate(150%);
            --glass-opacity: 0.85;
            
            --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
            --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1);
            --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
            
            --white-10: rgba(255,255,255,0.05);
            --white-15: rgba(255,255,255,0.08);
            --white-20: rgba(255,255,255,0.12);
            --white-30: rgba(255,255,255,0.18);
            --white-40: rgba(255,255,255,0.24);
            --white-50: rgba(255,255,255,0.35);
            --white-60: rgba(255,255,255,0.45);
            --white-80: rgba(255,255,255,0.65);
            --white-solid: #ffffff;
            
            --text-on-white: #e0f2fe;
            --overlay-light: rgba(255,255,255,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
        }

        /* ==================== 方案九：黑白胶片 Noir ==================== */

        [data-theme="noir-light"] {
            --theme-name: 'noir';
            
            --bg-page: #ffffff;
            --bg-surface: #ffffff;
            --bg-hover: rgba(0, 0, 0, 0.04);
            --bg-active: rgba(0, 0, 0, 0.06);
            --border: rgba(0, 0, 0, 0.1);
            --text-primary: #0a0a0a;
            --text-secondary: #3a3a3a;
            --text-muted: #6a6a6a;
            --accent: #1a1a1a;
            --accent-secondary: #3a3a3a;
            --accent-tertiary: #555555;
            --accent-hover: #000000;
            --card-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --card-shadow-hover: 0 0 0 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.1px;
            
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 10px;
            --radius-xl: 12px;
            
            --theme-card-gap: 16px;
            --theme-card-padding: 16px;
            --theme-icon-size: 44px;
            
            --glass-blur: blur(8px) saturate(100%);
            --glass-opacity: 1;
            
            --transition-fast: 0.1s ease;
            --transition-normal: 0.15s ease;
            --transition-slow: 0.25s ease;
            
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            
            --text-on-white: #0a0a0a;
            --overlay-light: rgba(255,255,255,0.8);
            --overlay-dark: rgba(0,0,0,0.02);
        }

        [data-theme="noir-dark"] {
            --theme-name: 'noir';
            
            --bg-page: #0a0a0a;
            --bg-surface: #141414;
            --bg-hover: rgba(255, 255, 255, 0.04);
            --bg-active: rgba(255, 255, 255, 0.06);
            --border: rgba(255, 255, 255, 0.1);
            --text-primary: #e5e5e5;
            --text-secondary: #a0a0a0;
            --text-muted: #555555;
            --accent: #e5e5e5;
            --accent-secondary: #c0c0c0;
            --accent-tertiary: #999999;
            --accent-hover: #ffffff;
            --card-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.3);
            --card-shadow-hover: 0 0 0 2px rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.4);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.1px;
            
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 10px;
            --radius-xl: 12px;
            
            --theme-card-gap: 16px;
            --theme-card-padding: 16px;
            --theme-icon-size: 44px;
            
            --glass-blur: blur(8px) saturate(100%);
            --glass-opacity: 1;
            
            --transition-fast: 0.1s ease;
            --transition-normal: 0.15s ease;
            --transition-slow: 0.25s ease;
            
            --white-10: rgba(255,255,255,0.05);
            --white-15: rgba(255,255,255,0.08);
            --white-20: rgba(255,255,255,0.12);
            --white-30: rgba(255,255,255,0.16);
            --white-40: rgba(255,255,255,0.22);
            --white-50: rgba(255,255,255,0.3);
            --white-60: rgba(255,255,255,0.4);
            --white-80: rgba(255,255,255,0.6);
            --white-solid: #ffffff;
            
            --text-on-white: #e5e5e5;
            --overlay-light: rgba(255,255,255,0.03);
            --overlay-dark: rgba(0,0,0,0.6);
        }

        /* ==================== 方案十：蒸波霓虹 Synthwave Neo ==================== */

        [data-theme="synthwave-light"] {
            --theme-name: 'synthwave';
            
            --bg-page: linear-gradient(170deg, #fef4ff 0%, #fce8f8 30%, #e8f4ff 60%, #fdf0ff 100%);
            --bg-surface: rgba(255, 255, 255, 0.88);
            --bg-hover: rgba(255, 0, 128, 0.08);
            --bg-active: rgba(0, 220, 255, 0.1);
            --border: rgba(255, 0, 128, 0.25);
            --text-primary: #1a0a2e;
            --text-secondary: #5a2a6e;
            --text-muted: #8048a8;
            --accent: #e80070;
            --accent-secondary: #00a8d0;
            --accent-tertiary: #a800e8;
            --accent-hover: #c00058;
            --card-shadow: 0 4px 20px rgba(200,0,100,0.08), 0 0 0 1px rgba(255,0,128,0.12), 0 2px 6px rgba(0,0,0,0.04);
            --card-shadow-hover: 0 8px 32px rgba(255,0,128,0.15), 0 0 0 2px rgba(0,200,255,0.2), 0 4px 12px rgba(0,0,0,0.08);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px;
            --letter-spacing: 0.4px;
            --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
            --theme-card-gap: 18px; --theme-card-padding: 18px; --theme-icon-size: 50px;
            --glass-blur: blur(20px) saturate(150%); --glass-opacity: 0.88;
            --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.1); --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #1a0a2e; --overlay-light: rgba(255,255,255,0.6); --overlay-dark: rgba(0,0,0,0.04);
        }

        [data-theme="synthwave-dark"] {
            --theme-name: 'synthwave';
            
            --bg-page: linear-gradient(170deg, #0a0418 0%, #150525 30%, #0d0418 60%, #060310 100%);
            --bg-surface: rgba(20, 8, 38, 0.82);
            --bg-hover: rgba(255, 0, 128, 0.14);
            --bg-active: rgba(0, 200, 255, 0.12);
            --border: rgba(255, 0, 128, 0.35);
            --text-primary: #ffe0f8;
            --text-secondary: #e080d0;
            --text-muted: #8050b0;
            --accent: #ff1493;
            --accent-secondary: #00e0ff;
            --accent-tertiary: #c840ff;
            --accent-hover: #ff0080;
            --card-shadow: 0 0 40px rgba(255,20,147,0.2), 0 0 12px rgba(0,224,255,0.12), 0 4px 20px rgba(0,0,0,0.5);
            --card-shadow-hover: 0 0 64px rgba(255,20,147,0.4), 0 0 24px rgba(0,224,255,0.25), 0 8px 36px rgba(0,0,0,0.7);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.4px;
            --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
            --theme-card-gap: 18px; --theme-card-padding: 18px; --theme-icon-size: 50px;
            --glass-blur: blur(22px) saturate(160%); --glass-opacity: 0.8;
            --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.04); --white-15: rgba(255,255,255,0.06); --white-20: rgba(255,255,255,0.08); --white-30: rgba(255,255,255,0.12); --white-40: rgba(255,255,255,0.18); --white-50: rgba(255,255,255,0.28); --white-60: rgba(255,255,255,0.38); --white-80: rgba(255,255,255,0.58); --white-solid: #ffffff;
            --text-on-white: #ffe0f8; --overlay-light: rgba(255,255,255,0.04); --overlay-dark: rgba(0,0,0,0.55);
        }

        /* ==================== 方案十一：矩阵终端 Matrix Terminal ==================== */

        [data-theme="matrix-light"] {
            --theme-name: 'matrix';
            
            --bg-page: linear-gradient(170deg, #eafbea 0%, #d8f8d8 30%, #e8fce8 60%, #f0fff0 100%);
            --bg-surface: rgba(255, 255, 255, 0.92);
            --bg-hover: rgba(0, 180, 0, 0.08);
            --bg-active: rgba(0, 140, 0, 0.1);
            --border: rgba(0, 160, 0, 0.22);
            --text-primary: #0a2a0a;
            --text-secondary: #1a5a1a;
            --text-muted: #2a7a2a;
            --accent: #008a00;
            --accent-secondary: #00b800;
            --accent-tertiary: #00d400;
            --accent-hover: #006800;
            --card-shadow: 0 2px 8px rgba(0,100,0,0.06), 0 0 0 1px rgba(0,200,0,0.1), 0 1px 2px rgba(0,0,0,0.03);
            --card-shadow-hover: 0 6px 20px rgba(0,180,0,0.12), 0 0 0 2px rgba(0,220,0,0.18), 0 2px 8px rgba(0,0,0,0.05);
            
            --font-primary: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'PingFang SC', monospace;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 6px;
            --theme-card-gap: 14px; --theme-card-padding: 16px; --theme-icon-size: 46px;
            --glass-blur: blur(8px) saturate(120%); --glass-opacity: 0.92;
            --transition-fast: 0.08s step-end; --transition-normal: 0.12s step-end; --transition-slow: 0.18s step-end;
            --white-10: rgba(255,255,255,0.1); --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #0a2a0a; --overlay-light: rgba(255,255,255,0.7); --overlay-dark: rgba(0,0,0,0.03);
        }

        [data-theme="matrix-dark"] {
            --theme-name: 'matrix';
            
            --bg-page: linear-gradient(170deg, #020502 0%, #010a01 30%, #020702 60%, #010801 100%);
            --bg-surface: rgba(5, 12, 5, 0.92);
            --bg-hover: rgba(0, 255, 65, 0.14);
            --bg-active: rgba(0, 255, 65, 0.2);
            --border: rgba(0, 255, 65, 0.3);
            --text-primary: #00ff41;
            --text-secondary: #00cc33;
            --text-muted: #007a1e;
            --accent: #39ff14;
            --accent-secondary: #00ff66;
            --accent-tertiary: #66ff66;
            --accent-hover: #00ff41;
            --card-shadow: 0 0 28px rgba(0,255,65,0.12), 0 0 0 1px rgba(0,255,65,0.2), 0 2px 8px rgba(0,0,0,0.5);
            --card-shadow-hover: 0 0 48px rgba(57,255,20,0.28), 0 0 0 2px rgba(0,255,65,0.4), 0 4px 20px rgba(0,0,0,0.6);
            
            --font-primary: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'PingFang SC', monospace;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 6px;
            --theme-card-gap: 14px; --theme-card-padding: 16px; --theme-icon-size: 46px;
            --glass-blur: blur(8px) saturate(120%); --glass-opacity: 0.92;
            --transition-fast: 0.08s step-end; --transition-normal: 0.12s step-end; --transition-slow: 0.18s step-end;
            --white-10: rgba(0,255,65,0.06); --white-15: rgba(0,255,65,0.1); --white-20: rgba(0,255,65,0.14); --white-30: rgba(0,255,65,0.2); --white-40: rgba(0,255,65,0.28); --white-50: rgba(0,255,65,0.38); --white-60: rgba(0,255,65,0.5); --white-80: rgba(0,255,65,0.7); --white-solid: #39ff14;
            --text-on-white: #00ff41; --overlay-light: rgba(0,255,65,0.04); --overlay-dark: rgba(0,0,0,0.55);
        }

        /* ==================== 方案十二：霓虹酸液 Neon Acid ==================== */

        [data-theme="neonacid-light"] {
            --theme-name: 'neonacid';
            
            --bg-page: linear-gradient(160deg, #f4fef4 0%, #e8fce8 30%, #f2fef2 60%, #fcfffc 100%);
            --bg-surface: rgba(255, 255, 255, 0.9);
            --bg-hover: rgba(40, 200, 20, 0.08);
            --bg-active: rgba(220, 20, 140, 0.06);
            --border: rgba(40, 200, 20, 0.28);
            --text-primary: #0a1a0a;
            --text-secondary: #1a4a1a;
            --text-muted: #2a6a2a;
            --accent: #28a012;
            --accent-secondary: #c0a000;
            --accent-tertiary: #d01080;
            --accent-hover: #1e8008;
            --card-shadow: 0 3px 12px rgba(30,150,15,0.08), 0 0 0 2px rgba(40,200,20,0.15), 0 1px 3px rgba(0,0,0,0.03);
            --card-shadow-hover: 0 6px 24px rgba(40,200,20,0.15), 0 0 0 3px rgba(40,200,20,0.25), 0 2px 8px rgba(0,0,0,0.05);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 0px; --radius-md: 3px; --radius-lg: 5px; --radius-xl: 7px;
            --theme-card-gap: 14px; --theme-card-padding: 16px; --theme-icon-size: 48px;
            --glass-blur: blur(12px) saturate(130%); --glass-opacity: 0.9;
            --transition-fast: 0.1s ease; --transition-normal: 0.18s ease; --transition-slow: 0.28s ease;
            --white-10: rgba(255,255,255,0.1); --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #0a1a0a; --overlay-light: rgba(255,255,255,0.65); --overlay-dark: rgba(0,0,0,0.03);
        }

        [data-theme="neonacid-dark"] {
            --theme-name: 'neonacid';
            
            --bg-page: linear-gradient(160deg, #000000 0%, #010101 30%, #000000 60%, #020202 100%);
            --bg-surface: rgba(12, 12, 12, 0.92);
            --bg-hover: rgba(57, 255, 20, 0.14);
            --bg-active: rgba(255, 20, 147, 0.12);
            --border: rgba(57, 255, 20, 0.4);
            --text-primary: #f0fff0;
            --text-secondary: #c0ffc0;
            --text-muted: #60d860;
            --accent: #39ff14;
            --accent-secondary: #ffff00;
            --accent-tertiary: #ff1493;
            --accent-hover: #4dff2e;
            --card-shadow: 0 0 32px rgba(57,255,20,0.18), 0 0 8px rgba(255,255,0,0.12), 0 0 0 2px rgba(57,255,20,0.2), 0 2px 10px rgba(0,0,0,0.5);
            --card-shadow-hover: 0 0 52px rgba(57,255,20,0.35), 0 0 18px rgba(255,20,147,0.22), 0 0 0 3px rgba(255,255,0,0.25), 0 4px 20px rgba(0,0,0,0.6);
            
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 0px; --radius-md: 3px; --radius-lg: 5px; --radius-xl: 7px;
            --theme-card-gap: 14px; --theme-card-padding: 16px; --theme-icon-size: 48px;
            --glass-blur: blur(14px) saturate(140%); --glass-opacity: 0.9;
            --transition-fast: 0.08s ease; --transition-normal: 0.16s ease; --transition-slow: 0.26s ease;
            --white-10: rgba(57,255,20,0.06); --white-15: rgba(57,255,20,0.1); --white-20: rgba(57,255,20,0.14); --white-30: rgba(57,255,20,0.2); --white-40: rgba(57,255,20,0.28); --white-50: rgba(57,255,20,0.38); --white-60: rgba(57,255,20,0.5); --white-80: rgba(57,255,20,0.7); --white-solid: #39ff14;
            --text-on-white: #f0fff0; --overlay-light: rgba(57,255,20,0.04); --overlay-dark: rgba(0,0,0,0.55);
        }

        /* ==================== 方案十五：星云尘埃 Nebula Dust ==================== */

        [data-theme="nebula-light"] {
            --theme-name: 'nebula';
            
            --bg-page: linear-gradient(160deg, #f4f0ff 0%, #ece4fc 25%, #f0e8ff 50%, #e8e4fa 75%, #f4f0ff 100%);
            --bg-surface: rgba(255, 255, 255, 0.82);
            --bg-hover: rgba(123, 47, 247, 0.06);
            --bg-active: rgba(224, 64, 251, 0.06);
            --border: rgba(123, 47, 247, 0.15);
            --text-primary: #1a0a3e;
            --text-secondary: #4a2a7e;
            --text-muted: #7a5aae;
            --accent: #6B1FE8;
            --accent-secondary: #C820E0;
            --accent-tertiary: #4040D8;
            --accent-hover: #5A10D0;
            --card-shadow: 0 4px 24px rgba(100,30,230,0.08), 0 0 0 1px rgba(150,60,250,0.08), 0 2px 8px rgba(0,0,0,0.04);
            --card-shadow-hover: 0 10px 36px rgba(120,50,250,0.14), 0 0 0 2px rgba(180,80,255,0.14), 0 4px 16px rgba(0,0,0,0.06);
            
            --font-primary: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.35px;
            --radius-sm: 14px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 28px;
            --theme-card-gap: 22px; --theme-card-padding: 20px; --theme-icon-size: 52px;
            --glass-blur: blur(28px) saturate(180%); --glass-opacity: 0.8;
            --transition-fast: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.4s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.1); --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #1a0a3e; --overlay-light: rgba(255,255,255,0.55); --overlay-dark: rgba(0,0,0,0.04);
        }

        [data-theme="nebula-dark"] {
            --theme-name: 'nebula';
            
            --bg-page: linear-gradient(150deg, #060115 0%, #040818 25%, #06021A 50%, #030A1A 75%, #050312 100%);
            --bg-surface: rgba(12, 6, 30, 0.55);
            --bg-hover: rgba(123, 47, 247, 0.14);
            --bg-active: rgba(224, 64, 251, 0.12);
            --border: rgba(123, 47, 247, 0.22);
            --text-primary: #f0e4ff;
            --text-secondary: #c8a8f8;
            --text-muted: #7868b8;
            --accent: #9B4FFF;
            --accent-secondary: #F060FF;
            --accent-tertiary: #7B6FFF;
            --accent-hover: #8B3FEF;
            --card-shadow: 0 0 56px rgba(155,79,255,0.10), 0 0 14px rgba(240,96,255,0.06), 0 0 0 1px rgba(155,79,255,0.08), 0 4px 24px rgba(0,0,0,0.4);
            --card-shadow-hover: 0 0 80px rgba(155,79,255,0.25), 0 0 28px rgba(240,96,255,0.16), 0 0 0 2px rgba(155,79,255,0.18), 0 8px 40px rgba(0,0,0,0.5);
            
            --font-primary: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.35px;
            --radius-sm: 14px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 28px;
            --theme-card-gap: 22px; --theme-card-padding: 20px; --theme-icon-size: 52px;
            --glass-blur: blur(32px) saturate(200%); --glass-opacity: 0.52;
            --transition-fast: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.4s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(155,79,255,0.04); --white-15: rgba(240,96,255,0.06); --white-20: rgba(155,79,255,0.08); --white-30: rgba(240,96,255,0.12); --white-40: rgba(155,79,255,0.18); --white-50: rgba(240,96,255,0.26); --white-60: rgba(155,79,255,0.36); --white-80: rgba(240,96,255,0.54); --white-solid: #f0e4ff;
            --text-on-white: #f0e4ff; --overlay-light: rgba(155,79,255,0.03); --overlay-dark: rgba(0,0,0,0.5);
        }

        /* ==================== 方案十六：Vital Flow 流动生命力 ==================== */
        /* 开发者注意：此主题使用 @property 动画渐变角度 + blob卡片 + 波浪网格 */

        @property --flow-hue {
            syntax: '<angle>';
            initial-value: 200deg;
            inherits: false;
        }

        [data-theme="vital-light"] {
            --theme-name: 'vital';

            --bg-page: conic-gradient(
                from var(--flow-hue) at 20% 80%,
                #f0f8ff 0deg, #f5e8ff 60deg, #f0f4ff 120deg,
                #e8f8f4 180deg, #f4f0ff 240deg, #f8f4f0 300deg,
                #f0f8ff 360deg
            );
            --bg-surface: rgba(255, 255, 255, 0.65);
            --bg-hover: rgba(0, 160, 200, 0.08);
            --bg-active: rgba(140, 80, 240, 0.1);
            --border: rgba(0, 160, 200, 0.22);
            --text-primary: #0e1828;
            --text-secondary: #3a4a68;
            --text-muted: #6a7a98;
            --accent: #00a8d0;
            --accent-secondary: #8858e8;
            --accent-tertiary: #10b888;
            --accent-hover: #0088b0;
            --card-shadow: 0 4px 24px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
            --card-shadow-hover: 0 16px 48px rgba(0,168,208,0.12), 0 2px 8px rgba(136,88,232,0.08);
            --font-primary: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.25px;
            --radius-sm: 18px; --radius-md: 22px; --radius-lg: 28px; --radius-xl: 34px;
            --theme-card-gap: 20px; --theme-card-padding: 20px; --theme-icon-size: 52px;
            --glass-blur: blur(28px) saturate(180%); --glass-opacity: 0.65;
            --transition-fast: 0.25s cubic-bezier(0.34,1.56,0.64,1); --transition-normal: 0.4s cubic-bezier(0.34,1.56,0.64,1); --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.1); --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #0e1828; --overlay-light: rgba(255,255,255,0.6); --overlay-dark: rgba(0,0,0,0.03);
            animation: vitalFlow 45s linear infinite;
        }
        @keyframes vitalFlow {
            0%   { --flow-hue: 200deg; }
            25%  { --flow-hue: 260deg; }
            50%  { --flow-hue: 320deg; }
            75%  { --flow-hue: 230deg; }
            100% { --flow-hue: 200deg; }
        }

        /* Vital Flow 亮色：blob卡片 + 错落网格 */
        [data-theme="vital-light"] .home-quick-grid {
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
            max-width: 1100px;
        }
        [data-theme="vital-light"] .home-quick-card {
            border-radius: 30% 70% 60% 40% / 40% 30% 70% 60%;
            aspect-ratio: auto;
            min-height: 110px;
            padding: 22px 14px 18px;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1.5px solid var(--border);
            animation: blobMorph 14s ease-in-out infinite;
            transition: all var(--transition-fast);
            overflow: visible;
            gap: 14px;
        }
        [data-theme="vital-light"] .home-quick-card:nth-child(3n+1) {
            border-radius: 35% 65% 55% 45% / 50% 40% 60% 50%;
            animation-delay: -3s;
            min-height: 130px;
        }
        [data-theme="vital-light"] .home-quick-card:nth-child(3n+2) {
            border-radius: 50% 50% 40% 60% / 35% 55% 45% 65%;
            animation-delay: -7s;
            min-height: 100px;
        }
        [data-theme="vital-light"] .home-quick-card:nth-child(3n+3) {
            border-radius: 40% 60% 65% 35% / 55% 35% 65% 45%;
            animation-delay: -10s;
            min-height: 120px;
        }
        @keyframes blobMorph {
            0%, 100% { border-radius: 30% 70% 60% 40% / 40% 30% 70% 60%; }
            25% { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
            50% { border-radius: 55% 45% 35% 65% / 40% 60% 50% 50%; }
            75% { border-radius: 40% 60% 70% 30% / 60% 40% 35% 65%; }
        }
        [data-theme="vital-light"] .home-quick-card:hover {
            transform: translateY(-8px) scale(1.06);
            border-color: var(--accent);
        }
        [data-theme="vital-light"] .home-quick-icon {
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-secondary) 15%, transparent));
            animation: iconWobble 12s ease-in-out infinite;
        }
        @keyframes iconWobble {
            0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
            50% { border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%; }
        }
        [data-theme="vital-light"] .ai-tool-card {
            border-radius: 28% 72% 58% 42% / 42% 34% 66% 58%;
            padding: 18px 14px 16px;
            animation: blobMorphAi 16s ease-in-out infinite;
        }
        [data-theme="vital-light"] .ai-tool-card:nth-child(odd) {
            animation-delay: -5s;
            border-radius: 50% 50% 38% 62% / 42% 56% 44% 58%;
        }
        [data-theme="vital-light"] .ai-tool-icon {
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-secondary) 15%, transparent));
            animation: iconWobble 12s ease-in-out infinite;
        }
        @keyframes blobMorphAi {
            0%, 100% { border-radius: 28% 72% 58% 42% / 42% 34% 66% 58%; }
            33% { border-radius: 48% 52% 44% 56% / 52% 48% 40% 60%; }
            66% { border-radius: 38% 62% 62% 38% / 44% 52% 48% 56%; }
        }

        [data-theme="vital-dark"] {
            --theme-name: 'vital';

            --bg-page: conic-gradient(
                from var(--flow-hue) at 25% 75%,
                #060814 0deg, #0a0620 60deg, #080c18 120deg,
                #060e16 180deg, #0a081c 240deg, #0c0a14 300deg,
                #060814 360deg
            );
            --bg-surface: rgba(16, 14, 28, 0.7);
            --bg-hover: rgba(0, 200, 220, 0.1);
            --bg-active: rgba(160, 100, 255, 0.12);
            --border: rgba(0, 200, 220, 0.2);
            --text-primary: #e8e8f8;
            --text-secondary: #a8b0d0;
            --text-muted: #6878a0;
            --accent: #00d4e8;
            --accent-secondary: #a068f8;
            --accent-tertiary: #20e0a8;
            --accent-hover: #00b8d0;
            --card-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,200,220,0.06);
            --card-shadow-hover: 0 16px 48px rgba(0,212,232,0.15), 0 0 0 2px rgba(160,104,248,0.12);
            --font-primary: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.25px;
            --radius-sm: 18px; --radius-md: 22px; --radius-lg: 28px; --radius-xl: 34px;
            --theme-card-gap: 20px; --theme-card-padding: 20px; --theme-icon-size: 52px;
            --glass-blur: blur(30px) saturate(200%); --glass-opacity: 0.68;
            --transition-fast: 0.25s cubic-bezier(0.34,1.56,0.64,1); --transition-normal: 0.4s cubic-bezier(0.34,1.56,0.64,1); --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.04); --white-15: rgba(255,255,255,0.06); --white-20: rgba(255,255,255,0.1); --white-30: rgba(255,255,255,0.14); --white-40: rgba(255,255,255,0.2); --white-50: rgba(255,255,255,0.3); --white-60: rgba(255,255,255,0.4); --white-80: rgba(255,255,255,0.6); --white-solid: #ffffff;
            --text-on-white: #e8e8f8; --overlay-light: rgba(255,255,255,0.04); --overlay-dark: rgba(0,0,0,0.5);
            animation: vitalFlowDark 50s linear infinite;
        }
        @keyframes vitalFlowDark {
            0%   { --flow-hue: 220deg; }
            25%  { --flow-hue: 280deg; }
            50%  { --flow-hue: 340deg; }
            75%  { --flow-hue: 250deg; }
            100% { --flow-hue: 220deg; }
        }

        [data-theme="vital-dark"] .home-quick-grid {
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
            max-width: 1100px;
        }
        [data-theme="vital-dark"] .home-quick-card {
            border-radius: 30% 70% 60% 40% / 40% 30% 70% 60%;
            aspect-ratio: auto;
            min-height: 110px;
            padding: 22px 14px 18px;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1.5px solid var(--border);
            animation: blobMorphDark 16s ease-in-out infinite;
            transition: all var(--transition-fast);
            overflow: visible;
            gap: 14px;
        }
        [data-theme="vital-dark"] .home-quick-card:nth-child(3n+1) {
            border-radius: 35% 65% 55% 45% / 50% 40% 60% 50%;
            animation-delay: -4s;
            min-height: 130px;
        }
        [data-theme="vital-dark"] .home-quick-card:nth-child(3n+2) {
            border-radius: 50% 50% 40% 60% / 35% 55% 45% 65%;
            animation-delay: -8s;
            min-height: 100px;
        }
        [data-theme="vital-dark"] .home-quick-card:nth-child(3n+3) {
            border-radius: 40% 60% 65% 35% / 55% 35% 65% 45%;
            animation-delay: -12s;
            min-height: 120px;
        }
        @keyframes blobMorphDark {
            0%, 100% { border-radius: 30% 70% 60% 40% / 40% 30% 70% 60%; }
            25% { border-radius: 48% 52% 52% 48% / 56% 44% 52% 48%; }
            50% { border-radius: 58% 42% 34% 66% / 42% 62% 48% 52%; }
            75% { border-radius: 42% 58% 68% 32% / 58% 42% 34% 66%; }
        }
        [data-theme="vital-dark"] .home-quick-card:hover {
            transform: translateY(-8px) scale(1.06);
            border-color: var(--accent);
            box-shadow: 0 0 32px rgba(0,212,232,0.15);
        }
        [data-theme="vital-dark"] .home-quick-icon {
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-secondary) 18%, transparent));
            animation: iconWobbleDark 14s ease-in-out infinite;
        }
        @keyframes iconWobbleDark {
            0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
            50% { border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%; }
        }
        [data-theme="vital-dark"] .ai-tool-card {
            border-radius: 28% 72% 58% 42% / 42% 34% 66% 58%;
            padding: 18px 14px 16px;
            animation: blobMorphAiDark 18s ease-in-out infinite;
        }
        [data-theme="vital-dark"] .ai-tool-card:nth-child(odd) {
            animation-delay: -6s;
            border-radius: 50% 50% 38% 62% / 42% 56% 44% 58%;
        }
        [data-theme="vital-dark"] .ai-tool-icon {
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-secondary) 18%, transparent));
            animation: iconWobbleDark 14s ease-in-out infinite;
        }
        @keyframes blobMorphAiDark {
            0%, 100% { border-radius: 28% 72% 58% 42% / 42% 34% 66% 58%; }
            33% { border-radius: 48% 52% 44% 56% / 52% 48% 40% 60%; }
            66% { border-radius: 38% 62% 62% 38% / 44% 52% 48% 56%; }
        }

        /* ============================================ */
        /* 各主题专属默认卡片样式（首页+收藏夹）       */
        /* 仅在卡片方案选择"主题默认"时生效            */
        /* ============================================ */

        /* --- Aurora 极光：玻璃浮片 --- */
        [data-theme="aurora-light"] .home-quick-card,
        [data-theme="aurora-dark"] .home-quick-card {
            border-radius: 22px; border: 1.5px solid var(--border);
            background: var(--bg-surface); box-shadow: var(--card-shadow);
        }
        [data-theme="aurora-light"] .home-quick-card:hover,
        [data-theme="aurora-dark"] .home-quick-card:hover {
            transform: translateY(-5px) scale(1.03); border-color: var(--accent);
            box-shadow: 0 16px 44px rgba(0,212,170,0.18), 0 0 0 1px rgba(0,212,170,0.2);
        }
        [data-theme="aurora-light"] .home-quick-icon,
        [data-theme="aurora-dark"] .home-quick-icon {
            border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-secondary) 12%, transparent));
        }
        [data-theme="aurora-light"] .ai-tool-card,
        [data-theme="aurora-dark"] .ai-tool-card {
            border-radius: 22px; border: 1.5px solid var(--border); background: var(--bg-surface);
        }
        [data-theme="aurora-light"] .ai-tool-card:hover,
        [data-theme="aurora-dark"] .ai-tool-card:hover { transform: translateY(-4px); border-color: var(--accent); }

        /* --- Minimal 简约：精炼线框 --- */
        [data-theme="minimal-light"] .home-quick-card,
        [data-theme="minimal-dark"] .home-quick-card {
            border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface);
            box-shadow: 0 1px 2px rgba(0,0,0,0.04); padding: 18px 14px 16px; gap: 10px;
        }
        [data-theme="minimal-light"] .home-quick-card:hover,
        [data-theme="minimal-dark"] .home-quick-card:hover {
            border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.06); transform: translateY(-2px);
        }
        [data-theme="minimal-light"] .home-quick-icon,
        [data-theme="minimal-dark"] .home-quick-icon {
            border-radius: 6px; width: 44px; height: 44px; font-size: 1.6rem;
            background: color-mix(in srgb, var(--accent) 10%, transparent);
        }
        [data-theme="minimal-light"] .ai-tool-card,
        [data-theme="minimal-dark"] .ai-tool-card { border-radius: 8px; border: 1px solid var(--border); }

        /* --- Elegance 优雅质感：渐变冠线+精浮雕 --- */
        [data-theme="elegance-light"] .home-quick-card,
        [data-theme="elegance-dark"] .home-quick-card {
            border-radius: 16px; border: 1px solid var(--border); background: var(--bg-surface);
            box-shadow: 0 4px 20px rgba(0,0,0,0.05), 0 0 0 1px rgba(102,126,234,0.04);
            padding: 22px 16px 18px; gap: 12px;
            position: relative; overflow: hidden;
        }
        [data-theme="elegance-light"] .home-quick-card::before,
        [data-theme="elegance-dark"] .home-quick-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
            background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent-tertiary));
            border-radius: 16px 16px 0 0; opacity: 0.8;
        }
        [data-theme="elegance-light"] .home-quick-card:hover,
        [data-theme="elegance-dark"] .home-quick-card:hover { transform: translateY(-5px) scale(1.03); border-color: var(--accent); box-shadow: 0 14px 36px rgba(102,126,234,0.14), 0 0 0 2px rgba(102,126,234,0.08); }
        [data-theme="elegance-light"] .home-quick-card:hover::before,
        [data-theme="elegance-dark"] .home-quick-card:hover::before { opacity: 1; height: 4px; }
        [data-theme="elegance-light"] .home-quick-icon,
        [data-theme="elegance-dark"] .home-quick-icon { border-radius: 14px; width: 52px; height: 52px; font-size: 2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-secondary) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
        [data-theme="elegance-light"] .ai-tool-card,
        [data-theme="elegance-dark"] .ai-tool-card { border-radius: 16px; border: 1px solid var(--border); background: var(--bg-surface); position: relative; overflow: hidden; padding-top: 22px; }
        [data-theme="elegance-light"] .ai-tool-card::before,
        [data-theme="elegance-dark"] .ai-tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); border-radius: 16px 16px 0 0; opacity: 0.7; }
        [data-theme="elegance-light"] .ai-tool-card:hover,
        [data-theme="elegance-dark"] .ai-tool-card:hover { transform: translateY(-3px); border-color: var(--accent); }
        [data-theme="elegance-light"] .ai-tool-icon,
        [data-theme="elegance-dark"] .ai-tool-icon { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-secondary) 6%, transparent)); }
        /* Elegance 收藏夹 */
        [data-theme="elegance-light"] .bookmark-card, [data-theme="elegance-dark"] .bookmark-card { border-radius: 16px; border: 1px solid var(--border); position: relative; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.03), 0 0 0 1px rgba(102,126,234,0.04); }
        [data-theme="elegance-light"] .bookmark-card::before, [data-theme="elegance-dark"] .bookmark-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); border-radius: 16px 16px 0 0; opacity: 0.6; }
        [data-theme="elegance-light"] .card-favicon, [data-theme="elegance-dark"] .card-favicon { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-secondary) 6%, transparent)); }

        /* --- Slate 石板灰：斜切角折页 --- */
        [data-theme="slate-light"] .home-quick-card,
        [data-theme="slate-dark"] .home-quick-card {
            border-radius: 4px; border: 1px solid var(--border); background: var(--bg-surface);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
            padding: 16px 12px 14px; gap: 10px;
        }
        [data-theme="slate-light"] .home-quick-card:hover,
        [data-theme="slate-dark"] .home-quick-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
        [data-theme="slate-light"] .home-quick-icon,
        [data-theme="slate-dark"] .home-quick-icon { border-radius: 2px; width: 44px; height: 44px; font-size: 1.6rem; background: color-mix(in srgb, var(--accent) 10%, transparent); }
        [data-theme="slate-light"] .ai-tool-card,
        [data-theme="slate-dark"] .ai-tool-card { border-radius: 4px; border: 1px solid var(--border); clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); padding: 14px 10px; }
        [data-theme="slate-light"] .ai-tool-icon,
        [data-theme="slate-dark"] .ai-tool-icon { width: 36px !important; height: 36px !important; font-size: 1.3rem; border-radius: 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); flex-shrink: 0; }
        /* Slate 收藏夹 */
        [data-theme="slate-light"] .bookmark-card, [data-theme="slate-dark"] .bookmark-card { border-radius: 4px; clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
        [data-theme="slate-light"] .card-favicon, [data-theme="slate-dark"] .card-favicon { width: 42px !important; height: 42px !important; border-radius: 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }

        /* --- Arctic 极地冰原：切角八边形 --- */
        [data-theme="arctic-light"] .home-quick-card,
        [data-theme="arctic-dark"] .home-quick-card {
            border-radius: 2px; border: 1px solid var(--border); background: var(--bg-surface);
            box-shadow: 0 2px 12px rgba(125,211,252,0.06);
            clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%);
            padding: 18px 12px 16px; gap: 12px;
        }
        [data-theme="arctic-light"] .home-quick-card:hover,
        [data-theme="arctic-dark"] .home-quick-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 8px 28px rgba(125,211,252,0.14); }
        [data-theme="arctic-light"] .home-quick-icon,
        [data-theme="arctic-dark"] .home-quick-icon { width: 46px; height: 46px; font-size: 1.7rem; background: rgba(56,189,248,0.12); border-radius: 14px; }
        [data-theme="arctic-light"] .ai-tool-card,
        [data-theme="arctic-dark"] .ai-tool-card { border-radius: 2px; clip-path: polygon(14% 0, 86% 0, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0 86%, 0 14%); padding: 14px 12px; }
        [data-theme="arctic-light"] .ai-tool-icon,
        [data-theme="arctic-dark"] .ai-tool-icon { width: 38px !important; height: 38px !important; font-size: 1.4rem; background: rgba(56,189,248,0.12); flex-shrink: 0; border-radius: 12px; }
        /* Arctic 收藏夹 */
        [data-theme="arctic-light"] .bookmark-card, [data-theme="arctic-dark"] .bookmark-card { border-radius: 2px; clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%); }
        [data-theme="arctic-light"] .card-favicon, [data-theme="arctic-dark"] .card-favicon { width: 44px !important; height: 44px !important; background: rgba(56,189,248,0.12); }

        /* --- Noir 黑白胶片：纯粹线框 --- */
        [data-theme="noir-light"] .home-quick-card,
        [data-theme="noir-dark"] .home-quick-card {
            border-radius: 0; border: 1px solid var(--border); background: transparent;
            box-shadow: none; padding: 16px 12px 14px; gap: 10px;
        }
        [data-theme="noir-light"] .home-quick-card:hover,
        [data-theme="noir-dark"] .home-quick-card:hover {
            border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); transform: translateY(-1px);
        }
        [data-theme="noir-light"] .home-quick-icon,
        [data-theme="noir-dark"] .home-quick-icon {
            border-radius: 0; width: 40px; height: 40px; font-size: 1.5rem;
            background: var(--bg-hover); border: 1px solid var(--border);
        }
        [data-theme="noir-light"] .ai-tool-card,
        [data-theme="noir-dark"] .ai-tool-card { border-radius: 0; border: 1px solid var(--border); background: transparent; }

        /* --- Synthwave 蒸波霓虹：对角分割 --- */
        [data-theme="synthwave-light"] .home-quick-card,
        [data-theme="synthwave-dark"] .home-quick-card {
            border-radius: 8px; background: linear-gradient(135deg, var(--bg-surface) 55%, color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 55%);
            border: 2px solid var(--accent);
            box-shadow: 0 0 20px rgba(255,0,128,0.08);
            padding: 18px 12px 16px; gap: 12px;
        }
        [data-theme="synthwave-light"] .home-quick-card:hover,
        [data-theme="synthwave-dark"] .home-quick-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 36px rgba(255,0,128,0.2), 0 0 16px rgba(0,224,255,0.14); background: linear-gradient(135deg, var(--bg-surface) 50%, color-mix(in srgb, var(--accent) 14%, var(--bg-surface)) 50%); }
        [data-theme="synthwave-light"] .home-quick-icon,
        [data-theme="synthwave-dark"] .home-quick-icon { border-radius: 6px; background: linear-gradient(135deg, rgba(255,0,128,0.22), rgba(0,224,255,0.14)); }
        [data-theme="synthwave-light"] .ai-tool-card,
        [data-theme="synthwave-dark"] .ai-tool-card { border-radius: 8px; border: 2px solid var(--accent); background: linear-gradient(135deg, var(--bg-surface) 55%, color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 55%); }
        /* Synthwave 收藏夹 */
        [data-theme="synthwave-light"] .bookmark-card, [data-theme="synthwave-dark"] .bookmark-card { border-radius: 8px; background: linear-gradient(135deg, var(--bg-surface) 55%, color-mix(in srgb, var(--accent) 8%, var(--bg-surface)) 55%) !important; border: 2px solid var(--accent) !important; }
        [data-theme="synthwave-light"] .card-favicon, [data-theme="synthwave-dark"] .card-favicon { border-radius: 6px; background: linear-gradient(135deg, rgba(255,0,128,0.22), rgba(0,224,255,0.14)); }

        /* --- Matrix 矩阵终端：CRT 绿光 --- */
        [data-theme="matrix-light"] .home-quick-card,
        [data-theme="matrix-dark"] .home-quick-card {
            border-radius: 0; border: 1px solid var(--border); background: var(--bg-surface);
            box-shadow: 0 0 8px rgba(0,255,65,0.04), 0 0 0 1px rgba(0,255,65,0.08); padding: 16px 12px 14px;
        }
        [data-theme="matrix-light"] .home-quick-card:hover,
        [data-theme="matrix-dark"] .home-quick-card:hover {
            border-color: var(--accent); box-shadow: 0 0 20px rgba(0,255,65,0.12), 0 0 0 2px rgba(0,255,65,0.2);
            transform: none;
        }
        [data-theme="matrix-light"] .home-quick-icon,
        [data-theme="matrix-dark"] .home-quick-icon {
            border-radius: 0; width: 42px; height: 42px; font-size: 1.5rem;
            background: rgba(0,255,65,0.08); border: 1px solid rgba(0,255,65,0.2);
        }
        [data-theme="matrix-light"] .ai-tool-card,
        [data-theme="matrix-dark"] .ai-tool-card { border-radius: 0; border: 1px solid var(--border); }

        /* --- Neon Acid 霓虹酸液：粗框冲击 --- */
        [data-theme="neonacid-light"] .home-quick-card,
        [data-theme="neonacid-dark"] .home-quick-card {
            border-radius: 0; background: var(--bg-surface);
            border: 3px solid var(--accent); padding: 14px 10px 12px; gap: 8px;
            box-shadow: 0 0 16px rgba(57,255,20,0.08);
        }
        [data-theme="neonacid-light"] .home-quick-card:hover,
        [data-theme="neonacid-dark"] .home-quick-card:hover {
            border-color: var(--accent-secondary); transform: translateY(-2px);
            box-shadow: 0 0 28px rgba(57,255,20,0.18), 0 0 0 2px rgba(255,255,0,0.12);
        }
        [data-theme="neonacid-light"] .home-quick-icon,
        [data-theme="neonacid-dark"] .home-quick-icon {
            border-radius: 0; width: 42px; height: 42px; font-size: 1.5rem;
            background: color-mix(in srgb, var(--accent) 12%, transparent);
        }
        [data-theme="neonacid-light"] .ai-tool-card,
        [data-theme="neonacid-dark"] .ai-tool-card { border-radius: 0; border: 3px solid var(--accent); }

        /* --- Nebula 星云尘埃：极透漂浮 --- */
        [data-theme="nebula-light"] .home-quick-card,
        [data-theme="nebula-dark"] .home-quick-card {
            border-radius: 20px; background: var(--bg-surface);
            backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
            box-shadow: 0 0 40px rgba(155,79,255,0.06), 0 4px 16px rgba(0,0,0,0.08);
            padding: 22px 14px 18px; gap: 14px;
        }
        [data-theme="nebula-light"] .home-quick-card:hover,
        [data-theme="nebula-dark"] .home-quick-card:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 0 60px rgba(155,79,255,0.14), 0 8px 24px rgba(0,0,0,0.12);
            border-color: color-mix(in srgb, var(--accent) 30%, transparent);
        }
        [data-theme="nebula-light"] .home-quick-icon,
        [data-theme="nebula-dark"] .home-quick-icon {
            border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-secondary) 12%, transparent));
        }
        [data-theme="nebula-light"] .ai-tool-card,
        [data-theme="nebula-dark"] .ai-tool-card { border-radius: 20px; border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); }
        [data-theme="nebula-light"] .ai-tool-icon,
        [data-theme="nebula-dark"] .ai-tool-icon { border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-secondary) 10%, transparent)); }

        /* --- 推荐应用图标统一适配 & 收藏夹网格宽度 --- */
        /* Aurora/Minimal/Sunset/Forest: 保持图标默认60px但主题化背景 */
        [data-theme="aurora-light"] .ai-tool-icon, [data-theme="aurora-dark"] .ai-tool-icon { border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-secondary) 10%, transparent)); }
        [data-theme="minimal-light"] .ai-tool-icon, [data-theme="minimal-dark"] .ai-tool-icon { border-radius: 6px; width: 48px !important; height: 48px !important; font-size: 1.7rem; background: color-mix(in srgb, var(--accent) 8%, transparent); }
        [data-theme="noir-light"] .ai-tool-icon, [data-theme="noir-dark"] .ai-tool-icon { border-radius: 0; width: 40px !important; height: 40px !important; font-size: 1.3rem; background: var(--bg-hover); border: 1px solid var(--border); }
        [data-theme="synthwave-light"] .ai-tool-icon, [data-theme="synthwave-dark"] .ai-tool-icon { border-radius: 6px; width: 48px !important; height: 48px !important; font-size: 1.6rem; background: linear-gradient(135deg, rgba(255,0,128,0.2), rgba(0,224,255,0.12)); }
        [data-theme="matrix-light"] .ai-tool-icon, [data-theme="matrix-dark"] .ai-tool-icon { border-radius: 0; width: 42px !important; height: 42px !important; font-size: 1.4rem; background: rgba(0,255,65,0.08); border: 1px solid rgba(0,255,65,0.2); }
        [data-theme="neonacid-light"] .ai-tool-icon, [data-theme="neonacid-dark"] .ai-tool-icon { border-radius: 0; width: 40px !important; height: 40px !important; font-size: 1.3rem; background: color-mix(in srgb, var(--accent) 10%, transparent); }
        /* 收藏夹网格：所有主题min-width≥260px（Ocean有各自更宽值） */
        [data-theme="aurora-light"] .bookmark-grid, [data-theme="aurora-dark"] .bookmark-grid,
        [data-theme="minimal-light"] .bookmark-grid, [data-theme="minimal-dark"] .bookmark-grid,
        [data-theme="elegance-light"] .bookmark-grid, [data-theme="elegance-dark"] .bookmark-grid,
        [data-theme="slate-light"] .bookmark-grid, [data-theme="slate-dark"] .bookmark-grid,
        [data-theme="arctic-light"] .bookmark-grid, [data-theme="arctic-dark"] .bookmark-grid,
        [data-theme="noir-light"] .bookmark-grid, [data-theme="noir-dark"] .bookmark-grid,
        [data-theme="synthwave-light"] .bookmark-grid, [data-theme="synthwave-dark"] .bookmark-grid,
        [data-theme="matrix-light"] .bookmark-grid, [data-theme="matrix-dark"] .bookmark-grid,
        [data-theme="neonacid-light"] .bookmark-grid, [data-theme="neonacid-dark"] .bookmark-grid,
        [data-theme="nebula-light"] .bookmark-grid, [data-theme="nebula-dark"] .bookmark-grid,
        [data-theme="vital-light"] .bookmark-grid, [data-theme="vital-dark"] .bookmark-grid,
        [data-theme="ember-light"] .bookmark-grid, [data-theme="ember-dark"] .bookmark-grid,
        [data-theme="prism-light"] .bookmark-grid, [data-theme="prism-dark"] .bookmark-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

        /* --- 收藏夹书签卡片 --- */
        /* Aurora */
        [data-theme="aurora-light"] .bookmark-card, [data-theme="aurora-dark"] .bookmark-card { border-radius: 20px; border: 1.5px solid var(--border); }
        [data-theme="aurora-light"] .bookmark-card:hover, [data-theme="aurora-dark"] .bookmark-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--accent); box-shadow: 0 14px 40px rgba(0,212,170,0.16); }
        [data-theme="aurora-light"] .card-favicon, [data-theme="aurora-dark"] .card-favicon { border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-secondary) 12%, transparent)); }
        /* Minimal */
        [data-theme="minimal-light"] .bookmark-card, [data-theme="minimal-dark"] .bookmark-card { border-radius: 6px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
        [data-theme="minimal-light"] .bookmark-card:hover, [data-theme="minimal-dark"] .bookmark-card:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(0,0,0,0.06); transform: translateY(-2px); }
        [data-theme="minimal-light"] .card-favicon, [data-theme="minimal-dark"] .card-favicon { border-radius: 4px; background: color-mix(in srgb, var(--accent) 10%, transparent); width: 44px !important; height: 44px !important; }
        /* Elegance */
        [data-theme="elegance-light"] .bookmark-card, [data-theme="elegance-dark"] .bookmark-card { border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.03), 0 0 0 1px rgba(102,126,234,0.04); }
        [data-theme="elegance-light"] .bookmark-card:hover, [data-theme="elegance-dark"] .bookmark-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(102,126,234,0.1), 0 0 0 1px rgba(102,126,234,0.12); }
        [data-theme="elegance-light"] .card-favicon, [data-theme="elegance-dark"] .card-favicon { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-secondary) 8%, transparent)); }
        /* Slate */
        [data-theme="slate-light"] .bookmark-card, [data-theme="slate-dark"] .bookmark-card { border-radius: 4px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
        [data-theme="slate-light"] .bookmark-card:hover, [data-theme="slate-dark"] .bookmark-card:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: translateY(-1px); }
        [data-theme="slate-light"] .card-favicon, [data-theme="slate-dark"] .card-favicon { border-radius: 3px; background: color-mix(in srgb, var(--accent) 8%, transparent); width: 44px !important; height: 44px !important; }
        /* Arctic */
        [data-theme="arctic-light"] .bookmark-card, [data-theme="arctic-dark"] .bookmark-card { border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(125,211,252,0.05); }
        [data-theme="arctic-light"] .bookmark-card:hover, [data-theme="arctic-dark"] .bookmark-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 6px 24px rgba(125,211,252,0.1); }
        [data-theme="arctic-light"] .card-favicon, [data-theme="arctic-dark"] .card-favicon { border-radius: 14px; background: rgba(56,189,248,0.12); }
        /* Noir */
        [data-theme="noir-light"] .bookmark-card, [data-theme="noir-dark"] .bookmark-card { border-radius: 0; border: 1px solid var(--border); background: transparent; box-shadow: none; }
        [data-theme="noir-light"] .bookmark-card:hover, [data-theme="noir-dark"] .bookmark-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); transform: translateY(-1px); }
        [data-theme="noir-light"] .card-favicon, [data-theme="noir-dark"] .card-favicon { border-radius: 0; background: transparent; border: 1px solid var(--border); width: 40px !important; height: 40px !important; }
        /* Synthwave */
        [data-theme="synthwave-light"] .bookmark-card, [data-theme="synthwave-dark"] .bookmark-card { border-radius: 8px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent-secondary); box-shadow: 0 0 16px rgba(255,0,128,0.06); }
        [data-theme="synthwave-light"] .bookmark-card:hover, [data-theme="synthwave-dark"] .bookmark-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 30px rgba(255,0,128,0.16), 0 0 12px rgba(0,224,255,0.1); }
        [data-theme="synthwave-light"] .card-favicon, [data-theme="synthwave-dark"] .card-favicon { border-radius: 8px; background: linear-gradient(135deg, rgba(255,0,128,0.18), rgba(0,224,255,0.12)); }
        /* Matrix */
        [data-theme="matrix-light"] .bookmark-card, [data-theme="matrix-dark"] .bookmark-card { border-radius: 0; border: 1px solid var(--border); box-shadow: 0 0 6px rgba(0,255,65,0.03), 0 0 0 1px rgba(0,255,65,0.06); }
        [data-theme="matrix-light"] .bookmark-card:hover, [data-theme="matrix-dark"] .bookmark-card:hover { border-color: var(--accent); box-shadow: 0 0 18px rgba(0,255,65,0.1), 0 0 0 2px rgba(0,255,65,0.15); transform: none; }
        [data-theme="matrix-light"] .card-favicon, [data-theme="matrix-dark"] .card-favicon { border-radius: 0; background: rgba(0,255,65,0.08); border: 1px solid rgba(0,255,65,0.2); width: 42px !important; height: 42px !important; }
        /* Neon Acid */
        [data-theme="neonacid-light"] .bookmark-card, [data-theme="neonacid-dark"] .bookmark-card { border-radius: 0; border: 3px solid var(--accent); box-shadow: 0 0 14px rgba(57,255,20,0.06); }
        [data-theme="neonacid-light"] .bookmark-card:hover, [data-theme="neonacid-dark"] .bookmark-card:hover { border-color: var(--accent-secondary); transform: translateY(-2px); box-shadow: 0 0 24px rgba(57,255,20,0.15), 0 0 0 2px rgba(255,255,0,0.1); }
        [data-theme="neonacid-light"] .card-favicon, [data-theme="neonacid-dark"] .card-favicon { border-radius: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); width: 42px !important; height: 42px !important; }
        /* Nebula */
        [data-theme="nebula-light"] .bookmark-card, [data-theme="nebula-dark"] .bookmark-card { border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 36px rgba(155,79,255,0.04), 0 3px 14px rgba(0,0,0,0.06); }
        [data-theme="nebula-light"] .bookmark-card:hover, [data-theme="nebula-dark"] .bookmark-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 0 52px rgba(155,79,255,0.12), 0 6px 22px rgba(0,0,0,0.1); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
        [data-theme="nebula-light"] .card-favicon, [data-theme="nebula-dark"] .card-favicon { border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-secondary) 12%, transparent)); }
        /* Vital Flow */
        [data-theme="vital-light"] .bookmark-card, [data-theme="vital-dark"] .bookmark-card { border-radius: 28px; border: 1.5px solid var(--border); }
        [data-theme="vital-light"] .bookmark-card:hover, [data-theme="vital-dark"] .bookmark-card:hover { transform: translateY(-4px); border-color: var(--accent); }
        [data-theme="vital-light"] .card-favicon, [data-theme="vital-dark"] .card-favicon { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-secondary) 15%, transparent)); }


        /* ============================================ */
        /* 余烬辉光全局 @property                         */
        /* ============================================ */
        @property --ember-phase {
            syntax: '<number>';
            initial-value: 0;
            inherits: false;
        }
        @property --prism-hue {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

        /* ==================== 方案二十：余烬辉光 Ember Glow ==================== */

        [data-theme="ember-light"] {
            --theme-name: 'ember';
            --bg-page: #faf6f0;
            --bg-surface: rgba(255, 252, 248, 0.9);
            --bg-hover: rgba(220, 100, 20, 0.07);
            --bg-active: rgba(200, 80, 10, 0.1);
            --border: rgba(180, 100, 50, 0.2);
            --text-primary: #2a1810;
            --text-secondary: #5a3820;
            --text-muted: #8a5840;
            --accent: #e07030;
            --accent-secondary: #ffa040;
            --accent-tertiary: #c84020;
            --accent-hover: #c05820;
            --card-shadow: 0 3px 16px rgba(200,100,40,0.06), 0 1px 2px rgba(0,0,0,0.03);
            --card-shadow-hover: 0 10px 32px rgba(220,120,50,0.14), 0 0 0 1px rgba(255,140,60,0.12);
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px;
            --theme-card-gap: 18px; --theme-card-padding: 18px; --theme-icon-size: 50px;
            --glass-blur: blur(16px) saturate(140%); --glass-opacity: 0.88;
            --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.08); --white-15: rgba(255,255,255,0.12); --white-20: rgba(255,255,255,0.18); --white-30: rgba(255,255,255,0.25); --white-40: rgba(255,255,255,0.35); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #2a1810; --overlay-light: rgba(255,255,255,0.5); --overlay-dark: rgba(0,0,0,0.04);
        }
        /* 余烬粒子系统 */
        [data-theme="ember-light"]::before {
            content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
            background-image:
                radial-gradient(3px 3px at 10% 85%, rgba(255,140,40,calc(var(--ember-phase))) 0%, transparent 100%),
                radial-gradient(2px 2px at 25% 70%, rgba(255,180,60,calc(var(--ember-phase) * 0.8)) 0%, transparent 100%),
                radial-gradient(4px 4px at 40% 90%, rgba(255,120,30,calc(var(--ember-phase) * 0.6)) 0%, transparent 100%),
                radial-gradient(2px 2px at 55% 75%, rgba(255,200,80,calc(var(--ember-phase) * 0.9)) 0%, transparent 100%),
                radial-gradient(3px 3px at 70% 88%, rgba(255,140,50,calc(var(--ember-phase) * 0.7)) 0%, transparent 100%),
                radial-gradient(2px 2px at 85% 80%, rgba(255,160,60,calc(var(--ember-phase) * 0.75)) 0%, transparent 100%),
                radial-gradient(1px 1px at 15% 92%, rgba(255,220,100,calc(var(--ember-phase) * 0.5)) 0%, transparent 100%),
                radial-gradient(3px 3px at 60% 82%, rgba(255,180,70,calc(var(--ember-phase) * 0.65)) 0%, transparent 100%);
            animation: emberGlow 8s ease-in-out infinite;
        }
        [data-theme="ember-light"]::after {
            content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
            background: radial-gradient(ellipse at 50% 100%, rgba(255,140,40,0.06) 0%, transparent 70%);
            animation: emberBaseGlow 6s ease-in-out infinite;
        }
        @keyframes emberGlow {
            0%, 100% { --ember-phase: 0.3; }
            50% { --ember-phase: 0.8; }
        }
        @keyframes emberBaseGlow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        /* 余烬辉光 - 全新卡片形态 */
        [data-theme="ember-light"] .home-quick-card,
        [data-theme="ember-light"] .ai-tool-card,
        [data-theme="ember-light"] .bookmark-card {
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background: linear-gradient(180deg, #FFF5E6 0%, #FFE8CC 50%, #FFDBB3 100%);
            border: 1.5px solid rgba(220, 100, 20, 0.25);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 3/4;
        }
        [data-theme="ember-light"] .home-quick-card::before,
        [data-theme="ember-light"] .ai-tool-card::before,
        [data-theme="ember-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 107, 53, 0.3) 0%, transparent 70%);
            animation: emberGlow 3s ease-in-out infinite;
        }
        [data-theme="ember-light"] .home-quick-card::after,
        [data-theme="ember-light"] .ai-tool-card::after,
        [data-theme="ember-light"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.4) 0px, transparent 8px),
                radial-gradient(circle at 80% 70%, rgba(255, 152, 0, 0.3) 0px, transparent 10px),
                radial-gradient(circle at 50% 90%, rgba(255, 87, 34, 0.3) 0px, transparent 6px);
            animation: emberSparkle 2s ease-in-out infinite;
        }
        @keyframes emberGlow {
            0%, 100% { opacity: 0.6; transform: scaleY(1); }
            50% { opacity: 1; transform: scaleY(1.1); }
        }
        @keyframes emberSparkle {
            0%, 100% { opacity: 0.7; }
            25% { opacity: 1; }
            50% { opacity: 0.8; }
            75% { opacity: 1; }
        }
        [data-theme="ember-light"] .home-quick-card:hover,
        [data-theme="ember-light"] .ai-tool-card:hover,
        [data-theme="ember-light"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3), 0 4px 16px rgba(255, 193, 7, 0.2);
        }
        [data-theme="ember-light"] .home-quick-icon,
        [data-theme="ember-light"] .ai-tool-icon,
        [data-theme="ember-light"] .card-favicon {
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background: radial-gradient(circle at 50% 30%, rgba(255, 193, 7, 0.4), rgba(255, 107, 53, 0.2));
            box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
        }

        [data-theme="ember-dark"] {
            --theme-name: 'ember';
            --bg-page: #0c0806;
            --bg-surface: rgba(22, 14, 10, 0.88);
            --bg-hover: rgba(240, 120, 40, 0.1);
            --bg-active: rgba(220, 100, 20, 0.14);
            --border: rgba(200, 100, 40, 0.25);
            --text-primary: #f4e8d8;
            --text-secondary: #d0a878;
            --text-muted: #906840;
            --accent: #f07830;
            --accent-secondary: #ffb860;
            --accent-tertiary: #e84818;
            --accent-hover: #e06828;
            --card-shadow: 0 0 24px rgba(240,120,48,0.08), 0 2px 8px rgba(0,0,0,0.4);
            --card-shadow-hover: 0 0 40px rgba(240,120,48,0.2), 0 0 0 1px rgba(255,160,60,0.15);
            --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px;
            --theme-card-gap: 18px; --theme-card-padding: 18px; --theme-icon-size: 50px;
            --glass-blur: blur(18px) saturate(150%); --glass-opacity: 0.86;
            --transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,200,100,0.05); --white-15: rgba(255,200,100,0.08); --white-20: rgba(255,200,100,0.12); --white-30: rgba(255,200,100,0.16); --white-40: rgba(255,200,100,0.22); --white-50: rgba(255,200,100,0.32); --white-60: rgba(255,200,100,0.42); --white-80: rgba(255,200,100,0.6); --white-solid: #ffd8a0;
            --text-on-white: #f4e8d8; --overlay-light: rgba(255,200,100,0.04); --overlay-dark: rgba(0,0,0,0.5);
        }
        [data-theme="ember-dark"]::before {
            content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
            background-image:
                radial-gradient(2px 2px at 12% 88%, rgba(255,160,50,calc(var(--ember-phase) * 1.2)) 0%, transparent 100%),
                radial-gradient(3px 3px at 28% 72%, rgba(255,200,70,calc(var(--ember-phase) * 0.9)) 0%, transparent 100%),
                radial-gradient(2px 2px at 38% 92%, rgba(255,140,35,calc(var(--ember-phase) * 1.0)) 0%, transparent 100%),
                radial-gradient(4px 4px at 52% 78%, rgba(255,180,55,calc(var(--ember-phase) * 0.8)) 0%, transparent 100%),
                radial-gradient(2px 2px at 68% 90%, rgba(255,160,45,calc(var(--ember-phase) * 0.95)) 0%, transparent 100%),
                radial-gradient(3px 3px at 82% 76%, rgba(255,220,80,calc(var(--ember-phase) * 0.7)) 0%, transparent 100%),
                radial-gradient(1px 1px at 18% 95%, rgba(255,240,120,calc(var(--ember-phase) * 0.4)) 0%, transparent 100%),
                radial-gradient(2px 2px at 58% 84%, rgba(255,190,65,calc(var(--ember-phase) * 0.85)) 0%, transparent 100%);
            animation: emberGlow 7s ease-in-out infinite;
        }
        [data-theme="ember-dark"]::after {
            content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
            background: radial-gradient(ellipse at 50% 105%, rgba(255,120,20,0.1) 0%, transparent 60%);
            animation: emberBaseGlowDark 5s ease-in-out infinite;
        }
        @keyframes emberBaseGlowDark {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }
        /* 余烬辉光 - 暗黑模式全新卡片形态 */
        [data-theme="ember-dark"] .home-quick-card,
        [data-theme="ember-dark"] .ai-tool-card,
        [data-theme="ember-dark"] .bookmark-card {
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background: linear-gradient(180deg, #2A1810 0%, #1A0A05 50%, #140500 100%);
            border: 1.5px solid rgba(240, 120, 48, 0.35);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 3/4;
        }
        [data-theme="ember-dark"] .home-quick-card::before,
        [data-theme="ember-dark"] .ai-tool-card::before,
        [data-theme="ember-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 50% 0%, rgba(255, 107, 53, 0.4) 0%, transparent 70%);
            animation: emberGlowDark 3s ease-in-out infinite;
        }
        [data-theme="ember-dark"] .home-quick-card::after,
        [data-theme="ember-dark"] .ai-tool-card::after,
        [data-theme="ember-dark"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60%;
            background: 
                radial-gradient(circle at 20% 80%, rgba(255, 193, 7, 0.5) 0px, transparent 8px),
                radial-gradient(circle at 80% 70%, rgba(255, 152, 0, 0.4) 0px, transparent 10px),
                radial-gradient(circle at 50% 90%, rgba(255, 87, 34, 0.4) 0px, transparent 6px);
            animation: emberSparkleDark 2s ease-in-out infinite;
        }
        @keyframes emberGlowDark {
            0%, 100% { opacity: 0.5; transform: scaleY(1); }
            50% { opacity: 1; transform: scaleY(1.15); }
        }
        @keyframes emberSparkleDark {
            0%, 100% { opacity: 0.6; }
            25% { opacity: 1; }
            50% { opacity: 0.7; }
            75% { opacity: 1; }
        }
        [data-theme="ember-dark"] .home-quick-card:hover,
        [data-theme="ember-dark"] .ai-tool-card:hover,
        [data-theme="ember-dark"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4), 0 4px 16px rgba(255, 193, 7, 0.3);
        }
        [data-theme="ember-dark"] .home-quick-icon,
        [data-theme="ember-dark"] .ai-tool-icon,
        [data-theme="ember-dark"] .card-favicon {
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            background: radial-gradient(circle at 50% 30%, rgba(255, 193, 7, 0.45), rgba(255, 107, 53, 0.25));
            box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
        }

        /* ==================== 方案二十一：棱镜色移 Prism Shift ==================== */

        [data-theme="prism-light"] {
            --theme-name: 'prism';
            --bg-page: linear-gradient(var(--prism-hue), #f0f0f0 0%, #f8f4fa 33%, #f4f8f8 66%, #f0f0f0 100%);
            --bg-surface: rgba(255, 255, 255, 0.78);
            --bg-hover: rgba(120, 120, 120, 0.06);
            --bg-active: rgba(100, 100, 100, 0.08);
            --border: rgba(120, 60, 200, 0.14);
            --text-primary: #1a1a2a;
            --text-secondary: #4a4a6a;
            --text-muted: #7a7a9a;
            --accent: #7c3aed;
            --accent-secondary: #06b6d4;
            --accent-tertiary: #f59e0b;
            --accent-hover: #6d28d9;
            --card-shadow: 0 4px 20px rgba(0,0,0,0.04), 0 0 0 1px rgba(120,60,200,0.06);
            --card-shadow-hover: 0 12px 36px rgba(120,60,200,0.1), 0 0 0 2px rgba(6,182,212,0.12);
            --font-primary: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 14px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 26px;
            --theme-card-gap: 20px; --theme-card-padding: 18px; --theme-icon-size: 50px;
            --glass-blur: blur(22px) saturate(160%); --glass-opacity: 0.78;
            --transition-fast: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.35s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.1); --white-15: rgba(255,255,255,0.15); --white-20: rgba(255,255,255,0.2); --white-30: rgba(255,255,255,0.3); --white-40: rgba(255,255,255,0.4); --white-50: rgba(255,255,255,0.5); --white-60: rgba(255,255,255,0.6); --white-80: rgba(255,255,255,0.8); --white-solid: #ffffff;
            --text-on-white: #1a1a2a; --overlay-light: rgba(255,255,255,0.55); --overlay-dark: rgba(0,0,0,0.03);
            animation: prismShift 120s linear infinite;
        }
        @keyframes prismShift {
            0%   { --prism-hue: 0deg; }
            100% { --prism-hue: 360deg; }
        }
        /* 棱镜色移 - 全新六边形卡片形态 */
        [data-theme="prism-light"] .home-quick-card,
        [data-theme="prism-light"] .ai-tool-card {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 20%, #4ECDC4 40%, #45B7D1 60%, #96CEB4 80%, #FFEAA7 100%);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 1/1;
        }
        [data-theme="prism-light"] .bookmark-card {
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #FFFFFF 0%, #F8F4FA 50%, #F0F8FF 100%);
            border: 1px solid rgba(124, 58, 237, 0.15);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="prism-light"] .home-quick-card::before,
        [data-theme="prism-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(45deg, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
                linear-gradient(-45deg, rgba(255, 255, 255, 0.6) 0%, transparent 50%);
            mix-blend-mode: screen;
            animation: prismRefract 4s ease-in-out infinite;
        }
        [data-theme="prism-light"] .home-quick-card::after,
        [data-theme="prism-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(
                from var(--prism-hue),
                #FF6B6B, #FFE66D, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7, #FF6B6B
            );
            animation: prismShift 10s linear infinite;
            opacity: 0.3;
            mix-blend-mode: overlay;
        }
        @keyframes prismRefract {
            0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.6; }
            50% { transform: rotate(5deg) scale(1.05); opacity: 0.8; }
        }
        [data-theme="prism-light"] .home-quick-card:hover,
        [data-theme="prism-light"] .ai-tool-card:hover,
        [data-theme="prism-light"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 48px rgba(78, 205, 196, 0.4), 0 8px 32px rgba(255, 107, 107, 0.3);
        }
        [data-theme="prism-light"] .home-quick-icon,
        [data-theme="prism-light"] .ai-tool-icon,
        [data-theme="prism-light"] .card-favicon {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.15));
            backdrop-filter: blur(10px);
        }

        [data-theme="prism-dark"] {
            --theme-name: 'prism';
            --bg-page: linear-gradient(var(--prism-hue), #0a0a12 0%, #0e0a18 33%, #0a1214 66%, #0a0a12 100%);
            --bg-surface: rgba(18, 16, 28, 0.8);
            --bg-hover: rgba(140, 80, 255, 0.08);
            --bg-active: rgba(6, 200, 220, 0.08);
            --border: rgba(120, 60, 200, 0.2);
            --text-primary: #e8e0f8;
            --text-secondary: #b0a8d0;
            --text-muted: #7868a8;
            --accent: #a78bfa;
            --accent-secondary: #22d3ee;
            --accent-tertiary: #fbbf24;
            --accent-hover: #8b5cf6;
            --card-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(120,60,200,0.08);
            --card-shadow-hover: 0 12px 40px rgba(140,80,240,0.14), 0 0 0 2px rgba(6,200,220,0.14);
            --font-primary: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', 'PingFang SC', sans-serif;
            --font-size-base: 14px; --letter-spacing: 0.3px;
            --radius-sm: 14px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 26px;
            --theme-card-gap: 20px; --theme-card-padding: 18px; --theme-icon-size: 50px;
            --glass-blur: blur(24px) saturate(180%); --glass-opacity: 0.78;
            --transition-fast: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-normal: 0.35s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
            --white-10: rgba(255,255,255,0.04); --white-15: rgba(255,255,255,0.06); --white-20: rgba(255,255,255,0.1); --white-30: rgba(255,255,255,0.14); --white-40: rgba(255,255,255,0.2); --white-50: rgba(255,255,255,0.3); --white-60: rgba(255,255,255,0.42); --white-80: rgba(255,255,255,0.62); --white-solid: #ffffff;
            --text-on-white: #e8e0f8; --overlay-light: rgba(255,255,255,0.04); --overlay-dark: rgba(0,0,0,0.5);
            animation: prismShift 120s linear infinite;
        }
        /* 棱镜色移 - 暗黑模式全新六边形卡片形态 */
        [data-theme="prism-dark"] .home-quick-card,
        [data-theme="prism-dark"] .ai-tool-card {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 20%, #34D399 40%, #FBBF24 60%, #F97316 80%, #EC4899 100%);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 1/1;
        }
        [data-theme="prism-dark"] .bookmark-card {
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #12101C 0%, #1E1828 50%, #1A1C24 100%);
            border: 1px solid rgba(167, 139, 250, 0.25);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="prism-dark"] .home-quick-card::before,
        [data-theme="prism-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
                linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
            mix-blend-mode: screen;
            animation: prismRefractDark 4s ease-in-out infinite;
        }
        [data-theme="prism-dark"] .home-quick-card::after,
        [data-theme="prism-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(
                from var(--prism-hue),
                #7C3AED, #06B6D4, #34D399, #FBBF24, #F97316, #EC4899, #7C3AED
            );
            animation: prismShift 10s linear infinite;
            opacity: 0.4;
            mix-blend-mode: overlay;
        }
        @keyframes prismRefractDark {
            0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.5; }
            50% { transform: rotate(5deg) scale(1.05); opacity: 0.7; }
        }
        [data-theme="prism-dark"] .home-quick-card:hover,
        [data-theme="prism-dark"] .ai-tool-card:hover,
        [data-theme="prism-dark"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 48px rgba(124, 58, 237, 0.5), 0 8px 32px rgba(6, 182, 212, 0.4);
        }
        [data-theme="prism-dark"] .home-quick-icon,
        [data-theme="prism-dark"] .ai-tool-icon,
        [data-theme="prism-dark"] .card-favicon {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(34, 211, 238, 0.2));
            backdrop-filter: blur(10px);
        }

        /* 默认主题（兼容旧版本） */
        :root {
            --theme-name: 'default-light';
            --star-color: #fbbf24;
            /* 全局白色透明色变量 - 用于替代硬编码的白色 */
            --white-10: hsla(0, 0%, 100%, 0.1);
            --white-15: hsla(0, 0%, 100%, 0.15);
            --white-18: hsla(0, 0%, 100%, 0.18);
            --white-20: hsla(0, 0%, 100%, 0.2);
            --white-25: hsla(0, 0%, 100%, 0.25);
            --white-30: hsla(0, 0%, 100%, 0.3);
            --white-35: hsla(0, 0%, 100%, 0.35);
            --white-40: hsla(0, 0%, 100%, 0.4);
            --white-50: hsla(0, 0%, 100%, 0.5);
            --white-60: hsla(0, 0%, 100%, 0.6);
            --white-80: hsla(0, 0%, 100%, 0.8);
            --white-90: hsla(0, 0%, 100%, 0.9);
            --white-solid: #fff;
        }

        * { margin:0; padding:0; box-sizing:border-box; }
        button, .view-tab, .icon-btn, .login-btn, .user-menu,
        .bookmark-card, .ai-tool-card, .home-quick-card,
        .tree-item, .tree-folder {
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        button:active, .view-tab:active:not(.active),
        .icon-btn:active, .login-btn:active,
        .user-menu:active, .bookmark-card:active,
        .ai-tool-card:active, .home-quick-card:active {
            transform: scale(0.95) !important;
            transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            height: 100vh; display: flex; flex-direction: column;
            background: var(--bg-page); color: var(--text-primary);
            transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease;
            overflow: hidden;
        }
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: -1;
        }
        @keyframes floatBg {
            0%, 100% { transform: translate(0,0); }
            33% { transform: translate(-20px,10px); }
            66% { transform: translate(10px,-20px); }
        }
        .app { width:100%; height:100%; display:flex; flex-direction:column; }

        .topbar {
            height: 64px; 
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-bottom: none;
            display: flex; align-items: center; padding: 0 28px; gap: 18px;
            box-shadow: none;
            flex-shrink: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 100;
        }
        .topbar.editing {
            background: var(--edit-bg);
            border-bottom: 1px solid var(--edit-border);
        }

        /* 编辑模式提示标签 */
        .editing-indicator {
            display: none;
            background: linear-gradient(135deg, var(--accent), #f472b6);
            color: var(--white-solid);
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            animation: pulse-edit 2s infinite ease-in-out, glow 3s ease-in-out infinite;
            box-shadow: 0 4px 20px rgba(102,126,234,0.5);
        }
        .topbar.editing .editing-indicator {
            display: inline-block;
        }
        @keyframes pulse-edit {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        @keyframes glow {
            0%, 100% { box-shadow: 0 4px 20px rgba(102,126,234,0.5); }
            50% { box-shadow: 0 6px 30px rgba(102,126,234,0.7), 0 0 40px rgba(244,114,182,0.3); }
        }
        /* 编辑模式下的卡片 */
        .bookmark-card.editing {
            border: 2px dashed var(--edit-border) !important;
            animation: dash 1.5s linear infinite;
            background: var(--edit-bg) !important;
            filter: brightness(0.97);
            position: relative;
        }
        .bookmark-card.editing::after {
            content: '✏️';
            position: absolute;
            top: 6px;
            right: 8px;
            font-size: 0.75rem;
            opacity: 0.6;
            pointer-events: none;
        }
        @keyframes dash {
            0% { border-color: var(--edit-border); }
            50% { border-color: var(--accent); }
            100% { border-color: var(--edit-border); }
        }
        .logo { 
            font-weight: 800; 
            font-size: 1.25rem; 
            color: var(--text-primary); 
            display:flex; align-items:center; gap:10px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.08);
            letter-spacing: -0.3px;
        }
        [data-theme$="-dark"] .logo {
            color: white;
            text-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .logo-img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            object-fit: cover;
            filter: drop-shadow(0 2px 8px rgba(102,126,234,0.2));
        }
        [data-theme$="-dark"] .logo-img {
            filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
        }
        .spacer { flex:1; }
        .view-tabs { 
            display:flex; 
            gap:10px;
        }
        .view-tab {
            background: var(--bg-surface); 
            border: 1px solid var(--border); 
            font-size:1.25rem; 
            cursor:pointer; 
            width:42px; 
            height:42px;
            border-radius:12px; 
            display:flex; 
            align-items:center; 
            justify-content:center; 
            color: var(--text-primary);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        [data-theme$="-dark"] .view-tab {
            background: var(--bg-surface); 
            border: 1px solid var(--border); 
            color: var(--text-primary);
        }
        .view-tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: 0.6s;
        }
        .view-tab:hover::before {
            left: 100%;
        }
        .view-tab:hover { 
            background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(255,255,255,0.5)); 
            color: var(--accent); 
            transform: translateY(-4px) scale(1.08); 
            box-shadow: 0 12px 32px rgba(102,126,234,0.2), 0 0 0 1px rgba(102,126,234,0.25);
        }
        [data-theme$="-dark"] .view-tab:hover { 
            background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2)); 
            color: white; 
            box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.25);
        }
        .topbar-actions { display:flex; align-items:center; gap:10px; }
        .icon-btn {
            background: var(--bg-surface); 
            border: 1px solid var(--border); 
            font-size:1.25rem; 
            cursor:pointer; 
            width:42px; 
            height:42px;
            border-radius:12px; 
            display:flex; 
            align-items:center; 
            justify-content:center; 
            color: var(--text-primary);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        [data-theme$="-dark"] .icon-btn {
            background: var(--bg-surface); 
            border: 1px solid var(--border); 
            color: var(--text-primary);
        }
        .icon-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: 0.6s;
        }
        .icon-btn:hover::before {
            left: 100%;
        }
        .icon-btn:hover { 
            background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(255,255,255,0.5)); 
            color: var(--accent); 
            transform: translateY(-4px) scale(1.08); 
            box-shadow: 0 12px 32px rgba(102,126,234,0.2), 0 0 0 1px rgba(102,126,234,0.25);
        }
        [data-theme$="-dark"] .icon-btn:hover { 
            background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.2)); 
            color: white; 
            box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.25);
        }
        .login-btn {
            padding:10px 22px; 
            border-radius:16px; 
            border: 1px solid var(--border); 
            background: var(--bg-surface);
            color: var(--text-primary); 
            cursor:pointer; 
            font-size:0.82rem; 
            font-weight:800;
            letter-spacing: 0.4px;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: relative;
            overflow: hidden;
        }
        .login-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.1), transparent);
            transition: 0.5s;
        }
        .login-btn:hover::before {
            left: 100%;
        }
        .login-btn:hover { 
            transform: translateY(-2px); 
            background: var(--bg-hover);
            border-color: var(--accent);
            color: var(--accent);
            box-shadow:0 8px 20px rgba(0,0,0,0.1);
        }
        .user-avatar-small {
            width:32px; height:32px; border-radius:50%; 
            background: var(--bg-surface);
            color: var(--accent); display:flex; align-items:center; justify-content:center; 
            font-weight:700; font-size:0.8rem;
            cursor: pointer; 
            border: 2px solid var(--border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .user-avatar-small:hover {
            transform: translateY(-1px);
            background: var(--bg-hover);
            border-color: var(--accent);
        }
        .user-menu {
            display: flex; align-items: center; gap: 8px; cursor: pointer;
            padding: 4px 10px; border-radius: 12px; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background: var(--bg-surface);
            border: 1px solid var(--border);
        }
        .user-menu:hover { 
            background: var(--bg-hover);
            transform: translateY(-1px);
        }
        .user-email-prefix { 
            font-size: 0.82rem; 
            color: var(--text-secondary); 
            font-weight:600; 
            max-width: 140px; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap; 
        }
        [data-theme$="-dark"] .user-email-prefix {
            color: var(--text-primary); 
        }

        .main-content { flex:1; overflow:hidden; }

        .home-view {
            display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
            height:100%; padding:180px 24px 70px; overflow-y: auto;
            position: relative;
        }
        .home-time { 
            font-size:5.5rem; 
            font-weight:300; 
            line-height:1.1; 
            color: var(--text-primary);
            text-shadow: 0 4px 24px hsla(var(--hue-primary), 60%, 50%, 0.15);
            letter-spacing: -2px;
            margin-bottom: 8px;
        }
        .home-search { width:100%; max-width:560px; margin:24px 0 20px; position: relative; z-index: 10; }
        .home-search .search-container {
            border-radius: 20px;
        }
        .home-search .search-input {
            padding: 20px 30px;
            font-size: 1.05rem;
        }
        .home-search .search-container:focus-within {
            box-shadow:0 0 0 4px rgba(102,126,234,0.2), 0 16px 48px rgba(102,126,234,0.15), 0 2px 16px rgba(255,255,255,0.6) inset;
        }
        [data-theme$="-dark"] .home-search .search-container:focus-within {
            box-shadow:0 0 0 4px rgba(102,126,234,0.2), 0 16px 48px rgba(0,0,0,0.2), 0 2px 16px rgba(255,255,255,0.15) inset;
        }
        .home-search .search-input::placeholder {
            color: rgba(100,116,139,0.6);
        }
        [data-theme$="-dark"] .home-search .search-input::placeholder {
            color: rgba(255,255,255,0.5);
        }
        .home-date-row {
            font-size:1.1rem; 
            color: var(--text-secondary); 
            margin-bottom:14px;
            display:flex; flex-direction:column; align-items:center; gap:6px;
            text-shadow: 0 2px 12px hsla(var(--hue-primary), 60%, 50%, 0.08);
        }
        .home-weather { 
            font-size:1rem; 
            color: var(--text-secondary); 
            margin-bottom:32px;
            text-shadow: 0 2px 8px hsla(var(--hue-primary), 60%, 50%, 0.06);
        }

        .home-quick-sites { width:100%; max-width:900px; margin-bottom:36px; }
        .home-quick-title { 
            font-size:0.9rem; 
            font-weight:700; 
            color: var(--text-secondary); 
            margin-bottom:16px; 
            text-align:center; 
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        /* ============ 外层容器骨架（永久固定） ============ */
        .home-quick-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; max-width: 1080px; margin: 0 auto; }
        .ai-tools { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; max-width:920px; }

        /* ============ 主题默认卡片样式 ============ */
        .home-quick-card,
        .ai-tool-card {
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content: center;
            text-align:center;
            text-decoration:none;
            color: var(--text-primary);
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 22px 14px 18px;
            gap: 14px;
            border-radius: 20px;
            background: var(--bg-surface);
            border: 1px solid var(--border);
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            cursor: pointer;
            aspect-ratio: 1 / 1;
            min-width: 0;
            min-height: 100px;
        }
        .ai-tool-card {
            width: 150px;
            flex-shrink: 0;
        }
        .home-quick-icon,
        .ai-tool-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            font-size: 2.4rem;
            border-radius: 16px;
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
        }
        .home-quick-icon img,
        .ai-tool-icon img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }
        .home-quick-name,
        .ai-tool-card > span {
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.3;
            font-size: 0.82rem;
            width: 100%;
            position: relative;
            z-index: 1;
            transition: color 0.3s ease;
            max-width: 100%;
            flex-shrink: 0;
        }
        .home-quick-card:hover,
        .ai-tool-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in srgb, var(--accent) 40%, transparent);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }
        .home-quick-card:hover .home-quick-icon,
        .ai-tool-card:hover .ai-tool-icon {
            background: color-mix(in srgb, var(--accent) 20%, transparent);
            transform: scale(1.06);
        }
        .home-quick-card:hover .home-quick-name,
        .ai-tool-card:hover > span {
            color: var(--accent);
        }
        .home-quick-card:active,
        .ai-tool-card:active {
            transform: scale(0.96) !important;
            transition: transform 0.1s ease !important;
        }

        /* 壁纸模式下的卡片玻璃态 */
        .has-wallpaper .home-quick-card,
        .has-wallpaper .ai-tool-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

        /* ============ 首页卡片方案 1: 毛玻璃堆叠 ============ */
        .home-quick-grid.style-glass-stack,
        .ai-tools.style-glass-stack {
            gap: 14px;
        }
        .home-quick-grid.style-glass-stack .home-quick-card,
        .ai-tools.style-glass-stack .ai-tool-card {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 22px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.1) inset;
            padding: 22px 14px 18px;
            gap: 14px;
            aspect-ratio: 1/1;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .home-quick-grid.style-glass-stack .home-quick-icon,
        .ai-tools.style-glass-stack .ai-tool-icon {
            width: 56px; height: 56px;
            border-radius: 18px;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            font-size: 2rem;
        }
        .home-quick-grid.style-glass-stack .home-quick-name,
        .ai-tools.style-glass-stack .ai-tool-card > span {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.4px;
            color: var(--text-primary);
            text-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .home-quick-grid.style-glass-stack .home-quick-card:hover,
        .ai-tools.style-glass-stack .ai-tool-card:hover {
            background: rgba(255,255,255,0.22);
            border-color: rgba(255,255,255,0.45);
            box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.2) inset;
            transform: translateY(-6px) scale(1.03);
        }
        [data-theme$="-dark"] .home-quick-grid.style-glass-stack .home-quick-card,
        [data-theme$="-dark"] .ai-tools.style-glass-stack .ai-tool-card {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.12);
        }
        [data-theme$="-dark"] .home-quick-grid.style-glass-stack .home-quick-icon,
        [data-theme$="-dark"] .ai-tools.style-glass-stack .ai-tool-icon {
            background: rgba(255,255,255,0.1);
        }
        [data-theme$="-dark"] .home-quick-grid.style-glass-stack .home-quick-card:hover,
        [data-theme$="-dark"] .ai-tools.style-glass-stack .ai-tool-card:hover {
            background: rgba(255,255,255,0.12);
            border-color: rgba(255,255,255,0.25);
        }
        .has-wallpaper .home-quick-grid.style-glass-stack .home-quick-card,
        .has-wallpaper .ai-tools.style-glass-stack .ai-tool-card {
            background: rgba(0,0,0,0.2);
            border-color: rgba(255,255,255,0.2);
        }
        .has-wallpaper[data-theme$="-dark"] .home-quick-grid.style-glass-stack .home-quick-card,
        .has-wallpaper[data-theme$="-dark"] .ai-tools.style-glass-stack .ai-tool-card {
            background: rgba(0,0,0,0.35);
            border-color: rgba(255,255,255,0.15);
        }

        /* ============ 首页卡片方案 2: 新粗野主义 ============ */
        .home-quick-grid.style-neo-brutal,
        .ai-tools.style-neo-brutal {
            gap: 10px;
        }
        .home-quick-grid.style-neo-brutal .home-quick-card,
        .ai-tools.style-neo-brutal .ai-tool-card {
            background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
            border: 3px solid var(--text-primary);
            border-radius: 4px;
            box-shadow: 6px 6px 0px rgba(0,0,0,0.15);
            padding: 18px 10px 14px;
            gap: 10px;
            aspect-ratio: auto;
            min-height: 100px;
            transition: all 0.15s ease;
        }
        .home-quick-grid.style-neo-brutal .home-quick-icon,
        .ai-tools.style-neo-brutal .ai-tool-icon {
            width: 40px; height: 40px;
            border-radius: 2px;
            background: color-mix(in srgb, var(--accent-secondary) 25%, transparent);
            font-size: 1.6rem;
        }
        .home-quick-grid.style-neo-brutal .home-quick-name,
        .ai-tools.style-neo-brutal .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .home-quick-grid.style-neo-brutal .home-quick-card:hover,
        .ai-tools.style-neo-brutal .ai-tool-card:hover {
            transform: translate(-3px, -3px);
            box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
            border-color: var(--accent);
        }
        [data-theme$="-dark"] .home-quick-grid.style-neo-brutal .home-quick-card,
        [data-theme$="-dark"] .ai-tools.style-neo-brutal .ai-tool-card {
            border-color: var(--white-40);
            box-shadow: 6px 6px 0px color-mix(in srgb, var(--accent) 30%, transparent);
        }
        [data-theme$="-dark"] .home-quick-grid.style-neo-brutal .home-quick-card:hover,
        [data-theme$="-dark"] .ai-tools.style-neo-brutal .ai-tool-card:hover {
            box-shadow: 10px 10px 0px color-mix(in srgb, var(--accent) 50%, transparent);
        }
        .has-wallpaper .home-quick-grid.style-neo-brutal .home-quick-card,
        .has-wallpaper .ai-tools.style-neo-brutal .ai-tool-card {
            background: rgba(255,255,255,0.9);
        }
        .has-wallpaper[data-theme$="-dark"] .home-quick-grid.style-neo-brutal .home-quick-card,
        .has-wallpaper[data-theme$="-dark"] .ai-tools.style-neo-brutal .ai-tool-card {
            background: rgba(20,20,30,0.9);
        }

        /* ============ 首页卡片方案 3: 便当盒 ============ */
        .home-quick-grid.style-bento {
            gap: 14px;
            grid-auto-rows: auto;
        }
        .ai-tools.style-bento {
            gap: 14px;
        }
        .home-quick-grid.style-bento .home-quick-card,
        .ai-tools.style-bento .ai-tool-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 24px;
            box-shadow: var(--card-shadow);
            padding: 24px 16px 20px;
            gap: 16px;
            aspect-ratio: auto;
            min-height: 120px;
            transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
            position: relative;
            overflow: hidden;
        }
        .home-quick-grid.style-bento .home-quick-card::before,
        .ai-tools.style-bento .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent-tertiary));
            border-radius: 24px 24px 0 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .home-quick-grid.style-bento .home-quick-card:nth-child(3n+1)::before,
        .ai-tools.style-bento .ai-tool-card:nth-child(3n+1)::before {
            background: var(--accent);
            opacity: 1;
        }
        .home-quick-grid.style-bento .home-quick-card:nth-child(3n+2)::before,
        .ai-tools.style-bento .ai-tool-card:nth-child(3n+2)::before {
            background: var(--accent-secondary);
            opacity: 1;
        }
        .home-quick-grid.style-bento .home-quick-card:nth-child(3n+3)::before,
        .ai-tools.style-bento .ai-tool-card:nth-child(3n+3)::before {
            background: var(--accent-tertiary);
            opacity: 1;
        }
        .home-quick-grid.style-bento .home-quick-icon,
        .ai-tools.style-bento .ai-tool-icon {
            width: 52px; height: 52px;
            border-radius: 16px;
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            font-size: 2rem;
        }
        .home-quick-grid.style-bento .home-quick-name,
        .ai-tools.style-bento .ai-tool-card > span {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-bento .home-quick-card:hover,
        .ai-tools.style-bento .ai-tool-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--card-shadow-hover);
            border-color: var(--accent);
        }
        .has-wallpaper .home-quick-grid.style-bento .home-quick-card,
        .has-wallpaper .ai-tools.style-bento .ai-tool-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

        /* ============ 首页卡片方案 4: 瑞士风格 ============ */
        .home-quick-grid.style-swiss,
        .ai-tools.style-swiss {
            gap: 0;
        }
        .home-quick-grid.style-swiss .home-quick-card,
        .ai-tools.style-swiss .ai-tool-card {
            background: transparent;
            border: none;
            border-left: 3px solid transparent;
            border-radius: 0;
            box-shadow: none;
            padding: 14px 16px;
            gap: 14px;
            flex-direction: row;
            justify-content: flex-start;
            aspect-ratio: auto;
            min-height: auto;
            transition: all 0.25s ease;
        }
        .home-quick-grid.style-swiss .home-quick-icon,
        .ai-tools.style-swiss .ai-tool-icon {
            width: 36px; height: 36px;
            border-radius: 6px;
            background: transparent;
            font-size: 1.4rem;
        }
        .home-quick-grid.style-swiss .home-quick-name,
        .ai-tools.style-swiss .ai-tool-card > span {
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.2px;
            text-align: left;
            color: var(--text-secondary);
        }
        .home-quick-grid.style-swiss .home-quick-card:hover,
        .ai-tools.style-swiss .ai-tool-card:hover {
            background: var(--bg-hover);
            border-left-color: var(--accent);
            transform: none;
            box-shadow: none;
        }
        .home-quick-grid.style-swiss .home-quick-card:hover .home-quick-name,
        .ai-tools.style-swiss .ai-tool-card:hover > span {
            color: var(--accent);
            font-weight: 600;
        }

        /* ============ 首页卡片方案 5: 渐变幻彩 ============ */
        .home-quick-grid.style-gradient-shift,
        .ai-tools.style-gradient-shift {
            gap: 12px;
        }
        .home-quick-grid.style-gradient-shift .home-quick-card,
        .ai-tools.style-gradient-shift .ai-tool-card {
            border: none;
            border-radius: 18px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding: 20px 12px 16px;
            gap: 12px;
            aspect-ratio: 1/1;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
            color: #fff !important;
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+1),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+1) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+2),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+2) {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+3),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+3) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+4),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+4) {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+5),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+5) {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+6),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+6) {
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+7),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+7) {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            color: #4a3728 !important;
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+8),
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+8) {
            background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
        }
        .home-quick-grid.style-gradient-shift .home-quick-icon,
        .ai-tools.style-gradient-shift .ai-tool-icon {
            width: 50px; height: 50px;
            border-radius: 14px;
            background: rgba(255,255,255,0.25);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 2rem;
        }
        .home-quick-grid.style-gradient-shift .home-quick-name,
        .ai-tools.style-gradient-shift .ai-tool-card > span {
            font-size: 0.8rem;
            font-weight: 600;
            text-shadow: 0 1px 3px rgba(0,0,0,0.2);
            color: inherit;
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+7) .home-quick-name,
        .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+7) > span {
            text-shadow: 0 1px 2px rgba(255,255,255,0.4);
        }
        .home-quick-grid.style-gradient-shift .home-quick-card:hover,
        .ai-tools.style-gradient-shift .ai-tool-card:hover {
            transform: translateY(-6px) scale(1.04);
            box-shadow: 0 12px 36px rgba(0,0,0,0.2);
            filter: brightness(1.08);
        }
        [data-theme$="-dark"] .home-quick-grid.style-gradient-shift .home-quick-card:nth-child(8n+7),
        [data-theme$="-dark"] .ai-tools.style-gradient-shift .ai-tool-card:nth-child(8n+7) {
            color: #4a3728 !important;
        }

        /* ============ 首页卡片方案 6: 复古波 ============ */
        .home-quick-grid.style-retro-wave,
        .ai-tools.style-retro-wave {
            gap: 12px;
        }
        .home-quick-grid.style-retro-wave .home-quick-card,
        .ai-tools.style-retro-wave .ai-tool-card {
            background: linear-gradient(180deg, #1a1040 0%, #0d0820 100%);
            border: 2px solid transparent;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(128,0,255,0.2), 0 0 0 1px rgba(128,0,255,0.1) inset;
            padding: 18px 10px 14px;
            gap: 10px;
            aspect-ratio: 1/1;
            transition: all 0.3s ease;
            overflow: visible;
        }
        .home-quick-grid.style-retro-wave .home-quick-card:nth-child(6n+1),
        .ai-tools.style-retro-wave .ai-tool-card:nth-child(6n+1) {
            border-color: #ff00ff;
            box-shadow: 0 0 24px rgba(255,0,255,0.3), 0 0 0 1px rgba(255,0,255,0.15) inset;
        }
        .home-quick-grid.style-retro-wave .home-quick-card:nth-child(6n+2),
        .ai-tools.style-retro-wave .ai-tool-card:nth-child(6n+2) {
            border-color: #00ffff;
            box-shadow: 0 0 24px rgba(0,255,255,0.3), 0 0 0 1px rgba(0,255,255,0.15) inset;
        }
        .home-quick-grid.style-retro-wave .home-quick-card:nth-child(6n+3),
        .ai-tools.style-retro-wave .ai-tool-card:nth-child(6n+3) {
            border-color: #ff6b35;
            box-shadow: 0 0 24px rgba(255,107,53,0.3), 0 0 0 1px rgba(255,107,53,0.15) inset;
        }
        .home-quick-grid.style-retro-wave .home-quick-card:nth-child(6n+4),
        .ai-tools.style-retro-wave .ai-tool-card:nth-child(6n+4) {
            border-color: #39ff14;
            box-shadow: 0 0 24px rgba(57,255,20,0.3), 0 0 0 1px rgba(57,255,20,0.15) inset;
        }
        .home-quick-grid.style-retro-wave .home-quick-card:nth-child(6n+5),
        .ai-tools.style-retro-wave .ai-tool-card:nth-child(6n+5) {
            border-color: #ffd700;
            box-shadow: 0 0 24px rgba(255,215,0,0.3), 0 0 0 1px rgba(255,215,0,0.15) inset;
        }
        .home-quick-grid.style-retro-wave .home-quick-card:nth-child(6n+6),
        .ai-tools.style-retro-wave .ai-tool-card:nth-child(6n+6) {
            border-color: #ff1493;
            box-shadow: 0 0 24px rgba(255,20,147,0.3), 0 0 0 1px rgba(255,20,147,0.15) inset;
        }
        .home-quick-grid.style-retro-wave .home-quick-icon,
        .ai-tools.style-retro-wave .ai-tool-icon {
            width: 48px; height: 48px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            font-size: 1.8rem;
            filter: drop-shadow(0 0 6px currentColor);
        }
        .home-quick-grid.style-retro-wave .home-quick-name,
        .ai-tools.style-retro-wave .ai-tool-card > span {
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.85);
        }
        .home-quick-grid.style-retro-wave .home-quick-card:hover,
        .ai-tools.style-retro-wave .ai-tool-card:hover {
            transform: translateY(-4px) scale(1.05);
            filter: brightness(1.3);
        }
        .has-wallpaper .home-quick-grid.style-retro-wave .home-quick-card,
        .has-wallpaper .ai-tools.style-retro-wave .ai-tool-card {
            background: linear-gradient(180deg, rgba(26,16,64,0.85) 0%, rgba(13,8,32,0.85) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* ============ 首页卡片方案 7: 软浮雕 ============ */
        .home-quick-grid.style-soft-emboss,
        .ai-tools.style-soft-emboss {
            gap: 18px;
        }
        .home-quick-grid.style-soft-emboss .home-quick-card,
        .ai-tools.style-soft-emboss .ai-tool-card {
            background: var(--bg-page, #f0f0f3);
            border: none;
            border-radius: 24px;
            box-shadow: 8px 8px 16px rgba(0,0,0,0.06), -8px -8px 16px rgba(255,255,255,0.8);
            padding: 22px 12px 18px;
            gap: 14px;
            aspect-ratio: 1/1;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .home-quick-grid.style-soft-emboss .home-quick-icon,
        .ai-tools.style-soft-emboss .ai-tool-icon {
            width: 54px; height: 54px;
            border-radius: 18px;
            background: var(--bg-page, #f0f0f3);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.06), -4px -4px 8px rgba(255,255,255,0.7);
            font-size: 2rem;
        }
        .home-quick-grid.style-soft-emboss .home-quick-name,
        .ai-tools.style-soft-emboss .ai-tool-card > span {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-soft-emboss .home-quick-card:hover,
        .ai-tools.style-soft-emboss .ai-tool-card:hover {
            box-shadow: 4px 4px 8px rgba(0,0,0,0.04), -4px -4px 8px rgba(255,255,255,0.6), inset 2px 2px 4px rgba(0,0,0,0.02), inset -2px -2px 4px rgba(255,255,255,0.5);
            transform: translateY(-2px);
        }
        [data-theme$="-dark"] .home-quick-grid.style-soft-emboss .home-quick-card,
        [data-theme$="-dark"] .ai-tools.style-soft-emboss .ai-tool-card {
            background: var(--bg-page, #1a1a2e);
            box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -2px -2px 8px rgba(255,255,255,0.05);
        }
        [data-theme$="-dark"] .home-quick-grid.style-soft-emboss .home-quick-icon,
        [data-theme$="-dark"] .ai-tools.style-soft-emboss .ai-tool-icon {
            background: var(--bg-page, #1a1a2e);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.4), -2px -2px 4px rgba(255,255,255,0.05);
        }

        /* ============ 首页卡片方案 8: 全息框体 ============ */
        .home-quick-grid.style-holo-frame,
        .ai-tools.style-holo-frame {
            gap: 14px;
        }
        .home-quick-grid.style-holo-frame .home-quick-card,
        .ai-tools.style-holo-frame .ai-tool-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 20px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.3);
            padding: 20px 12px 16px;
            gap: 12px;
            aspect-ratio: 1/1;
            transition: all 0.35s ease;
            position: relative;
            overflow: hidden;
        }
        .home-quick-grid.style-holo-frame .home-quick-card::after,
        .ai-tools.style-holo-frame .ai-tool-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            padding: 1px;
            background: linear-gradient(135deg, 
                rgba(100,200,255,0.3), rgba(200,100,255,0.3), 
                rgba(100,255,200,0.3), rgba(255,200,100,0.3));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }
        .home-quick-grid.style-holo-frame .home-quick-icon,
        .ai-tools.style-holo-frame .ai-tool-icon {
            width: 48px; height: 48px;
            border-radius: 14px;
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 1.8rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .home-quick-grid.style-holo-frame .home-quick-name,
        .ai-tools.style-holo-frame .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            color: rgba(255,255,255,0.8);
        }
        .home-quick-grid.style-holo-frame .home-quick-card:hover,
        .ai-tools.style-holo-frame .ai-tool-card:hover {
            background: rgba(255,255,255,0.08);
            transform: translateY(-4px);
            box-shadow: 0 8px 32px rgba(100,150,255,0.2);
        }
        .home-quick-grid.style-holo-frame .home-quick-card:hover::after,
        .ai-tools.style-holo-frame .ai-tool-card:hover::after {
            opacity: 1;
        }
        [data-theme$="-light"] .home-quick-grid.style-holo-frame .home-quick-card,
        [data-theme$="-light"] .ai-tools.style-holo-frame .ai-tool-card {
            background: rgba(255,255,255,0.5);
            border-color: rgba(0,0,0,0.08);
        }
        [data-theme$="-light"] .home-quick-grid.style-holo-frame .home-quick-name,
        [data-theme$="-light"] .ai-tools.style-holo-frame .ai-tool-card > span {
            color: rgba(30,30,50,0.85);
        }
        [data-theme$="-light"] .home-quick-grid.style-holo-frame .home-quick-icon,
        [data-theme$="-light"] .ai-tools.style-holo-frame .ai-tool-icon {
            background: rgba(0,0,0,0.04);
            border-color: rgba(0,0,0,0.08);
        }
        .has-wallpaper .home-quick-grid.style-holo-frame .home-quick-card,
        .has-wallpaper .ai-tools.style-holo-frame .ai-tool-card {
            background: rgba(10,10,20,0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* ============ 首页卡片方案 9: 奢金线 ============ */
        .home-quick-grid.style-luxe-line,
        .ai-tools.style-luxe-line {
            gap: 12px;
        }
        .home-quick-grid.style-luxe-line .home-quick-card,
        .ai-tools.style-luxe-line .ai-tool-card {
            background: linear-gradient(180deg, var(--bg-surface) 0%, color-mix(in srgb, var(--bg-surface) 95%, #c9a84c) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            padding: 20px 12px 16px;
            gap: 14px;
            aspect-ratio: 1/1;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
            position: relative;
            overflow: hidden;
        }
        .home-quick-grid.style-luxe-line .home-quick-card::before,
        .ai-tools.style-luxe-line .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0; left: 10%; right: 10%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #c9a84c, #e8d48b, #c9a84c, transparent);
            border-radius: 1px;
        }
        .home-quick-grid.style-luxe-line .home-quick-icon,
        .ai-tools.style-luxe-line .ai-tool-icon {
            width: 50px; height: 50px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(232,212,139,0.06));
            border: 1.5px solid rgba(201,168,76,0.2);
            font-size: 1.8rem;
        }
        .home-quick-grid.style-luxe-line .home-quick-name,
        .ai-tools.style-luxe-line .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            color: var(--text-primary);
        }
        .home-quick-grid.style-luxe-line .home-quick-card:hover,
        .ai-tools.style-luxe-line .ai-tool-card:hover {
            transform: translateY(-4px);
            border-color: rgba(201,168,76,0.4);
            box-shadow: 0 8px 28px rgba(201,168,76,0.15);
            background: linear-gradient(180deg, var(--bg-surface) 0%, color-mix(in srgb, var(--bg-surface) 90%, #c9a84c) 100%);
        }
        .home-quick-grid.style-luxe-line .home-quick-card:hover::before,
        .ai-tools.style-luxe-line .ai-tool-card:hover::before {
            background: linear-gradient(90deg, transparent, #e8d48b, #f5e6a3, #e8d48b, transparent);
        }
        .has-wallpaper .home-quick-grid.style-luxe-line .home-quick-card,
        .has-wallpaper .ai-tools.style-luxe-line .ai-tool-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: rgba(255,255,255,0.75);
        }
        .has-wallpaper[data-theme$="-dark"] .home-quick-grid.style-luxe-line .home-quick-card,
        .has-wallpaper[data-theme$="-dark"] .ai-tools.style-luxe-line .ai-tool-card {
            background: rgba(20,20,30,0.8);
        }

        /* ============ 首页卡片方案 10: 全景浮岛 ============ */
        .home-quick-grid.style-panorama,
        .ai-tools.style-panorama {
            gap: 20px;
        }
        .home-quick-grid.style-panorama .home-quick-card,
        .ai-tools.style-panorama .ai-tool-card {
            background: var(--bg-surface);
            border: none;
            border-radius: 20px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.03);
            padding: 26px 16px 22px;
            gap: 16px;
            aspect-ratio: 1/1;
            transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1.2);
            position: relative;
        }
        .home-quick-grid.style-panorama .home-quick-icon,
        .ai-tools.style-panorama .ai-tool-icon {
            width: 58px; height: 58px;
            border-radius: 18px;
            background: color-mix(in srgb, var(--accent) 8%, transparent);
            font-size: 2.2rem;
            transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1.2);
        }
        .home-quick-grid.style-panorama .home-quick-name,
        .ai-tools.style-panorama .ai-tool-card > span {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-panorama .home-quick-card:hover,
        .ai-tools.style-panorama .ai-tool-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 24px 56px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.05);
            background: color-mix(in srgb, var(--bg-surface) 98%, var(--accent));
        }
        .home-quick-grid.style-panorama .home-quick-card:hover .home-quick-icon,
        .ai-tools.style-panorama .ai-tool-card:hover .ai-tool-icon {
            transform: scale(1.1);
            background: color-mix(in srgb, var(--accent) 18%, transparent);
        }
        .has-wallpaper .home-quick-grid.style-panorama .home-quick-card,
        .has-wallpaper .ai-tools.style-panorama .ai-tool-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            background: rgba(255,255,255,0.78);
        }
        .has-wallpaper[data-theme$="-dark"] .home-quick-grid.style-panorama .home-quick-card,
        .has-wallpaper[data-theme$="-dark"] .ai-tools.style-panorama .ai-tool-card {
            background: rgba(20,25,40,0.82);
        }

        /* ============ 首页卡片方案 11: 几何镂空 ============ */
        .home-quick-grid.style-geo-cutout,
        .ai-tools.style-geo-cutout {
            gap: 16px;
        }
        .home-quick-grid.style-geo-cutout .home-quick-card,
        .ai-tools.style-geo-cutout .ai-tool-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 16px 8px 16px 8px;
            clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
            box-shadow: var(--card-shadow);
            padding: 24px 12px 20px;
            gap: 14px;
            aspect-ratio: 1/1;
            transition: all 0.35s ease;
            position: relative;
        }
        .home-quick-grid.style-geo-cutout .home-quick-card::before,
        .ai-tools.style-geo-cutout .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 40px; height: 40px;
            background: linear-gradient(135deg, var(--accent) 0%, transparent 100%);
            opacity: 0.15;
            clip-path: polygon(100% 0, 0 0, 100% 100%);
        }
        .home-quick-grid.style-geo-cutout .home-quick-card::after,
        .ai-tools.style-geo-cutout .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 40px; height: 40px;
            background: linear-gradient(-45deg, var(--accent) 0%, transparent 100%);
            opacity: 0.15;
            clip-path: polygon(0 100%, 100% 100%, 0 0);
        }
        .home-quick-grid.style-geo-cutout .home-quick-icon,
        .ai-tools.style-geo-cutout .ai-tool-icon {
            width: 52px; height: 52px;
            border-radius: 12px 4px 12px 4px;
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            font-size: 2rem;
            clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%);
        }
        .home-quick-grid.style-geo-cutout .home-quick-name,
        .ai-tools.style-geo-cutout .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-geo-cutout .home-quick-card:hover,
        .ai-tools.style-geo-cutout .ai-tool-card:hover {
            transform: translateY(-4px) rotate(-1deg);
            clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%);
        }
        .home-quick-grid.style-geo-cutout .home-quick-card:hover::before,
        .ai-tools.style-geo-cutout .ai-tool-card:hover::before,
        .home-quick-grid.style-geo-cutout .home-quick-card:hover::after,
        .ai-tools.style-geo-cutout .ai-tool-card:hover::after {
            opacity: 0.3;
        }

        /* ============ 首页卡片方案 12: 堆叠宝丽来 ============ */
        .home-quick-grid.style-polaroid,
        .ai-tools.style-polaroid {
            gap: 24px;
            padding: 10px;
        }
        .home-quick-grid.style-polaroid .home-quick-card,
        .ai-tools.style-polaroid .ai-tool-card {
            background: linear-gradient(180deg, var(--bg-surface) 75%, #fff 75%);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: 4px 4px 0 rgba(0,0,0,0.1), 6px 6px 0 rgba(0,0,0,0.05);
            padding: 14px 14px 28px;
            gap: 10px;
            aspect-ratio: 1/1.3;
            transition: all 0.35s ease;
            transform: rotate(-1deg);
        }
        .home-quick-grid.style-polaroid .home-quick-card:nth-child(even),
        .ai-tools.style-polaroid .ai-tool-card:nth-child(even) {
            transform: rotate(2deg);
        }
        .home-quick-grid.style-polaroid .home-quick-card:nth-child(3n),
        .ai-tools.style-polaroid .ai-tool-card:nth-child(3n) {
            transform: rotate(-2deg);
        }
        .home-quick-grid.style-polaroid .home-quick-icon,
        .ai-tools.style-polaroid .ai-tool-icon {
            width: 100%;
            height: 70px;
            border-radius: 2px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-secondary) 10%, transparent));
            font-size: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .home-quick-grid.style-polaroid .home-quick-name,
        .ai-tools.style-polaroid .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 600;
            color: #333;
            font-family: 'Courier New', monospace;
        }
        .home-quick-grid.style-polaroid .home-quick-card:hover,
        .ai-tools.style-polaroid .ai-tool-card:hover {
            transform: translateY(-8px) rotate(0deg) scale(1.05);
            box-shadow: 8px 8px 0 rgba(0,0,0,0.15), 12px 12px 0 rgba(0,0,0,0.08);
            z-index: 10;
        }
        [data-theme$="-dark"] .home-quick-grid.style-polaroid .home-quick-card,
        [data-theme$="-dark"] .ai-tools.style-polaroid .ai-tool-card {
            background: linear-gradient(180deg, var(--bg-surface) 75%, #2a2a3a 75%);
        }
        [data-theme$="-dark"] .home-quick-grid.style-polaroid .home-quick-name,
        [data-theme$="-dark"] .ai-tools.style-polaroid .ai-tool-card > span {
            color: #ddd;
        }

        /* ============ 首页卡片方案 13: 六边形蜂巢 ============ */
        .home-quick-grid.style-hex-honey,
        .ai-tools.style-hex-honey {
            gap: 8px;
            padding: 10px;
        }
        .home-quick-grid.style-hex-honey .home-quick-card,
        .ai-tools.style-hex-honey .ai-tool-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            box-shadow: var(--card-shadow);
            padding: 18px 12px 12px;
            gap: 8px;
            aspect-ratio: 1/0.866;
            transition: all 0.35s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 0;
        }
        .home-quick-grid.style-hex-honey .home-quick-icon,
        .ai-tools.style-hex-honey .ai-tool-icon {
            width: 48px;
            height: 48px;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: color-mix(in srgb, var(--accent) 12%, transparent);
            font-size: 1.8rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .home-quick-grid.style-hex-honey .home-quick-name,
        .ai-tools.style-hex-honey .ai-tool-card > span {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            width: 100%;
            max-width: 100%;
            line-height: 1.2;
        }
        .home-quick-grid.style-hex-honey .home-quick-card:hover,
        .ai-tools.style-hex-honey .ai-tool-card:hover {
            transform: scale(1.1);
            z-index: 10;
        }

        /* ============ 首页卡片方案 14: 浮动标签 ============ */
        .home-quick-grid.style-float-tag,
        .ai-tools.style-float-tag {
            gap: 12px;
        }
        .home-quick-grid.style-float-tag .home-quick-card,
        .ai-tools.style-float-tag .ai-tool-card {
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-secondary) 6%, transparent));
            border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
            border-radius: 50px;
            box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 15%, transparent);
            padding: 14px 20px;
            gap: 10px;
            flex-direction: row;
            align-items: center;
            aspect-ratio: auto;
            min-height: auto;
            transition: all 0.35s ease;
        }
        .home-quick-grid.style-float-tag .home-quick-icon,
        .ai-tools.style-float-tag .ai-tool-icon {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            font-size: 1.4rem;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .home-quick-grid.style-float-tag .home-quick-name,
        .ai-tools.style-float-tag .ai-tool-card > span {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-float-tag .home-quick-card:hover,
        .ai-tools.style-float-tag .ai-tool-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 25%, transparent);
        }

        /* ============ 首页卡片方案 15: 菱形网格 ============ */
        .home-quick-grid.style-diamond-mesh,
        .ai-tools.style-diamond-mesh {
            gap: 20px;
        }
        .home-quick-grid.style-diamond-mesh .home-quick-card,
        .ai-tools.style-diamond-mesh .ai-tool-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            box-shadow: var(--card-shadow);
            padding: 24px 16px 20px;
            gap: 14px;
            aspect-ratio: 1/1;
            transition: all 0.35s ease;
            transform: rotate(45deg);
        }
        .home-quick-grid.style-diamond-mesh .home-quick-card > *,
        .ai-tools.style-diamond-mesh .ai-tool-card > * {
            transform: rotate(-45deg);
        }
        .home-quick-grid.style-diamond-mesh .home-quick-icon,
        .ai-tools.style-diamond-mesh .ai-tool-icon {
            width: 48px; height: 48px;
            background: color-mix(in srgb, var(--accent) 10%, transparent);
            font-size: 1.8rem;
        }
        .home-quick-grid.style-diamond-mesh .home-quick-name,
        .ai-tools.style-diamond-mesh .ai-tool-card > span {
            font-size: 0.76rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-diamond-mesh .home-quick-card:hover,
        .ai-tools.style-diamond-mesh .ai-tool-card:hover {
            transform: rotate(45deg) scale(1.1);
            z-index: 10;
        }

        /* ============ 首页卡片方案 16: 分层票根 ============ */
        .home-quick-grid.style-layer-ticket,
        .ai-tools.style-layer-ticket {
            gap: 18px;
        }
        .home-quick-grid.style-layer-ticket .home-quick-card,
        .ai-tools.style-layer-ticket .ai-tool-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 18px 14px 16px;
            gap: 12px;
            aspect-ratio: 1/1;
            transition: all 0.35s ease;
            position: relative;
        }
        .home-quick-grid.style-layer-ticket .home-quick-card::before,
        .ai-tools.style-layer-ticket .ai-tool-card::before {
            content: '';
            position: absolute;
            left: -6px; top: 50%;
            transform: translateY(-50%);
            width: 12px; height: 30px;
            background: radial-gradient(circle at center, transparent 3px, var(--bg-page) 4px);
            background-size: 6px 6px;
        }
        .home-quick-grid.style-layer-ticket .home-quick-card::after,
        .ai-tools.style-layer-ticket .ai-tool-card::after {
            content: '';
            position: absolute;
            right: -6px; top: 50%;
            transform: translateY(-50%);
            width: 12px; height: 30px;
            background: radial-gradient(circle at center, transparent 3px, var(--bg-page) 4px);
            background-size: 6px 6px;
        }
        .home-quick-grid.style-layer-ticket .home-quick-icon,
        .ai-tools.style-layer-ticket .ai-tool-icon {
            width: 50px; height: 50px;
            border-radius: 6px;
            border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
            background: color-mix(in srgb, var(--accent) 8%, transparent);
            font-size: 1.9rem;
        }
        .home-quick-grid.style-layer-ticket .home-quick-name,
        .ai-tools.style-layer-ticket .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-layer-ticket .home-quick-card:hover,
        .ai-tools.style-layer-ticket .ai-tool-card:hover {
            transform: translateY(-4px);
        }

        /* ============ 首页卡片方案 17: 曲线对角 ============ */
        .home-quick-grid.style-curved-diag,
        .ai-tools.style-curved-diag {
            gap: 14px;
        }
        .home-quick-grid.style-curved-diag .home-quick-card,
        .ai-tools.style-curved-diag .ai-tool-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            border-radius: 0 40px 0 40px;
            box-shadow: var(--card-shadow);
            padding: 22px 16px 20px;
            gap: 12px;
            aspect-ratio: 1/1;
            transition: all 0.35s ease;
        }
        .home-quick-grid.style-curved-diag .home-quick-card:nth-child(even),
        .ai-tools.style-curved-diag .ai-tool-card:nth-child(even) {
            border-radius: 40px 0 40px 0;
        }
        .home-quick-grid.style-curved-diag .home-quick-icon,
        .ai-tools.style-curved-diag .ai-tool-icon {
            width: 52px; height: 52px;
            border-radius: 0 20px 0 20px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent);
            font-size: 2rem;
        }
        .home-quick-grid.style-curved-diag .home-quick-card:nth-child(even) .home-quick-icon,
        .ai-tools.style-curved-diag .ai-tool-card:nth-child(even) .ai-tool-icon {
            border-radius: 20px 0 20px 0;
        }
        .home-quick-grid.style-curved-diag .home-quick-name,
        .ai-tools.style-curved-diag .ai-tool-card > span {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-curved-diag .home-quick-card:hover,
        .ai-tools.style-curved-diag .ai-tool-card:hover {
            transform: translateY(-6px) scale(1.02);
            border-radius: 0 30px 0 30px;
        }
        .home-quick-grid.style-curved-diag .home-quick-card:nth-child(even):hover,
        .ai-tools.style-curved-diag .ai-tool-card:nth-child(even):hover {
            border-radius: 30px 0 30px 0;
        }

        /* ============ 首页卡片方案 18: 折纸折痕 ============ */
        .home-quick-grid.style-origami,
        .ai-tools.style-origami {
            gap: 16px;
        }
        .home-quick-grid.style-origami .home-quick-card,
        .ai-tools.style-origami .ai-tool-card {
            background: linear-gradient(135deg, var(--bg-surface) 50%, color-mix(in srgb, var(--bg-surface) 85%, #000) 50%);
            border: 1px solid var(--border);
            border-radius: 4px;
            box-shadow: var(--card-shadow);
            padding: 22px 14px 20px;
            gap: 14px;
            aspect-ratio: 1/1;
            transition: all 0.35s ease;
            position: relative;
        }
        .home-quick-grid.style-origami .home-quick-card::before,
        .ai-tools.style-origami .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            right: 0; bottom: 0;
            background: linear-gradient(135deg, transparent 48%, rgba(0,0,0,0.05) 50%, transparent 52%);
            pointer-events: none;
        }
        .home-quick-grid.style-origami .home-quick-card::after,
        .ai-tools.style-origami .ai-tool-card::after {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 40px; height: 40px;
            background: color-mix(in srgb, var(--accent) 15%, transparent);
            clip-path: polygon(0 0, 100% 0, 100% 100%);
        }
        .home-quick-grid.style-origami .home-quick-icon,
        .ai-tools.style-origami .ai-tool-icon {
            width: 50px; height: 50px;
            border-radius: 2px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-secondary) 6%, transparent));
            font-size: 1.9rem;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
        }
        .home-quick-grid.style-origami .home-quick-name,
        .ai-tools.style-origami .ai-tool-card > span {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .home-quick-grid.style-origami .home-quick-card:hover,
        .ai-tools.style-origami .ai-tool-card:hover {
            transform: translateY(-4px) rotate(2deg);
            box-shadow: 6px 6px 0 rgba(0,0,0,0.1);
        }

        .bookmarks-view { 
            display:flex; 
            height:100%; 
            overflow:hidden; 
            background: transparent; 
        }
        .sidebar {
            width:var(--sidebar-width); 
            min-width:300px; 
            max-width:500px;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border-right: none;
            display:flex; flex-direction:column; flex-shrink: 0;
            margin-right: -1px;
            box-shadow: none;
            transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, border-right-width 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .sidebar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 1px;
            bottom: 0;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            z-index: -1;
            transition: background 0.4s ease;
        }
        .sidebar.hidden {
            width: 0 !important;
            min-width: 0 !important;
            max-width: 0 !important;
            overflow: hidden !important;
            border-right-width: 0 !important;
            box-shadow: none !important;
            opacity: 0;
        }
        .sidebar > * {
            transition: opacity 0.15s ease 0.2s;
        }
        .sidebar.hidden > * {
            overflow: hidden !important;
            opacity: 0;
            transition: opacity 0.1s ease 0s;
        }
        [data-theme$="-dark"] .sidebar {
            background: transparent;
            border-right:0;
            box-shadow: none;
        }
        .sidebar-header {
            padding:20px; 
            font-weight:800; 
            border-bottom:none;
            display:flex; justify-content:space-between; align-items:center;
            color: var(--text-primary);
            position: relative;
            z-index: 1;
        }
        .sidebar-header svg { width:20px; height:20px; stroke:currentColor; }
        .toggle-collapse-btn {
            background: var(--bg-hover); 
            border: none; 
            cursor: pointer; 
            color: var(--accent);
            width: 38px; 
            height: 38px; 
            border-radius: var(--radius-sm); 
            display: flex; 
            align-items: center; 
            justify-content: center;
            transition: all var(--transition-normal);
        }
        .toggle-collapse-btn:hover { 
            background: var(--bg-active); 
            color: var(--accent-hover);
            transform: translateY(-2px);
        }
        /* 移除旋转效果，改用path d属性切换图标方向 */
        .tree-scroll { flex:1; overflow-y:auto; padding:12px 0; }
        
        /* 全局统一滚动条样式 - 适用于所有主题 */
        .tree-scroll::-webkit-scrollbar,
        .cards-body::-webkit-scrollbar,
        .home-view::-webkit-scrollbar {
            width: 8px;
        }
        
        .tree-scroll::-webkit-scrollbar-track,
        .cards-body::-webkit-scrollbar-track,
        .home-view::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 4px;
        }
        
        .tree-scroll::-webkit-scrollbar-thumb,
        .cards-body::-webkit-scrollbar-thumb,
        .home-view::-webkit-scrollbar-thumb {
            background: rgba(128, 128, 128, 0.3);
            border-radius: 4px;
            border: 2px solid transparent;
            background-clip: padding-box;
            transition: background 0.3s ease;
        }
        
        .tree-scroll::-webkit-scrollbar-thumb:hover,
        .cards-body::-webkit-scrollbar-thumb:hover,
        .home-view::-webkit-scrollbar-thumb:hover {
            background: rgba(128, 128, 128, 0.5);
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        .tree-scroll::-webkit-scrollbar-thumb:active,
        .cards-body::-webkit-scrollbar-thumb:active,
        .home-view::-webkit-scrollbar-thumb:active {
            background: rgba(128, 128, 128, 0.7);
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        /* Firefox 滚动条样式 */
        .tree-scroll,
        .cards-body,
        .home-view {
            scrollbar-width: thin;
            scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
        }
        
        /* 深色主题下的滚动条 */
        [data-theme$="-dark"] .tree-scroll::-webkit-scrollbar-thumb,
        [data-theme$="-dark"] .cards-body::-webkit-scrollbar-thumb,
        [data-theme$="-dark"] .home-view::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        [data-theme$="-dark"] .tree-scroll::-webkit-scrollbar-thumb:hover,
        [data-theme$="-dark"] .cards-body::-webkit-scrollbar-thumb:hover,
        [data-theme$="-dark"] .home-view::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.35);
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        [data-theme$="-dark"] .tree-scroll::-webkit-scrollbar-thumb:active,
        [data-theme$="-dark"] .cards-body::-webkit-scrollbar-thumb:active,
        [data-theme$="-dark"] .home-view::-webkit-scrollbar-thumb:active {
            background: rgba(255, 255, 255, 0.5);
            border: 2px solid transparent;
            background-clip: padding-box;
        }
        
        [data-theme$="-dark"] .tree-scroll,
        [data-theme$="-dark"] .cards-body,
        [data-theme$="-dark"] .home-view {
            scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
        }
        .all-bookmarks-item {
            padding:12px 20px; cursor:pointer; 
            border-left:3px solid transparent; 
            color: var(--text-primary);
            margin: 2px 8px;
            border-radius: var(--radius-sm);
            transition: all var(--transition-normal);
            font-weight:400;
        }
        .all-bookmarks-item.active { 
            background: var(--bg-active);
            color: var(--accent); 
            border-left-color: var(--accent-hover); 
        }
        .all-bookmarks-item:hover {
            background: var(--bg-hover);
            transform: translateX(4px);
        }
        .tree-item {
            display:flex; align-items:center; 
            padding:10px 20px; 
            cursor:pointer;
            border-left:3px solid transparent; 
            color: var(--text-primary);
            margin: 2px 8px;
            border-radius: var(--radius-sm);
            transition: all var(--transition-normal);
            font-weight:400;
        }
        .tree-item.active { 
            background: var(--bg-active);
            color: var(--accent); 
            border-left-color: var(--accent-hover); 
        }
        .tree-item:hover {
            background: var(--bg-hover);
            transform: translateX(4px);
        }
        .tree-item.drag-over { 
            background: var(--bg-active);
            outline: 2px dashed var(--accent); 
        }
        .tree-icon { margin-right:10px; width:22px; }
        .tree-icon svg { stroke:currentColor; }
        .tree-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .tree-badge {
            margin-left:10px; 
            background: var(--accent); 
            padding:3px 10px; 
            border-radius:12px; 
            font-size:0.72rem; 
            color: white;
            font-weight:700;
            text-shadow: 0 1px 3px rgba(0,0,0,0.4);
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }

        .dropdown-item:hover {
            background: var(--bg-hover);
        }
        .sidebar-footer {
            padding:16px 20px; 
            font-size:0.75rem; 
            color: var(--text-secondary); 
            border-top:none; 
            display: flex; 
            align-items: center; 
            gap: 8px;
            position: relative;
            z-index: 1;
        }
        .sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; opacity: 0.6; }
        .sync-dot.online { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.2); }
        .sync-dot.syncing { background: #f59e0b; animation: pulse 1.5s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
        .resizer { width:8px; cursor:col-resize; background:transparent; flex-shrink: 0; transition: background var(--transition-fast); }
        .resizer:hover { background: var(--bg-active); }

        /* 侧边栏切换按钮：默认使用icon-btn样式，不需要额外样式 */
        #toggleSidebarBtn {
            display: flex;
        }
        
        /* 非编辑模式下隐藏添加文件夹和添加书签按钮 */
        body:not(.editing) #addFolderBtn,
        body:not(.editing) #addBookmarkBtn,
        body:not(.editing) #addFolderBtn2,
        body:not(.editing) #addBookmarkBtn2 {
            display: none !important;
        }
        
        /* 侧边栏隐藏时，按钮显示在左边，使用玻璃态效果 */
        body.sidebar-hidden #toggleSidebarBtn {
            position: fixed;
            top: 96px;
            left: 8px;
            z-index: 100;
            width: 42px;
            height: 42px;
            background: linear-gradient(135deg, hsla(var(--hue-primary), 70%, 60%, 0.15), hsla(var(--hue-accent), 65%, 60%, 0.1));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid hsla(var(--hue-primary), 60%, 60%, 0.25);
            border-radius: var(--radius-md);
            box-shadow: 0 4px 16px hsla(var(--hue-primary), 60%, 50%, 0.12), 
                        0 2px 8px hsla(0, 0%, 100%, 0.3) inset;
        }
        
        body.sidebar-hidden #toggleSidebarBtn svg {
            transform: rotate(180deg);
        }
        
        body.sidebar-hidden #toggleSidebarBtn:hover {
            background: linear-gradient(135deg, hsla(var(--hue-primary), 70%, 60%, 0.25), hsla(var(--hue-accent), 65%, 60%, 0.2));
        }
        /* 壁纸模式下的玻璃态效果增强 - 亮色主题（仅当侧边栏隐藏时） */
        body.sidebar-hidden.has-wallpaper:not([data-theme$="-dark"]) #toggleSidebarBtn {
            background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.15), hsla(0, 0%, 100%, 0.08));
            border-color: hsla(0, 0%, 100%, 0.25);
            color: var(--text-secondary);
        }
        body.sidebar-hidden.has-wallpaper:not([data-theme$="-dark"]) #toggleSidebarBtn:hover {
            background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.15));
            color: var(--text-primary);
            border-color: hsla(0, 0%, 100%, 0.35);
        }
        /* 壁纸模式下的玻璃态效果增强 - 暗色主题（仅当侧边栏隐藏时） */
        body.sidebar-hidden.has-wallpaper[data-theme$="-dark"] #toggleSidebarBtn {
            background: linear-gradient(135deg, hsla(var(--hue-primary), 40%, 20%, 0.3), hsla(var(--hue-accent), 35%, 25%, 0.2));
            border-color: hsla(var(--hue-primary), 50%, 50%, 0.3);
            color: rgba(255, 255, 255, 0.9);
        }
        body.sidebar-hidden.has-wallpaper[data-theme$="-dark"] #toggleSidebarBtn:hover {
            background: linear-gradient(135deg, hsla(var(--hue-primary), 40%, 25%, 0.4), hsla(var(--hue-accent), 35%, 30%, 0.3));
            border-color: hsla(var(--hue-primary), 50%, 50%, 0.45);
            color: rgba(255, 255, 255, 1);
        }

        /* 面包屑 - 保持与下方内容对齐 */
        .hero-breadcrumb {
            margin-bottom: 16px; 
            font-size: 0.95rem; 
            color: var(--text-secondary);
            display:flex; gap:8px; overflow-x:auto;
            font-weight: 400;
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 24px;
            align-items: center;
        }
        .hero-breadcrumb span { cursor:pointer; white-space: nowrap; transition: all 0.25s ease; display:flex; align-items:center; gap:6px; }
        .hero-breadcrumb span:hover { color: var(--accent); transform: translateY(-1px); }

        .content-area { 
            flex:1; display:flex; flex-direction:column; 
            overflow:hidden; min-width: 0;
            position: relative;
        }
        .hero-area {
            background: transparent; 
            padding: 24px 24px 20px; 
            flex-shrink: 0;
        }
        .hero-time-big { 
            font-size: 3.2rem; 
            font-weight: 300; 
            color: var(--text-primary); 
            text-align:center; 
            margin-bottom:10px;
            text-shadow: 0 4px 20px hsla(var(--hue-primary), 60%, 50%, 0.15);
            letter-spacing: -1px;
        }
        .hero-search-row { width: 100%; max-width: 560px; margin: 0 auto 14px; }
        /* hero area uses .search-container now */
        /* 一体化搜索容器 */
        .search-container {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border); 
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            box-shadow: var(--card-shadow);
            transition: all var(--transition-normal);
        }
        .search-container:focus-within {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px var(--bg-active), 0 12px 40px hsla(var(--hue-primary), 60%, 50%, 0.15), 0 2px 14px hsla(0, 0%, 100%, 0.9) inset;
            transform: translateY(-2px);
        }
        .search-input {
            flex: 1;
            padding: 16px 24px;
            border: none;
            background: transparent;
            font-size: 1rem; 
            outline: none; 
            color: var(--text-primary);
        }
        .search-input::placeholder {
            color: var(--text-secondary);
        }
        .search-divider {
            display: none;
        }
        .default-engine-display:hover {
            background: rgba(102, 126, 234, 0.1);
        }
        .default-engine-selector.active .default-engine-display {
            border-color: rgba(102, 126, 234, 0.5);
        }
        .default-engine-selector.active svg:last-child {
            transform: rotate(180deg);
        }
        .engine-option:hover {
            background: rgba(102, 126, 234, 0.1);
        }
        .search-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 24px 16px 8px;
            cursor: pointer;
            color: var(--text-primary);
            font-size: 0.9rem;
            transition: color var(--transition-fast);
        }
        .search-selector:hover {
            color: var(--accent);
        }
        .search-selector svg {
            color: var(--text-secondary);
            transition: transform var(--transition-fast);
        }
        .search-selector:hover svg,
        .search-selector.active svg {
            transform: rotate(180deg);
        }
        .search-select-hidden {
            display: none;
        }
        .search-options {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 100px;
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            padding: 8px 0;
            box-shadow: var(--card-shadow);
            z-index: 200;
        }
        .search-option {
            padding: 10px 24px;
            cursor: pointer;
            color: var(--text-primary);
            font-size: 0.9rem;
            transition: background var(--transition-fast), color var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-option:hover {
            background: var(--bg-hover);
            color: var(--accent);
        }
        .search-option.selected {
            background: var(--bg-active);
            color: var(--accent);
        }
        .engine-icon {
            flex-shrink: 0;
            vertical-align: middle;
        }
        .selector-text {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 40px;
            text-align: right;
        }
        .selector-text .engine-icon {
            flex-shrink: 0;
        }
        /* hero area uses .search-container now */
        .hero-datetime { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .hero-date-lunar { font-size: 1.05rem; color: var(--text-secondary); text-shadow: 0 2px 12px rgba(0,0,0,0.1); }
        .hero-weather { display: flex; align-items: center; gap: 8px; font-size: 1rem; justify-content: center; color: var(--text-secondary); text-shadow: 0 2px 10px rgba(0,0,0,0.1); }

        .cards-body {
            flex:1; overflow-y:auto; padding:0 24px 24px; background: transparent;
        }
        .quick-access { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
        .bookmark-grid {
            display:grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 16px;
            max-width: 1600px;
            margin:0 auto;
            padding: 8px;
            transition: all 0.3s ease;
        }

        
        .bookmark-card {
            position: relative;
            border-radius: 20px;
            aspect-ratio: auto;
            padding: 10px 8px 8px;
            display:flex;
            flex-direction: column;
            align-items:center;
            justify-content: flex-start;
            gap: 8px;
            text-decoration:none;
            color: var(--text-primary);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            overflow: visible;
            cursor: pointer;
            transform: translateY(0);
            clip-path: none;
            box-shadow: none;
            min-width: 0;
        }
        .card-info { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
        .card-title { font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
        .card-domain { font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; }
        
        .bookmark-card:hover {
            transform: translateY(-4px) scale(1.05);
            background: transparent;
        }
        /* 长方形样式 */
        .bookmark-card.style-rectangle {
            border-radius: 16px;
            aspect-ratio: auto;
            min-height: 90px;
            min-width: 280px;
            padding: 20px 24px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
        }
        .bookmark-card.style-rectangle::before {
            border-radius: 16px;
        }
        .bookmark-card.style-rectangle::after {
            border-radius: 17px;
        }
        .bookmark-card.style-rectangle .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
        }
        .bookmark-card.style-rectangle .card-favicon img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }
        .bookmark-card.style-rectangle .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-rectangle .card-title {
            font-size: 0.92rem;
        }
        .bookmark-card.style-rectangle .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
        }
        /* 圆角胶囊样式 */
        .bookmark-card.style-rounded {
            border-radius: 28px;
            aspect-ratio: auto;
            min-height: 90px;
            min-width: 280px;
            padding: 20px 24px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
        }
        .bookmark-card.style-rounded::before {
            border-radius: 28px;
        }
        .bookmark-card.style-rounded::after {
            border-radius: 29px;
        }
        .bookmark-card.style-rounded .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
        }
        .bookmark-card.style-rounded .card-favicon img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }
        .bookmark-card.style-rounded .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-rounded .card-title {
            font-size: 0.92rem;
        }
        .bookmark-card.style-rounded .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
        }
        /* 不对称样式 */
        .bookmark-card.style-asymmetric {
            border-radius: 28px 12px 28px 12px;
            aspect-ratio: auto;
            min-height: 90px;
            min-width: 280px;
            padding: 20px 24px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
        }
        .bookmark-card.style-asymmetric::before {
            border-radius: 28px 12px 28px 12px;
        }
        .bookmark-card.style-asymmetric::after {
            border-radius: 29px 13px 29px 13px;
        }
        .bookmark-card.style-asymmetric .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
        }
        .bookmark-card.style-asymmetric .card-favicon img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }
        .bookmark-card.style-asymmetric .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-asymmetric .card-title {
            font-size: 0.92rem;
        }
        .bookmark-card.style-asymmetric .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
        }
        /* 有机形态样式 */
        .bookmark-card.style-organic {
            border-radius: 0;
            clip-path: polygon(
                12% 0%, 88% 0%, 
                100% 12%, 100% 88%, 
                88% 100%, 12% 100%, 
                0% 88%, 0% 12%
            );
            aspect-ratio: auto;
            min-height: 90px;
            min-width: 280px;
            padding: 20px 24px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
        }
        .bookmark-card.style-organic::before {
            border-radius: 0;
            clip-path: polygon(
                12% 0%, 88% 0%, 
                100% 12%, 100% 88%, 
                88% 100%, 12% 100%, 
                0% 88%, 0% 12%
            );
        }
        .bookmark-card.style-organic::after {
            border-radius: 0;
            clip-path: polygon(
                12% 0%, 88% 0%, 
                100% 12%, 100% 88%, 
                88% 100%, 12% 100%, 
                0% 88%, 0% 12%
            );
        }
        .bookmark-card.style-organic .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
        }
        .bookmark-card.style-organic .card-favicon img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }
        .bookmark-card.style-organic .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-organic .card-title {
            font-size: 0.92rem;
        }
        .bookmark-card.style-organic .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
        }
        /* WebTab经典样式 - 大图标+下方标题 */
        .bookmark-card.style-webtab {
            border-radius: 20px;
            aspect-ratio: auto;
            min-height: 140px;
            padding: 28px 20px 20px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }
        .bookmark-card.style-webtab::before {
            border-radius: 20px;
        }
        .bookmark-card.style-webtab::after {
            border-radius: 21px;
        }
        .bookmark-card.style-webtab .card-favicon {
            width: 72px;
            height: 72px;
            border-radius: 22px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 70%, 65%, 0.18), 
                hsla(var(--hue-accent), 65%, 60%, 0.12));
            box-shadow: 0 10px 30px hsla(var(--hue-primary), 50%, 50%, 0.15);
        }
        .bookmark-card.style-webtab .card-favicon img {
            width: 44px;
            height: 44px;
            border-radius: 14px;
        }
        .bookmark-card.style-webtab .card-info {
            text-align: center;
            width: 100%;
        }
        .bookmark-card.style-webtab .card-title {
            font-size: 0.9rem;
        }
        .bookmark-card.style-webtab .card-domain {
            font-size: 0.72rem;
            margin-top: 4px;
        }
        /* 网格大图标样式 - 更大的图标 */
        .bookmark-card.style-gridlarge {
            border-radius: 24px;
            aspect-ratio: 1 / 1;
            padding: 20px 16px 16px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }
        .bookmark-card.style-gridlarge::before {
            border-radius: 24px;
        }
        .bookmark-card.style-gridlarge::after {
            border-radius: 25px;
        }
        .bookmark-card.style-gridlarge .card-favicon {
            width: 80px;
            height: 80px;
            border-radius: 24px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 70%, 65%, 0.2), 
                hsla(var(--hue-accent), 65%, 60%, 0.12));
            box-shadow: 0 12px 36px hsla(var(--hue-primary), 50%, 50%, 0.18);
        }
        .bookmark-card.style-gridlarge .card-favicon img {
            width: 48px;
            height: 48px;
            border-radius: 16px;
        }
        .bookmark-card.style-gridlarge .card-info {
            text-align: center;
            width: 100%;
        }
        .bookmark-card.style-gridlarge .card-title {
            font-size: 0.85rem;
        }
        .bookmark-card.style-gridlarge .card-domain {
            font-size: 0.7rem;
            margin-top: 4px;
        }
        /* 列表视图样式 */
        .bookmark-card.style-list {
            border-radius: 12px;
            aspect-ratio: auto;
            min-height: 70px;
            padding: 16px 20px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
        }
        .bookmark-card.style-list::before {
            border-radius: 12px;
        }
        .bookmark-card.style-list::after {
            border-radius: 13px;
        }
        .bookmark-card.style-list .card-favicon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
        }
        .bookmark-card.style-list .card-favicon img {
            width: 28px;
            height: 28px;
            border-radius: 8px;
        }
        .bookmark-card.style-list .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-list .card-title {
            font-size: 0.88rem;
        }
        .bookmark-card.style-list .card-domain {
            font-size: 0.72rem;
            margin-top: 4px;
        }
        .bookmark-card.style-list .card-actions {
            top: 8px;
            right: 8px;
        }
        /* WeTab iOS风格 - 大图标+标题 */
        .bookmark-card.style-wetab {
            border-radius: 24px;
            aspect-ratio: auto;
            min-height: 160px;
            min-width: 160px;
            padding: 32px 20px 24px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }
        .bookmark-card.style-wetab::before {
            border-radius: 24px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 70%, 65%, 0.12), 
                hsla(var(--hue-accent), 65%, 60%, 0.08));
        }
        .bookmark-card.style-wetab::after {
            border-radius: 25px;
        }
        .bookmark-card.style-wetab .card-favicon {
            width: 88px;
            height: 88px;
            border-radius: 28px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 70%, 65%, 0.25), 
                hsla(var(--hue-accent), 65%, 60%, 0.15));
            box-shadow: 0 16px 48px hsla(var(--hue-primary), 50%, 50%, 0.2),
                        inset 0 2px 4px hsla(0, 0%, 100%, 0.3);
        }
        .bookmark-card.style-wetab .card-favicon img {
            width: 52px;
            height: 52px;
            border-radius: 18px;
        }
        .bookmark-card.style-wetab .card-info {
            text-align: center;
            width: 100%;
        }
        .bookmark-card.style-wetab .card-title {
            font-size: 0.95rem;
            font-weight: 600;
        }
        .bookmark-card.style-wetab .card-domain {
            font-size: 0.72rem;
            margin-top: 6px;
            opacity: 0.8;
        }
        /* 霓虹发光样式 - Neon Glow */
        .bookmark-card.style-neon {
            border-radius: 16px;
            aspect-ratio: auto;
            min-height: 90px;
            min-width: 280px;
            padding: 20px 24px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
        }
        .bookmark-card.style-neon::before {
            border-radius: 16px;
            background: hsla(var(--hue-primary), 70%, 15%, 0.6);
            border: 2px solid hsla(var(--hue-primary), 80%, 60%, 0.4);
            box-shadow: 0 0 20px hsla(var(--hue-primary), 80%, 60%, 0.3),
                        inset 0 0 20px hsla(var(--hue-primary), 80%, 60%, 0.1);
        }
        .bookmark-card.style-neon::after {
            border-radius: 17px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 80%, 60%, 0.8), 
                hsla(var(--hue-accent), 75%, 55%, 0.7));
            box-shadow: 0 0 30px hsla(var(--hue-primary), 80%, 60%, 0.5);
        }
        .bookmark-card.style-neon:hover::before {
            box-shadow: 0 0 30px hsla(var(--hue-primary), 80%, 60%, 0.5),
                        0 0 60px hsla(var(--hue-primary), 80%, 60%, 0.3),
                        inset 0 0 30px hsla(var(--hue-primary), 80%, 60%, 0.2);
        }
        .bookmark-card.style-neon .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            background: hsla(var(--hue-primary), 70%, 50%, 0.2);
            box-shadow: 0 0 20px hsla(var(--hue-primary), 80%, 60%, 0.4);
        }
        .bookmark-card.style-neon .card-favicon img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }
        .bookmark-card.style-neon .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-neon .card-title {
            font-size: 0.92rem;
            text-shadow: 0 0 10px hsla(var(--hue-primary), 80%, 60%, 0.5);
        }
        .bookmark-card.style-neon .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
            opacity: 0.9;
        }
        /* 渐变卡片样式 - Gradient Card */
        .bookmark-card.style-gradient {
            border-radius: 20px;
            aspect-ratio: auto;
            min-height: 100px;
            min-width: 300px;
            padding: 24px 28px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 18px;
        }
        .bookmark-card.style-gradient::before {
            border-radius: 20px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 70%, 60%, 0.3), 
                hsla(var(--hue-accent), 65%, 55%, 0.25));
        }
        .bookmark-card.style-gradient::after {
            border-radius: 21px;
            background: linear-gradient(135deg, 
                hsla(var(--hue-primary), 70%, 65%, 0.6), 
                hsla(var(--hue-accent), 65%, 60%, 0.5));
        }
        .bookmark-card.style-gradient .card-favicon {
            width: 58px;
            height: 58px;
            border-radius: 18px;
            background: linear-gradient(135deg, 
                hsla(0, 0%, 100%, 0.3), 
                hsla(0, 0%, 100%, 0.15));
            box-shadow: 0 8px 24px hsla(var(--hue-primary), 50%, 50%, 0.2);
        }
        .bookmark-card.style-gradient .card-favicon img {
            width: 36px;
            height: 36px;
            border-radius: 12px;
        }
        .bookmark-card.style-gradient .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-gradient .card-title {
            font-size: 0.95rem;
            font-weight: 600;
        }
        .bookmark-card.style-gradient .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
            opacity: 0.9;
        }
        /* 极简线条样式 - Minimal Line */
        .bookmark-card.style-minimal {
            border-radius: 12px;
            aspect-ratio: auto;
            min-height: 75px;
            min-width: 280px;
            padding: 18px 22px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
        }
        .bookmark-card.style-minimal::before {
            border-radius: 12px;
            background: hsla(0, 0%, 100%, 0.08);
            border-left: 3px solid hsla(var(--hue-primary), 70%, 65%, 0.6);
        }
        .bookmark-card.style-minimal::after {
            border-radius: 13px;
            opacity: 0;
        }
        .bookmark-card.style-minimal:hover::after {
            opacity: 1;
            background: linear-gradient(90deg, 
                hsla(var(--hue-primary), 70%, 65%, 0.3), 
                transparent);
        }
        .bookmark-card.style-minimal .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
        }
        .bookmark-card.style-minimal .card-favicon img {
            width: 28px;
            height: 28px;
            border-radius: 8px;
        }
        .bookmark-card.style-minimal .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-minimal .card-title {
            font-size: 0.9rem;
            font-weight: 500;
        }
        .bookmark-card.style-minimal .card-domain {
            font-size: 0.72rem;
            margin-top: 4px;
            opacity: 0.75;
        }
        /* 悬浮阴影样式 - Floating Shadow */
        .bookmark-card.style-floating {
            border-radius: 18px;
            aspect-ratio: auto;
            min-height: 92px;
            min-width: 290px;
            padding: 22px 26px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
        }
        .bookmark-card.style-floating::before {
            border-radius: 18px;
            background: hsla(0, 0%, 100%, 0.18);
            box-shadow: 0 10px 40px hsla(0, 0%, 0%, 0.15),
                        0 4px 12px hsla(0, 0%, 0%, 0.1);
        }
        .bookmark-card.style-floating::after {
            border-radius: 19px;
        }
        .bookmark-card.style-floating:hover::before {
            box-shadow: 0 20px 60px hsla(0, 0%, 0%, 0.2),
                        0 8px 20px hsla(0, 0%, 0%, 0.15);
        }
        .bookmark-card.style-floating .card-favicon {
            width: 54px;
            height: 54px;
            border-radius: 16px;
            box-shadow: 0 6px 20px hsla(var(--hue-primary), 50%, 50%, 0.15);
        }
        .bookmark-card.style-floating .card-favicon img {
            width: 32px;
            height: 32px;
            border-radius: 10px;
        }
        .bookmark-card.style-floating .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-floating .card-title {
            font-size: 0.92rem;
            font-weight: 500;
        }
        .bookmark-card.style-floating .card-domain {
            font-size: 0.75rem;
            margin-top: 6px;
            opacity: 0.85;
        }
        /* 杂志排版样式 - Magazine Layout */
        .bookmark-card.style-magazine {
            border-radius: 0;
            aspect-ratio: auto;
            min-height: 110px;
            min-width: 320px;
            padding: 24px 28px;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }
        .bookmark-card.style-magazine::before {
            border-radius: 0;
            background: hsla(0, 0%, 100%, 0.12);
            border-bottom: 2px solid hsla(var(--hue-primary), 70%, 65%, 0.5);
        }
        .bookmark-card.style-magazine::after {
            border-radius: 0;
            opacity: 0;
        }
        .bookmark-card.style-magazine:hover::after {
            opacity: 1;
            background: hsla(var(--hue-primary), 70%, 65%, 0.1);
        }
        .bookmark-card.style-magazine .card-favicon {
            width: 64px;
            height: 64px;
            border-radius: 0;
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        }
        .bookmark-card.style-magazine .card-favicon img {
            width: 38px;
            height: 38px;
            border-radius: 0;
        }
        .bookmark-card.style-magazine .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-magazine .card-title {
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .bookmark-card.style-magazine .card-domain {
            font-size: 0.72rem;
            margin-top: 6px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.7;
        }
        /* 紧凑型列表样式 - Compact List */
        .bookmark-card.style-compactlist {
            border-radius: 10px;
            aspect-ratio: auto;
            min-height: 60px;
            min-width: 280px;
            padding: 14px 18px;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
        }
        .bookmark-card.style-compactlist::before {
            border-radius: 10px;
            background: hsla(0, 0%, 100%, 0.1);
        }
        .bookmark-card.style-compactlist::after {
            border-radius: 11px;
            opacity: 0;
        }
        .bookmark-card.style-compactlist:hover::after {
            opacity: 1;
        }
        .bookmark-card.style-compactlist .card-favicon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
        }
        .bookmark-card.style-compactlist .card-favicon img {
            width: 24px;
            height: 24px;
            border-radius: 6px;
        }
        .bookmark-card.style-compactlist .card-info {
            text-align: left;
            flex: 1;
            min-width: 0;
        }
        .bookmark-card.style-compactlist .card-title {
            font-size: 0.85rem;
            font-weight: 500;
        }
        .bookmark-card.style-compactlist .card-domain {
            font-size: 0.7rem;
            margin-top: 3px;
            opacity: 0.7;
        }

        /* ==================== 全新现代简洁书签样式 - 统一所有主题 ==================== */
        
        /* =============== 1. 核心卡片样式 - 最高优先级覆盖 =============== */
        
        .bookmark-card,
        [class*="card-style-"] .bookmark-card {
            position: relative !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            padding: 10px 8px 8px !important;
            border-radius: 20px !important;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            transition: all var(--transition-normal) !important;
            cursor: pointer !important;
            overflow: visible !important;
            gap: 8px !important;
        }

        .bookmark-card::before,
        .bookmark-card::after,
        [data-theme] .bookmark-card::before,
        [data-theme] .bookmark-card::after,
        [class*="theme-"] .bookmark-card::before,
        [class*="theme-"] .bookmark-card::after {
            display: none !important;
        }

        /* =============== 2. 图标容器 - 简洁清爽 =============== */
        
        .card-favicon,
        [class*="card-style-"] .card-favicon {
            width: 56px !important;
            height: 56px !important;
            border-radius: 16px;
            background: var(--bg-surface);
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
            transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            position: relative !important;
            overflow: hidden !important;
            border: none !important;
            padding: 0 !important;
        }

        /* 图标容器光效装饰 */
        .card-favicon::before,
        [data-theme] .card-favicon::before,
        [class*="theme-"] .card-favicon::before,
        [class*="card-style-"] .card-favicon::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);
            transition: 0.5s;
            z-index: 2;
            pointer-events: none;
        }
        .card-favicon::after,
        [data-theme] .card-favicon::after,
        [class*="theme-"] .card-favicon::after,
        [class*="card-style-"] .card-favicon::after {
            display: none !important;
        }

        /* 图标 Hover 效果 */
        .bookmark-card:hover .card-favicon {
            transform: scale(1.08) translateY(-2px) !important;
        }
        .bookmark-card:hover .card-favicon::before {
            left: 100% !important;
        }

        /* 图标图片样式 */
        .card-favicon img,
        [data-theme] .card-favicon img,
        [class*="theme-"] .card-favicon img {
            width: 100% !important;
            height: 100% !important;
            border-radius: 16px !important;
            object-fit: cover !important;
            display: block !important;
            position: relative !important;
            z-index: 1 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        /* 图标 Hover 效果 */
        .bookmark-card:hover .card-favicon {
            transform: scale(1.08) translateY(-2px) !important;
        }

        /* =============== 3. 文字信息区域 =============== */
        
        .card-info,
        [data-theme] .card-info {
            overflow: hidden !important;
            width: 100% !important;
            text-align: center !important;
            margin-top: 0 !important;
        }

        .card-title,
        [data-theme] .card-title {
            font-weight: 600 !important;
            font-size: 0.85rem !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            letter-spacing: 0.1px !important;
            color: var(--text-primary) !important;
            line-height: 1.3 !important;
            text-shadow: none !important;
            margin: 0 !important;
        }

        .card-domain,
        [data-theme] .card-domain {
            font-size: 0.72rem !important;
            color: var(--text-secondary) !important;
            margin-top: 4px !important;
            font-weight: 400 !important;
            opacity: 0.6 !important;
            text-shadow: none !important;
            display: block !important;
        }

        /* =============== 4. 侧边栏角标样式 =============== */
        
        .tree-badge,
        [data-theme] .tree-badge,
        .sidebar .tree-badge,
        #sidebar .tree-badge {
            background: var(--bg-hover) !important;
            color: var(--accent) !important;
            padding: 4px 10px !important;
            border-radius: 12px !important;
            font-size: 0.72rem !important;
            font-weight: 500 !important;
            text-shadow: none !important;
            box-shadow: none !important;
            margin-left: 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            min-width: 20px !important;
            height: 20px !important;
            border: 1px solid var(--border) !important;
        }

        /* =============== 5. 侧边栏文字优化 =============== */
        
        .tree-node-content,
        [data-theme] .tree-node-content {
            color: var(--text-primary) !important;
            font-weight: 450 !important;
        }

        .tree-node.active > .tree-node-content {
            color: var(--accent) !important;
            font-weight: 600 !important;
        }

        /* =============== 6. 网格布局优化 =============== */
        
        .bookmark-grid,
        [data-theme] .bookmark-grid {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
            gap: 12px !important;
            padding: 12px !important;
        }

        /* =============== 7. 操作按钮优化 =============== */
        
        .card-actions {
            position: absolute !important;
            top: 10px !important;
            right: 10px !important;
            display: flex !important;
            gap: 8px !important;
            opacity: 0 !important;
            transform: translateY(-6px) !important;
            transition: all 0.3s ease !important;
            z-index: 10 !important;
        }

        .bookmark-card:hover .card-actions {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .star-toggle,
        .edit-btn {
            width: 32px !important;
            height: 32px !important;
            border-radius: 12px !important;
            background: var(--bg-surface) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            border: 1px solid var(--border) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            transition: all 0.25s ease !important;
            position: relative !important;
            top: auto !important;
            right: auto !important;
            z-index: 10 !important;
            color: var(--text-secondary) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        }

        .star-toggle:hover,
        .edit-btn:hover {
            background: var(--bg-hover) !important;
            border-color: var(--accent) !important;
            color: var(--accent) !important;
            transform: scale(1.12) !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        }

        .star-toggle.starred {
            color: var(--star-color, #fbbf24) !important;
            background: rgba(251, 191, 36, 0.15) !important;
            border-color: rgba(251, 191, 36, 0.4) !important;
            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25) !important;
        }

        .edit-btn svg {
            width: 16px !important;
            height: 16px !important;
            stroke-width: 2 !important;
        }

        /* =============== 8. 卡片方案样式 =============== */
        
        /* 手机图标样式（默认） - 我们已经在前面定义了 */
        
        /* 悬浮玻璃样式 - 保留但不显示 */
        
        /* 紧凑图标样式 - 保留但不显示 */
        
        /* 横向列表样式 */
        .bookmark-grid.card-style-list {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
            gap: 8px !important;
        }
        
        .card-style-list .bookmark-card {
            padding: 10px 14px !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        }
        
        .card-style-list .bookmark-card:hover {
            transform: translateY(-2px) scale(1.01) !important;
            background: var(--bg-hover) !important;
            border-color: var(--accent) !important;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(var(--accent-rgb), 0.15) !important;
        }
        
        .card-style-list .card-favicon {
            width: 40px !important;
            height: 40px !important;
            border-radius: 10px !important;
        }
        
        .card-style-list .card-favicon img {
            width: 100% !important;
            height: 100% !important;
            border-radius: 10px !important;
            object-fit: cover !important;
        }
        
        .card-style-list .card-info {
            text-align: left !important;
            flex: 1 !important;
        }
        
        .card-style-list .card-title {
            font-size: 0.82rem !important;
        }
        
        .card-style-list .card-domain {
            font-size: 0.7rem !important;
            margin-top: 2px !important;
        }
        
        /* 大图预览样式 - 保留但不显示 */
        
        /* 极简文字样式 */
        .bookmark-grid.card-style-minimal {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
            gap: 6px !important;
        }
        
        .card-style-minimal .bookmark-card {
            padding: 8px 12px !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            background: transparent !important;
            border: 1px solid transparent !important;
            border-radius: 10px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        
        .card-style-minimal .bookmark-card:hover {
            background: var(--bg-hover) !important;
            border-color: var(--border) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
        }
        
        .card-style-minimal .card-favicon {
            width: 32px !important;
            height: 32px !important;
            border-radius: 8px !important;
            background: var(--bg-surface) !important;
            box-shadow: none !important;
            border: 1px solid var(--border) !important;
        }
        
        .card-style-minimal .card-favicon img {
            width: 100% !important;
            height: 100% !important;
            border-radius: 8px !important;
            object-fit: cover !important;
            box-shadow: none !important;
        }
        
        .card-style-minimal .card-info {
            text-align: left !important;
            flex: 1 !important;
        }
        
        .card-style-minimal .card-title {
            font-size: 0.8rem !important;
        }
        
        .card-style-minimal .card-domain {
            display: none !important;
        }

        /* ============ 第一组：独特外形风格 ============ */

        /* 1. 票根型 */
        .bookmark-grid.card-style-ticket {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-ticket .bookmark-card {
            padding: 16px 12px 14px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 8px !important;
            position: relative !important;
            overflow: visible !important;
        }
        .card-style-ticket .bookmark-card::before,
        .card-style-ticket .bookmark-card::after {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 16px !important;
            height: 32px !important;
            background: radial-gradient(circle at center, transparent 6px, var(--bg-page) 7px) !important;
            background-size: 8px 8px !important;
            z-index: 2 !important;
        }
        .card-style-ticket .bookmark-card::before {
            left: -8px !important;
        }
        .card-style-ticket .bookmark-card::after {
            right: -8px !important;
        }
        .card-style-ticket .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 10px !important;
        }

        /* 2. 六边形 */
        .bookmark-grid.card-style-hexagon {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 8px !important;
        }
        .card-style-hexagon .bookmark-card {
            padding: 14px 8px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0 !important;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
            aspect-ratio: 1/0.866 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
        }
        .card-style-hexagon .card-favicon {
            width: 44px !important;
            height: 44px !important;
            border-radius: 8px !important;
            flex-shrink: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .card-style-hexagon .card-info {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 2px !important;
            text-align: center !important;
            min-width: 0 !important;
            width: 100% !important;
            padding: 0 6px !important;
            overflow: hidden !important;
        }
        .card-style-hexagon .card-title {
            font-size: 0.72rem !important;
            font-weight: 600 !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            max-width: 100% !important;
            text-align: center !important;
            color: var(--text-primary) !important;
        }
        .card-style-hexagon .card-domain {
            font-size: 0.62rem !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            width: 100% !important;
            max-width: 100% !important;
            text-align: center !important;
            color: var(--text-secondary) !important;
            opacity: 0.75 !important;
        }

        /* 3. 波浪边 */
        .bookmark-grid.card-style-wavy {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
            gap: 12px !important;
        }
        .card-style-wavy .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0 !important;
            position: relative !important;
        }
        .card-style-wavy .bookmark-card::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: -4px !important;
            left: 0 !important;
            right: 0 !important;
            height: 8px !important;
            background: radial-gradient(circle at 10px 0, transparent 10px, var(--bg-surface) 10px) !important;
            background-size: 20px 100% !important;
        }
        .card-style-wavy .card-favicon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 12px !important;
        }

        /* 4. 胶囊标签 */
        .bookmark-grid.card-style-capsule {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
            gap: 8px !important;
        }
        .card-style-capsule .bookmark-card {
            padding: 10px 16px !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-secondary) 5%, transparent)) !important;
            border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)) !important;
            border-radius: 50px !important;
        }
        .card-style-capsule .card-favicon {
            width: 36px !important;
            height: 36px !important;
            border-radius: 50% !important;
            background: rgba(255,255,255,0.2) !important;
        }
        .card-style-capsule .card-info {
            text-align: left !important;
            flex: 1 !important;
        }
        .card-style-capsule .card-domain {
            display: none !important;
        }

        /* 5. 斜切角 */
        .bookmark-grid.card-style-diagonal {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-diagonal .bookmark-card {
            padding: 16px 10px 14px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0 !important;
            clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%) !important;
        }
        .card-style-diagonal .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 8px !important;
        }

        /* 6. 圆角矩形 */
        .bookmark-grid.card-style-rounded {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-rounded .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 24px !important;
        }
        .card-style-rounded .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 16px !important;
        }

        /* ============ 第二组：视觉特效风格 ============ */

        /* 7. 霓虹光边 */
        .bookmark-grid.card-style-neon {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
            gap: 12px !important;
        }
        .card-style-neon .bookmark-card {
            padding: 14px 10px 12px !important;
            background: rgba(0,0,0,0.3) !important;
            border: 2px solid var(--accent) !important;
            border-radius: 16px !important;
            box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent) 10%, transparent) !important;
        }
        .card-style-neon .bookmark-card:hover {
            box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 60px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 0 30px color-mix(in srgb, var(--accent) 15%, transparent) !important;
        }
        .card-style-neon .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 12px !important;
            background: rgba(255,255,255,0.05) !important;
        }

        /* 8. 折纸折痕 */
        .bookmark-grid.card-style-origami {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-origami .bookmark-card {
            padding: 14px 10px 12px !important;
            background: linear-gradient(135deg, var(--bg-surface) 50%, color-mix(in srgb, var(--bg-surface) 90%, #000) 50%) !important;
            border: 1px solid var(--border) !important;
            border-radius: 4px !important;
            position: relative !important;
        }
        .card-style-origami .bookmark-card::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background: linear-gradient(135deg, transparent 48%, rgba(0,0,0,0.05) 50%, transparent 52%) !important;
            pointer-events: none !important;
        }
        .card-style-origami .bookmark-card::after {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            width: 40px !important;
            height: 40px !important;
            background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
            clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
        }
        .card-style-origami .card-favicon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 6px !important;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1) !important;
        }

        /* 9. 堆叠阴影 */
        .bookmark-grid.card-style-stacked {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 14px !important;
        }
        .card-style-stacked .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            box-shadow: 4px 4px 0 rgba(0,0,0,0.1), 6px 6px 0 rgba(0,0,0,0.05) !important;
            transform: rotate(-1deg) !important;
        }
        .card-style-stacked .bookmark-card:nth-child(even) {
            transform: rotate(1deg) !important;
        }
        .card-style-stacked .bookmark-card:nth-child(3n) {
            transform: rotate(-2deg) !important;
        }
        .card-style-stacked .bookmark-card:hover {
            transform: rotate(0deg) translateY(-4px) !important;
            box-shadow: 6px 6px 0 rgba(0,0,0,0.15), 10px 10px 0 rgba(0,0,0,0.08) !important;
            z-index: 10 !important;
        }
        .card-style-stacked .card-favicon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 10px !important;
        }

        /* 10. 渐变边框 */
        .bookmark-grid.card-style-gradient {
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-gradient .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 2px solid transparent !important;
            border-radius: 16px !important;
            background-image: linear-gradient(var(--bg-surface), var(--bg-surface)), linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
            background-origin: border-box !important;
            background-clip: padding-box, border-box !important;
        }
        .card-style-gradient .bookmark-card:hover {
            background-image: linear-gradient(var(--bg-surface), var(--bg-surface)), linear-gradient(135deg, var(--accent-secondary), var(--accent)) !important;
        }
        .card-style-gradient .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 14px !important;
            background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-secondary) 8%, transparent)) !important;
        }

        /* 11. 玻璃态 */
        .bookmark-grid.card-style-glass {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-glass .bookmark-card {
            padding: 14px 10px 12px !important;
            background: rgba(255, 255, 255, 0.2) !important;
            border: 1px solid rgba(255, 255, 255, 0.18) !important;
            border-radius: 16px !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
        }
        .card-style-glass .card-favicon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 12px !important;
            background: rgba(255, 255, 255, 0.15) !important;
            backdrop-filter: blur(5px) !important;
            -webkit-backdrop-filter: blur(5px) !important;
        }

        /* ============ 第三组：布局变化风格 ============ */

        /* 12. 垂直图标 */
        .bookmark-grid.card-style-vertical {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
            gap: 14px !important;
        }
        .card-style-vertical .bookmark-card {
            padding: 24px 16px 20px !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 16px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 16px !important;
            aspect-ratio: 1/1.2 !important;
        }
        .card-style-vertical .card-favicon {
            width: 64px !important;
            height: 64px !important;
            border-radius: 16px !important;
        }
        .card-style-vertical .card-info {
            flex: 0 0 auto !important;
        }
        .card-style-vertical .card-title {
            font-size: 0.9rem !important;
            font-weight: 600 !important;
        }
        .card-style-vertical .card-domain {
            margin-top: 6px !important;
            font-size: 0.75rem !important;
        }

        /* 13. 悬停翻页 */
        .bookmark-grid.card-style-flip {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-flip .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            transform-style: preserve-3d !important;
            perspective: 1000px !important;
        }
        .card-style-flip .bookmark-card:hover {
            transform: rotateY(10deg) translateY(-4px) !important;
        }

        /* 14. 倾斜卡片 */
        .bookmark-grid.card-style-tilt {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 14px !important;
        }
        .card-style-tilt .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            transform: rotate(-2deg) !important;
        }
        .card-style-tilt .bookmark-card:nth-child(even) {
            transform: rotate(2deg) !important;
        }
        .card-style-tilt .bookmark-card:nth-child(3n) {
            transform: rotate(-3deg) !important;
        }
        .card-style-tilt .bookmark-card:nth-child(4n) {
            transform: rotate(3deg) !important;
        }
        .card-style-tilt .bookmark-card:hover {
            transform: rotate(0deg) translateY(-6px) scale(1.05) !important;
            z-index: 10 !important;
        }
        .card-style-tilt .card-favicon {
            width: 44px !important;
            height: 44px !important;
            border-radius: 10px !important;
        }

        /* 15. 带角标 */
        .bookmark-grid.card-style-badge {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-badge .bookmark-card {
            padding: 14px 10px 12px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            position: relative !important;
        }
        .card-style-badge .bookmark-card::before {
            content: '★' !important;
            display: block !important;
            position: absolute !important;
            top: -6px !important;
            right: -6px !important;
            width: 28px !important;
            height: 28px !important;
            background: linear-gradient(135deg, var(--accent), var(--accent-secondary)) !important;
            border-radius: 50% !important;
            color: white !important;
            font-size: 14px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent) !important;
        }
        .card-style-badge .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 12px !important;
        }

        /* ============ 第四组：主题风格 ============ */

        /* 16. 复古便签 */
        .bookmark-grid.card-style-sticky {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 14px !important;
        }
        .card-style-sticky .bookmark-card {
            padding: 16px 12px 14px !important;
            background: linear-gradient(135deg, #FFF9C4, #FFF59D) !important;
            border: none !important;
            border-radius: 4px !important;
            box-shadow: 2px 2px 4px rgba(0,0,0,0.1), inset -2px -2px 0 rgba(0,0,0,0.05) !important;
            transform: rotate(-1deg) !important;
        }
        .card-style-sticky .bookmark-card:nth-child(even) {
            background: linear-gradient(135deg, #FFCCBC, #FFAB91) !important;
            transform: rotate(1deg) !important;
        }
        .card-style-sticky .bookmark-card:nth-child(3n) {
            background: linear-gradient(135deg, #C8E6C9, #A5D6A7) !important;
            transform: rotate(-2deg) !important;
        }
        .card-style-sticky .bookmark-card:nth-child(4n) {
            background: linear-gradient(135deg, #BBDEFB, #90CAF9) !important;
            transform: rotate(2deg) !important;
        }
        .card-style-sticky .card-favicon {
            width: 44px !important;
            height: 44px !important;
            border-radius: 8px !important;
            background: rgba(255,255,255,0.6) !important;
        }
        .card-style-sticky .card-title {
            color: #333 !important;
            font-family: 'Courier New', monospace !important;
        }
        .card-style-sticky .card-domain {
            color: #666 !important;
        }

        /* 17. 科技感 */
        .bookmark-grid.card-style-tech {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-tech .bookmark-card {
            padding: 14px 10px 12px !important;
            background: rgba(0,0,0,0.4) !important;
            border: 1px solid var(--accent) !important;
            border-radius: 4px !important;
            position: relative !important;
        }
        .card-style-tech .bookmark-card::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background: linear-gradient(90deg, transparent 50%, rgba(255,255,255,0.03) 50%) !important;
            background-size: 4px 100% !important;
            pointer-events: none !important;
        }
        .card-style-tech .bookmark-card::after {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 2px !important;
            background: linear-gradient(90deg, var(--accent), var(--accent-secondary), var(--accent)) !important;
            animation: tech-scan 2s linear infinite !important;
        }
        @keyframes tech-scan {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .card-style-tech .card-favicon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 4px !important;
            border: 1px solid var(--accent) !important;
        }
        .card-style-tech .card-title {
            font-family: 'Courier New', monospace !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
        }

        /* 18. 信笺式 */
        .bookmark-grid.card-style-letter {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
            gap: 10px !important;
        }
        .card-style-letter .bookmark-card {
            padding: 20px 14px 18px !important;
            background: var(--bg-surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: 0 !important;
            border-top: 4px solid var(--accent) !important;
            position: relative !important;
        }
        .card-style-letter .bookmark-card::before {
            content: '' !important;
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 10px !important;
            right: 10px !important;
            bottom: 0 !important;
            background: repeating-linear-gradient(transparent, transparent 22px, rgba(0,0,0,0.03) 22px, rgba(0,0,0,0.03) 23px) !important;
            pointer-events: none !important;
        }
        .card-style-letter .card-favicon {
            width: 48px !important;
            height: 48px !important;
            border-radius: 50% !important;
            border: 2px solid var(--border) !important;
        }
        .card-style-letter .card-title {
            font-style: italic !important;
        }

        /* =============== 9. 特定主题深度覆盖 =============== */
        
        /* 收藏夹书签卡片使用主题CSS变量背景，不再强制清空 */
        .bookmark-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            box-shadow: var(--card-shadow);
        }
        [data-theme$="-dark"] .bookmark-card {
            background: var(--bg-surface);
            border: 1px solid var(--border);
            box-shadow: var(--card-shadow);
        }
        .has-wallpaper .bookmark-card {
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

        /* =============== 目标主题壁纸融合优化 =============== */
        /* 对风格比较常规的主题在壁纸模式下增强融合效果 */

        /* Minimal 主题 */
        .has-wallpaper[data-theme="minimal-light"] .home-quick-card,
        .has-wallpaper[data-theme="minimal-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(0, 0, 0, 0.08);
        }
        .has-wallpaper[data-theme="minimal-dark"] .home-quick-card,
        .has-wallpaper[data-theme="minimal-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Slate 主题 */
        .has-wallpaper[data-theme="slate-light"] .home-quick-card,
        .has-wallpaper[data-theme="slate-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .has-wallpaper[data-theme="slate-dark"] .home-quick-card,
        .has-wallpaper[data-theme="slate-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        /* Arctic 主题 */
        .has-wallpaper[data-theme="arctic-light"] .home-quick-card,
        .has-wallpaper[data-theme="arctic-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(56, 189, 248, 0.2);
        }
        .has-wallpaper[data-theme="arctic-dark"] .home-quick-card,
        .has-wallpaper[data-theme="arctic-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.48);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(56, 189, 248, 0.25);
        }

        /* Noir 主题 */
        .has-wallpaper[data-theme="noir-light"] .home-quick-card,
        .has-wallpaper[data-theme="noir-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.48);
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
            border: 1px solid rgba(0, 0, 0, 0.12);
        }
        .has-wallpaper[data-theme="noir-dark"] .home-quick-card,
        .has-wallpaper[data-theme="noir-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Elegance 主题 */
        .has-wallpaper[data-theme="elegance-light"] .home-quick-card,
        .has-wallpaper[data-theme="elegance-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.52);
            backdrop-filter: blur(26px) saturate(170%);
            -webkit-backdrop-filter: blur(26px) saturate(170%);
            border: 1px solid rgba(102, 126, 234, 0.15);
        }
        .has-wallpaper[data-theme="elegance-dark"] .home-quick-card,
        .has-wallpaper[data-theme="elegance-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(26px) saturate(170%);
            -webkit-backdrop-filter: blur(26px) saturate(170%);
            border: 1px solid rgba(102, 126, 234, 0.2);
        }

        /* Ceramic Glaze 主题 */
        .has-wallpaper[data-theme="ceramic-glaze-light"] .home-quick-card,
        .has-wallpaper[data-theme="ceramic-glaze-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.48);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(116, 136, 130, 0.18);
        }
        .has-wallpaper[data-theme="ceramic-glaze-dark"] .home-quick-card,
        .has-wallpaper[data-theme="ceramic-glaze-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.48);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(248, 243, 236, 0.15);
        }

        /* Aurora 主题 */
        .has-wallpaper[data-theme="aurora-light"] .home-quick-card,
        .has-wallpaper[data-theme="aurora-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(124, 58, 237, 0.15);
        }
        .has-wallpaper[data-theme="aurora-dark"] .home-quick-card,
        .has-wallpaper[data-theme="aurora-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(124, 58, 237, 0.2);
        }

        /* Classic Noir 玄黑经典 */
        .has-wallpaper[data-theme="classic-noir-light"] .home-quick-card,
        .has-wallpaper[data-theme="classic-noir-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.52);
            backdrop-filter: blur(22px) saturate(140%);
            -webkit-backdrop-filter: blur(22px) saturate(140%);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .has-wallpaper[data-theme="classic-noir-dark"] .home-quick-card,
        .has-wallpaper[data-theme="classic-noir-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(22px) saturate(140%);
            -webkit-backdrop-filter: blur(22px) saturate(140%);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        /* Luxury Dune 沙丘奢金 */
        .has-wallpaper[data-theme="luxury-dune-light"] .home-quick-card,
        .has-wallpaper[data-theme="luxury-dune-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(26px) saturate(170%);
            -webkit-backdrop-filter: blur(26px) saturate(170%);
            border: 1px solid rgba(217, 119, 6, 0.18);
        }
        .has-wallpaper[data-theme="luxury-dune-dark"] .home-quick-card,
        .has-wallpaper[data-theme="luxury-dune-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.48);
            backdrop-filter: blur(26px) saturate(170%);
            -webkit-backdrop-filter: blur(26px) saturate(170%);
            border: 1px solid rgba(251, 191, 36, 0.2);
        }

        /* Nature Calm 森屿静雅 */
        .has-wallpaper[data-theme="nature-calm-light"] .home-quick-card,
        .has-wallpaper[data-theme="nature-calm-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.48);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(34, 197, 94, 0.15);
        }
        .has-wallpaper[data-theme="nature-calm-dark"] .home-quick-card,
        .has-wallpaper[data-theme="nature-calm-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.48);
            backdrop-filter: blur(24px) saturate(160%);
            -webkit-backdrop-filter: blur(24px) saturate(160%);
            border: 1px solid rgba(74, 222, 128, 0.18);
        }

        /* Stone Realm 荒岩雅境 */
        .has-wallpaper[data-theme="stone-realm-light"] .home-quick-card,
        .has-wallpaper[data-theme="stone-realm-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(20px) saturate(130%);
            -webkit-backdrop-filter: blur(20px) saturate(130%);
            border: 1px solid rgba(120, 113, 108, 0.18);
        }
        .has-wallpaper[data-theme="stone-realm-dark"] .home-quick-card,
        .has-wallpaper[data-theme="stone-realm-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.52);
            backdrop-filter: blur(20px) saturate(130%);
            -webkit-backdrop-filter: blur(20px) saturate(130%);
            border: 1px solid rgba(168, 162, 158, 0.15);
        }

        /* Paper Fold 纸艺空间 */
        .has-wallpaper[data-theme="paper-fold-light"] .home-quick-card,
        .has-wallpaper[data-theme="paper-fold-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(18px) saturate(120%);
            -webkit-backdrop-filter: blur(18px) saturate(120%);
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .has-wallpaper[data-theme="paper-fold-dark"] .home-quick-card,
        .has-wallpaper[data-theme="paper-fold-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(18px) saturate(120%);
            -webkit-backdrop-filter: blur(18px) saturate(120%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Brushed Metal 冷冽锋影 */
        .has-wallpaper[data-theme="brushed-metal-light"] .home-quick-card,
        .has-wallpaper[data-theme="brushed-metal-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.48);
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
            border: 1px solid rgba(113, 113, 122, 0.18);
        }
        .has-wallpaper[data-theme="brushed-metal-dark"] .home-quick-card,
        .has-wallpaper[data-theme="brushed-metal-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(22px) saturate(150%);
            -webkit-backdrop-filter: blur(22px) saturate(150%);
            border: 1px solid rgba(161, 161, 170, 0.15);
        }

        /* Misty Layer 雾影层境 */
        .has-wallpaper[data-theme="misty-layer-light"] .home-quick-card,
        .has-wallpaper[data-theme="misty-layer-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.42);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(148, 163, 184, 0.15);
        }
        .has-wallpaper[data-theme="misty-layer-dark"] .home-quick-card,
        .has-wallpaper[data-theme="misty-layer-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }

        /* Line Geometry 线条秩序 */
        .has-wallpaper[data-theme="line-geometry-light"] .home-quick-card,
        .has-wallpaper[data-theme="line-geometry-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .has-wallpaper[data-theme="line-geometry-dark"] .home-quick-card,
        .has-wallpaper[data-theme="line-geometry-dark"] .ai-tool-card {
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(20px) saturate(140%);
            -webkit-backdrop-filter: blur(20px) saturate(140%);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        /* =============== 壁纸模式遮罩层 =============== */
        .has-wallpaper::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -1;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-image: var(--wallpaper-url, none);
        }
        .has-wallpaper::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: linear-gradient(180deg, 
                rgba(0,0,0,0.25) 0%, 
                rgba(0,0,0,0.08) 30%, 
                rgba(0,0,0,0.06) 60%, 
                rgba(0,0,0,0.2) 100%);
        }
        [data-theme$="-light"].has-wallpaper::after {
            background: linear-gradient(180deg, 
                rgba(255,255,255,0.15) 0%, 
                rgba(255,255,255,0.04) 30%, 
                rgba(0,0,0,0.02) 60%, 
                rgba(0,0,0,0.08) 100%);
        }
        .has-wallpaper .app {
            position: relative;
            z-index: 1;
        }

        /* 壁纸模式侧边栏可读性 */
        .has-wallpaper .sidebar::before {
            background: rgba(0,0,0,0.35) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
        }
        [data-theme$="-light"].has-wallpaper .sidebar::before {
            background: rgba(255,255,255,0.65) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
        }
        .modal-overlay {
            position:fixed; top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.4); 
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            display:none; align-items:center; justify-content:center; z-index:1000;
            overflow: auto;
        }
        .modal-overlay.show { display:flex; }
        

        
        /* 数据合并对话框样式 */
        .merge-option:hover {
            border-color: var(--accent);
            background: rgba(var(--accent-rgb), 0.05);
        }
        .merge-option:has(input:checked) {
            border-color: var(--accent);
            background: rgba(var(--accent-rgb), 0.1);
        }
        
        .modal {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 32px;
            width: 440px;
            max-width: 90vw;
            box-shadow: var(--card-shadow), 0 4px 20px hsla(0, 0%, 100%, 0.1) inset;
            color: var(--text-primary);
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .modal::-webkit-scrollbar {
            width: 6px;
        }
        .modal::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 3px;
        }
        .modal::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
            transition: background var(--transition-normal);
        }
        .modal::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }
        .modal::-webkit-scrollbar-corner {
            background: transparent;
        }
        @keyframes modalSlideIn {
            from { transform: translateY(-40px); opacity: 0; scale: 0.95; }
            to { transform: translateY(0); opacity: 1; scale: 1; }
        }
        .modal.wide { width: 580px; }
        .modal h3 { margin-bottom: 20px; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.3px; color: var(--text-primary); }
        .modal-close {
            position: absolute; top: 16px; right: 16px;
            background: var(--bg-hover); border: none; cursor: pointer;
            width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; color: var(--text-secondary);
            transition: all var(--transition-normal);
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .modal-close:hover {
            background: var(--bg-active); 
            color: var(--accent); 
            transform: rotate(90deg) scale(1.12);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        
        /* 设置面板左右布局 */
        .settings-modal {
            width: 960px;
            max-width: 92vw;
            padding: 0;
            overflow: hidden;
            position: relative;
            cursor: default;
            min-width: 600px;
            min-height: 500px;
            height: 780px;
            max-height: 90vh;
            border-radius: 24px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
            animation: settingsPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        @keyframes settingsPopIn {
            from {
                transform: scale(0.85);
                opacity: 0;
                filter: blur(6px);
            }
            to {
                transform: scale(1);
                opacity: 1;
                filter: blur(0);
            }
        }
        

        
        .settings-layout {
            display: flex;
            height: 100%;
            max-height: 100%;
        }
        
        .settings-sidebar {
            width: 240px;
            background: var(--bg-surface);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-page) 100%);
        }
        
        .settings-sidebar h3 {
            margin: 0;
            padding: 28px 24px 20px;
            font-size: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            font-weight: 800;
            letter-spacing: 0.5px;
        }
        
        .settings-nav {
            flex: 1;
            overflow-y: auto;
            padding: 16px 12px;
        }
        
        .settings-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.9rem;
            border-radius: 14px;
            margin-bottom: 6px;
            position: relative;
            overflow: hidden;
        }
        
        .settings-nav-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 4px;
            background: var(--accent);
            transform: scaleY(0);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 2px;
        }
        
        .settings-nav-item:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            transform: translateX(4px);
        }
        
        .settings-nav-item.active {
            background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.05) 100%);
            color: var(--accent);
            font-weight: 700;
            box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.15), inset 0 0 0 1px rgba(var(--accent-rgb), 0.1);
        }
        
        .settings-nav-item.active::before {
            transform: scaleY(1);
        }
        
        .nav-icon {
            font-size: 1.25rem;
            width: 28px;
            text-align: center;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
        }
        
        .nav-label {
            flex: 1;
        }
        
        .settings-footer {
            border-top: 1px solid var(--border);
            background: var(--bg-page);
        }
        
        .settings-content {
            flex: 1;
            overflow-y: auto;
            padding: 32px;
            background: var(--bg-page);
        }
        
        /* 设置面板滚动条样式 */
        .settings-sidebar::-webkit-scrollbar,
        .settings-content::-webkit-scrollbar {
            width: 6px;
        }
        .settings-sidebar::-webkit-scrollbar-track,
        .settings-content::-webkit-scrollbar-track {
            background: transparent;
        }
        .settings-sidebar::-webkit-scrollbar-thumb,
        .settings-content::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
        }
        .settings-sidebar::-webkit-scrollbar-thumb:hover,
        .settings-content::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }
        
        .settings-section {
            display: none;
        }
        
        .settings-section.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .settings-section-header {
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }
        
        .settings-section-header h4 {
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0 0 4px 0;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .settings-section-header p {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.4;
        }
        
        .settings-group {
            margin-bottom: 20px;
            padding: 16px;
            background: var(--bg-surface);
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            transition: all var(--transition-fast);
        }
        
        .settings-group:hover {
            border-color: var(--accent);
            box-shadow: 0 2px 8px hsla(var(--hue-primary), 70%, 60%, 0.08);
            transform: translateY(-1px);
        }
        
        .settings-group:last-child {
            margin-bottom: 0;
        }
        
        /* 紧凑行布局 - 用于密码输入、操作按钮等 */
        .settings-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .settings-row .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        /* 密码输入区域 */
        .password-section {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .password-inputs {
            display: flex;
            gap: 10px;
        }
        
        .password-inputs .form-group {
            flex: 1;
            margin-bottom: 0;
        }
        
        .password-actions {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .password-actions .btn {
            flex: 1;
        }
        
        .password-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            font-size: 0.82rem;
            color: var(--text-secondary);
            cursor: pointer;
            white-space: nowrap;
        }
        
        .password-toggle input[type="checkbox"] {
            accent-color: var(--accent);
            width: 14px;
            height: 14px;
        }
        
        /* 云同步操作区域 */
        .cloud-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        
        .cloud-action-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .cloud-action-card:hover {
            border-color: var(--accent);
            background: var(--bg-hover);
        }
        
        .cloud-action-card .action-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }
        
        .cloud-action-card .action-icon.export {
            background: hsla(200, 80%, 60%, 0.15);
            color: hsl(200, 80%, 60%);
        }
        
        .cloud-action-card .action-icon.import {
            background: hsla(160, 70%, 55%, 0.15);
            color: hsl(160, 70%, 55%);
        }
        
        .cloud-action-card .action-icon.recycle {
            background: hsla(10, 70%, 60%, 0.15);
            color: hsl(10, 70%, 60%);
        }
        
        .cloud-action-card .action-label {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .cloud-action-card .action-desc {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-align: center;
            line-height: 1.3;
        }
        
        /* 同步状态卡片 */
        .sync-status-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--bg-page);
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }
        
        .sync-status-card .sync-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: hsla(var(--hue-primary), 70%, 60%, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            flex-shrink: 0;
        }
        
        .sync-status-card .sync-info {
            flex: 1;
            min-width: 0;
        }
        
        .sync-status-card .sync-info .sync-text {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .sync-status-card .sync-info .sync-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 2px;
        }
        
        /* 主题网格优化 */
        .theme-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }
        
        .theme-option {
            padding: 10px 14px;
            border-radius: var(--radius-md);
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            background: var(--bg-surface) !important;
            position: relative;
            justify-content: center;
        }
        
        /* 暗色模式下强制主题卡片使用深色背景 */
        html[data-theme$="-dark"] .theme-option {
            background: rgba(30, 41, 59, 0.9) !important;
        }
        
        /* 确保所有theme-option的文字都有足够对比度 - 全局生效，不依赖主题变量 */
        .theme-option .theme-label,
        .theme-option .theme-name {
            font-size: 0.78rem;
            font-weight: 700 !important;
            color: #0f172a !important;
            text-align: center;
            line-height: 1.3;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        
        /* 暗色主题下自动切换文字颜色 */
        html[data-theme$="-dark"] .theme-option .theme-label,
        html[data-theme$="-dark"] .theme-option .theme-name {
            color: #f1f5f9 !important;
            text-shadow: 0 1px 0 rgba(0,0,0,0.4);
        }
        
        .theme-option:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
            box-shadow: var(--card-shadow);
            background: var(--bg-hover) !important;
        }
        html[data-theme$="-dark"] .theme-option:hover {
            background: rgba(51, 65, 85, 0.9) !important;
        }
        
        .theme-option.active {
            border-color: var(--accent);
            background: var(--bg-active) !important;
            box-shadow: 0 0 0 3px hsla(var(--hue-primary), 70%, 60%, 0.2);
        }
        html[data-theme$="-dark"] .theme-option.active {
            background: rgba(71, 85, 105, 0.9) !important;
        }
        
        .theme-preview {
            width: 48px;
            height: 32px;
            border-radius: 8px;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border: 1px solid var(--border);
        }
        
        .theme-option .theme-label {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-primary) !important;
            text-align: center;
            line-height: 1.3;
        }
        
        .theme-badge {
            position: absolute;
            top: -6px;
            right: -6px;
            background: var(--accent);
            color: var(--white-solid);
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 700;
        }
        
        /* 书签样式网格优化 */
        .card-style-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        
        .card-style-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px 6px;
            border-radius: var(--radius-sm);
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .card-style-option:hover {
            border-color: var(--accent);
        }
        
        .card-style-option.active {
            border-color: var(--accent);
            background: var(--bg-active);
        }
        
        .style-preview {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background: var(--bg-page);
            border: 1px solid var(--border);
        }
        
        .card-style-option .style-label {
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--text-secondary);
            text-align: center;
            line-height: 1.2;
        }
        
        .card-style-option.active .style-label {
            color: var(--accent);
        }
        
        /* 设置组标题紧凑样式 */
        .settings-group-title {
            display: block;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        
        .settings-tip {
            padding: 10px 14px;
            background: hsla(var(--hue-primary), 70%, 60%, 0.08);
            border-radius: 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            border-left: 3px solid var(--accent);
            margin-top: 10px;
        }
        
        /* 表单组紧凑样式 */
        .settings-group .form-group {
            margin-bottom: 10px;
        }
        
        .settings-group .form-group:last-child {
            margin-bottom: 0;
        }
        
        /* 按钮紧凑样式 */
        .settings-group .btn {
            padding: 10px 16px;
            font-size: 0.88rem;
        }
        
        .settings-group .btn-sm {
            padding: 8px 14px;
            font-size: 0.85rem;
        }
        
        /* 输入框紧凑样式 */
        .settings-group input[type="text"],
        .settings-group input[type="password"],
        .settings-group select {
            padding: 10px 14px;
            font-size: 0.88rem;
        }
        
        .settings-select {
            padding: 8px 14px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--bg-surface);
            color: var(--text-primary);
            font-size: 0.85rem;
            outline: none;
            cursor: pointer;
            transition: all var(--transition-normal);
        }
        .settings-select:hover {
            border-color: var(--accent);
        }
        .settings-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .settings-modal {
                width: 100vw;
                height: 100vh;
                max-width: 100vw;
                max-height: 100vh;
                border-radius: 0;
            }
            
            .settings-layout {
                flex-direction: column;
                height: 100%;
            }
            
            .settings-sidebar {
                width: 100%;
                height: auto;
                max-height: 200px;
                border-right: none;
                border-bottom: 1px solid var(--border);
            }
            
            .settings-nav {
                display: flex;
                overflow-x: auto;
                padding: 8px;
                gap: 4px;
            }
            
            .settings-nav-item {
                flex-shrink: 0;
                padding: 8px 12px;
                border-left: none;
                border-bottom: 3px solid transparent;
                border-radius: 8px;
            }
            
            .settings-nav-item.active {
                border-left: none;
                border-bottom-color: var(--accent);
            }
            
            .settings-content {
                padding: 20px;
            }
        }
        .form-group { margin-bottom: 20px; }
        #authModal .modal .form-group { margin-bottom: 20px; }
        #authModal .modal .form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
        #authModal #switchAuthMode { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
        #authModal .form-actions { margin-top: 28px; flex-wrap: wrap; }
        .form-group label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.2px; }
        .form-group input, .form-group select {
            width: 100%; padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius-md);
            background: var(--bg-surface);
            color: var(--text-primary);
            font-size: 0.95rem;
            outline: none;
            box-shadow: 0 4px 20px hsla(0, 0%, 0%, 0.1), 0 1px 6px hsla(0, 0%, 100%, 0.05) inset;
            transition: all var(--transition-normal);
        }
        .form-group select option {
            background: var(--bg-surface);
            color: var(--text-primary);
        }
        [data-theme$="-dark"] .form-group select option {
            background: rgba(15,23,42,0.9);
            color: rgba(255,255,255,0.9);
        }
        /* 禁用浏览器默认的密码眼睛图标 */
        .form-group input[type="password"]::-ms-reveal,
        .form-group input[type="password"]::-ms-clear {
            display: none !important;
        }
        .form-group input[type="password"]::-webkit-credentials-auto-fill-button {
            display: none !important;
        }
        .form-group input[type="password"]::-webkit-password-icon {
            display: none !important;
        }
        [data-theme$="-dark"] .form-group input, [data-theme$="-dark"] .form-group select {
            background: var(--bg-surface);
            color: var(--text-primary);
            border-color: var(--border);
        }
        .form-group input:focus, .form-group select:focus {
            border-color: var(--accent);
            box-shadow:0 0 0 4px rgba(102,126,234,0.2), 0 6px 24px rgba(0,0,0,0.25), 0 2px 8px rgba(255,255,255,0.15) inset;
            transform: translateY(-1px);
        }
        .form-group input::placeholder {
            color: var(--text-secondary);
        }
        [data-theme$="-dark"] .form-group input::placeholder {
            color: var(--text-secondary);
        }
        
        /* 切换开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--border);
            transition: 0.3s;
            border-radius: 26px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        input:checked + .slider {
            background-color: var(--accent);
        }
        input:checked + .slider:before {
            transform: translateX(22px);
        }
        .slider:hover {
            background-color: var(--bg-hover);
        }
        input:checked + .slider:hover {
            background-color: var(--accent-hover);
        }
        
        /* kbd 键盘按键样式 */
        kbd {
            padding: 2px 6px;
            background: var(--bg-page);
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.85em;
            font-family: monospace;
            color: var(--text-primary);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .form-error { 
            color: #ef4444; 
            font-size: 0.85rem; 
            margin-top: 8px; 
            display: none; 
            font-weight:600; 
            padding: 10px 14px; 
            background: rgba(239, 68, 68, 0.08); 
            border: 1px solid rgba(239, 68, 68, 0.2); 
            border-radius: 8px;
            line-height: 1.5;
        }
        .form-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:24px; }
        .btn { 
            padding:12px 24px; 
            border-radius:14px; 
            border:none; 
            font-weight:700; 
            cursor:pointer; 
            font-size: 0.92rem; 
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
            letter-spacing: 0.2px;
        }
        .btn-primary { 
            background: linear-gradient(135deg, var(--accent), var(--accent-hover)); 
            color: white; 
            box-shadow: 0 8px 28px hsla(var(--hue-primary), 70%, 60%, 0.4), 0 2px 10px hsla(var(--hue-accent), 65%, 60%, 0.3); 
        }
        .btn-primary:hover { 
            background: linear-gradient(135deg, var(--accent-hover), var(--accent)); 
            transform: translateY(-3px) scale(1.02); 
            box-shadow: 0 12px 36px hsla(var(--hue-primary), 70%, 60%, 0.5), 0 4px 14px hsla(var(--hue-accent), 65%, 60%, 0.4); 
        }
        .btn:hover { 
            transform: translateY(-3px) scale(1.02); 
        }
        .btn-ghost { 
            background: var(--bg-hover); 
            color: var(--text-primary); 
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
        }
        .btn-ghost:hover { 
            background: var(--bg-active); 
            transform: translateY(-2px); 
        }
        .btn-danger { 
            background: linear-gradient(135deg, #ef4444, #dc2626); 
            color: white; 
            box-shadow: 0 8px 28px rgba(239, 68, 68, 0.4); 
        }
        .btn-danger:hover { 
            background: linear-gradient(135deg, #dc2626, #b91c1c); 
            transform: translateY(-3px) scale(1.02); 
        }
        .btn-success { 
            background: linear-gradient(135deg, #22c55e, #16a34a); 
            color: white; 
            box-shadow: 0 8px 28px rgba(34, 197, 94, 0.4); 
        }
        .btn-success:hover { 
            background: linear-gradient(135deg, #16a34a, #15803d); 
            transform: translateY(-3px) scale(1.02); 
        }
        .btn-sm { padding: 8px 16px; font-size: 0.85rem; border-radius: var(--radius-md); }

        .context-menu {
            position:fixed; 
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: var(--radius-lg);
            box-shadow: 0 20px 60px hsla(var(--hue-primary), 30%, 20%, 0.35), 0 4px 16px hsla(0, 0%, 100%, 0.1) inset; 
            padding:6px 0; 
            min-width:200px;
            z-index:999; 
            border:1px solid var(--border); 
            display:none;
            animation: contextMenuSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        @keyframes contextMenuSlideIn {
            from { transform: translateY(-10px) scale(0.95); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        .context-menu .menu-item {
            padding:12px 18px; cursor:pointer; font-size:0.88rem;
            display:flex; align-items:center; gap:12px; color: var(--text-primary);
            transition: all var(--transition-fast);
            font-weight:600;
            margin: 2px 6px;
            border-radius: 10px;
        }
        .context-menu .menu-item:hover { 
            background: var(--bg-hover); 
            transform: translateX(4px);
            color: var(--text-primary);
        }
        .context-menu .menu-divider { 
            height: 1px; 
            background: linear-gradient(90deg, transparent, var(--border), transparent); 
            margin: 6px 12px; 
        }

        .toast-container {
            position: fixed; bottom: 20px; right: 20px; z-index: 2000;
            display: flex; flex-direction: column; gap: 10px;
        }
        .toast {
            padding: 14px 22px; border-radius: 14px; color: #fff; font-size: 0.92rem; font-weight: 500;
            box-shadow: 0 12px 40px rgba(0,0,0,0.25); animation: toastSlideIn 0.4s ease;
            max-width: 400px; display: flex; align-items: center; gap: 12px;
            border-left: 4px solid rgba(255,255,255,0.5);
        }
        .toast.success { 
            background: linear-gradient(135deg, #22c55e, #16a34a); 
            box-shadow: 0 12px 40px rgba(34,197,94,0.35);
        }
        .toast.error { 
            background: linear-gradient(135deg, #ef4444, #dc2626); 
            box-shadow: 0 12px 40px rgba(239,68,68,0.35);
        }
        .toast.info { 
            background: linear-gradient(135deg, var(--accent), var(--accent-hover)); 
            box-shadow: 0 12px 40px rgba(99,102,241,0.35);
        }
        .toast.warning { 
            background: linear-gradient(135deg, #f59e0b, #d97706); 
            box-shadow: 0 12px 40px rgba(245,158,11,0.35);
        }
        .toast-icon { font-size: 1.4rem; }
        @keyframes toastSlideIn {
            from { transform: translateY(120px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes dialogFadeIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .recycle-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
            background: var(--bg-hover);
        }
        .recycle-item-info { flex: 1; overflow: hidden; }
        .recycle-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .recycle-item-date { font-size: 0.75rem; color: var(--text-secondary); }
        .recycle-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

        .wallpaper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
        .wallpaper-option {
            height: 60px; border-radius: 10px; cursor: pointer; border: 2px solid transparent;
            transition: 0.2s; background-size: cover; background-position: center;
        }
        .wallpaper-option:hover { transform: scale(1.03); }
        .wallpaper-option.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }

        .density-options { display: flex; gap: 8px; margin-bottom: 14px; }
        .density-option {
            flex: 1; padding: 10px; border-radius: 10px; border: 2px solid var(--border);
            text-align: center; cursor: pointer; font-size: 0.85rem; transition: 0.2s;
            background: var(--bg-surface); color: var(--text-primary);
        }
        .density-option.active { border-color: var(--accent); background: var(--bg-active); }

        /* 卡片方案选择器 */
        .card-style-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }
        .card-style-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 12px 8px;
            border-radius: var(--radius-md);
            border: 2px solid var(--border);
            background: var(--bg-surface);
            cursor: pointer;
            transition: 0.2s;
            font-size: 0.8rem;
            color: var(--text-primary);
        }
        .card-style-option:hover {
            border-color: var(--text-tertiary);
            transform: translateY(-2px);
        }
        .card-style-option.active {
            border-color: var(--accent);
            background: var(--bg-active);
        }
        .style-preview {
            width: 100%;
            padding: 8px;
            border-radius: 8px;
            background: var(--bg-page);
        }
        .preview-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .preview-icon {
            width: 24px;
            height: 24px;
            border-radius: 8px;
            background: linear-gradient(135deg, #00d4aa, #a855f7);
        }
        .preview-title {
            width: 40px;
            height: 6px;
            border-radius: 3px;
            background: var(--text-secondary);
        }
        .preview-domain {
            width: 30px;
            height: 4px;
            border-radius: 2px;
            background: var(--text-tertiary);
        }

        /* 布局变体选择器 */
        .layout-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }
        .layout-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 12px 8px;
            border-radius: var(--radius-md);
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all var(--transition-fast);
            background: var(--bg-surface);
        }
        .layout-option:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .layout-option.active {
            border-color: var(--accent);
            background: var(--bg-active);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .layout-icon {
            font-size: 1.5rem;
        }
        .layout-name {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
        }

        /* 书签样式选择器 */
        .card-style-options { 
            display: grid; 
            grid-template-columns: repeat(5, 1fr); 
            gap: 10px; 
            margin-bottom: 14px; 
        }
        .card-style-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 12px 8px;
            border-radius: 12px;
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--bg-surface);
            color: var(--text-secondary);
            font-size: 0.75rem;
        }
        .card-style-option:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }
        .card-style-option.active { 
            border-color: var(--accent); 
            background: var(--bg-active);
            color: var(--text-primary);
        }
        .style-preview {
            width: 40px;
            height: 40px;
            background: var(--white-15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--white-20);
            transition: all 0.3s ease;
        }
        /* 正方形预览 */
        .square-preview {
            aspect-ratio: 1 / 1;
            border-radius: 12px;
        }
        /* 长方形预览 */
        .rectangle-preview {
            width: 56px;
            height: 32px;
            border-radius: 8px;
        }
        /* 圆角胶囊预览 */
        .rounded-preview {
            width: 56px;
            height: 32px;
            border-radius: 16px;
        }
        /* 不对称预览 */
        .asymmetric-preview {
            width: 56px;
            height: 32px;
            border-radius: 16px 6px 16px 6px;
        }
        /* 有机形态预览 */
        .organic-preview {
            width: 56px;
            height: 32px;
            clip-path: polygon(
                12% 0%, 88% 0%, 
                100% 12%, 100% 88%, 
                88% 100%, 12% 100%, 
                0% 88%, 0% 12%
            );
        }
        /* WebTab风格预览 */
        .wetab-preview {
            width: 40px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, hsla(var(--hue-primary), 70%, 65%, 0.2), hsla(var(--hue-accent), 65%, 60%, 0.1));
        }
        /* 霓虹发光预览 */
        .neon-preview {
            width: 56px;
            height: 32px;
            border-radius: 8px;
            background: hsla(var(--hue-primary), 70%, 15%, 0.6);
            border: 2px solid hsla(var(--hue-primary), 80%, 60%, 0.4);
            box-shadow: 0 0 10px hsla(var(--hue-primary), 80%, 60%, 0.3);
        }
        /* 渐变卡片预览 */
        .gradient-preview {
            width: 56px;
            height: 32px;
            border-radius: 10px;
            background: linear-gradient(135deg, hsla(var(--hue-primary), 70%, 60%, 0.3), hsla(var(--hue-accent), 65%, 55%, 0.25));
        }
        /* 极简线条预览 */
        .minimal-preview {
            width: 56px;
            height: 32px;
            border-radius: 6px;
            background: var(--white-10);
            border-left: 3px solid hsla(var(--hue-primary), 70%, 65%, 0.6);
        }
        /* 悬浮阴影预览 */
        .floating-preview {
            width: 56px;
            height: 32px;
            border-radius: 9px;
            background: var(--white-18);
            box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.15);
        }
        /* 杂志排版预览 */
        .magazine-preview {
            width: 56px;
            height: 32px;
            border-radius: 0;
            background: var(--white-12);
            border-bottom: 2px solid hsla(var(--hue-primary), 70%, 65%, 0.5);
        }
        /* 紧凑型列表预览 */
        .compactlist-preview {
            width: 56px;
            height: 24px;
            border-radius: 5px;
            background: var(--white-10);
        }

        .folder-select-list { max-height: 200px; overflow-y: auto; margin-bottom: 14px; }
        .folder-select-item {
            padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: 0.15s;
            display: flex; align-items: center; gap: 8px;
        }
        .folder-select-item:hover { background: var(--bg-hover); }
        .folder-select-item.selected { background: var(--bg-active); color: var(--accent); }

        .setup-sql-box {
            background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 12px;
            font-family: 'Consolas', 'Monaco', monospace; font-size: 0.8rem;
            white-space: pre-wrap; max-height: 200px; overflow-y: auto; margin-bottom: 14px;
            line-height: 1.5;
        }

        /* 图标输入框包装器 */
        .icon-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        .icon-input-wrapper input {
            padding-right: 92px;
        }
        .icon-upload-btn, .icon-picker-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            border: none;
            background: var(--bg-hover);
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s;
        }
        .icon-upload-btn {
            right: 44px;
        }
        .icon-picker-btn {
            right: 8px;
        }
        .icon-upload-btn:hover, .icon-picker-btn:hover {
            background: var(--bg-active);
            transform: translateY(-50%) scale(1.05);
        }
        .icon-upload-btn.uploading {
            opacity: 0.7;
            cursor: not-allowed;
        }

        /* 图标选择器样式 */
        .icon-picker-modal {
            max-width: 560px;
            width: 90vw;
        }
        .icon-categories {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .category-btn {
            padding: 6px 14px;
            border: 1px solid var(--border);
            background: var(--bg-surface);
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.85rem;
            color: var(--text-primary);
            transition: 0.2s;
        }
        .category-btn:hover {
            background: var(--bg-hover);
        }
        .category-btn.active {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            max-height: 450px;
            overflow-y: auto;
            padding: 8px;
        }
        .icon-item {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            border-radius: 12px;
            cursor: pointer;
            transition: 0.15s;
            background: var(--bg-surface);
            border: 2px solid transparent;
        }
        .icon-item:hover {
            background: var(--bg-hover);
            transform: scale(1.1);
            border-color: var(--accent);
        }
        .icon-item:active {
            transform: scale(0.95);
        }

        .hamburger { display: none; }

        @media (max-width: 768px) {
            .hamburger { display: flex; }
            .topbar { padding: 0 12px; gap: 8px; }
            .logo-img { display: none; }
            .view-tabs { display: none; }
            .topbar-actions .icon-btn { width: 32px; height: 32px; font-size: 1.1rem; }
            .home-time { font-size: 3rem; }
            .home-view { padding: 60px 12px 30px; }
            .home-quick-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
            .ai-tools { gap: 12px; }
            .ai-tool-card { width: 130px; padding: 16px 10px 14px; }
            .home-quick-icon,
            .ai-tool-icon { width: 48px; height: 48px; font-size: 2rem; }
            .home-quick-icon img,
            .ai-tool-icon img { width: 26px; height: 26px; }
            .bookmarks-view { flex-direction: column; }
            .sidebar {
                position: fixed; top: 56px; left: 0; width: 280px; height: calc(100vh - 56px);
                z-index: 500; transform: translateX(-100%); transition: transform 0.3s;
                box-shadow: 4px 0 20px rgba(0,0,0,0.15);
            }
            .sidebar.open { transform: translateX(0); }
            .resizer { display: none; }
            .hero-area { padding: 12px 16px 10px; }
            .hero-time-big { font-size: 2rem; }
            .hero-search-row { flex-direction: column; }
            .bookmark-grid { 
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
                gap: 10px; 
            }
            .bookmark-grid.style-square { 
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
            }
            .bookmark-grid.style-webtab { 
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
            }
            .bookmark-grid.style-gridlarge { 
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
            }
            .cards-body { padding: 0 10px 10px; }
            .modal { width: 95vw; padding: 20px; }
            .wallpaper-grid { grid-template-columns: repeat(2, 1fr); }
            /* 移动端横向书签调整 */
            .bookmark-card.style-rectangle,
            .bookmark-card.style-rounded,
            .bookmark-card.style-asymmetric,
            .bookmark-card.style-organic,
            .bookmark-card.style-list,
            .bookmark-card.style-compactlist,
            .bookmark-card.style-neon,
            .bookmark-card.style-gradient,
            .bookmark-card.style-minimal,
            .bookmark-card.style-floating,
            .bookmark-card.style-magazine {
                min-width: unset;
                width: 100%;
            }
            /* 移动端样式选择器调整 */
            .card-style-options {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 480px) {
            .home-quick-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .ai-tool-card { width: 110px; padding: 14px 8px 12px; }
            .home-quick-icon,
            .ai-tool-icon { width: 44px; height: 44px; font-size: 1.7rem; }
            .home-quick-icon img,
            .ai-tool-icon img { width: 24px; height: 24px; }
            .bookmark-grid { 
                grid-template-columns: 1fr; 
                gap: 8px; 
            }
            .bookmark-grid.style-square { 
                grid-template-columns: repeat(3, 1fr); 
            }
            .bookmark-grid.style-webtab { 
                grid-template-columns: repeat(2, 1fr); 
            }
            .bookmark-grid.style-gridlarge { 
                grid-template-columns: repeat(2, 1fr); 
            }
            /* 小屏幕样式选择器调整 */
            .card-style-options {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* 有壁纸时的样式 - 完全透明，保持全屏沉浸感 */
        .has-wallpaper .topbar {
            background: transparent;
            border-bottom: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .has-wallpaper[data-theme$="-dark"] .topbar {
            background: transparent;
            border-bottom: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .has-wallpaper .topbar.editing {
            background: transparent;
            border-bottom: none;
        }
        .has-wallpaper[data-theme$="-dark"] .topbar.editing {
            background: transparent;
            border-bottom: none;
        }



        /* 壁纸模式下的登录按钮样式 */
        .has-wallpaper .login-btn {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--accent);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .has-wallpaper[data-theme$="-dark"] .login-btn {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: var(--accent);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .has-wallpaper .login-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.35);
        }
        .has-wallpaper[data-theme$="-dark"] .login-btn:hover {
            background: rgba(0, 0, 0, 0.35);
            border-color: rgba(255, 255, 255, 0.25);
        }

        /* 壁纸模式下的图标按钮样式 */
        .has-wallpaper .icon-btn,
        .has-wallpaper .view-tab {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: white;
            backdrop-filter: blur(10px);
        }
        .has-wallpaper[data-theme$="-dark"] .icon-btn,
        .has-wallpaper[data-theme$="-dark"] .view-tab {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: white;
        }
        .has-wallpaper .icon-btn:hover,
        .has-wallpaper .view-tab:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }
        .has-wallpaper[data-theme$="-dark"] .icon-btn:hover,
        .has-wallpaper[data-theme$="-dark"] .view-tab:hover {
            background: rgba(0, 0, 0, 0.35);
            border-color: rgba(255, 255, 255, 0.25);
        }

        /* 壁纸模式下的用户菜单样式 */
        .has-wallpaper .user-menu {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .has-wallpaper[data-theme$="-dark"] .user-menu {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        .has-wallpaper .user-menu:hover {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.35);
        }
        .has-wallpaper[data-theme$="-dark"] .user-menu:hover {
            background: rgba(0, 0, 0, 0.35);
            border-color: rgba(255, 255, 255, 0.25);
        }



        /* 壁纸模式下的侧边栏底部样式 - 更透明 */
        .has-wallpaper .sidebar-footer {
            background: transparent;
            border: none;
        }
        .has-wallpaper[data-theme$="-dark"] .sidebar-footer {
            background: transparent;
            border: none;
        }

        /* ============ 主题弹窗标签页 ============ */
        .theme-dropdown-tab {
            color: var(--text-muted);
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
        }
        .theme-dropdown-tab:hover {
            color: var(--text-primary);
            background: var(--bg-hover);
        }
        .theme-dropdown-tab.active {
            color: var(--accent) !important;
            background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface)) !important;
            border: 3px solid var(--accent) !important;
            border-bottom: 5px solid var(--accent) !important;
            font-weight: 800;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent) !important;
            border-radius: 10px 10px 4px 4px;
        }
        .theme-dropdown-panel {
            animation: dropdownTabFade 0.2s ease;
        }
        @keyframes dropdownTabFade {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 弹窗内 select 下拉样式 */
        .dropdown-card-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 36px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .dropdown-card-select:hover {
            border-color: var(--accent);
        }
        .dropdown-card-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
        }

        /* 快捷设置面板主题选项的基础样式 */
        .dropdown-theme-item {
            transition: all 0.2s ease;
        }
        /* 快捷设置面板卡片方案选项的hover效果 */
        .dropdown-card-style-option:hover {
            border-color: var(--text-tertiary);
            transform: translateY(-2px);
        }

        /* 搜索框玻璃态效果 */
        .has-wallpaper .home-search .search-container,
        .has-wallpaper .hero-search-row .search-container {
            background: var(--white-20);
            backdrop-filter: var(--glass-blur);
            color: var(--text-primary);
        }
        .has-wallpaper[data-theme$="-dark"] .home-search .search-container,
        .has-wallpaper[data-theme$="-dark"] .hero-search-row .search-container {
            background: hsla(var(--hue-primary), 40%, 15%, 0.8);
            color: var(--text-primary);
        }

        /* 收藏页也显示壁纸 */
        .has-wallpaper .bookmarks-view {
            background: transparent;
        }
        /* 壁纸模式下侧边栏完全透明，沉浸式体验 */
        .has-wallpaper .sidebar::before {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .has-wallpaper[data-theme$="-dark"] .sidebar::before {
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .has-wallpaper .sidebar {
            background: transparent;
            border-right: none;
        }
        .has-wallpaper[data-theme$="-dark"] .sidebar {
            background: transparent;
            border-right: none;
        }

        /* 首页快捷卡片玻璃态 */
        .has-wallpaper .home-quick-card,
        .has-wallpaper .ai-tool-card,
        .has-wallpaper .bookmark-card {
            background: var(--white-20);
            backdrop-filter: var(--glass-blur);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }
        .has-wallpaper[data-theme$="-dark"] .home-quick-card,
        .has-wallpaper[data-theme$="-dark"] .ai-tool-card,
        .has-wallpaper[data-theme$="-dark"] .bookmark-card {
            background: hsla(var(--hue-primary), 40%, 15%, 0.85);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        /* 收藏页的content-area、hero-area、cards-body也透明 */
        .has-wallpaper .content-area,
        .has-wallpaper .hero-area,
        .has-wallpaper .cards-body,
        .has-wallpaper .home-view {
            background: transparent;
        }

        /* hero-area中的按钮在有壁纸时也有玻璃态 */
        .has-wallpaper .hero-area .btn {
            background: var(--bg-surface);
            backdrop-filter: var(--glass-blur);
            color: var(--text-primary);
        }
        .has-wallpaper .hero-area .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--accent-hover));
            color: white;
        }

        /* 确保亮色模式下所有文字都是深色，避免浅色壁纸把白色字吃掉 */
        .has-wallpaper:not([data-theme$="-dark"]) .topbar,
        .has-wallpaper:not([data-theme$="-dark"]) .sidebar,
        .has-wallpaper:not([data-theme$="-dark"]) .hero-area {
            color: var(--text-primary) !important;
        }

        /* 亮色模式下特定文字颜色 */
        .has-wallpaper:not([data-theme$="-dark"]) .logo,
        .has-wallpaper:not([data-theme$="-dark"]) .view-tab,
        .has-wallpaper:not([data-theme$="-dark"]) .icon-btn,
        .has-wallpaper:not([data-theme$="-dark"]) .login-btn,
        .has-wallpaper:not([data-theme$="-dark"]) .user-menu,
        .has-wallpaper:not([data-theme$="-dark"]) .search-input,
        .has-wallpaper:not([data-theme$="-dark"]) .search-input::placeholder,
        .has-wallpaper:not([data-theme$="-dark"]) .all-bookmarks-item,
        .has-wallpaper:not([data-theme$="-dark"]) .tree-item,
        .has-wallpaper:not([data-theme$="-dark"]) .sidebar-header,
        .has-wallpaper:not([data-theme$="-dark"]) .hero-breadcrumb,
        .has-wallpaper:not([data-theme$="-dark"]) .hero-time-big,
        .has-wallpaper:not([data-theme$="-dark"]) .hero-date-lunar,
        .has-wallpaper:not([data-theme$="-dark"]) .hero-weather,
        .has-wallpaper:not([data-theme$="-dark"]) .card-title,
        .has-wallpaper:not([data-theme$="-dark"]) .card-domain,
        .has-wallpaper:not([data-theme$="-dark"]) .home-quick-title,
        .has-wallpaper:not([data-theme$="-dark"]) .sidebar-footer {
            color: var(--text-primary) !important;
        }
        /* 亮色模式下登录按钮hover状态保持紫色 */
        .has-wallpaper:not([data-theme$="-dark"]) .login-btn:hover {
            color: var(--accent) !important;
        }
        /* 保持激活状态的颜色 */
        .has-wallpaper:not([data-theme$="-dark"]) .view-tab.active,
        .has-wallpaper:not([data-theme$="-dark"]) .all-bookmarks-item.active,
        .has-wallpaper:not([data-theme$="-dark"]) .tree-item.active {
            color: var(--accent) !important;
        }
        /* 保持图标的颜色 */
        .has-wallpaper:not([data-theme$="-dark"]) .icon-btn,
        .has-wallpaper:not([data-theme$="-dark"]) .view-tab {
            color: var(--text-secondary) !important;
        }
        /* 按钮hover状态保持紫色 */
        .has-wallpaper:not([data-theme$="-dark"]) .icon-btn:hover,
        .has-wallpaper:not([data-theme$="-dark"]) .view-tab:hover {
            color: var(--accent) !important;
        }

        /* ==================== 壁纸模式（最简单直接版）==================== */
        /* 确保壁纸模式下 body 和 app 容器完全透明 */
        body.has-wallpaper {
            background: transparent !important;
        }
        body.has-wallpaper .app {
            background: transparent !important;
        }
        /* 壁纸背景层 - 简单直接 */
        .has-wallpaper::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            z-index: -100 !important;
            pointer-events: none !important;
        }
        /* 壁纸暗化遮罩 */
        .has-wallpaper::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 100%);
            pointer-events: none !important;
            z-index: -99 !important;
        }

        /* 最简单的修复：在壁纸模式下，主题下拉菜单使用固定定位 */


        /* 主题选择器网格样式 */
        .theme-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }
        .theme-option {
            padding: 12px;
            border-radius: var(--radius-md);
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all var(--transition-fast);
            background: var(--bg-surface) !important;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        /* 暗色模式下强制主题卡片使用深色背景 */
        html[data-theme$="-dark"] .theme-option {
            background: rgba(30, 41, 59, 0.9) !important;
        }
        
        /* 确保所有theme-option的文字都有足够对比度 - 全局生效，不依赖主题变量 */
        .theme-option .theme-label,
        .theme-option .theme-name {
            font-size: 0.85rem;
            font-weight: 700 !important;
            color: #0f172a !important;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        
        /* 暗色主题下自动切换文字颜色 */
        html[data-theme$="-dark"] .theme-option .theme-label,
        html[data-theme$="-dark"] .theme-option .theme-name {
            color: #f1f5f9 !important;
            text-shadow: 0 1px 0 rgba(0,0,0,0.4);
        }
        
        .theme-option:hover {
            transform: translateY(-2px);
            box-shadow: var(--card-shadow);
            border-color: var(--accent);
            background: var(--bg-hover) !important;
        }
        html[data-theme$="-dark"] .theme-option:hover {
            background: rgba(51, 65, 85, 0.9) !important;
        }
        .theme-option.active {
            border-color: var(--accent);
            background: var(--bg-active) !important;
            box-shadow: 0 0 0 3px hsla(var(--hue-primary), 70%, 60%, 0.2);
        }
        html[data-theme$="-dark"] .theme-option.active {
            background: rgba(71, 85, 105, 0.9) !important;
        }
        
        /* 设置面板标题和标签页文字颜色 - 全局清晰可见 */
        .settings-panel .section-title,
        .settings-panel .group-title,
        .settings-panel .tab-title,
        .settings-panel h1,
        .settings-panel h2,
        .settings-panel h3,
        .settings-panel label {
            color: #0f172a !important;
            text-shadow: 0 1px 0 rgba(255,255,255,0.4);
        }
        
        /* 暗色主题下自动切换文字颜色 */
        html[data-theme$="-dark"] .settings-panel .section-title,
        html[data-theme$="-dark"] .settings-panel .group-title,
        html[data-theme$="-dark"] .settings-panel .tab-title,
        html[data-theme$="-dark"] .settings-panel h1,
        html[data-theme$="-dark"] .settings-panel h2,
        html[data-theme$="-dark"] .settings-panel h3,
        html[data-theme$="-dark"] .settings-panel label {
            color: #f1f5f9 !important;
            text-shadow: 0 1px 0 rgba(0,0,0,0.4);
        }
        
        .theme-preview {
            width: 100%;
            height: 40px;
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            background-size: cover;
            background-position: center;
        }
        .theme-name {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        .theme-badge {
            position: absolute;
            top: 6px;
            right: 6px;
            background: var(--accent);
            color: var(--white-solid);
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 700;
        }

        /* 主题下拉菜单样式 */
        .dropdown-theme-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
            background: var(--bg-surface);
            justify-content: center;
        }
        
        .dropdown-theme-item:hover {
            transform: translateY(-2px);
            border-color: var(--accent);
            background: var(--bg-hover);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .dropdown-theme-item.active {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 12%, var(--bg-active));
            box-shadow: 0 0 0 3px hsla(var(--hue-primary), 70%, 60%, 0.25);
        }
        
        .dropdown-theme-item:hover .dropdown-theme-preview {
            transform: scale(1.1);
        }
        
        .dropdown-theme-preview {
            width: 28px;
            height: 28px;
            border-radius: 7px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
        
        .dropdown-theme-name {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-on-accent, var(--text-primary));
            transition: color 0.2s ease;
            text-align: center;
            line-height: 1.2;
        }
        
        .dropdown-theme-item:hover .dropdown-theme-name {
            color: var(--accent);
        }
        /* 确认对话框样式 - 使用 CSS 变量替代硬编码颜色 */
        .confirm-dialog-modal {
            box-shadow: var(--card-shadow);
            overflow: hidden;
        }
        .confirm-dialog-header {
            background: linear-gradient(135deg, var(--accent), var(--accent-hover));
            padding: 24px;
        }
        .confirm-dialog-header h3 {
            color: white;
        }
        .confirm-dialog-body {
            padding: 24px;
        }
        .confirm-dialog-body p {
            color: var(--text-secondary);
        }

        /* 导入预览统计卡片颜色 - 使用语义化类名 */
        .stat-accent { color: var(--accent) !important; }
        .stat-success { color: #22c55e !important; }
        .stat-info { color: #3b82f6 !important; }
        .stat-warning { color: #f59e0b !important; }
        .stat-error { color: #ef4444 !important; }
        
        /* 导入警告框样式 */
        .import-warning-box {
            display: none;
            margin-bottom: 16px;
            padding: 12px;
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 10px;
            color: #fbbf24;
            font-size: 0.9rem;
        }

        /* 主题选项的基础样式 */
        .theme-option {
            transition: all 0.2s ease;
        }

        /* ==================== 外观标签样式 ==================== */
        .appearance-tab {
            padding: 10px 20px;
            border-radius: 12px;
            border: 2px solid var(--border);
            background: var(--bg-surface);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--text-secondary);
        }

        .appearance-tab:hover {
            border-color: var(--accent);
            background: var(--bg-hover);
            transform: translateY(-1px);
        }

        /* ============================================================
           ========== 新增主题：4套全新风格主题 ==========
           ============================================================ */

        /* 1. ========== 玄黑经典（Classic Noir）- 明暗双模式 ========== */

        /* Classic Noir - Light Mode */
        [data-theme="classic-noir-light"] {
            --theme-name: 'classic-noir';
            --bg-page: linear-gradient(135deg, #F8F8F8 0%, #F0F0F0 50%, #E5E5E5 100%);
            --bg-surface: rgba(255, 255, 255, 0.85);
            --bg-hover: rgba(229, 229, 229, 0.8);
            --bg-active: rgba(212, 175, 55, 0.12);
            --border: rgba(51, 51, 51, 0.2);
            --text-primary: #0A0A0A;
            --text-secondary: #333333;
            --text-muted: #666666;
            --accent: #D4AF37;
            --accent-secondary: #C19D2E;
            --accent-tertiary: #A88A26;
            --accent-hover: #C19D2E;
            --card-shadow: 0 4px 16px rgba(10,10,10,0.12);
            --card-shadow-hover: 0 6px 20px rgba(10,10,10,0.12);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #0A0A0A;
            --overlay-light: rgba(248,248,248,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
            --hue-primary: 45;
        }
        [data-theme="classic-noir-light"] body {
            background: linear-gradient(135deg, #F8F8F8 0%, #F0F0F0 50%, #E5E5E5 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        [data-theme="classic-noir-light"] h1,
        [data-theme="classic-noir-light"] h2,
        [data-theme="classic-noir-light"] h3 {
            font-family: "Noto Serif SC", "Georgia", serif;
        }
        
        /* --- Classic Noir - Home Quick Card --- */
        [data-theme="classic-noir-light"] .home-quick-card {
            background: #FFFFFF;
            border: 1px solid #33333320;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(10,10,10,0.06);
            padding: 20px 14px 16px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(212, 175, 55, 0.35) 50%,
                transparent 100%
            );
            transition: left 0s;
        }
        [data-theme="classic-noir-light"] .home-quick-card:hover {
            border-color: #D4AF37;
            box-shadow: 0 6px 24px rgba(10,10,10,0.14);
            transform: translateY(-2px);
        }
        [data-theme="classic-noir-light"] .home-quick-card:hover::before {
            left: 100%;
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-light"] .home-quick-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(193, 157, 46, 0.08));
            border: 1px solid rgba(212, 175, 55, 0.25);
            font-size: 1.7rem;
        }
        
        /* --- Classic Noir - AI Tool Card --- */
        [data-theme="classic-noir-light"] .ai-tool-card {
            background: #FFFFFF;
            border: 1px solid #33333320;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(10,10,10,0.06);
            padding: 18px 14px;
            gap: 10px;
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(212, 175, 55, 0.35) 50%,
                transparent 100%
            );
            transition: left 0s;
        }
        [data-theme="classic-noir-light"] .ai-tool-card:hover {
            border-color: #D4AF37;
            box-shadow: 0 6px 24px rgba(10,10,10,0.14);
            transform: translateY(-2px);
        }
        [data-theme="classic-noir-light"] .ai-tool-card:hover::before {
            left: 100%;
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-light"] .ai-tool-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(193, 157, 46, 0.08));
            border: 1px solid rgba(212, 175, 55, 0.25);
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        
        /* --- Classic Noir - Bookmark Card --- */
        [data-theme="classic-noir-light"] .bookmark-card {
            background: #FFFFFF;
            border: 1px solid #33333320;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(10,10,10,0.06);
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(212, 175, 55, 0.35) 50%,
                transparent 100%
            );
            transition: left 0s;
        }
        [data-theme="classic-noir-light"] .bookmark-card:hover {
            border-color: #D4AF37;
            box-shadow: 0 6px 24px rgba(10,10,10,0.14);
            transform: translateY(-2px);
        }
        [data-theme="classic-noir-light"] .bookmark-card:hover::before {
            left: 100%;
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-light"] .card-favicon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(193, 157, 46, 0.08));
            border: 1px solid rgba(212, 175, 55, 0.25);
        }

        /* Classic Noir - Dark Mode */
        [data-theme="classic-noir-dark"] {
            --theme-name: 'classic-noir';
            --bg-page: linear-gradient(135deg, #0A0A0A 0%, #121212 50%, #1A1A1A 100%);
            --bg-surface: rgba(26, 26, 26, 0.85);
            --bg-hover: rgba(37, 37, 37, 0.8);
            --bg-active: rgba(212, 175, 55, 0.14);
            --border: rgba(51, 51, 51, 0.5);
            --text-primary: #F8F8F8;
            --text-secondary: #E5E5E5;
            --text-muted: #999999;
            --accent: #D4AF37;
            --accent-secondary: #C19D2E;
            --accent-tertiary: #A88A26;
            --accent-hover: #C19D2E;
            --card-shadow: 0 4px 16px rgba(0,0,0,0.5);
            --card-shadow-hover: 0 6px 20px rgba(0,0,0,0.45);
            --white-10: rgba(248,248,248,0.1);
            --white-15: rgba(248,248,248,0.15);
            --white-20: rgba(248,248,248,0.2);
            --white-30: rgba(248,248,248,0.3);
            --white-40: rgba(248,248,248,0.4);
            --white-50: rgba(248,248,248,0.5);
            --white-60: rgba(248,248,248,0.6);
            --white-80: rgba(248,248,248,0.8);
            --white-solid: #F8F8F8;
            --text-on-white: #F8F8F8;
            --overlay-light: rgba(10,10,10,0.05);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 45;
        }
        [data-theme="classic-noir-dark"] body {
            background: linear-gradient(135deg, #0A0A0A 0%, #121212 50%, #1A1A1A 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        [data-theme="classic-noir-dark"] h1,
        [data-theme="classic-noir-dark"] h2,
        [data-theme="classic-noir-dark"] h3 {
            font-family: "Noto Serif SC", "Georgia", serif;
        }
        
        /* --- Classic Noir Dark - Home Quick Card --- */
        [data-theme="classic-noir-dark"] .home-quick-card {
            background: #1A1A1A;
            border: 1px solid #33333360;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.3);
            padding: 20px 14px 16px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(212, 175, 55, 0.4) 50%,
                transparent 100%
            );
            transition: left 0s;
        }
        [data-theme="classic-noir-dark"] .home-quick-card:hover {
            border-color: #D4AF37;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5);
            transform: translateY(-2px);
        }
        [data-theme="classic-noir-dark"] .home-quick-card:hover::before {
            left: 100%;
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-dark"] .home-quick-icon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(193, 157, 46, 0.1));
            border: 1px solid rgba(212, 175, 55, 0.3);
            font-size: 1.7rem;
        }
        
        /* --- Classic Noir Dark - AI Tool Card --- */
        [data-theme="classic-noir-dark"] .ai-tool-card {
            background: #1A1A1A;
            border: 1px solid #33333360;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.3);
            padding: 18px 14px;
            gap: 10px;
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(212, 175, 55, 0.4) 50%,
                transparent 100%
            );
            transition: left 0s;
        }
        [data-theme="classic-noir-dark"] .ai-tool-card:hover {
            border-color: #D4AF37;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5);
            transform: translateY(-2px);
        }
        [data-theme="classic-noir-dark"] .ai-tool-card:hover::before {
            left: 100%;
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-dark"] .ai-tool-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(193, 157, 46, 0.1));
            border: 1px solid rgba(212, 175, 55, 0.3);
            font-size: 1.5rem;
            flex-shrink: 0;
        }
        
        /* --- Classic Noir Dark - Bookmark Card --- */
        [data-theme="classic-noir-dark"] .bookmark-card {
            background: #1A1A1A;
            border: 1px solid #33333360;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.3);
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(212, 175, 55, 0.4) 50%,
                transparent 100%
            );
            transition: left 0s;
        }
        [data-theme="classic-noir-dark"] .bookmark-card:hover {
            border-color: #D4AF37;
            box-shadow: 0 6px 24px rgba(0,0,0,0.5);
            transform: translateY(-2px);
        }
        [data-theme="classic-noir-dark"] .bookmark-card:hover::before {
            left: 100%;
            transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="classic-noir-dark"] .card-favicon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(193, 157, 46, 0.1));
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        /* 2. ========== 沙丘奢金（Luxury Dune）- 明暗双模式 ========== */

        /* Luxury Dune - Light Mode */
        [data-theme="luxury-dune-light"] {
            --theme-name: 'luxury-dune';
            --bg-page: linear-gradient(135deg, #F5F0EB 0%, #EAE5DC 50%, #F0EBE0 100%);
            --bg-surface: rgba(255, 255, 255, 0.82);
            --bg-hover: rgba(234, 229, 220, 0.8);
            --bg-active: rgba(201, 177, 143, 0.14);
            --border: rgba(201, 177, 143, 0.25);
            --text-primary: #2C2416;
            --text-secondary: #5C4A32;
            --text-muted: #8A7A60;
            --accent: #C9B18F;
            --accent-secondary: #BFA88A;
            --accent-tertiary: #A38F6F;
            --accent-hover: #BFA88A;
            --card-shadow: 0 4px 16px rgba(44,36,22,0.1);
            --card-shadow-hover: 0 8px 24px rgba(44,36,22,0.15);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #2C2416;
            --overlay-light: rgba(245,240,235,0.55);
            --overlay-dark: rgba(0,0,0,0.04);
            --hue-primary: 35;
        }
        [data-theme="luxury-dune-light"] body {
            background: linear-gradient(135deg, #F5F0EB 0%, #EAE5DC 50%, #F0EBE0 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        [data-theme="luxury-dune-light"] h1,
        [data-theme="luxury-dune-light"] h2,
        [data-theme="luxury-dune-light"] h3 {
            font-family: "Noto Serif SC", "Georgia", serif;
        }
        
        /* --- Luxury Dune - Home Quick Card --- */
        [data-theme="luxury-dune-light"] .home-quick-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #FAF8F5 100%);
            border: 1px solid rgba(201, 177, 143, 0.35);
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(44, 36, 22, 0.08);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="luxury-dune-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(201, 177, 143, 0.03) 2px,
                rgba(201, 177, 143, 0.03) 4px
            );
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        [data-theme="luxury-dune-light"] .home-quick-card:hover {
            border-color: #C9B18F;
            box-shadow: 0 10px 30px rgba(44, 36, 22, 0.18), 0 0 0 1px rgba(201, 177, 143, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="luxury-dune-light"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="luxury-dune-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(201, 177, 143, 0.18), rgba(191, 168, 138, 0.12));
            border: 1px solid rgba(201, 177, 143, 0.35);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(44, 36, 22, 0.06);
        }
        
        /* --- Luxury Dune - AI Tool Card --- */
        [data-theme="luxury-dune-light"] .ai-tool-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #FAF8F5 100%);
            border: 1px solid rgba(201, 177, 143, 0.35);
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(44, 36, 22, 0.08);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="luxury-dune-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(201, 177, 143, 0.03) 2px,
                rgba(201, 177, 143, 0.03) 4px
            );
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        [data-theme="luxury-dune-light"] .ai-tool-card:hover {
            border-color: #C9B18F;
            box-shadow: 0 10px 30px rgba(44, 36, 22, 0.18), 0 0 0 1px rgba(201, 177, 143, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="luxury-dune-light"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="luxury-dune-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(201, 177, 143, 0.18), rgba(191, 168, 138, 0.12));
            border: 1px solid rgba(201, 177, 143, 0.35);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(44, 36, 22, 0.06);
        }
        
        /* --- Luxury Dune - Bookmark Card --- */
        [data-theme="luxury-dune-light"] .bookmark-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #FAF8F5 100%);
            border: 1px solid rgba(201, 177, 143, 0.35);
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(44, 36, 22, 0.08);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="luxury-dune-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(201, 177, 143, 0.03) 2px,
                rgba(201, 177, 143, 0.03) 4px
            );
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        [data-theme="luxury-dune-light"] .bookmark-card:hover {
            border-color: #C9B18F;
            box-shadow: 0 10px 30px rgba(44, 36, 22, 0.18), 0 0 0 1px rgba(201, 177, 143, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="luxury-dune-light"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="luxury-dune-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(201, 177, 143, 0.18), rgba(191, 168, 138, 0.12));
            border: 1px solid rgba(201, 177, 143, 0.35);
            box-shadow: 0 2px 8px rgba(44, 36, 22, 0.06);
        }

        /* Luxury Dune - Dark Mode */
        [data-theme="luxury-dune-dark"] {
            --theme-name: 'luxury-dune';
            --bg-page: linear-gradient(135deg, #2C2416 0%, #362D1E 50%, #403422 100%);
            --bg-surface: rgba(64, 52, 34, 0.78);
            --bg-hover: rgba(74, 61, 38, 0.75);
            --bg-active: rgba(201, 177, 143, 0.14);
            --border: rgba(201, 177, 143, 0.25);
            --text-primary: #F5F0EB;
            --text-secondary: #EAE5DC;
            --text-muted: #BFA88A;
            --accent: #C9B18F;
            --accent-secondary: #BFA88A;
            --accent-tertiary: #A38F6F;
            --accent-hover: #BFA88A;
            --card-shadow: 0 4px 16px rgba(0,0,0,0.45);
            --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.3);
            --white-10: rgba(245,240,235,0.1);
            --white-15: rgba(245,240,235,0.15);
            --white-20: rgba(245,240,235,0.2);
            --white-30: rgba(245,240,235,0.3);
            --white-40: rgba(245,240,235,0.4);
            --white-50: rgba(245,240,235,0.5);
            --white-60: rgba(245,240,235,0.6);
            --white-80: rgba(245,240,235,0.8);
            --white-solid: #F5F0EB;
            --text-on-white: #F5F0EB;
            --overlay-light: rgba(44,36,22,0.05);
            --overlay-dark: rgba(0,0,0,0.45);
            --hue-primary: 35;
        }
        [data-theme="luxury-dune-dark"] body {
            background: linear-gradient(135deg, #2C2416 0%, #362D1E 50%, #403422 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        [data-theme="luxury-dune-dark"] h1,
        [data-theme="luxury-dune-dark"] h2,
        [data-theme="luxury-dune-dark"] h3 {
            font-family: "Noto Serif SC", "Georgia", serif;
        }
        
        /* --- Luxury Dune Dark - Home Quick Card --- */
        [data-theme="luxury-dune-dark"] .home-quick-card {
            background: linear-gradient(145deg, #362D1E 0%, #2C2416 100%);
            border: 1px solid rgba(201, 177, 143, 0.4);
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="luxury-dune-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(201, 177, 143, 0.04) 2px,
                rgba(201, 177, 143, 0.04) 4px
            );
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        [data-theme="luxury-dune-dark"] .home-quick-card:hover {
            border-color: #C9B18F;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 177, 143, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="luxury-dune-dark"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="luxury-dune-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(201, 177, 143, 0.22), rgba(191, 168, 138, 0.16));
            border: 1px solid rgba(201, 177, 143, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }
        
        /* --- Luxury Dune Dark - AI Tool Card --- */
        [data-theme="luxury-dune-dark"] .ai-tool-card {
            background: linear-gradient(145deg, #362D1E 0%, #2C2416 100%);
            border: 1px solid rgba(201, 177, 143, 0.4);
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="luxury-dune-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(201, 177, 143, 0.04) 2px,
                rgba(201, 177, 143, 0.04) 4px
            );
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        [data-theme="luxury-dune-dark"] .ai-tool-card:hover {
            border-color: #C9B18F;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 177, 143, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="luxury-dune-dark"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="luxury-dune-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(201, 177, 143, 0.22), rgba(191, 168, 138, 0.16));
            border: 1px solid rgba(201, 177, 143, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }
        
        /* --- Luxury Dune Dark - Bookmark Card --- */
        [data-theme="luxury-dune-dark"] .bookmark-card {
            background: linear-gradient(145deg, #362D1E 0%, #2C2416 100%);
            border: 1px solid rgba(201, 177, 143, 0.4);
            border-radius: 14px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="luxury-dune-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(201, 177, 143, 0.04) 2px,
                rgba(201, 177, 143, 0.04) 4px
            );
            opacity: 0.6;
            transition: opacity 0.4s ease;
        }
        [data-theme="luxury-dune-dark"] .bookmark-card:hover {
            border-color: #C9B18F;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 177, 143, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="luxury-dune-dark"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="luxury-dune-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(201, 177, 143, 0.22), rgba(191, 168, 138, 0.16));
            border: 1px solid rgba(201, 177, 143, 0.4);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }

        /* 3. ========== 赛博脉冲（Cyber Pulse）- 明暗双模式 ========== */

        /* Cyber Pulse - Light Mode */
        [data-theme="cyber-pulse-light"] {
            --theme-name: 'cyber-pulse';
            --bg-page: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
            --bg-surface: rgba(255, 255, 255, 0.85);
            --bg-hover: rgba(226, 232, 240, 0.8);
            --bg-active: rgba(6, 182, 212, 0.12);
            --border: rgba(148, 163, 184, 0.3);
            --text-primary: #0F172A;
            --text-secondary: #334155;
            --text-muted: #64748B;
            --accent: #7C3AED;
            --accent-secondary: #06B6D4;
            --accent-tertiary: #3B82F6;
            --accent-hover: #06B6D4;
            --card-shadow: 0 4px 20px rgba(124,58,237,0.15);
            --card-shadow-hover: 0 6px 24px rgba(124,58,237,0.2);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #0F172A;
            --overlay-light: rgba(248,250,252,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
            --hue-primary: 262;
        }
        [data-theme="cyber-pulse-light"] body {
            background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        
        /* --- Cyber Pulse - Home Quick Card --- */
        [data-theme="cyber-pulse-light"] .home-quick-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 16px 8px 16px 8px;
            box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12), 0 0 24px rgba(6, 182, 212, 0.08);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="cyber-pulse-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(124, 58, 237, 0.18),
                rgba(6, 182, 212, 0.18),
                transparent
            );
            animation: cyberFlow 4s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        @keyframes cyberFlow {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        [data-theme="cyber-pulse-light"] .home-quick-card:hover {
            border-color: #7C3AED;
            box-shadow: 0 6px 24px rgba(124, 58, 237, 0.2), 0 0 32px rgba(6, 182, 212, 0.15);
            transform: translateY(-3px);
        }
        [data-theme="cyber-pulse-light"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="cyber-pulse-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px 6px 14px 6px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.12));
            border: 1px solid rgba(124, 58, 237, 0.35);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
        }
        
        /* --- Cyber Pulse - AI Tool Card --- */
        [data-theme="cyber-pulse-light"] .ai-tool-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 16px 8px 16px 8px;
            box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12), 0 0 24px rgba(6, 182, 212, 0.08);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="cyber-pulse-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(124, 58, 237, 0.18),
                rgba(6, 182, 212, 0.18),
                transparent
            );
            animation: cyberFlow 4s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        [data-theme="cyber-pulse-light"] .ai-tool-card:hover {
            border-color: #7C3AED;
            box-shadow: 0 6px 24px rgba(124, 58, 237, 0.2), 0 0 32px rgba(6, 182, 212, 0.15);
            transform: translateY(-3px);
        }
        [data-theme="cyber-pulse-light"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="cyber-pulse-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px 6px 14px 6px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.12));
            border: 1px solid rgba(124, 58, 237, 0.35);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
        }
        
        /* --- Cyber Pulse - Bookmark Card --- */
        [data-theme="cyber-pulse-light"] .bookmark-card {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 16px 8px 16px 8px;
            box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12), 0 0 24px rgba(6, 182, 212, 0.08);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="cyber-pulse-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(124, 58, 237, 0.18),
                rgba(6, 182, 212, 0.18),
                transparent
            );
            animation: cyberFlow 4s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        [data-theme="cyber-pulse-light"] .bookmark-card:hover {
            border-color: #7C3AED;
            box-shadow: 0 6px 24px rgba(124, 58, 237, 0.2), 0 0 32px rgba(6, 182, 212, 0.15);
            transform: translateY(-3px);
        }
        [data-theme="cyber-pulse-light"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="cyber-pulse-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 14px 6px 14px 6px;
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.12));
            border: 1px solid rgba(124, 58, 237, 0.35);
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
        }

        /* Cyber Pulse - Dark Mode */
        [data-theme="cyber-pulse-dark"] {
            --theme-name: 'cyber-pulse';
            --bg-page: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
            --bg-surface: rgba(26, 35, 53, 0.75);
            --bg-hover: rgba(51, 65, 85, 0.6);
            --bg-active: rgba(6, 182, 212, 0.15);
            --border: rgba(148, 163, 184, 0.3);
            --text-primary: #F8FAFC;
            --text-secondary: #E2E8F0;
            --text-muted: #94A3B8;
            --accent: #06B6D4;
            --accent-secondary: #7C3AED;
            --accent-tertiary: #3B82F6;
            --accent-hover: #7C3AED;
            --card-shadow: 0 4px 20px rgba(6,182,212,0.2);
            --card-shadow-hover: 0 6px 24px rgba(6,182,212,0.25);
            --white-10: rgba(248,250,252,0.1);
            --white-15: rgba(248,250,252,0.15);
            --white-20: rgba(248,250,252,0.2);
            --white-30: rgba(248,250,252,0.3);
            --white-40: rgba(248,250,252,0.4);
            --white-50: rgba(248,250,252,0.5);
            --white-60: rgba(248,250,252,0.6);
            --white-80: rgba(248,250,252,0.8);
            --white-solid: #F8FAFC;
            --text-on-white: #F8FAFC;
            --overlay-light: rgba(248,250,252,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 189;
        }
        [data-theme="cyber-pulse-dark"] body {
            background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        
        /* --- Cyber Pulse Dark - Home Quick Card --- */
        [data-theme="cyber-pulse-dark"] .home-quick-card {
            background: linear-gradient(145deg, rgba(26, 35, 53, 0.9), rgba(30, 41, 59, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 16px 8px 16px 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px rgba(6, 182, 212, 0.15);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="cyber-pulse-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(6, 182, 212, 0.2),
                rgba(124, 58, 237, 0.2),
                transparent
            );
            animation: cyberFlow 4s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        [data-theme="cyber-pulse-dark"] .home-quick-card:hover {
            border-color: #06B6D4;
            box-shadow: 0 6px 24px rgba(6, 182, 212, 0.28), 0 0 32px rgba(124, 58, 237, 0.2);
            transform: translateY(-3px);
        }
        [data-theme="cyber-pulse-dark"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="cyber-pulse-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px 6px 14px 6px;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.15));
            border: 1px solid rgba(6, 182, 212, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
        }
        
        /* --- Cyber Pulse Dark - AI Tool Card --- */
        [data-theme="cyber-pulse-dark"] .ai-tool-card {
            background: linear-gradient(145deg, rgba(26, 35, 53, 0.9), rgba(30, 41, 59, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 16px 8px 16px 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px rgba(6, 182, 212, 0.15);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="cyber-pulse-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(6, 182, 212, 0.2),
                rgba(124, 58, 237, 0.2),
                transparent
            );
            animation: cyberFlow 4s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        [data-theme="cyber-pulse-dark"] .ai-tool-card:hover {
            border-color: #06B6D4;
            box-shadow: 0 6px 24px rgba(6, 182, 212, 0.28), 0 0 32px rgba(124, 58, 237, 0.2);
            transform: translateY(-3px);
        }
        [data-theme="cyber-pulse-dark"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="cyber-pulse-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 14px 6px 14px 6px;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.15));
            border: 1px solid rgba(6, 182, 212, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
        }
        
        /* --- Cyber Pulse Dark - Bookmark Card --- */
        [data-theme="cyber-pulse-dark"] .bookmark-card {
            background: linear-gradient(145deg, rgba(26, 35, 53, 0.9), rgba(30, 41, 59, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 16px 8px 16px 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px rgba(6, 182, 212, 0.15);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="cyber-pulse-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(6, 182, 212, 0.2),
                rgba(124, 58, 237, 0.2),
                transparent
            );
            animation: cyberFlow 4s ease-in-out infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
        }
        [data-theme="cyber-pulse-dark"] .bookmark-card:hover {
            border-color: #06B6D4;
            box-shadow: 0 6px 24px rgba(6, 182, 212, 0.28), 0 0 32px rgba(124, 58, 237, 0.2);
            transform: translateY(-3px);
        }
        [data-theme="cyber-pulse-dark"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="cyber-pulse-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 14px 6px 14px 6px;
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(124, 58, 237, 0.15));
            border: 1px solid rgba(6, 182, 212, 0.4);
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
        }

        /* 4. ========== 森屿静雅（Nature Calm）- 明暗双模式 ========== */

        /* Nature Calm - Light Mode */
        [data-theme="nature-calm-light"] {
            --theme-name: 'nature-calm';
            --bg-page: linear-gradient(135deg, #F7F5F0 0%, #F0F3EF 50%, #E8EDE5 100%);
            --bg-surface: rgba(255, 255, 255, 0.85);
            --bg-hover: rgba(232, 237, 229, 0.8);
            --bg-active: rgba(91, 124, 110, 0.12);
            --border: rgba(91, 124, 110, 0.25);
            --text-primary: #2D3733;
            --text-secondary: #4A5953;
            --text-muted: #7A8B83;
            --accent: #5B7C6E;
            --accent-secondary: #4A6A5D;
            --accent-tertiary: #3D5A4F;
            --accent-hover: #4A6A5D;
            --card-shadow: 0 4px 16px rgba(91,124,110,0.12);
            --card-shadow-hover: 0 6px 20px rgba(91,124,110,0.18);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #2D3733;
            --overlay-light: rgba(247,245,240,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
            --hue-primary: 156;
        }
        [data-theme="nature-calm-light"] body {
            background: linear-gradient(135deg, #F7F5F0 0%, #F0F3EF 50%, #E8EDE5 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        
        /* --- Nature Calm - Home Quick Card --- */
        [data-theme="nature-calm-light"] .home-quick-card {
            background: #FFFFFF;
            border: 1px solid rgba(91, 124, 110, 0.25);
            border-radius: 20px;
            box-shadow: 0 4px 14px rgba(91, 124, 110, 0.1);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="nature-calm-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 50% 50%,
                rgba(169, 197, 211, 0.12) 0%,
                transparent 60%
            );
            opacity: 0;
            animation: natureGlow 3.5s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        @keyframes natureGlow {
            0%, 100% { opacity: 0; transform: scale(0.95); }
            50% { opacity: 1; transform: scale(1.08); }
        }
        [data-theme="nature-calm-light"] .home-quick-card:hover {
            border-color: #5B7C6E;
            box-shadow: 0 6px 20px rgba(91, 124, 110, 0.18), 0 0 28px rgba(169, 197, 211, 0.25);
            transform: translateY(-4px);
        }
        [data-theme="nature-calm-light"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="nature-calm-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 124, 110, 0.12), rgba(169, 197, 211, 0.1));
            border: 1px solid rgba(91, 124, 110, 0.25);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(91, 124, 110, 0.12);
        }
        
        /* --- Nature Calm - AI Tool Card --- */
        [data-theme="nature-calm-light"] .ai-tool-card {
            background: #FFFFFF;
            border: 1px solid rgba(91, 124, 110, 0.25);
            border-radius: 20px;
            box-shadow: 0 4px 14px rgba(91, 124, 110, 0.1);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="nature-calm-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 50% 50%,
                rgba(169, 197, 211, 0.12) 0%,
                transparent 60%
            );
            opacity: 0;
            animation: natureGlow 3.5s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        [data-theme="nature-calm-light"] .ai-tool-card:hover {
            border-color: #5B7C6E;
            box-shadow: 0 6px 20px rgba(91, 124, 110, 0.18), 0 0 28px rgba(169, 197, 211, 0.25);
            transform: translateY(-4px);
        }
        [data-theme="nature-calm-light"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="nature-calm-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 124, 110, 0.12), rgba(169, 197, 211, 0.1));
            border: 1px solid rgba(91, 124, 110, 0.25);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(91, 124, 110, 0.12);
        }
        
        /* --- Nature Calm - Bookmark Card --- */
        [data-theme="nature-calm-light"] .bookmark-card {
            background: #FFFFFF;
            border: 1px solid rgba(91, 124, 110, 0.25);
            border-radius: 20px;
            box-shadow: 0 4px 14px rgba(91, 124, 110, 0.1);
            position: relative;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="nature-calm-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 50% 50%,
                rgba(169, 197, 211, 0.12) 0%,
                transparent 60%
            );
            opacity: 0;
            animation: natureGlow 3.5s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        [data-theme="nature-calm-light"] .bookmark-card:hover {
            border-color: #5B7C6E;
            box-shadow: 0 6px 20px rgba(91, 124, 110, 0.18), 0 0 28px rgba(169, 197, 211, 0.25);
            transform: translateY(-4px);
        }
        [data-theme="nature-calm-light"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="nature-calm-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 124, 110, 0.12), rgba(169, 197, 211, 0.1));
            border: 1px solid rgba(91, 124, 110, 0.25);
            box-shadow: 0 2px 8px rgba(91, 124, 110, 0.12);
        }

        /* Nature Calm - Dark Mode */
        [data-theme="nature-calm-dark"] {
            --theme-name: 'nature-calm';
            --bg-page: linear-gradient(135deg, #1D2421 0%, #26302B 50%, #2D3733 100%);
            --bg-surface: rgba(45, 55, 51, 0.7);
            --bg-hover: rgba(55, 68, 63, 0.6);
            --bg-active: rgba(91, 124, 110, 0.15);
            --border: rgba(91, 124, 110, 0.35);
            --text-primary: #F7F5F0;
            --text-secondary: #E8EDE5;
            --text-muted: #A9C5D3;
            --accent: #A9C5D3;
            --accent-secondary: #5B7C6E;
            --accent-tertiary: #4A6A5D;
            --accent-hover: #5B7C6E;
            --card-shadow: 0 4px 16px rgba(0,0,0,0.45);
            --card-shadow-hover: 0 6px 20px rgba(0,0,0,0.45);
            --white-10: rgba(247,245,240,0.1);
            --white-15: rgba(247,245,240,0.15);
            --white-20: rgba(247,245,240,0.2);
            --white-30: rgba(247,245,240,0.3);
            --white-40: rgba(247,245,240,0.4);
            --white-50: rgba(247,245,240,0.5);
            --white-60: rgba(247,245,240,0.6);
            --white-80: rgba(247,245,240,0.8);
            --white-solid: #F7F5F0;
            --text-on-white: #F7F5F0;
            --overlay-light: rgba(247,245,240,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 156;
        }
        [data-theme="nature-calm-dark"] body {
            background: linear-gradient(135deg, #1D2421 0%, #26302B 50%, #2D3733 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }
        
        /* --- Nature Calm Dark - Home Quick Card --- */
        [data-theme="nature-calm-dark"] .home-quick-card {
            background: #2D3733;
            border: 1px solid rgba(91, 124, 110, 0.4);
            border-radius: 20px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="nature-calm-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 50% 50%,
                rgba(169, 197, 211, 0.18) 0%,
                transparent 60%
            );
            opacity: 0;
            animation: natureGlow 3.5s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        [data-theme="nature-calm-dark"] .home-quick-card:hover {
            border-color: #A9C5D3;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 28px rgba(169, 197, 211, 0.25);
            transform: translateY(-4px);
        }
        [data-theme="nature-calm-dark"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="nature-calm-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 124, 110, 0.2), rgba(169, 197, 211, 0.18));
            border: 1px solid rgba(91, 124, 110, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }
        
        /* --- Nature Calm Dark - AI Tool Card --- */
        [data-theme="nature-calm-dark"] .ai-tool-card {
            background: #2D3733;
            border: 1px solid rgba(91, 124, 110, 0.4);
            border-radius: 20px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="nature-calm-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 50% 50%,
                rgba(169, 197, 211, 0.18) 0%,
                transparent 60%
            );
            opacity: 0;
            animation: natureGlow 3.5s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        [data-theme="nature-calm-dark"] .ai-tool-card:hover {
            border-color: #A9C5D3;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 28px rgba(169, 197, 211, 0.25);
            transform: translateY(-4px);
        }
        [data-theme="nature-calm-dark"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="nature-calm-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 124, 110, 0.2), rgba(169, 197, 211, 0.18));
            border: 1px solid rgba(91, 124, 110, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }
        
        /* --- Nature Calm Dark - Bookmark Card --- */
        [data-theme="nature-calm-dark"] .bookmark-card {
            background: #2D3733;
            border: 1px solid rgba(91, 124, 110, 0.4);
            border-radius: 20px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            position: relative;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="nature-calm-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 50% 50%,
                rgba(169, 197, 211, 0.18) 0%,
                transparent 60%
            );
            opacity: 0;
            animation: natureGlow 3.5s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        [data-theme="nature-calm-dark"] .bookmark-card:hover {
            border-color: #A9C5D3;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 28px rgba(169, 197, 211, 0.25);
            transform: translateY(-4px);
        }
        [data-theme="nature-calm-dark"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="nature-calm-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(91, 124, 110, 0.2), rgba(169, 197, 211, 0.18));
            border: 1px solid rgba(91, 124, 110, 0.4);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }

        /* 5. ========== 荒岩雅境（Stone Realm）- 明暗双模式 ========== */

        /* Stone Realm - Light Mode */
        [data-theme="stone-realm-light"] {
            --theme-name: 'stone-realm';
            --bg-page: linear-gradient(135deg, #F2EFEA 0%, #E8E3DA 50%, #DFD8CF 100%);
            --bg-surface: rgba(255, 255, 255, 0.82);
            --bg-hover: rgba(216, 210, 200, 0.75);
            --bg-active: rgba(114, 95, 72, 0.12);
            --border: rgba(114, 95, 72, 0.25);
            --text-primary: #2B2D31;
            --text-secondary: #4A4D53;
            --text-muted: #7C7F85;
            --accent: #725F48;
            --accent-secondary: #5A5F66;
            --accent-tertiary: #4A4D53;
            --accent-hover: #5A5F66;
            --card-shadow: 0 4px 16px rgba(43, 45, 49, 0.12);
            --card-shadow-hover: 0 6px 24px rgba(43, 45, 49, 0.2);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #2B2D31;
            --overlay-light: rgba(242,239,234,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
            --hue-primary: 30;
        }
        [data-theme="stone-realm-light"] body {
            background: linear-gradient(135deg, #F2EFEA 0%, #E8E3DA 50%, #DFD8CF 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Stone Realm Light - Home Quick Card --- */
        [data-theme="stone-realm-light"] .home-quick-card {
            background: #FFFFFF;
            border: 1px solid rgba(114, 95, 72, 0.25);
            border-radius: 0;
            clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
            box-shadow: 0 4px 16px rgba(43, 45, 49, 0.12);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="stone-realm-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    rgba(114, 95, 72, 0.03),
                    rgba(114, 95, 72, 0.03) 2px,
                    transparent 2px,
                    transparent 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    rgba(90, 95, 102, 0.02),
                    rgba(90, 95, 102, 0.02) 2px,
                    transparent 2px,
                    transparent 4px
                );
            opacity: 0.7;
            transition: opacity 0.4s ease;
            animation: stoneTexture 6s ease-in-out infinite;
        }
        @keyframes stoneTexture {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        [data-theme="stone-realm-light"] .home-quick-card:hover {
            border-color: #725F48;
            box-shadow: 0 6px 24px rgba(43, 45, 49, 0.2), 0 0 0 1px rgba(114, 95, 72, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="stone-realm-light"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="stone-realm-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
            background: linear-gradient(135deg, rgba(114, 95, 72, 0.15), rgba(90, 95, 102, 0.1));
            border: 1px solid rgba(114, 95, 72, 0.25);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(43, 45, 49, 0.12);
        }

        /* --- Stone Realm Light - AI Tool Card --- */
        [data-theme="stone-realm-light"] .ai-tool-card {
            background: #FFFFFF;
            border: 1px solid rgba(114, 95, 72, 0.25);
            border-radius: 0;
            clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
            box-shadow: 0 4px 16px rgba(43, 45, 49, 0.12);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="stone-realm-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    rgba(114, 95, 72, 0.03),
                    rgba(114, 95, 72, 0.03) 2px,
                    transparent 2px,
                    transparent 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    rgba(90, 95, 102, 0.02),
                    rgba(90, 95, 102, 0.02) 2px,
                    transparent 2px,
                    transparent 4px
                );
            opacity: 0.7;
            transition: opacity 0.4s ease;
            animation: stoneTexture 6s ease-in-out infinite;
        }
        [data-theme="stone-realm-light"] .ai-tool-card:hover {
            border-color: #725F48;
            box-shadow: 0 6px 24px rgba(43, 45, 49, 0.2), 0 0 0 1px rgba(114, 95, 72, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="stone-realm-light"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="stone-realm-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 4px;
            clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
            background: linear-gradient(135deg, rgba(114, 95, 72, 0.15), rgba(90, 95, 102, 0.1));
            border: 1px solid rgba(114, 95, 72, 0.25);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(43, 45, 49, 0.12);
        }

        /* --- Stone Realm Light - Bookmark Card --- */
        [data-theme="stone-realm-light"] .bookmark-card {
            background: #FFFFFF;
            border: 1px solid rgba(114, 95, 72, 0.25);
            border-radius: 0;
            clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
            box-shadow: 0 4px 16px rgba(43, 45, 49, 0.12);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="stone-realm-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    rgba(114, 95, 72, 0.03),
                    rgba(114, 95, 72, 0.03) 2px,
                    transparent 2px,
                    transparent 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    rgba(90, 95, 102, 0.02),
                    rgba(90, 95, 102, 0.02) 2px,
                    transparent 2px,
                    transparent 4px
                );
            opacity: 0.7;
            transition: opacity 0.4s ease;
            animation: stoneTexture 6s ease-in-out infinite;
        }
        [data-theme="stone-realm-light"] .bookmark-card:hover {
            border-color: #725F48;
            box-shadow: 0 6px 24px rgba(43, 45, 49, 0.2), 0 0 0 1px rgba(114, 95, 72, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="stone-realm-light"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="stone-realm-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 4px;
            clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
            background: linear-gradient(135deg, rgba(114, 95, 72, 0.15), rgba(90, 95, 102, 0.1));
            border: 1px solid rgba(114, 95, 72, 0.25);
            box-shadow: 0 2px 8px rgba(43, 45, 49, 0.12);
        }

        /* Stone Realm - Dark Mode */
        [data-theme="stone-realm-dark"] {
            --theme-name: 'stone-realm';
            --bg-page: linear-gradient(135deg, #2B2D31 0%, #36383C 50%, #404348 100%);
            --bg-surface: rgba(64, 67, 72, 0.78);
            --bg-hover: rgba(90, 95, 102, 0.7);
            --bg-active: rgba(114, 95, 72, 0.15);
            --border: rgba(114, 95, 72, 0.4);
            --text-primary: #F2EFEA;
            --text-secondary: #E8E3DA;
            --text-muted: #D8D2C8;
            --accent: #D8D2C8;
            --accent-secondary: #725F48;
            --accent-tertiary: #5A5F66;
            --accent-hover: #725F48;
            --card-shadow: 0 4px 16px rgba(0,0,0,0.45);
            --card-shadow-hover: 0 6px 24px rgba(0,0,0,0.55);
            --white-10: rgba(242,239,234,0.1);
            --white-15: rgba(242,239,234,0.15);
            --white-20: rgba(242,239,234,0.2);
            --white-30: rgba(242,239,234,0.3);
            --white-40: rgba(242,239,234,0.4);
            --white-50: rgba(242,239,234,0.5);
            --white-60: rgba(242,239,234,0.6);
            --white-80: rgba(242,239,234,0.8);
            --white-solid: #F2EFEA;
            --text-on-white: #F2EFEA;
            --overlay-light: rgba(43,45,49,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 30;
        }
        [data-theme="stone-realm-dark"] body {
            background: linear-gradient(135deg, #2B2D31 0%, #36383C 50%, #404348 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Stone Realm Dark - Home Quick Card --- */
        [data-theme="stone-realm-dark"] .home-quick-card {
            background: #404348;
            border: 1px solid rgba(114, 95, 72, 0.4);
            border-radius: 0;
            clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
            box-shadow: 0 4px 16px rgba(0,0,0,0.45);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="stone-realm-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    rgba(216, 210, 200, 0.04),
                    rgba(216, 210, 200, 0.04) 2px,
                    transparent 2px,
                    transparent 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    rgba(114, 95, 72, 0.03),
                    rgba(114, 95, 72, 0.03) 2px,
                    transparent 2px,
                    transparent 4px
                );
            opacity: 0.7;
            transition: opacity 0.4s ease;
            animation: stoneTexture 6s ease-in-out infinite;
        }
        [data-theme="stone-realm-dark"] .home-quick-card:hover {
            border-color: #D8D2C8;
            box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(216, 210, 200, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="stone-realm-dark"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="stone-realm-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
            background: linear-gradient(135deg, rgba(216, 210, 200, 0.2), rgba(114, 95, 72, 0.15));
            border: 1px solid rgba(114, 95, 72, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* --- Stone Realm Dark - AI Tool Card --- */
        [data-theme="stone-realm-dark"] .ai-tool-card {
            background: #404348;
            border: 1px solid rgba(114, 95, 72, 0.4);
            border-radius: 0;
            clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
            box-shadow: 0 4px 16px rgba(0,0,0,0.45);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="stone-realm-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    rgba(216, 210, 200, 0.04),
                    rgba(216, 210, 200, 0.04) 2px,
                    transparent 2px,
                    transparent 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    rgba(114, 95, 72, 0.03),
                    rgba(114, 95, 72, 0.03) 2px,
                    transparent 2px,
                    transparent 4px
                );
            opacity: 0.7;
            transition: opacity 0.4s ease;
            animation: stoneTexture 6s ease-in-out infinite;
        }
        [data-theme="stone-realm-dark"] .ai-tool-card:hover {
            border-color: #D8D2C8;
            box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(216, 210, 200, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="stone-realm-dark"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="stone-realm-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 4px;
            clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
            background: linear-gradient(135deg, rgba(216, 210, 200, 0.2), rgba(114, 95, 72, 0.15));
            border: 1px solid rgba(114, 95, 72, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* --- Stone Realm Dark - Bookmark Card --- */
        [data-theme="stone-realm-dark"] .bookmark-card {
            background: #404348;
            border: 1px solid rgba(114, 95, 72, 0.4);
            border-radius: 0;
            clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
            box-shadow: 0 4px 16px rgba(0,0,0,0.45);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="stone-realm-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                repeating-linear-gradient(
                    45deg,
                    rgba(216, 210, 200, 0.04),
                    rgba(216, 210, 200, 0.04) 2px,
                    transparent 2px,
                    transparent 4px
                ),
                repeating-linear-gradient(
                    -45deg,
                    rgba(114, 95, 72, 0.03),
                    rgba(114, 95, 72, 0.03) 2px,
                    transparent 2px,
                    transparent 4px
                );
            opacity: 0.7;
            transition: opacity 0.4s ease;
            animation: stoneTexture 6s ease-in-out infinite;
        }
        [data-theme="stone-realm-dark"] .bookmark-card:hover {
            border-color: #D8D2C8;
            box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(216, 210, 200, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="stone-realm-dark"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="stone-realm-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 4px;
            clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%);
            background: linear-gradient(135deg, rgba(216, 210, 200, 0.2), rgba(114, 95, 72, 0.15));
            border: 1px solid rgba(114, 95, 72, 0.4);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* 6. ========== 纸艺空间（Paper Fold）- 明暗双模式 ========== */

        /* Paper Fold - Light Mode */
        [data-theme="paper-fold-light"] {
            --theme-name: 'paper-fold';
            --bg-page: linear-gradient(135deg, #F7F5F1 0%, #EDEBE5 50%, #E4E0D8 100%);
            --bg-surface: rgba(255, 255, 255, 0.85);
            --bg-hover: rgba(228, 224, 216, 0.8);
            --bg-active: rgba(168, 151, 134, 0.12);
            --border: rgba(168, 151, 134, 0.25);
            --text-primary: #242629;
            --text-secondary: #4B443C;
            --text-muted: #7C756D;
            --accent: #A89786;
            --accent-secondary: #7C756D;
            --accent-tertiary: #4B443C;
            --accent-hover: #7C756D;
            --card-shadow: 0 2px 8px rgba(36,38,41,0.08), 0 4px 16px rgba(36,38,41,0.06);
            --card-shadow-hover: 0 6px 20px rgba(36,38,41,0.15), 0 8px 24px rgba(36,38,41,0.1);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #242629;
            --overlay-light: rgba(247,245,241,0.6);
            --overlay-dark: rgba(0,0,0,0.04);
            --hue-primary: 35;
        }
        [data-theme="paper-fold-light"] body {
            background: linear-gradient(135deg, #F7F5F1 0%, #EDEBE5 50%, #E4E0D8 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Paper Fold Light - Home Quick Card --- */
        [data-theme="paper-fold-light"] .home-quick-card {
            background: #FFFFFF;
            border: 1px solid rgba(168, 151, 134, 0.2);
            border-radius: 10px;
            box-shadow: 
                0 2px 8px rgba(36,38,41,0.08),
                0 4px 16px rgba(36,38,41,0.06),
                inset 0 1px 0 rgba(255,255,255,0.8);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="paper-fold-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25%;
            background: linear-gradient(to bottom, rgba(168, 151, 134, 0.06), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-light"] .home-quick-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(75, 68, 60, 0.04), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-light"] .home-quick-card:hover {
            border-color: #A89786;
            box-shadow: 
                0 6px 20px rgba(36,38,41,0.15),
                0 8px 24px rgba(36,38,41,0.1),
                inset 0 1px 0 rgba(255,255,255,0.9);
            transform: translateY(-4px) rotate(-0.5deg);
        }
        [data-theme="paper-fold-light"] .home-quick-card:hover::before,
        [data-theme="paper-fold-light"] .home-quick-card:hover::after {
            opacity: 1;
        }
        [data-theme="paper-fold-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(168, 151, 134, 0.12), rgba(124, 117, 109, 0.08));
            border: 1px solid rgba(168, 151, 134, 0.25);
            box-shadow: 
                0 2px 4px rgba(36,38,41,0.06),
                inset 0 1px 0 rgba(255,255,255,0.7);
            font-size: 1.8rem;
        }

        /* --- Paper Fold Light - AI Tool Card --- */
        [data-theme="paper-fold-light"] .ai-tool-card {
            background: #FFFFFF;
            border: 1px solid rgba(168, 151, 134, 0.2);
            border-radius: 10px;
            box-shadow: 
                0 2px 8px rgba(36,38,41,0.08),
                0 4px 16px rgba(36,38,41,0.06),
                inset 0 1px 0 rgba(255,255,255,0.8);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="paper-fold-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25%;
            background: linear-gradient(to bottom, rgba(168, 151, 134, 0.06), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(75, 68, 60, 0.04), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-light"] .ai-tool-card:hover {
            border-color: #A89786;
            box-shadow: 
                0 6px 20px rgba(36,38,41,0.15),
                0 8px 24px rgba(36,38,41,0.1),
                inset 0 1px 0 rgba(255,255,255,0.9);
            transform: translateY(-4px) rotate(0.5deg);
        }
        [data-theme="paper-fold-light"] .ai-tool-card:hover::before,
        [data-theme="paper-fold-light"] .ai-tool-card:hover::after {
            opacity: 1;
        }
        [data-theme="paper-fold-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(168, 151, 134, 0.12), rgba(124, 117, 109, 0.08));
            border: 1px solid rgba(168, 151, 134, 0.25);
            box-shadow: 
                0 2px 4px rgba(36,38,41,0.06),
                inset 0 1px 0 rgba(255,255,255,0.7);
            font-size: 1.6rem;
            flex-shrink: 0;
        }

        /* --- Paper Fold Light - Bookmark Card --- */
        [data-theme="paper-fold-light"] .bookmark-card {
            background: #FFFFFF;
            border: 1px solid rgba(168, 151, 134, 0.2);
            border-radius: 10px;
            box-shadow: 
                0 2px 8px rgba(36,38,41,0.08),
                0 4px 16px rgba(36,38,41,0.06),
                inset 0 1px 0 rgba(255,255,255,0.8);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="paper-fold-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25%;
            background: linear-gradient(to bottom, rgba(168, 151, 134, 0.06), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-light"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(75, 68, 60, 0.04), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-light"] .bookmark-card:hover {
            border-color: #A89786;
            box-shadow: 
                0 6px 20px rgba(36,38,41,0.15),
                0 8px 24px rgba(36,38,41,0.1),
                inset 0 1px 0 rgba(255,255,255,0.9);
            transform: translateY(-4px) rotate(-0.5deg);
        }
        [data-theme="paper-fold-light"] .bookmark-card:hover::before,
        [data-theme="paper-fold-light"] .bookmark-card:hover::after {
            opacity: 1;
        }
        [data-theme="paper-fold-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(168, 151, 134, 0.12), rgba(124, 117, 109, 0.08));
            border: 1px solid rgba(168, 151, 134, 0.25);
            box-shadow: 
                0 2px 4px rgba(36,38,41,0.06),
                inset 0 1px 0 rgba(255,255,255,0.7);
        }

        /* Paper Fold - Dark Mode */
        [data-theme="paper-fold-dark"] {
            --theme-name: 'paper-fold';
            --bg-page: linear-gradient(135deg, #242629 0%, #303236 50%, #3C3E42 100%);
            --bg-surface: rgba(60, 62, 66, 0.78);
            --bg-hover: rgba(75, 68, 60, 0.7);
            --bg-active: rgba(168, 151, 134, 0.15);
            --border: rgba(168, 151, 134, 0.4);
            --text-primary: #F7F5F1;
            --text-secondary: #E4E0D8;
            --text-muted: #A89786;
            --accent: #E4E0D8;
            --accent-secondary: #A89786;
            --accent-tertiary: #7C756D;
            --accent-hover: #A89786;
            --card-shadow: 0 4px 16px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35);
            --card-shadow-hover: 0 6px 24px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
            --white-10: rgba(247,245,241,0.1);
            --white-15: rgba(247,245,241,0.15);
            --white-20: rgba(247,245,241,0.2);
            --white-30: rgba(247,245,241,0.3);
            --white-40: rgba(247,245,241,0.4);
            --white-50: rgba(247,245,241,0.5);
            --white-60: rgba(247,245,241,0.6);
            --white-80: rgba(247,245,241,0.8);
            --white-solid: #F7F5F1;
            --text-on-white: #F7F5F1;
            --overlay-light: rgba(36,38,41,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 35;
        }
        [data-theme="paper-fold-dark"] body {
            background: linear-gradient(135deg, #242629 0%, #303236 50%, #3C3E42 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Paper Fold Dark - Home Quick Card --- */
        [data-theme="paper-fold-dark"] .home-quick-card {
            background: #3C3E42;
            border: 1px solid rgba(168, 151, 134, 0.4);
            border-radius: 10px;
            box-shadow: 
                0 4px 16px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(247,245,241,0.1);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="paper-fold-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25%;
            background: linear-gradient(to bottom, rgba(228, 224, 216, 0.08), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-dark"] .home-quick-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-dark"] .home-quick-card:hover {
            border-color: #E4E0D8;
            box-shadow: 
                0 6px 24px rgba(0,0,0,0.55),
                0 4px 12px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(247,245,241,0.15);
            transform: translateY(-4px) rotate(-0.5deg);
        }
        [data-theme="paper-fold-dark"] .home-quick-card:hover::before,
        [data-theme="paper-fold-dark"] .home-quick-card:hover::after {
            opacity: 1;
        }
        [data-theme="paper-fold-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(228, 224, 216, 0.18), rgba(168, 151, 134, 0.12));
            border: 1px solid rgba(168, 151, 134, 0.4);
            box-shadow: 
                0 2px 6px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(247,245,241,0.1);
            font-size: 1.8rem;
        }

        /* --- Paper Fold Dark - AI Tool Card --- */
        [data-theme="paper-fold-dark"] .ai-tool-card {
            background: #3C3E42;
            border: 1px solid rgba(168, 151, 134, 0.4);
            border-radius: 10px;
            box-shadow: 
                0 4px 16px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(247,245,241,0.1);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="paper-fold-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25%;
            background: linear-gradient(to bottom, rgba(228, 224, 216, 0.08), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-dark"] .ai-tool-card:hover {
            border-color: #E4E0D8;
            box-shadow: 
                0 6px 24px rgba(0,0,0,0.55),
                0 4px 12px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(247,245,241,0.15);
            transform: translateY(-4px) rotate(0.5deg);
        }
        [data-theme="paper-fold-dark"] .ai-tool-card:hover::before,
        [data-theme="paper-fold-dark"] .ai-tool-card:hover::after {
            opacity: 1;
        }
        [data-theme="paper-fold-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(228, 224, 216, 0.18), rgba(168, 151, 134, 0.12));
            border: 1px solid rgba(168, 151, 134, 0.4);
            box-shadow: 
                0 2px 6px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(247,245,241,0.1);
            font-size: 1.6rem;
            flex-shrink: 0;
        }

        /* --- Paper Fold Dark - Bookmark Card --- */
        [data-theme="paper-fold-dark"] .bookmark-card {
            background: #3C3E42;
            border: 1px solid rgba(168, 151, 134, 0.4);
            border-radius: 10px;
            box-shadow: 
                0 4px 16px rgba(0,0,0,0.45),
                0 2px 8px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(247,245,241,0.1);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="paper-fold-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 25%;
            background: linear-gradient(to bottom, rgba(228, 224, 216, 0.08), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-dark"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30%;
            background: linear-gradient(to top, rgba(0,0,0,0.12), transparent);
            opacity: 0.8;
            transition: opacity 0.4s ease;
        }
        [data-theme="paper-fold-dark"] .bookmark-card:hover {
            border-color: #E4E0D8;
            box-shadow: 
                0 6px 24px rgba(0,0,0,0.55),
                0 4px 12px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(247,245,241,0.15);
            transform: translateY(-4px) rotate(-0.5deg);
        }
        [data-theme="paper-fold-dark"] .bookmark-card:hover::before,
        [data-theme="paper-fold-dark"] .bookmark-card:hover::after {
            opacity: 1;
        }
        [data-theme="paper-fold-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(228, 224, 216, 0.18), rgba(168, 151, 134, 0.12));
            border: 1px solid rgba(168, 151, 134, 0.4);
            box-shadow: 
                0 2px 6px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(247,245,241,0.1);
        }

        /* ========== 新主题通用优化 ========== */
        /* 确保所有新主题的过渡效果流畅 */
        [data-theme^="classic-noir-"],
        [data-theme^="luxury-dune-"],
        [data-theme^="cyber-pulse-"],
        [data-theme^="nature-calm-"],
        [data-theme^="stone-realm-"],
        [data-theme^="paper-fold-"] {
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* 按钮样式适配新主题 */
        [data-theme^="classic-noir-"] .btn,
        [data-theme^="luxury-dune-"] .btn,
        [data-theme^="cyber-pulse-"] .btn,
        [data-theme^="nature-calm-"] .btn,
        [data-theme^="stone-realm-"] .btn,
        [data-theme^="paper-fold-"] .btn {
            border-radius: var(--radius-md);
            transition: all 0.2s ease;
        }

        /* 输入框样式适配 */
        [data-theme^="classic-noir-"] input,
        [data-theme^="luxury-dune-"] input,
        [data-theme^="cyber-pulse-"] input,
        [data-theme^="nature-calm-"] input,
        [data-theme^="stone-realm-"] input,
        [data-theme^="paper-fold-"] input,
        [data-theme^="classic-noir-"] textarea,
        [data-theme^="luxury-dune-"] textarea,
        [data-theme^="cyber-pulse-"] textarea,
        [data-theme^="nature-calm-"] textarea,
        [data-theme^="stone-realm-"] textarea,
        [data-theme^="paper-fold-"] textarea {
            border-radius: var(--radius-md);
            transition: all 0.2s ease;
        }

        /* 7. ========== 冷冽锋影（Brushed Metal）- 明暗双模式 ========== */

        /* Brushed Metal - Light Mode */
        [data-theme="brushed-metal-light"] {
            --theme-name: 'brushed-metal';
            --bg-page: linear-gradient(135deg, #E9EBEE 0%, #C8CDD4 50%, #B0B8C0 100%);
            --bg-surface: rgba(255, 255, 255, 0.82);
            --bg-hover: rgba(192, 198, 206, 0.75);
            --bg-active: rgba(96, 104, 112, 0.12);
            --border: rgba(96, 104, 112, 0.25);
            --text-primary: #31353A;
            --text-secondary: #4B4F54;
            --text-muted: #606872;
            --accent: #606872;
            --accent-secondary: #94A3B8;
            --accent-tertiary: #C8CDD4;
            --accent-hover: #94A3B8;
            --card-shadow: 0 4px 16px rgba(49, 53, 58, 0.12);
            --card-shadow-hover: 0 6px 24px rgba(49, 53, 58, 0.2);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #31353A;
            --overlay-light: rgba(233,235,238,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
            --hue-primary: 210;
        }
        [data-theme="brushed-metal-light"] body {
            background: linear-gradient(135deg, #E9EBEE 0%, #C8CDD4 50%, #B0B8C0 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Brushed Metal Light - Home Quick Card --- */
        [data-theme="brushed-metal-light"] .home-quick-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #F5F6F7 100%);
            border: 1px solid rgba(96, 104, 112, 0.25);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(49, 53, 58, 0.12);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="brushed-metal-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(96, 104, 112, 0.03) 2px,
                rgba(96, 104, 112, 0.03) 4px
            );
            opacity: 0.8;
            transition: opacity 0.5s ease;
            animation: metalFlow 8s linear infinite;
        }
        @keyframes metalFlow {
            0% { transform: translateX(0); }
            100% { transform: translateX(50%); }
        }
        [data-theme="brushed-metal-light"] .home-quick-card:hover {
            border-color: #94A3B8;
            box-shadow: 0 6px 24px rgba(49, 53, 58, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="brushed-metal-light"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="brushed-metal-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(96, 104, 112, 0.12), rgba(148, 163, 184, 0.1));
            border: 1px solid rgba(96, 104, 112, 0.25);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(49, 53, 58, 0.12);
        }

        /* --- Brushed Metal Light - AI Tool Card --- */
        [data-theme="brushed-metal-light"] .ai-tool-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #F5F6F7 100%);
            border: 1px solid rgba(96, 104, 112, 0.25);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(49, 53, 58, 0.12);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="brushed-metal-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(96, 104, 112, 0.03) 2px,
                rgba(96, 104, 112, 0.03) 4px
            );
            opacity: 0.8;
            transition: opacity 0.5s ease;
            animation: metalFlow 8s linear infinite;
        }
        [data-theme="brushed-metal-light"] .ai-tool-card:hover {
            border-color: #94A3B8;
            box-shadow: 0 6px 24px rgba(49, 53, 58, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="brushed-metal-light"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="brushed-metal-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(96, 104, 112, 0.12), rgba(148, 163, 184, 0.1));
            border: 1px solid rgba(96, 104, 112, 0.25);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(49, 53, 58, 0.12);
        }

        /* --- Brushed Metal Light - Bookmark Card --- */
        [data-theme="brushed-metal-light"] .bookmark-card {
            background: linear-gradient(145deg, #FFFFFF 0%, #F5F6F7 100%);
            border: 1px solid rgba(96, 104, 112, 0.25);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(49, 53, 58, 0.12);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="brushed-metal-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(96, 104, 112, 0.03) 2px,
                rgba(96, 104, 112, 0.03) 4px
            );
            opacity: 0.8;
            transition: opacity 0.5s ease;
            animation: metalFlow 8s linear infinite;
        }
        [data-theme="brushed-metal-light"] .bookmark-card:hover {
            border-color: #94A3B8;
            box-shadow: 0 6px 24px rgba(49, 53, 58, 0.2), 0 0 0 1px rgba(148, 163, 184, 0.15);
            transform: translateY(-4px);
        }
        [data-theme="brushed-metal-light"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="brushed-metal-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(96, 104, 112, 0.12), rgba(148, 163, 184, 0.1));
            border: 1px solid rgba(96, 104, 112, 0.25);
            box-shadow: 0 2px 8px rgba(49, 53, 58, 0.12);
        }

        /* Brushed Metal - Dark Mode */
        [data-theme="brushed-metal-dark"] {
            --theme-name: 'brushed-metal';
            --bg-page: linear-gradient(135deg, #1D2024 0%, #2D3136 50%, #3D424A 100%);
            --bg-surface: rgba(61, 66, 74, 0.78);
            --bg-hover: rgba(96, 104, 112, 0.7);
            --bg-active: rgba(148, 163, 184, 0.15);
            --border: rgba(96, 104, 112, 0.4);
            --text-primary: #E9EBEE;
            --text-secondary: #C8CDD4;
            --text-muted: #94A3B8;
            --accent: #94A3B8;
            --accent-secondary: #606872;
            --accent-tertiary: #C8CDD4;
            --accent-hover: #94A3B8;
            --card-shadow: 0 4px 16px rgba(0,0,0,0.45);
            --card-shadow-hover: 0 6px 24px rgba(0,0,0,0.55);
            --white-10: rgba(233,235,238,0.1);
            --white-15: rgba(233,235,238,0.15);
            --white-20: rgba(233,235,238,0.2);
            --white-30: rgba(233,235,238,0.3);
            --white-40: rgba(233,235,238,0.4);
            --white-50: rgba(233,235,238,0.5);
            --white-60: rgba(233,235,238,0.6);
            --white-80: rgba(233,235,238,0.8);
            --white-solid: #E9EBEE;
            --text-on-white: #E9EBEE;
            --overlay-light: rgba(29,32,36,0.06);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 210;
        }
        [data-theme="brushed-metal-dark"] body {
            background: linear-gradient(135deg, #1D2024 0%, #2D3136 50%, #3D424A 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Brushed Metal Dark - Home Quick Card --- */
        [data-theme="brushed-metal-dark"] .home-quick-card {
            background: linear-gradient(145deg, #3D424A 0%, #2D3136 100%);
            border: 1px solid rgba(96, 104, 112, 0.4);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.45);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="brushed-metal-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(148, 163, 184, 0.04) 2px,
                rgba(148, 163, 184, 0.04) 4px
            );
            opacity: 0.8;
            transition: opacity 0.5s ease;
            animation: metalFlow 8s linear infinite;
        }
        [data-theme="brushed-metal-dark"] .home-quick-card:hover {
            border-color: #94A3B8;
            box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(148, 163, 184, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="brushed-metal-dark"] .home-quick-card:hover::before {
            opacity: 1;
        }
        [data-theme="brushed-metal-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(96, 104, 112, 0.2), rgba(148, 163, 184, 0.15));
            border: 1px solid rgba(96, 104, 112, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* --- Brushed Metal Dark - AI Tool Card --- */
        [data-theme="brushed-metal-dark"] .ai-tool-card {
            background: linear-gradient(145deg, #3D424A 0%, #2D3136 100%);
            border: 1px solid rgba(96, 104, 112, 0.4);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.45);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="brushed-metal-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(148, 163, 184, 0.04) 2px,
                rgba(148, 163, 184, 0.04) 4px
            );
            opacity: 0.8;
            transition: opacity 0.5s ease;
            animation: metalFlow 8s linear infinite;
        }
        [data-theme="brushed-metal-dark"] .ai-tool-card:hover {
            border-color: #94A3B8;
            box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(148, 163, 184, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="brushed-metal-dark"] .ai-tool-card:hover::before {
            opacity: 1;
        }
        [data-theme="brushed-metal-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(96, 104, 112, 0.2), rgba(148, 163, 184, 0.15));
            border: 1px solid rgba(96, 104, 112, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* --- Brushed Metal Dark - Bookmark Card --- */
        [data-theme="brushed-metal-dark"] .bookmark-card {
            background: linear-gradient(145deg, #3D424A 0%, #2D3136 100%);
            border: 1px solid rgba(96, 104, 112, 0.4);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.45);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="brushed-metal-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 2px,
                rgba(148, 163, 184, 0.04) 2px,
                rgba(148, 163, 184, 0.04) 4px
            );
            opacity: 0.8;
            transition: opacity 0.5s ease;
            animation: metalFlow 8s linear infinite;
        }
        [data-theme="brushed-metal-dark"] .bookmark-card:hover {
            border-color: #94A3B8;
            box-shadow: 0 6px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(148, 163, 184, 0.2);
            transform: translateY(-4px);
        }
        [data-theme="brushed-metal-dark"] .bookmark-card:hover::before {
            opacity: 1;
        }
        [data-theme="brushed-metal-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 8px;
            background: linear-gradient(135deg, rgba(96, 104, 112, 0.2), rgba(148, 163, 184, 0.15));
            border: 1px solid rgba(96, 104, 112, 0.4);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        /* 8. ========== 雾影层境（Misty Layer）- 明暗双模式 ========== */

        /* Misty Layer - Light Mode */
        [data-theme="misty-layer-light"] {
            --theme-name: 'misty-layer';
            --bg-page: linear-gradient(135deg, #F3F5F7 0%, #E5E9ED 50%, #D7DCE1 100%);
            --bg-surface: rgba(255, 255, 255, 0.75);
            --bg-hover: rgba(138, 153, 168, 0.15);
            --bg-active: rgba(138, 153, 168, 0.2);
            --border: rgba(138, 153, 168, 0.2);
            --text-primary: #38424D;
            --text-secondary: #5D6B7A;
            --text-muted: #8A99A8;
            --accent: #8A99A8;
            --accent-secondary: #5D6B7A;
            --accent-tertiary: #38424D;
            --accent-hover: #5D6B7A;
            --card-shadow: 0 6px 20px rgba(56, 66, 77, 0.08), 0 2px 8px rgba(56, 66, 77, 0.06);
            --card-shadow-hover: 0 10px 30px rgba(56, 66, 77, 0.12), 0 4px 12px rgba(56, 66, 77, 0.1);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #38424D;
            --overlay-light: rgba(243,245,247,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
            --hue-primary: 210;
        }
        [data-theme="misty-layer-light"] body {
            background: linear-gradient(135deg, #F3F5F7 0%, #E5E9ED 50%, #D7DCE1 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Misty Layer Light - Home Quick Card --- */
        [data-theme="misty-layer-light"] .home-quick-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: none;
            border-radius: 24px;
            box-shadow: 0 6px 20px rgba(56, 66, 77, 0.08), 0 2px 8px rgba(56, 66, 77, 0.06);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: mistBreath 5s ease-in-out infinite;
        }
        @keyframes mistBreath {
            0%, 100% { opacity: 0.95; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.01); }
        }
        [data-theme="misty-layer-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 30% 20%,
                rgba(255, 255, 255, 0.6) 0%,
                transparent 50%
            );
            opacity: 0.6;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-light"] .home-quick-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(
                circle at 70% 80%,
                rgba(215, 220, 225, 0.5) 0%,
                transparent 60%
            );
            opacity: 0.7;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-light"] .home-quick-card:hover {
            background: rgba(255, 255, 255, 0.75);
            box-shadow: 0 10px 30px rgba(56, 66, 77, 0.12), 0 4px 12px rgba(56, 66, 77, 0.1);
            transform: translateY(-4px);
        }
        [data-theme="misty-layer-light"] .home-quick-card:hover::before,
        [data-theme="misty-layer-light"] .home-quick-card:hover::after {
            opacity: 1;
        }
        [data-theme="misty-layer-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background: rgba(138, 153, 168, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(56, 66, 77, 0.1);
        }

        /* --- Misty Layer Light - AI Tool Card --- */
        [data-theme="misty-layer-light"] .ai-tool-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: none;
            border-radius: 24px;
            box-shadow: 0 6px 20px rgba(56, 66, 77, 0.08), 0 2px 8px rgba(56, 66, 77, 0.06);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: mistBreath 5s ease-in-out infinite;
        }
        [data-theme="misty-layer-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 30% 20%,
                rgba(255, 255, 255, 0.6) 0%,
                transparent 50%
            );
            opacity: 0.6;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(
                circle at 70% 80%,
                rgba(215, 220, 225, 0.5) 0%,
                transparent 60%
            );
            opacity: 0.7;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-light"] .ai-tool-card:hover {
            background: rgba(255, 255, 255, 0.75);
            box-shadow: 0 10px 30px rgba(56, 66, 77, 0.12), 0 4px 12px rgba(56, 66, 77, 0.1);
            transform: translateY(-4px);
        }
        [data-theme="misty-layer-light"] .ai-tool-card:hover::before,
        [data-theme="misty-layer-light"] .ai-tool-card:hover::after {
            opacity: 1;
        }
        [data-theme="misty-layer-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            background: rgba(138, 153, 168, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(56, 66, 77, 0.1);
        }

        /* --- Misty Layer Light - Bookmark Card --- */
        [data-theme="misty-layer-light"] .bookmark-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: none;
            border-radius: 24px;
            box-shadow: 0 6px 20px rgba(56, 66, 77, 0.08), 0 2px 8px rgba(56, 66, 77, 0.06);
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: mistBreath 5s ease-in-out infinite;
        }
        [data-theme="misty-layer-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 30% 20%,
                rgba(255, 255, 255, 0.6) 0%,
                transparent 50%
            );
            opacity: 0.6;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-light"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(
                circle at 70% 80%,
                rgba(215, 220, 225, 0.5) 0%,
                transparent 60%
            );
            opacity: 0.7;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-light"] .bookmark-card:hover {
            background: rgba(255, 255, 255, 0.75);
            box-shadow: 0 10px 30px rgba(56, 66, 77, 0.12), 0 4px 12px rgba(56, 66, 77, 0.1);
            transform: translateY(-4px);
        }
        [data-theme="misty-layer-light"] .bookmark-card:hover::before,
        [data-theme="misty-layer-light"] .bookmark-card:hover::after {
            opacity: 1;
        }
        [data-theme="misty-layer-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: rgba(138, 153, 168, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 2px 8px rgba(56, 66, 77, 0.1);
        }

        /* Misty Layer - Dark Mode */
        [data-theme="misty-layer-dark"] {
            --theme-name: 'misty-layer';
            --bg-page: linear-gradient(135deg, #16181C 0%, #202530 50%, #2A303A 100%);
            --bg-surface: rgba(42, 48, 58, 0.65);
            --bg-hover: rgba(138, 153, 168, 0.2);
            --bg-active: rgba(138, 153, 168, 0.25);
            --border: rgba(138, 153, 168, 0.3);
            --text-primary: #F3F5F7;
            --text-secondary: #D7DCE1;
            --text-muted: #8A99A8;
            --accent: #8A99A8;
            --accent-secondary: #D7DCE1;
            --accent-tertiary: #5D6B7A;
            --accent-hover: #D7DCE1;
            --card-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
            --card-shadow-hover: 0 10px 30px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);
            --white-10: rgba(243,245,247,0.1);
            --white-15: rgba(243,245,247,0.15);
            --white-20: rgba(243,245,247,0.2);
            --white-30: rgba(243,245,247,0.3);
            --white-40: rgba(243,245,247,0.4);
            --white-50: rgba(243,245,247,0.5);
            --white-60: rgba(243,245,247,0.6);
            --white-80: rgba(243,245,247,0.8);
            --white-solid: #F3F5F7;
            --text-on-white: #F3F5F7;
            --overlay-light: rgba(22,24,28,0.06);
            --overlay-dark: rgba(0,0,0,0.55);
            --hue-primary: 210;
        }
        [data-theme="misty-layer-dark"] body {
            background: linear-gradient(135deg, #16181C 0%, #202530 50%, #2A303A 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Misty Layer Dark - Home Quick Card --- */
        [data-theme="misty-layer-dark"] .home-quick-card {
            background: rgba(42, 48, 58, 0.55);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: none;
            border-radius: 24px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: mistBreath 5s ease-in-out infinite;
        }
        [data-theme="misty-layer-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 30% 20%,
                rgba(56, 66, 77, 0.4) 0%,
                transparent 50%
            );
            opacity: 0.6;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-dark"] .home-quick-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(
                circle at 70% 80%,
                rgba(138, 153, 168, 0.3) 0%,
                transparent 60%
            );
            opacity: 0.7;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-dark"] .home-quick-card:hover {
            background: rgba(42, 48, 58, 0.65);
            box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);
            transform: translateY(-4px);
        }
        [data-theme="misty-layer-dark"] .home-quick-card:hover::before,
        [data-theme="misty-layer-dark"] .home-quick-card:hover::after {
            opacity: 1;
        }
        [data-theme="misty-layer-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background: rgba(138, 153, 168, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* --- Misty Layer Dark - AI Tool Card --- */
        [data-theme="misty-layer-dark"] .ai-tool-card {
            background: rgba(42, 48, 58, 0.55);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: none;
            border-radius: 24px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: mistBreath 5s ease-in-out infinite;
        }
        [data-theme="misty-layer-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 30% 20%,
                rgba(56, 66, 77, 0.4) 0%,
                transparent 50%
            );
            opacity: 0.6;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(
                circle at 70% 80%,
                rgba(138, 153, 168, 0.3) 0%,
                transparent 60%
            );
            opacity: 0.7;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-dark"] .ai-tool-card:hover {
            background: rgba(42, 48, 58, 0.65);
            box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);
            transform: translateY(-4px);
        }
        [data-theme="misty-layer-dark"] .ai-tool-card:hover::before,
        [data-theme="misty-layer-dark"] .ai-tool-card:hover::after {
            opacity: 1;
        }
        [data-theme="misty-layer-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            background: rgba(138, 153, 168, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* --- Misty Layer Dark - Bookmark Card --- */
        [data-theme="misty-layer-dark"] .bookmark-card {
            background: rgba(42, 48, 58, 0.55);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: none;
            border-radius: 24px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            animation: mistBreath 5s ease-in-out infinite;
        }
        [data-theme="misty-layer-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                circle at 30% 20%,
                rgba(56, 66, 77, 0.4) 0%,
                transparent 50%
            );
            opacity: 0.6;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-dark"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(
                circle at 70% 80%,
                rgba(138, 153, 168, 0.3) 0%,
                transparent 60%
            );
            opacity: 0.7;
            transition: opacity 0.6s ease;
        }
        [data-theme="misty-layer-dark"] .bookmark-card:hover {
            background: rgba(42, 48, 58, 0.65);
            box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.5);
            transform: translateY(-4px);
        }
        [data-theme="misty-layer-dark"] .bookmark-card:hover::before,
        [data-theme="misty-layer-dark"] .bookmark-card:hover::after {
            opacity: 1;
        }
        [data-theme="misty-layer-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: rgba(138, 153, 168, 0.2);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        .appearance-tab.active {
            border-color: var(--accent);
            background: var(--accent);
            color: var(--text-on-white, #1a1a1a);
            font-weight: 800;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .appearance-tab-content {
            transition: opacity 0.3s ease;
        }

        /* ==================== 当前壁纸预览样式 ==================== */
        .current-wallpaper-preview {
            aspect-ratio: 16/9;
            width: 100%;
            border-radius: 16px;
            border: 2px solid var(--border);
            background: linear-gradient(135deg, var(--bg-surface), var(--bg-hover));
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .current-wallpaper-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ==================== 历史壁纸网格样式 ==================== */
        .wallpaper-history-item {
            aspect-ratio: 16/10;
            border-radius: 12px;
            border: 2px solid var(--border);
            cursor: pointer;
            overflow: hidden;
            position: relative;
            transition: all 0.2s ease;
            background-size: cover;
            background-position: center;
        }

        .wallpaper-history-item:hover {
            transform: translateY(-2px);
            border-color: var(--accent);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .wallpaper-history-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .wallpaper-history-delete {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.6);
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wallpaper-history-item:hover .wallpaper-history-delete {
            opacity: 1;
        }

        .wallpaper-history-delete:hover {
            background: rgba(220, 38, 38, 0.9);
            transform: scale(1.1);
        }

        /* 推荐壁纸库样式 */
        .featured-wallpaper-item {
            aspect-ratio: 16/10;
            border-radius: 14px;
            border: 2px solid var(--border);
            cursor: pointer;
            overflow: hidden;
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            background-size: cover;
            background-position: center;
        }

        .featured-wallpaper-item:hover {
            transform: translateY(-4px) scale(1.02);
            border-color: var(--accent);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
        }

        .featured-wallpaper-item .wallpaper-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: flex-end;
            padding: 14px;
        }

        .featured-wallpaper-item:hover .wallpaper-overlay {
            opacity: 1;
        }

        .featured-wallpaper-item .wallpaper-name {
            color: white;
            font-weight: 700;
            font-size: 0.9rem;
            text-shadow: 0 2px 6px rgba(0,0,0,0.5);
        }

        .featured-wallpaper-item.is-active {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent), 0 10px 24px rgba(0,0,0,0.2);
        }

        @media (max-width: 768px) {
            #wallpaperHistoryGrid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ==================== 16个新的首页书签卡片样式 ==================== */

        /* 1. 极光流光 - 玻璃态、大圆角、柔和阴影 */
        .bookmark-grid.card-style-aurora {
            gap: 20px;
        }
        .card-style-aurora .bookmark-card {
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(20px) saturate(160%);
        }
        .card-style-aurora .bookmark-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        }
        .card-style-aurora .card-favicon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
        }

        /* 2. 简约商务 - 简洁、中等圆角、低阴影 */
        .bookmark-grid.card-style-simple {
            gap: 16px;
        }
        .card-style-simple .bookmark-card {
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            transition: all 0.25s ease;
        }
        .card-style-simple .bookmark-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
        }
        .card-style-simple .card-favicon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
        }

        /* 3. 优雅质感 - 精致、压边、高级阴影 */
        .bookmark-grid.card-style-elegance {
            gap: 16px;
        }
        .card-style-elegance .bookmark-card {
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid var(--border);
        }
        .card-style-elegance .bookmark-card:hover {
            transform: translateY(-2px) scale(1.01);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        }
        .card-style-elegance .card-favicon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
        }

        /* 4. 石板灰 - 沉稳、方正、低调 */
        .bookmark-grid.card-style-slate {
            gap: 14px;
        }
        .card-style-slate .bookmark-card {
            border-radius: 10px;
            padding: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }
        .card-style-slate .bookmark-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }
        .card-style-slate .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 10px;
        }

        /* 5. 午夜花开 - 神秘、层次阴影 */
        .bookmark-grid.card-style-midnight {
            gap: 18px;
        }
        .card-style-midnight .bookmark-card {
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-style-midnight .bookmark-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
        }
        .card-style-midnight .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 16px;
        }

        /* 6. 极地冰原 - 清爽、冷色调风格 */
        .bookmark-grid.card-style-arctic {
            gap: 18px;
        }
        .card-style-arctic .bookmark-card {
            border-radius: 18px;
            padding: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }
        .card-style-arctic .bookmark-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
        }
        .card-style-arctic .card-favicon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
        }

        /* 7. 黑白胶片 - 复古、高对比 */
        .bookmark-grid.card-style-noir {
            gap: 16px;
        }
        .card-style-noir .bookmark-card {
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
            transition: all 0.25s ease;
        }
        .card-style-noir .bookmark-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }
        .card-style-noir .card-favicon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
        }

        /* 8. 烟波霓虹 - 复古未来、渐变 */
        .bookmark-grid.card-style-synthwave {
            gap: 20px;
        }
        .card-style-synthwave .bookmark-card {
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-style-synthwave .bookmark-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
        }
        .card-style-synthwave .card-favicon {
            width: 52px;
            height: 52px;
            border-radius: 18px;
        }

        /* 9. 矩阵终端 - 科技、像素风 */
        .bookmark-grid.card-style-matrix {
            gap: 14px;
        }
        .card-style-matrix .bookmark-card {
            border-radius: 8px;
            padding: 14px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease;
        }
        .card-style-matrix .bookmark-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
        }
        .card-style-matrix .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 8px;
        }

        /* 10. 霓虹酸液 - 强烈对比、霓虹 */
        .bookmark-grid.card-style-neonacid {
            gap: 18px;
        }
        .card-style-neonacid .bookmark-card {
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            transition: all 0.25s ease;
        }
        .card-style-neonacid .bookmark-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
        }
        .card-style-neonacid .card-favicon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
        }

        /* 11. 星云尘埃 - 梦幻、柔和渐变 */
        .bookmark-grid.card-style-nebula {
            gap: 20px;
        }
        .card-style-nebula .bookmark-card {
            border-radius: 20px;
            padding: 18px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-style-nebula .bookmark-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
        }
        .card-style-nebula .card-favicon {
            width: 54px;
            height: 54px;
            border-radius: 18px;
        }

        /* 12. 余烬辉光 - 温暖、金色调 */
        .bookmark-grid.card-style-ember {
            gap: 18px;
        }
        .card-style-ember .bookmark-card {
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-style-ember .bookmark-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12);
        }
        .card-style-ember .card-favicon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
        }

        /* 13. 棱镜色移 - 多彩、渐变边框 */
        .bookmark-grid.card-style-prism {
            gap: 18px;
        }
        .card-style-prism .bookmark-card {
            border-radius: 16px;
            padding: 16px;
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-style-prism .bookmark-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 42px rgba(0, 0, 0, 0.12);
        }
        .card-style-prism .card-favicon {
            width: 50px;
            height: 50px;
            border-radius: 16px;
        }

        /* 9. ========== 线条秩序（Line Geometry）- 明暗双模式 ========== */

        /* Line Geometry - Light Mode */
        [data-theme="line-geometry-light"] {
            --theme-name: 'line-geometry';
            --bg-page: linear-gradient(180deg, #FCFCFC 0%, #F5F5F5 100%);
            --bg-surface: rgba(255, 255, 255, 0.95);
            --bg-hover: rgba(123, 134, 146, 0.1);
            --bg-active: rgba(123, 134, 146, 0.15);
            --border: rgba(156, 168, 180, 0.5);
            --text-primary: #111316;
            --text-secondary: #4A4E54;
            --text-muted: #7B8692;
            --accent: #7B8692;
            --accent-secondary: #4A4E54;
            --accent-tertiary: #111316;
            --accent-hover: #4A4E54;
            --card-shadow: 0 2px 8px rgba(17, 19, 22, 0.06);
            --card-shadow-hover: 0 4px 16px rgba(17, 19, 22, 0.1);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #111316;
            --overlay-light: rgba(252,252,252,0.6);
            --overlay-dark: rgba(0,0,0,0.04);
            --hue-primary: 215;
        }
        [data-theme="line-geometry-light"] body {
            background: linear-gradient(180deg, #FCFCFC 0%, #F5F5F5 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Line Geometry Light - Home Quick Card --- */
        [data-theme="line-geometry-light"] .home-quick-card {
            background: #FFFFFF;
            border: 1px solid rgba(156, 168, 180, 0.4);
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(17, 19, 22, 0.06);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="line-geometry-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, rgba(156, 168, 180, 0.3) 1px, transparent 1px),
                linear-gradient(rgba(156, 168, 180, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.15;
            transition: opacity 0.5s ease;
        }
        [data-theme="line-geometry-light"] .home-quick-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #7B8692 30%, #7B8692 70%, transparent 100%);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center;
            transition: all 0.5s ease;
        }
        [data-theme="line-geometry-light"] .home-quick-card:hover {
            border-color: #7B8692;
            box-shadow: 0 4px 16px rgba(17, 19, 22, 0.1);
            transform: translateY(-4px);
        }
        [data-theme="line-geometry-light"] .home-quick-card:hover::before {
            opacity: 0.25;
        }
        [data-theme="line-geometry-light"] .home-quick-card:hover::after {
            opacity: 1;
            transform: scaleX(1);
            animation: linePulse 2s ease-in-out infinite;
        }
        @keyframes linePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        [data-theme="line-geometry-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 0;
            background: linear-gradient(135deg, rgba(123, 134, 146, 0.08), rgba(123, 134, 146, 0.04));
            border: 1px solid rgba(156, 168, 180, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 1px 4px rgba(17, 19, 22, 0.08);
        }

        /* --- Line Geometry Light - AI Tool Card --- */
        [data-theme="line-geometry-light"] .ai-tool-card {
            background: #FFFFFF;
            border: 1px solid rgba(156, 168, 180, 0.4);
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(17, 19, 22, 0.06);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="line-geometry-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, rgba(156, 168, 180, 0.3) 1px, transparent 1px),
                linear-gradient(rgba(156, 168, 180, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.15;
            transition: opacity 0.5s ease;
        }
        [data-theme="line-geometry-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #7B8692 30%, #7B8692 70%, transparent 100%);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center;
            transition: all 0.5s ease;
        }
        [data-theme="line-geometry-light"] .ai-tool-card:hover {
            border-color: #7B8692;
            box-shadow: 0 4px 16px rgba(17, 19, 22, 0.1);
            transform: translateY(-4px);
        }
        [data-theme="line-geometry-light"] .ai-tool-card:hover::before {
            opacity: 0.25;
        }
        [data-theme="line-geometry-light"] .ai-tool-card:hover::after {
            opacity: 1;
            transform: scaleX(1);
            animation: linePulse 2s ease-in-out infinite;
        }
        [data-theme="line-geometry-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 0;
            background: linear-gradient(135deg, rgba(123, 134, 146, 0.08), rgba(123, 134, 146, 0.04));
            border: 1px solid rgba(156, 168, 180, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 1px 4px rgba(17, 19, 22, 0.08);
        }

        /* --- Line Geometry Light - Bookmark Card --- */
        [data-theme="line-geometry-light"] .bookmark-card {
            background: #FFFFFF;
            border: 1px solid rgba(156, 168, 180, 0.4);
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(17, 19, 22, 0.06);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="line-geometry-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, rgba(156, 168, 180, 0.3) 1px, transparent 1px),
                linear-gradient(rgba(156, 168, 180, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.15;
            transition: opacity 0.5s ease;
        }
        [data-theme="line-geometry-light"] .bookmark-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #7B8692 30%, #7B8692 70%, transparent 100%);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center;
            transition: all 0.5s ease;
        }
        [data-theme="line-geometry-light"] .bookmark-card:hover {
            border-color: #7B8692;
            box-shadow: 0 4px 16px rgba(17, 19, 22, 0.1);
            transform: translateY(-4px);
        }
        [data-theme="line-geometry-light"] .bookmark-card:hover::before {
            opacity: 0.25;
        }
        [data-theme="line-geometry-light"] .bookmark-card:hover::after {
            opacity: 1;
            transform: scaleX(1);
            animation: linePulse 2s ease-in-out infinite;
        }
        [data-theme="line-geometry-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: linear-gradient(135deg, rgba(123, 134, 146, 0.08), rgba(123, 134, 146, 0.04));
            border: 1px solid rgba(156, 168, 180, 0.4);
            box-shadow: 0 1px 4px rgba(17, 19, 22, 0.08);
        }

        /* Line Geometry - Dark Mode */
        [data-theme="line-geometry-dark"] {
            --theme-name: 'line-geometry';
            --bg-page: linear-gradient(180deg, #111316 0%, #1A1D22 100%);
            --bg-surface: rgba(26, 29, 34, 0.95);
            --bg-hover: rgba(123, 134, 146, 0.2);
            --bg-active: rgba(123, 134, 146, 0.25);
            --border: rgba(156, 168, 180, 0.5);
            --text-primary: #FCFCFC;
            --text-secondary: #C4C8CE;
            --text-muted: #7B8692;
            --accent: #7B8692;
            --accent-secondary: #C4C8CE;
            --accent-tertiary: #FCFCFC;
            --accent-hover: #C4C8CE;
            --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.5);
            --white-10: rgba(252,252,252,0.1);
            --white-15: rgba(252,252,252,0.15);
            --white-20: rgba(252,252,252,0.2);
            --white-30: rgba(252,252,252,0.3);
            --white-40: rgba(252,252,252,0.4);
            --white-50: rgba(252,252,252,0.5);
            --white-60: rgba(252,252,252,0.6);
            --white-80: rgba(252,252,252,0.8);
            --white-solid: #FCFCFC;
            --text-on-white: #FCFCFC;
            --overlay-light: rgba(17,19,22,0.05);
            --overlay-dark: rgba(0,0,0,0.5);
            --hue-primary: 215;
        }
        [data-theme="line-geometry-dark"] body {
            background: linear-gradient(180deg, #111316 0%, #1A1D22 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Line Geometry Dark - Home Quick Card --- */
        [data-theme="line-geometry-dark"] .home-quick-card {
            background: #1A1D22;
            border: 1px solid rgba(156, 168, 180, 0.4);
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="line-geometry-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, rgba(156, 168, 180, 0.3) 1px, transparent 1px),
                linear-gradient(rgba(156, 168, 180, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.15;
            transition: opacity 0.5s ease;
        }
        [data-theme="line-geometry-dark"] .home-quick-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #7B8692 30%, #7B8692 70%, transparent 100%);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center;
            transition: all 0.5s ease;
        }
        [data-theme="line-geometry-dark"] .home-quick-card:hover {
            border-color: #C4C8CE;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
            transform: translateY(-4px);
        }
        [data-theme="line-geometry-dark"] .home-quick-card:hover::before {
            opacity: 0.25;
        }
        [data-theme="line-geometry-dark"] .home-quick-card:hover::after {
            opacity: 1;
            transform: scaleX(1);
            animation: linePulse 2s ease-in-out infinite;
        }
        [data-theme="line-geometry-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 0;
            background: linear-gradient(135deg, rgba(123, 134, 146, 0.12), rgba(123, 134, 146, 0.06));
            border: 1px solid rgba(156, 168, 180, 0.4);
            font-size: 1.8rem;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

        /* --- Line Geometry Dark - AI Tool Card --- */
        [data-theme="line-geometry-dark"] .ai-tool-card {
            background: #1A1D22;
            border: 1px solid rgba(156, 168, 180, 0.4);
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="line-geometry-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, rgba(156, 168, 180, 0.3) 1px, transparent 1px),
                linear-gradient(rgba(156, 168, 180, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.15;
            transition: opacity 0.5s ease;
        }
        [data-theme="line-geometry-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #7B8692 30%, #7B8692 70%, transparent 100%);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center;
            transition: all 0.5s ease;
        }
        [data-theme="line-geometry-dark"] .ai-tool-card:hover {
            border-color: #C4C8CE;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
            transform: translateY(-4px);
        }
        [data-theme="line-geometry-dark"] .ai-tool-card:hover::before {
            opacity: 0.25;
        }
        [data-theme="line-geometry-dark"] .ai-tool-card:hover::after {
            opacity: 1;
            transform: scaleX(1);
            animation: linePulse 2s ease-in-out infinite;
        }
        [data-theme="line-geometry-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 0;
            background: linear-gradient(135deg, rgba(123, 134, 146, 0.12), rgba(123, 134, 146, 0.06));
            border: 1px solid rgba(156, 168, 180, 0.4);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

        /* --- Line Geometry Dark - Bookmark Card --- */
        [data-theme="line-geometry-dark"] .bookmark-card {
            background: #1A1D22;
            border: 1px solid rgba(156, 168, 180, 0.4);
            border-radius: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="line-geometry-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                linear-gradient(90deg, rgba(156, 168, 180, 0.3) 1px, transparent 1px),
                linear-gradient(rgba(156, 168, 180, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.15;
            transition: opacity 0.5s ease;
        }
        [data-theme="line-geometry-dark"] .bookmark-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #7B8692 30%, #7B8692 70%, transparent 100%);
            opacity: 0;
            transform: scaleX(0);
            transform-origin: center;
            transition: all 0.5s ease;
        }
        [data-theme="line-geometry-dark"] .bookmark-card:hover {
            border-color: #C4C8CE;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
            transform: translateY(-4px);
        }
        [data-theme="line-geometry-dark"] .bookmark-card:hover::before {
            opacity: 0.25;
        }
        [data-theme="line-geometry-dark"] .bookmark-card:hover::after {
            opacity: 1;
            transform: scaleX(1);
            animation: linePulse 2s ease-in-out infinite;
        }
        [data-theme="line-geometry-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 0;
            background: linear-gradient(135deg, rgba(123, 134, 146, 0.12), rgba(123, 134, 146, 0.06));
            border: 1px solid rgba(156, 168, 180, 0.4);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

        /* 10. ========== 温陶釉色（Ceramic Glaze）- 明暗双模式 ========== */

        /* Ceramic Glaze - Light Mode */
        [data-theme="ceramic-glaze-light"] {
            --theme-name: 'ceramic-glaze';
            --bg-page: linear-gradient(135deg, #F8F3EC 0%, #EDE7DC 50%, #E2DBD0 100%);
            --bg-surface: rgba(248, 243, 236, 0.95);
            --bg-hover: rgba(107, 90, 75, 0.1);
            --bg-active: rgba(107, 90, 75, 0.15);
            --border: rgba(107, 90, 75, 0.25);
            --text-primary: #3A3129;
            --text-secondary: #6B5A4B;
            --text-muted: #8B7D6F;
            --accent: #748882;
            --accent-secondary: #6B5A4B;
            --accent-tertiary: #3A3129;
            --accent-hover: #6B5A4B;
            --card-shadow: 0 4px 16px rgba(58, 49, 41, 0.08);
            --card-shadow-hover: 0 8px 24px rgba(58, 49, 41, 0.12);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #3A3129;
            --overlay-light: rgba(248,243,236,0.6);
            --overlay-dark: rgba(0,0,0,0.04);
            --hue-primary: 30;
        }
        [data-theme="ceramic-glaze-light"] body {
            background: linear-gradient(135deg, #F8F3EC 0%, #EDE7DC 50%, #E2DBD0 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Ceramic Glaze Light - Home Quick Card --- */
        [data-theme="ceramic-glaze-light"] .home-quick-card {
            background: linear-gradient(145deg, #F8F3EC 0%, #EDE7DC 100%);
            border: 1px solid rgba(107, 90, 75, 0.2);
            border-radius: 28px;
            box-shadow: 0 4px 16px rgba(58, 49, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ceramicGlow 6s ease-in-out infinite;
        }
        @keyframes ceramicGlow {
            0%, 100% { box-shadow: 0 4px 16px rgba(58, 49, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
            50% { box-shadow: 0 4px 16px rgba(58, 49, 41, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.3); }
        }
        [data-theme="ceramic-glaze-light"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
            opacity: 0.5;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-light"] .home-quick-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 70% 100%, rgba(116, 136, 130, 0.15) 0%, transparent 70%);
            opacity: 0.4;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-light"] .home-quick-card:hover {
            border-color: rgba(107, 90, 75, 0.35);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(58, 49, 41, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 30px rgba(255, 255, 255, 0.4);
        }
        [data-theme="ceramic-glaze-light"] .home-quick-card:hover::before {
            opacity: 0.7;
        }
        [data-theme="ceramic-glaze-light"] .home-quick-card:hover::after {
            opacity: 0.6;
        }
        [data-theme="ceramic-glaze-light"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(116, 136, 130, 0.15), rgba(107, 90, 75, 0.08));
            border: 1px solid rgba(107, 90, 75, 0.2);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(58, 49, 41, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        /* --- Ceramic Glaze Light - AI Tool Card --- */
        [data-theme="ceramic-glaze-light"] .ai-tool-card {
            background: linear-gradient(145deg, #F8F3EC 0%, #EDE7DC 100%);
            border: 1px solid rgba(107, 90, 75, 0.2);
            border-radius: 28px;
            box-shadow: 0 4px 16px rgba(58, 49, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ceramicGlow 6s ease-in-out infinite;
        }
        [data-theme="ceramic-glaze-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
            opacity: 0.5;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 70% 100%, rgba(116, 136, 130, 0.15) 0%, transparent 70%);
            opacity: 0.4;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-light"] .ai-tool-card:hover {
            border-color: rgba(107, 90, 75, 0.35);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(58, 49, 41, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 30px rgba(255, 255, 255, 0.4);
        }
        [data-theme="ceramic-glaze-light"] .ai-tool-card:hover::before {
            opacity: 0.7;
        }
        [data-theme="ceramic-glaze-light"] .ai-tool-card:hover::after {
            opacity: 0.6;
        }
        [data-theme="ceramic-glaze-light"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(116, 136, 130, 0.15), rgba(107, 90, 75, 0.08));
            border: 1px solid rgba(107, 90, 75, 0.2);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(58, 49, 41, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        /* --- Ceramic Glaze Light - Bookmark Card --- */
        [data-theme="ceramic-glaze-light"] .bookmark-card {
            background: linear-gradient(145deg, #F8F3EC 0%, #EDE7DC 100%);
            border: 1px solid rgba(107, 90, 75, 0.2);
            border-radius: 28px;
            box-shadow: 0 4px 16px rgba(58, 49, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ceramicGlow 6s ease-in-out infinite;
        }
        [data-theme="ceramic-glaze-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
            opacity: 0.5;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-light"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 70% 100%, rgba(116, 136, 130, 0.15) 0%, transparent 70%);
            opacity: 0.4;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-light"] .bookmark-card:hover {
            border-color: rgba(107, 90, 75, 0.35);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(58, 49, 41, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 30px rgba(255, 255, 255, 0.4);
        }
        [data-theme="ceramic-glaze-light"] .bookmark-card:hover::before {
            opacity: 0.7;
        }
        [data-theme="ceramic-glaze-light"] .bookmark-card:hover::after {
            opacity: 0.6;
        }
        [data-theme="ceramic-glaze-light"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(116, 136, 130, 0.15), rgba(107, 90, 75, 0.08));
            border: 1px solid rgba(107, 90, 75, 0.2);
            box-shadow: 0 2px 8px rgba(58, 49, 41, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        /* Ceramic Glaze - Dark Mode */
        [data-theme="ceramic-glaze-dark"] {
            --theme-name: 'ceramic-glaze';
            --bg-page: linear-gradient(135deg, #2A2520 0%, #221E19 50%, #1A1714 100%);
            --bg-surface: rgba(42, 37, 32, 0.95);
            --bg-hover: rgba(248, 243, 236, 0.1);
            --bg-active: rgba(248, 243, 236, 0.15);
            --border: rgba(248, 243, 236, 0.2);
            --text-primary: #F8F3EC;
            --text-secondary: #D9CFC1;
            --text-muted: #A89C8C;
            --accent: #748882;
            --accent-secondary: #D9CFC1;
            --accent-tertiary: #F8F3EC;
            --accent-hover: #D9CFC1;
            --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
            --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
            --white-10: rgba(248,243,236,0.1);
            --white-15: rgba(248,243,236,0.15);
            --white-20: rgba(248,243,236,0.2);
            --white-30: rgba(248,243,236,0.3);
            --white-40: rgba(248,243,236,0.4);
            --white-50: rgba(248,243,236,0.5);
            --white-60: rgba(248,243,236,0.6);
            --white-80: rgba(248,243,236,0.8);
            --white-solid: #F8F3EC;
            --text-on-white: #F8F3EC;
            --overlay-light: rgba(42,37,32,0.05);
            --overlay-dark: rgba(0,0,0,0.55);
            --hue-primary: 30;
        }
        [data-theme="ceramic-glaze-dark"] body {
            background: linear-gradient(135deg, #2A2520 0%, #221E19 50%, #1A1714 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Inter", system-ui, sans-serif;
        }

        /* --- Ceramic Glaze Dark - Home Quick Card --- */
        [data-theme="ceramic-glaze-dark"] .home-quick-card {
            background: linear-gradient(145deg, #2A2520 0%, #221E19 100%);
            border: 1px solid rgba(248, 243, 236, 0.15);
            border-radius: 28px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(248, 243, 236, 0.1);
            padding: 22px 16px 18px;
            gap: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ceramicGlowDark 6s ease-in-out infinite;
        }
        @keyframes ceramicGlowDark {
            0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(248, 243, 236, 0.1); }
            50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(248, 243, 236, 0.15), inset 0 0 20px rgba(116, 136, 130, 0.15); }
        }
        [data-theme="ceramic-glaze-dark"] .home-quick-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(248, 243, 236, 0.15) 0%, transparent 60%);
            opacity: 0.4;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-dark"] .home-quick-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 70% 100%, rgba(116, 136, 130, 0.2) 0%, transparent 70%);
            opacity: 0.3;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-dark"] .home-quick-card:hover {
            border-color: rgba(248, 243, 236, 0.25);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(248, 243, 236, 0.15), inset 0 0 30px rgba(116, 136, 130, 0.2);
        }
        [data-theme="ceramic-glaze-dark"] .home-quick-card:hover::before {
            opacity: 0.6;
        }
        [data-theme="ceramic-glaze-dark"] .home-quick-card:hover::after {
            opacity: 0.5;
        }
        [data-theme="ceramic-glaze-dark"] .home-quick-icon {
            width: 50px;
            height: 50px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(116, 136, 130, 0.2), rgba(248, 243, 236, 0.08));
            border: 1px solid rgba(248, 243, 236, 0.15);
            font-size: 1.8rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(248, 243, 236, 0.1);
        }

        /* --- Ceramic Glaze Dark - AI Tool Card --- */
        [data-theme="ceramic-glaze-dark"] .ai-tool-card {
            background: linear-gradient(145deg, #2A2520 0%, #221E19 100%);
            border: 1px solid rgba(248, 243, 236, 0.15);
            border-radius: 28px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(248, 243, 236, 0.1);
            padding: 20px 14px;
            gap: 12px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ceramicGlowDark 6s ease-in-out infinite;
        }
        [data-theme="ceramic-glaze-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(248, 243, 236, 0.15) 0%, transparent 60%);
            opacity: 0.4;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 70% 100%, rgba(116, 136, 130, 0.2) 0%, transparent 70%);
            opacity: 0.3;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-dark"] .ai-tool-card:hover {
            border-color: rgba(248, 243, 236, 0.25);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(248, 243, 236, 0.15), inset 0 0 30px rgba(116, 136, 130, 0.2);
        }
        [data-theme="ceramic-glaze-dark"] .ai-tool-card:hover::before {
            opacity: 0.6;
        }
        [data-theme="ceramic-glaze-dark"] .ai-tool-card:hover::after {
            opacity: 0.5;
        }
        [data-theme="ceramic-glaze-dark"] .ai-tool-icon {
            width: 44px;
            height: 44px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(116, 136, 130, 0.2), rgba(248, 243, 236, 0.08));
            border: 1px solid rgba(248, 243, 236, 0.15);
            font-size: 1.6rem;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(248, 243, 236, 0.1);
        }

        /* --- Ceramic Glaze Dark - Bookmark Card --- */
        [data-theme="ceramic-glaze-dark"] .bookmark-card {
            background: linear-gradient(145deg, #2A2520 0%, #221E19 100%);
            border: 1px solid rgba(248, 243, 236, 0.15);
            border-radius: 28px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(248, 243, 236, 0.1);
            position: relative;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            animation: ceramicGlowDark 6s ease-in-out infinite;
        }
        [data-theme="ceramic-glaze-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 20%, rgba(248, 243, 236, 0.15) 0%, transparent 60%);
            opacity: 0.4;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-dark"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 70% 100%, rgba(116, 136, 130, 0.2) 0%, transparent 70%);
            opacity: 0.3;
            transition: opacity 0.5s ease;
        }
        [data-theme="ceramic-glaze-dark"] .bookmark-card:hover {
            border-color: rgba(248, 243, 236, 0.25);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(248, 243, 236, 0.15), inset 0 0 30px rgba(116, 136, 130, 0.2);
        }
        [data-theme="ceramic-glaze-dark"] .bookmark-card:hover::before {
            opacity: 0.6;
        }
        [data-theme="ceramic-glaze-dark"] .bookmark-card:hover::after {
            opacity: 0.5;
        }
        [data-theme="ceramic-glaze-dark"] .card-favicon {
            width: 46px;
            height: 46px;
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(116, 136, 130, 0.2), rgba(248, 243, 236, 0.08));
            border: 1px solid rgba(248, 243, 236, 0.15);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(248, 243, 236, 0.1);
        }

        /* ==================== 方案二十三：绿野仙踪 Forest Wonderland ==================== */

        /* Forest Light Mode */
        [data-theme="forest-light"] {
            --theme-name: 'forest';
            --bg-page: linear-gradient(135deg, #F0FFF4 0%, #E6FFFA 50%, #FFFBEB 100%);
            --bg-surface: rgba(255, 255, 255, 0.88);
            --bg-hover: rgba(16, 185, 129, 0.12);
            --bg-active: rgba(6, 182, 212, 0.15);
            --border: rgba(16, 185, 129, 0.2);
            --text-primary: #0A2015;
            --text-secondary: #3A5A4A;
            --text-muted: #6A8A7A;
            --accent: #10B981;
            --accent-secondary: #06B6D4;
            --accent-tertiary: #F59E0B;
            --accent-hover: #059669;
            --card-shadow: 0 4px 24px rgba(16, 185, 129, 0.1), 0 0 0 1px rgba(6, 182, 212, 0.06);
            --card-shadow-hover: 0 12px 48px rgba(16, 185, 129, 0.2), 0 0 0 2px rgba(6, 182, 212, 0.12);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #0A2015;
            --overlay-light: rgba(255,255,255,0.6);
            --overlay-dark: rgba(0,0,0,0.05);
        }
        @keyframes forestLight {
            0%, 100% { transform: translateY(0); opacity: 0.3; }
            50% { transform: translateY(-5px); opacity: 0.7; }
        }
        @keyframes leafSway {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }
        /* --- Forest Light - Cards --- */
        [data-theme="forest-light"] .home-quick-card,
        [data-theme="forest-light"] .ai-tool-card,
        [data-theme="forest-light"] .bookmark-card {
            border-radius: 40% 60% 40% 60% / 50% 40% 60% 50%;
            background: linear-gradient(145deg, #F0FFF4 0%, #E6FFFA 50%, #ECFDF5 100%);
            border: 2px solid rgba(16, 185, 129, 0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 4/5;
        }
        [data-theme="forest-light"] .home-quick-card::before,
        [data-theme="forest-light"] .ai-tool-card::before,
        [data-theme="forest-light"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.35) 0%, transparent 50%),
                        radial-gradient(circle at 70% 40%, rgba(34, 197, 94, 0.25) 0%, transparent 45%),
                        radial-gradient(circle at 50% 10%, rgba(6, 182, 212, 0.2) 0%, transparent 40%);
            animation: forestLight 5s ease-in-out infinite;
        }
        [data-theme="forest-light"] .home-quick-card::after,
        [data-theme="forest-light"] .ai-tool-card::after,
        [data-theme="forest-light"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 50% 100%, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
        }
        [data-theme="forest-light"] .home-quick-card:hover,
        [data-theme="forest-light"] .ai-tool-card:hover,
        [data-theme="forest-light"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.02);
            animation: leafSway 0.6s ease-in-out;
            box-shadow: 0 8px 32px rgba(16, 185, 129, 0.25), 0 4px 16px rgba(6, 182, 212, 0.2);
        }
        [data-theme="forest-light"] .home-quick-icon,
        [data-theme="forest-light"] .ai-tool-icon,
        [data-theme="forest-light"] .card-favicon {
            border-radius: 35% 65% 45% 55% / 60% 40% 60% 40%;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.12));
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
        }

        /* Forest Dark Mode */
        [data-theme="forest-dark"] {
            --theme-name: 'forest';
            --bg-page: linear-gradient(135deg, #0A1510 0%, #0A1015 50%, #15100A 100%);
            --bg-surface: rgba(10, 21, 16, 0.92);
            --bg-hover: rgba(16, 185, 129, 0.15);
            --bg-active: rgba(6, 182, 212, 0.18);
            --border: rgba(16, 185, 129, 0.3);
            --text-primary: #E0F5E8;
            --text-secondary: #A0C5B0;
            --text-muted: #608570;
            --accent: #34D399;
            --accent-secondary: #22D3EE;
            --accent-tertiary: #FBBF24;
            --accent-hover: #10B981;
            --card-shadow: 0 4px 32px rgba(16, 185, 129, 0.15), 0 0 0 1px rgba(6, 182, 212, 0.1);
            --card-shadow-hover: 0 12px 56px rgba(16, 185, 129, 0.3), 0 0 0 2px rgba(6, 182, 212, 0.18);
            --white-10: rgba(224,245,232,0.1);
            --white-15: rgba(224,245,232,0.15);
            --white-20: rgba(224,245,232,0.2);
            --white-30: rgba(224,245,232,0.3);
            --white-40: rgba(224,245,232,0.4);
            --white-50: rgba(224,245,232,0.5);
            --white-60: rgba(224,245,232,0.6);
            --white-80: rgba(224,245,232,0.8);
            --white-solid: #E0F5E8;
            --text-on-white: #E0F5E8;
            --overlay-light: rgba(10,21,16,0.05);
            --overlay-dark: rgba(0,0,0,0.65);
        }
        /* --- Forest Dark - Cards --- */
        [data-theme="forest-dark"] .home-quick-card,
        [data-theme="forest-dark"] .ai-tool-card,
        [data-theme="forest-dark"] .bookmark-card {
            border-radius: 40% 60% 40% 60% / 50% 40% 60% 50%;
            background: linear-gradient(145deg, #0A2015 0%, #0A1520 50%, #15100A 100%);
            border: 2px solid rgba(16, 185, 129, 0.3);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 4/5;
        }
        [data-theme="forest-dark"] .home-quick-card::before,
        [data-theme="forest-dark"] .ai-tool-card::before,
        [data-theme="forest-dark"] .bookmark-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.4) 0%, transparent 50%),
                        radial-gradient(circle at 70% 40%, rgba(34, 211, 94, 0.3) 0%, transparent 45%),
                        radial-gradient(circle at 50% 10%, rgba(34, 211, 238, 0.25) 0%, transparent 40%);
            animation: forestLight 5s ease-in-out infinite;
        }
        [data-theme="forest-dark"] .home-quick-card::after,
        [data-theme="forest-dark"] .ai-tool-card::after,
        [data-theme="forest-dark"] .bookmark-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: radial-gradient(ellipse at 50% 100%, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
        }
        [data-theme="forest-dark"] .home-quick-card:hover,
        [data-theme="forest-dark"] .ai-tool-card:hover,
        [data-theme="forest-dark"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.02);
            animation: leafSway 0.6s ease-in-out;
            box-shadow: 0 8px 40px rgba(16, 185, 129, 0.35), 0 4px 20px rgba(6, 182, 212, 0.3);
        }
        [data-theme="forest-dark"] .home-quick-icon,
        [data-theme="forest-dark"] .ai-tool-icon,
        [data-theme="forest-dark"] .card-favicon {
            border-radius: 35% 65% 45% 55% / 60% 40% 60% 40%;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(6, 182, 212, 0.18));
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
        }

        /* ==================== 方案二十四：星际穿越 Space Odyssey ==================== */

        /* Space Light Mode */
        [data-theme="space-light"] {
            --theme-name: 'space';
            --bg-page: linear-gradient(135deg, #F0F9FF 0%, #EEF2FF 50%, #FFF7ED 100%);
            --bg-surface: rgba(255, 255, 255, 0.85);
            --bg-hover: rgba(59, 130, 246, 0.12);
            --bg-active: rgba(139, 92, 246, 0.15);
            --border: rgba(59, 130, 246, 0.22);
            --text-primary: #0F172A;
            --text-secondary: #334155;
            --text-muted: #64748B;
            --accent: #3B82F6;
            --accent-secondary: #8B5CF6;
            --accent-tertiary: #F97316;
            --accent-hover: #2563EB;
            --card-shadow: 0 4px 24px rgba(59, 130, 246, 0.12), 0 0 0 1px rgba(139, 92, 246, 0.08);
            --card-shadow-hover: 0 12px 48px rgba(59, 130, 246, 0.25), 0 0 0 2px rgba(139, 92, 246, 0.15);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #0F172A;
            --overlay-light: rgba(255,255,255,0.55);
            --overlay-dark: rgba(0,0,0,0.06);
        }
        @keyframes starTwinkle {
            0%, 100% { opacity: 0.4; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        @keyframes orbitRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* --- Space Light - Cards --- */
        [data-theme="space-light"] .home-quick-card,
        [data-theme="space-light"] .ai-tool-card {
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #F0F9FF 40%, #EEF2FF 80%);
            border: 2px solid rgba(59, 130, 246, 0.25);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 1/1;
        }
        [data-theme="space-light"] .bookmark-card {
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 50%, #EEF2FF 100%);
            border: 1px solid rgba(59, 130, 246, 0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="space-light"] .home-quick-card::before,
        [data-theme="space-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.3) 0px, transparent 8px),
                        radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.25) 0px, transparent 10px),
                        radial-gradient(circle at 40% 80%, rgba(34, 211, 238, 0.2) 0px, transparent 7px),
                        radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.15) 0px, transparent 9px);
            animation: starTwinkle 3s ease-in-out infinite;
        }
        [data-theme="space-light"] .home-quick-card::after,
        [data-theme="space-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            border: 2px dashed rgba(59, 130, 246, 0.3);
            border-radius: 50%;
            animation: orbitRotate 15s linear infinite;
        }
        [data-theme="space-light"] .home-quick-card:hover,
        [data-theme="space-light"] .ai-tool-card:hover,
        [data-theme="space-light"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3), 0 4px 16px rgba(139, 92, 246, 0.25);
        }
        [data-theme="space-light"] .home-quick-icon,
        [data-theme="space-light"] .ai-tool-icon,
        [data-theme="space-light"] .card-favicon {
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.12));
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
        }

        /* Space Dark Mode */
        [data-theme="space-dark"] {
            --theme-name: 'space';
            --bg-page: linear-gradient(135deg, #020617 0%, #0F172A 50%, #111827 100%);
            --bg-surface: rgba(15, 23, 42, 0.9);
            --bg-hover: rgba(59, 130, 246, 0.15);
            --bg-active: rgba(139, 92, 246, 0.18);
            --border: rgba(59, 130, 246, 0.35);
            --text-primary: #E2E8F0;
            --text-secondary: #94A3B8;
            --text-muted: #64748B;
            --accent: #60A5FA;
            --accent-secondary: #A78BFA;
            --accent-tertiary: #FB923C;
            --accent-hover: #3B82F6;
            --card-shadow: 0 4px 32px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(139, 92, 246, 0.12);
            --card-shadow-hover: 0 12px 56px rgba(59, 130, 246, 0.35), 0 0 0 2px rgba(139, 92, 246, 0.2);
            --white-10: rgba(226,232,240,0.1);
            --white-15: rgba(226,232,240,0.15);
            --white-20: rgba(226,232,240,0.2);
            --white-30: rgba(226,232,240,0.3);
            --white-40: rgba(226,232,240,0.4);
            --white-50: rgba(226,232,240,0.5);
            --white-60: rgba(226,232,240,0.6);
            --white-80: rgba(226,232,240,0.8);
            --white-solid: #E2E8F0;
            --text-on-white: #E2E8F0;
            --overlay-light: rgba(2,6,23,0.05);
            --overlay-dark: rgba(0,0,0,0.7);
        }
        /* --- Space Dark - Cards --- */
        [data-theme="space-dark"] .home-quick-card,
        [data-theme="space-dark"] .ai-tool-card {
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #1E293B 0%, #0F172A 40%, #020617 80%);
            border: 2px solid rgba(59, 130, 246, 0.35);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 1/1;
        }
        [data-theme="space-dark"] .bookmark-card {
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #1E293B 0%, #0F172A 50%, #020617 100%);
            border: 1px solid rgba(59, 130, 246, 0.3);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="space-dark"] .home-quick-card::before,
        [data-theme="space-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 20%, rgba(249, 115, 22, 0.4) 0px, transparent 8px),
                        radial-gradient(circle at 80% 30%, rgba(167, 139, 250, 0.35) 0px, transparent 10px),
                        radial-gradient(circle at 40% 80%, rgba(34, 211, 238, 0.3) 0px, transparent 7px),
                        radial-gradient(circle at 70% 70%, rgba(96, 165, 250, 0.25) 0px, transparent 9px);
            animation: starTwinkle 3s ease-in-out infinite;
        }
        [data-theme="space-dark"] .home-quick-card::after,
        [data-theme="space-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            top: -20%;
            left: -20%;
            width: 140%;
            height: 140%;
            border: 2px dashed rgba(96, 165, 250, 0.4);
            border-radius: 50%;
            animation: orbitRotate 15s linear infinite;
        }
        [data-theme="space-dark"] .home-quick-card:hover,
        [data-theme="space-dark"] .ai-tool-card:hover,
        [data-theme="space-dark"] .bookmark-card:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 40px rgba(59, 130, 246, 0.4), 0 4px 20px rgba(139, 92, 246, 0.35);
        }
        [data-theme="space-dark"] .home-quick-icon,
        [data-theme="space-dark"] .ai-tool-icon,
        [data-theme="space-dark"] .card-favicon {
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.18));
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }

        /* ==================== 方案二十五：数字迷城 Digital Glitch ==================== */

        /* Glitch Light Mode */
        [data-theme="glitch-light"] {
            --theme-name: 'glitch';
            --bg-page: linear-gradient(135deg, #FFF1F2 0%, #F0FDFA 50%, #F1F5F9 100%);
            --bg-surface: rgba(255, 255, 255, 0.88);
            --bg-hover: rgba(244, 63, 94, 0.12);
            --bg-active: rgba(6, 182, 212, 0.15);
            --border: rgba(244, 63, 94, 0.25);
            --text-primary: #111827;
            --text-secondary: #4B5563;
            --text-muted: #9CA3AF;
            --accent: #EC4899;
            --accent-secondary: #06B6D4;
            --accent-tertiary: #84CC16;
            --accent-hover: #DB2777;
            --card-shadow: 0 4px 24px rgba(244, 63, 94, 0.12), 0 0 0 1px rgba(6, 182, 212, 0.08);
            --card-shadow-hover: 0 12px 48px rgba(244, 63, 94, 0.25), 0 0 0 2px rgba(6, 182, 212, 0.15);
            --white-10: rgba(255,255,255,0.1);
            --white-15: rgba(255,255,255,0.15);
            --white-20: rgba(255,255,255,0.2);
            --white-30: rgba(255,255,255,0.3);
            --white-40: rgba(255,255,255,0.4);
            --white-50: rgba(255,255,255,0.5);
            --white-60: rgba(255,255,255,0.6);
            --white-80: rgba(255,255,255,0.8);
            --white-solid: #ffffff;
            --text-on-white: #111827;
            --overlay-light: rgba(255,255,255,0.6);
            --overlay-dark: rgba(0,0,0,0.06);
        }
        @keyframes glitchShift {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(-2px, 1px); }
            40% { transform: translate(2px, -1px); }
            60% { transform: translate(-1px, 2px); }
            80% { transform: translate(1px, -2px); }
        }
        @keyframes scanline {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }
        /* --- Glitch Light - Cards --- */
        [data-theme="glitch-light"] .home-quick-card,
        [data-theme="glitch-light"] .ai-tool-card {
            border-radius: 4px;
            background: linear-gradient(135deg, #FFFFFF 0%, #FDF2F8 50%, #F0FDFA 100%);
            border: 2px solid #EC4899;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 5/4;
        }
        [data-theme="glitch-light"] .bookmark-card {
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #FFFFFF 0%, #FDF2F8 50%, #F0FDFA 100%);
            border: 1px solid rgba(236, 72, 153, 0.3);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="glitch-light"] .home-quick-card::before,
        [data-theme="glitch-light"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -2px;
            right: -2px;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.6), transparent);
            animation: scanline 2s linear infinite;
            opacity: 0.7;
        }
        [data-theme="glitch-light"] .home-quick-card::after,
        [data-theme="glitch-light"] .ai-tool-card::after {
            content: '';
            position: absolute;
            inset: -1px;
            border: 1px solid rgba(132, 204, 22, 0.6);
            transform: translate(3px, 3px);
            pointer-events: none;
            border-radius: 4px;
        }
        [data-theme="glitch-light"] .home-quick-card:hover,
        [data-theme="glitch-light"] .ai-tool-card:hover,
        [data-theme="glitch-light"] .bookmark-card:hover {
            transform: translateY(-4px);
            animation: glitchShift 0.3s ease-in-out;
            box-shadow: -4px 4px 0 rgba(6, 182, 212, 0.4), 4px -4px 0 rgba(132, 204, 22, 0.3), 0 8px 32px rgba(244, 63, 94, 0.25);
        }
        [data-theme="glitch-light"] .home-quick-icon,
        [data-theme="glitch-light"] .ai-tool-icon,
        [data-theme="glitch-light"] .card-favicon {
            border-radius: 2px;
            background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(6, 182, 212, 0.12));
            box-shadow: 2px 2px 0 rgba(6, 182, 212, 0.3), -1px -1px 0 rgba(132, 204, 22, 0.2);
        }

        /* Glitch Dark Mode */
        [data-theme="glitch-dark"] {
            --theme-name: 'glitch';
            --bg-page: linear-gradient(135deg, #0F0205 0%, #020A0F 50%, #02050F 100%);
            --bg-surface: rgba(15, 2, 5, 0.9);
            --bg-hover: rgba(244, 63, 94, 0.18);
            --bg-active: rgba(6, 182, 212, 0.2);
            --border: rgba(244, 63, 94, 0.35);
            --text-primary: #F1F5F9;
            --text-secondary: #CBD5E1;
            --text-muted: #64748B;
            --accent: #F472B6;
            --accent-secondary: #22D3EE;
            --accent-tertiary: #A3E635;
            --accent-hover: #EC4899;
            --card-shadow: 0 4px 32px rgba(244, 63, 94, 0.2), 0 0 0 1px rgba(6, 182, 212, 0.12);
            --card-shadow-hover: 0 12px 56px rgba(244, 63, 94, 0.35), 0 0 0 2px rgba(6, 182, 212, 0.2);
            --white-10: rgba(241,245,249,0.1);
            --white-15: rgba(241,245,249,0.15);
            --white-20: rgba(241,245,249,0.2);
            --white-30: rgba(241,245,249,0.3);
            --white-40: rgba(241,245,249,0.4);
            --white-50: rgba(241,245,249,0.5);
            --white-60: rgba(241,245,249,0.6);
            --white-80: rgba(241,245,249,0.8);
            --white-solid: #F1F5F9;
            --text-on-white: #F1F5F9;
            --overlay-light: rgba(15,2,5,0.05);
            --overlay-dark: rgba(0,0,0,0.7);
        }
        /* --- Glitch Dark - Cards --- */
        [data-theme="glitch-dark"] .home-quick-card,
        [data-theme="glitch-dark"] .ai-tool-card {
            border-radius: 4px;
            background: linear-gradient(135deg, #1F020A 0%, #0A1F2A 50%, #0A0A1F 100%);
            border: 2px solid #F472B6;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            aspect-ratio: 5/4;
        }
        [data-theme="glitch-dark"] .bookmark-card {
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #1F020A 0%, #0A1F2A 50%, #0A0A1F 100%);
            border: 1px solid rgba(244, 114, 182, 0.4);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        [data-theme="glitch-dark"] .home-quick-card::before,
        [data-theme="glitch-dark"] .ai-tool-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -2px;
            right: -2px;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), transparent);
            animation: scanline 2s linear infinite;
            opacity: 0.8;
        }
        [data-theme="glitch-dark"] .home-quick-card::after,
        [data-theme="glitch-dark"] .ai-tool-card::after {
            content: '';
            position: absolute;
            inset: -1px;
            border: 1px solid rgba(163, 230, 53, 0.7);
            transform: translate(3px, 3px);
            pointer-events: none;
            border-radius: 4px;
        }
        [data-theme="glitch-dark"] .home-quick-card:hover,
        [data-theme="glitch-dark"] .ai-tool-card:hover,
        [data-theme="glitch-dark"] .bookmark-card:hover {
            transform: translateY(-4px);
            animation: glitchShift 0.3s ease-in-out;
            box-shadow: -4px 4px 0 rgba(34, 211, 238, 0.5), 4px -4px 0 rgba(163, 230, 53, 0.4), 0 8px 40px rgba(244, 63, 94, 0.35);
        }
        [data-theme="glitch-dark"] .home-quick-icon,
        [data-theme="glitch-dark"] .ai-tool-icon,
        [data-theme="glitch-dark"] .card-favicon {
            border-radius: 2px;
            background: linear-gradient(135deg, rgba(244, 63, 94, 0.25), rgba(34, 211, 238, 0.18));
            box-shadow: 2px 2px 0 rgba(34, 211, 238, 0.4), -1px -1px 0 rgba(163, 230, 53, 0.3);
        }