/* ==========================================
   ULTIMATE LIQUID GLASS - CSS VARIABLES
   ========================================== */
:root {
    /* Core Colors */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0b;
    --text-primary: #ffffff;
    --text-secondary: #a1a1a1;
    --accent: #2997ff;
    --accent-purple: #8b5cf6;
    --accent-green: #10b981;
    --accent-orange: #f59e0b;
    --accent-pink: #ec4899;
    
    /* Typography - Apple SF Pro Style */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Noto Sans SC', sans-serif;
    --font-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-brand: 'Cinzel', 'Times New Roman', serif;
    
    /* Glass Properties */
    --glass-bg: rgba(20, 20, 20, 0.35);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 50px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.6);
    
    /* Transitions */
    --transition-smooth: cubic-bezier(0.23, 1, 0.32, 1);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --glass-shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.12);
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 移除所有点击/焦点时的紫色光晕效果 */
        *:focus {
            outline: none !important;
        }
        
        *:focus-visible {
            outline: none !important;
        }
        
        /* 移除移动端点击高亮 */
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }
        
        /* 移除按钮和链接的默认焦点样式 */
        button:focus,
        a:focus,
        input:focus,
        select:focus,
        textarea:focus {
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* 导航栏元素特定的焦点移除 - 完全禁用点击效果 */
        .nav-links a:focus,
        .nav-links a:focus-visible,
        .nav-links a:active,
        .nav-cta:focus,
        .nav-cta:focus-visible,
        .nav-cta:active,
        .nav-login:focus,
        .nav-login:focus-visible,
        .nav-login:active,
        .user-menu:focus,
        .user-menu:focus-visible,
        .user-menu:active,
        .user-dropdown-item:focus,
        .user-dropdown-item:focus-visible,
        .user-dropdown-item:active,
        .mobile-menu-btn:focus,
        .mobile-menu-btn:focus-visible,
        .mobile-menu-btn:active,
        .mobile-nav a:focus,
        .mobile-nav a:focus-visible,
        .mobile-nav a:active {
            outline: none !important;
            box-shadow: none !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        
        /* 保持active页面的样式但移除点击瞬间的效果 */
        .nav-links a.active:focus,
        .nav-links a.active:focus-visible {
            outline: none !important;
            border-color: rgba(0, 212, 255, 0.25) !important;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-main);
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            letter-spacing: -0.01em;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-main);
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            line-height: 1.1;
        }

        h2 {
            font-size: clamp(1.75rem, 3vw, 2.5rem);
            line-height: 1.15;
        }

        h3 {
            font-size: clamp(1.25rem, 2vw, 1.75rem);
            line-height: 1.2;
        }

        /* ==========================================
           GLASS COMPONENT SYSTEM
           ========================================== */
        .glass-panel,
        .glass-card,
        .glass-nav,
        .glass-modal,
        .glass-input,
        .glass-button {
            background: var(--glass-bg) !important;
            backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) !important;
            border: 1px solid var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
            transition: all 0.4s var(--transition-smooth) !important;
        }

        .glass-card:hover,
        .glass-button:hover {
            transform: scale(1.02);
            background: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), var(--glass-shadow-hover) !important;
        }

        /* Noise overlay */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.015;
            z-index: 1000;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* Grid background */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: -1;
        }

        /* Glow orbs - Enhanced Liquid Glass */
        .glow-orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(100px);
            pointer-events: none;
            z-index: -1;
            transition: transform 0.3s ease;
        }

        .glow-orb-1 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.18) 0%, transparent 70%);
            top: -200px;
            right: -100px;
            animation: floatOrb1 20s ease-in-out infinite;
        }

        .glow-orb-2 {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
            bottom: 10%;
            left: -100px;
            animation: floatOrb2 25s ease-in-out infinite;
        }

        .glow-orb-3 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
            top: 50%;
            right: 20%;
            animation: floatOrb3 30s ease-in-out infinite;
        }

        @keyframes floatOrb1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(-30px, 40px) scale(1.05); }
            66% { transform: translate(20px, -20px) scale(0.98); }
        }

        @keyframes floatOrb2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(40px, -30px) scale(1.08); }
            66% { transform: translate(-25px, 35px) scale(0.95); }
        }

        @keyframes floatOrb3 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-35px, 25px) scale(1.03); }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* ==========================================
           NAVIGATION BAR
           ==========================================
        */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 1.5rem 0;
            transition: all 0.3s var(--transition-smooth);
        }

        nav.scrolled {
            padding: 0.8rem 0;
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .nav-glass {
            background: var(--glass-bg);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid var(--glass-border);
            border-radius: 100px;
            padding: 0.8rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .nav-glass-container {
            background: var(--glass-bg);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            border: 1px solid var(--glass-border);
            border-radius: 100px;
            padding: 0.8rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            width: 100%;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            font-family: var(--font-brand);
            background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo-video {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }

        .logo-video:hover {
            transform: scale(1.1);
        }

        .logo-icon {
            font-size: 1.5rem;
            -webkit-text-fill-color: initial;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            align-items: center;
        }

        .nav-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
            padding: 0.6rem 1.2rem;
            border-radius: 50px;
            transition: all 0.3s var(--transition-smooth);
            cursor: pointer;
            position: relative;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: #fff;
            background: rgba(255, 255, 255, 0.08);
        }

        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: var(--accent);
            border-radius: 50%;
        }

        .nav-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .theme-toggle {
            background: transparent;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(180deg);
        }

        .nav-login,
        .nav-cta {
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s var(--transition-bounce);
            border: none;
        }

        .nav-login {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
        }

        .nav-cta {
            background: var(--accent);
            color: #fff;
        }

        .nav-login:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
        }

        .nav-cta:hover {
            background: #1e7fd9;
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(41, 151, 255, 0.4);
        }

        /* Language Switcher */
        .lang-switcher {
            position: relative;
        }

        .lang-btn {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
            padding: 0.5rem 0.75rem;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s var(--transition-smooth);
            display: flex;
            align-items: center;
            gap: 0.25rem;
            min-width: 48px;
            justify-content: center;
        }

        .lang-btn:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .lang-dropdown {
            position: absolute;
            top: calc(100% + 0.5rem);
            right: 0;
            background: var(--glass-bg);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            border: 1px solid var(--glass-border);
            border-radius: 12px;
            min-width: 120px;
            box-shadow: var(--glass-shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s var(--transition-smooth);
            overflow: hidden;
            z-index: 1001;
        }

        .lang-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .lang-option {
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .lang-option:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .lang-option.active {
            background: rgba(41, 151, 255, 0.15);
            color: var(--accent);
        }

        /* User Menu */
        .user-menu {
            position: relative;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .user-avatar:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(41, 151, 255, 0.5);
        }

        .user-dropdown {
            position: absolute;
            top: calc(100% + 1rem);
            right: 0;
            background: var(--glass-bg);
            backdrop-filter: blur(40px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            min-width: 200px;
            box-shadow: var(--glass-shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s var(--transition-smooth);
        }

        .user-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .user-dropdown-item {
            padding: 0.8rem 1.2rem;
            color: var(--text-primary);
            text-decoration: none;
            display: block;
            transition: all 0.2s;
            cursor: pointer;
        }

        .user-dropdown-item:first-child {
            border-radius: 20px 20px 0 0;
        }

        .user-dropdown-item:last-child {
            border-radius: 0 0 20px 20px;
        }

        .user-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .user-info {
            padding: 1rem 1.2rem;
            border-bottom: 1px solid var(--glass-border);
        }

        .user-email {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 0.3rem;
        }

        /* Mobile Menu */
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-size: 1.5rem;
            cursor: pointer;
        }

        .mobile-nav {
            display: none;
            position: fixed;
            top: 80px;
            left: 0;
            right: 0;
            background: var(--glass-bg);
            backdrop-filter: blur(40px);
            border-bottom: 1px solid var(--glass-border);
            padding: 2rem;
            flex-direction: column;
            gap: 1rem;
        }

        .mobile-nav.active {
            display: flex;
        }

        .mobile-nav a {
            color: var(--text-primary);
            text-decoration: none;
            padding: 0.8rem;
            border-radius: 12px;
            transition: all 0.3s;
        }

        .mobile-nav a:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 8rem 2rem 4rem;
            position: relative;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            border-radius: 100px;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--accent);
            margin-bottom: 2rem;
            /* Liquid Glass Badge */
            background: rgba(0, 212, 255, 0.08);
            border: 1px solid rgba(0, 212, 255, 0.25);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow: 
                0 4px 24px rgba(0, 212, 255, 0.2),
                inset 0 1px 0 rgba(0, 212, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            cursor: default;
        }

        .hero-badge:hover {
            transform: translateY(-8px) scale(1.08);
            box-shadow: 
                0 12px 40px rgba(0, 212, 255, 0.35),
                0 0 60px rgba(0, 212, 255, 0.2),
                inset 0 1px 0 rgba(0, 212, 255, 0.5);
            animation-play-state: paused;
        }

        @keyframes badgeFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        .hero-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            box-shadow: 0 0 15px var(--accent);
            animation: badgePulse 2s ease-in-out infinite;
        }

        @keyframes badgePulse {
            0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--accent); }
            50% { opacity: 0.6; transform: scale(1.4); box-shadow: 0 0 25px var(--accent); }
        }

        .hero h1 {
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.03em;
            margin-bottom: 1.5rem;
            animation: fadeInUp 0.8s ease 0.1s backwards;
        }

        .hero h1 .gradient {
            background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-secondary);
            max-width: 540px;
            margin-bottom: 2.5rem;
            animation: fadeInUp 0.8s ease 0.2s backwards;
        }

        .hero-buttons {
            display: flex;
            gap: 1rem;
            animation: fadeInUp 0.8s ease 0.3s backwards;
        }

        .btn-primary,
        .btn-secondary {
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            border: none;
            transition: all 0.3s var(--transition-bounce);
            position: relative;
            overflow: hidden;
        }

        .btn-primary {
            background: var(--accent);
            color: #fff;
        }

        .btn-primary:hover {
            background: #1e7fd9;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 15px 40px rgba(41, 151, 255, 0.4);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(20px);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-3px) scale(1.05);
        }

        /* Stats Section */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .stat-item {
            background: var(--glass-bg);
            backdrop-filter: blur(40px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 2.5rem 2rem;
            text-align: center;
            transition: all 0.4s var(--transition-smooth);
        }

        .stat-item:hover {
            transform: translateY(-10px) scale(1.03);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }

        .stat-value {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.95rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 500;
        }

        /* ==========================================
           FEATURES SECTION - Modern Redesign
           ==========================================
        */
        .features {
            padding: 6rem 4rem;
            background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        }

        .features .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .features .section-header h2 {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .features .section-header p {
            color: var(--text-secondary);
            font-size: 1rem;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.4s var(--transition-smooth);
            position: relative;
            overflow: hidden;
        }

        .feature-card:hover {
            transform: scale(1.02);
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(41, 151, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
            margin-bottom: 1.25rem;
            color: var(--accent);
        }

        .feature-icon svg {
            width: 24px;
            height: 24px;
        }

        .feature-card h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .feature-card p {
            color: var(--text-secondary);
            line-height: 1.6;
            font-size: 0.875rem;
            margin: 0;
        }

        /* Demo Section - Modern Redesign */
        .demo {
            padding: 6rem 4rem;
            background: var(--bg-secondary);
        }

        .demo-container {
            max-width: 1000px;
            margin: 0 auto;
        }

        .demo-container .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .demo-container .section-header h2 {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .demo-container .section-header p {
            color: var(--text-secondary);
            font-size: 1rem;
        }

        .demo-window {
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(40px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .demo-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1.5rem;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .demo-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .demo-dot.red { 
            background: linear-gradient(135deg, #ff5f56, #ff3b30);
            box-shadow: 0 0 12px rgba(255, 95, 86, 0.6);
        }
        .demo-dot.yellow { 
            background: linear-gradient(135deg, #ffbd2e, #ff9500);
            box-shadow: 0 0 12px rgba(255, 189, 46, 0.6);
        }
        .demo-dot.green { 
            background: linear-gradient(135deg, #27ca40, #28cd41);
            box-shadow: 0 0 12px rgba(39, 202, 64, 0.6);
        }

        /* AI 选择器样式 */
        .ai-selector {
            position: relative;
            margin-left: auto;
        }

        .ai-selector-btn {
            display: flex;
            align-items: center;
            gap: 0.625rem;
            padding: 0.625rem 1rem;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 12px;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .ai-selector-btn:hover {
            border-color: rgba(0, 212, 255, 0.4);
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
        }

        .ai-selector-icon {
            font-size: 1.125rem;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border-radius: 8px;
            filter: grayscale(0.2);
        }

        .ai-selector-name {
            font-weight: 600;
            letter-spacing: 0.01em;
        }

        .ai-selector-arrow {
            transition: transform 0.2s ease;
        }

        .ai-selector.open .ai-selector-arrow {
            transform: rotate(180deg);
        }

        .ai-selector-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            min-width: 260px;
            background: rgba(20, 20, 25, 0.98);
            border: 1px solid rgba(0, 212, 255, 0.15);
            border-radius: 16px;
            padding: 0.5rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 100;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.1);
            backdrop-filter: blur(20px);
        }

        .ai-selector.open .ai-selector-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .ai-option {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            padding: 0.875rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .ai-option:hover {
            background: rgba(0, 212, 255, 0.08);
            border-color: rgba(0, 212, 255, 0.15);
        }

        .ai-option.active {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
            border-color: rgba(0, 212, 255, 0.25);
        }

        .ai-option-icon {
            font-size: 1.25rem;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
            border-radius: 10px;
            border: 1px solid rgba(0, 212, 255, 0.2);
        }

        .ai-option-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .ai-option-name {
            font-weight: 600;
            font-size: 0.9375rem;
            color: var(--text-primary);
        }

        .ai-option-desc {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .ai-option-check {
            color: var(--accent);
            font-weight: 600;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .ai-option.active .ai-option-check {
            opacity: 1;
        }

        .demo-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .demo-dot.red { background: rgba(255, 255, 255, 0.9); }
        .demo-dot.yellow { background: rgba(255, 255, 255, 0.6); }
        .demo-dot.green { background: rgba(255, 255, 255, 0.35); }

        .demo-chat {
            height: 400px;
            overflow-y: auto;
            padding: 1.5rem;
        }

        .chat-message {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .chat-avatar {
            width: 36px;
            height: 36px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(10deg) rotateY(-10deg);
            flex-shrink: 0;
        }

        .chat-avatar .c-face {
            position: absolute;
            border-radius: 4px;
        }

        .chat-avatar .c-face-front {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            transform: translateZ(12px);
            top: 6px;
            left: 6px;
        }

        .chat-avatar .c-face-top {
            width: 24px;
            height: 16px;
            background: rgba(0, 212, 255, 0.6);
            transform: rotateX(90deg) translateZ(6px);
            top: -4px;
            left: 6px;
        }

        .chat-avatar .c-face-right {
            width: 16px;
            height: 24px;
            background: rgba(139, 92, 246, 0.6);
            transform: rotateY(90deg) translateZ(22px);
            top: 6px;
            left: 6px;
        }

        .chat-avatar.user {
            transform: none;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chat-avatar.user .c-face {
            display: none;
        }

        .chat-bubble {
            flex: 1;
        }

        .chat-bubble p {
            font-size: 0.9375rem;
            line-height: 1.6;
            color: var(--text-primary);
        }

        .demo-input {
            display: flex;
            gap: 1rem;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
        }

        .demo-input input {
            flex: 1;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            font-family: var(--font-main);
            font-size: 0.9375rem;
        }

        .demo-input input::placeholder {
            color: var(--text-secondary);
        }

        .demo-input input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .demo-input button {
            padding: 0.75rem 1.5rem;
            background: var(--accent);
            color: var(--bg-primary);
            border: none;
            border-radius: 10px;
            font-family: var(--font-main);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .demo-input button:hover {
            opacity: 0.9;
        }

        /* ==========================================
           MODAL SYSTEM
           ==========================================
        */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            padding: 2rem;
        }

        .modal-overlay.active {
            display: flex;
            animation: fadeIn 0.3s var(--transition-smooth);
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal {
            background: var(--glass-bg);
            backdrop-filter: blur(60px);
            border: 1px solid var(--glass-border);
            border-radius: 30px;
            padding: 3rem;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
            animation: modalSlideUp 0.4s var(--transition-smooth);
            position: relative;
        }

        .modal h2 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-align: center;
            color: var(--text-primary);
        }

        .modal > div > h2 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-align: center;
            color: var(--text-primary);
        }

        .modal > div > p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-group label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.875rem 1rem;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            color: var(--text-primary);
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.15);
        }

        .form-group input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .forgot-password {
            text-align: right;
            margin-bottom: 1.5rem;
        }

        .forgot-password a {
            color: var(--accent);
            font-size: 0.875rem;
            cursor: pointer;
            text-decoration: none;
        }

        .forgot-password a:hover {
            text-decoration: underline;
        }

        .hidden {
            display: none !important;
        }

        @keyframes modalSlideUp {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .modal-header h2 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .modal-header p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: transparent;
            border: none;
            color: var(--text-secondary);
            font-size: 1.5rem;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .modal-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 16px;
            padding: 0.5rem;
        }

        .modal-tab {
            flex: 1;
            padding: 0.8rem;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            font-weight: 600;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .modal-tab.active {
            background: var(--accent);
            color: #fff;
        }

        .modal-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .modal-form input {
            padding: 1rem;
            border-radius: 16px;
            border: 1px solid var(--glass-border);
            background: rgba(0, 0, 0, 0.2);
            color: var(--text-primary);
            font-size: 0.95rem;
        }

        .modal-form input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.1);
        }

        .modal-submit {
            padding: 1rem;
            border-radius: 16px;
            border: none;
            background: var(--accent);
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s var(--transition-bounce);
        }

        .modal-submit:hover {
            background: #1e7fd9;
            transform: scale(1.02);
        }

        .modal-divider {
            text-align: center;
            color: var(--text-secondary);
            margin: 1.5rem 0;
            position: relative;
        }

        .modal-divider::before,
        .modal-divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40%;
            height: 1px;
            background: var(--glass-border);
        }

        .modal-divider::before {
            left: 0;
        }

        .modal-divider::after {
            right: 0;
        }

        .social-login {
            display: flex;
            gap: 1rem;
        }

        .social-btn {
            flex: 1;
            padding: 0.9rem;
            border-radius: 16px;
            border: 1px solid var(--glass-border);
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .social-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        /* 全局 Turnstile 验证遮罩 */
        .turnstile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .turnstile-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .turnstile-box {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 3rem;
            text-align: center;
            max-width: 400px;
            width: 90%;
        }

        .turnstile-logo {
            width: 60px;
            height: 60px;
            position: relative;
            transform-style: preserve-3d;
            animation: turnstileCubeJump 2s ease-in-out infinite;
            margin: 0 auto 1.5rem;
        }

        @keyframes turnstileCubeJump {
            0%, 100% { transform: rotateX(10deg) rotateY(-10deg) translateY(3px); }
            50% { transform: rotateX(10deg) rotateY(-10deg) translateY(-3px); }
        }

        .turnstile-logo .t-face {
            position: absolute;
            border-radius: 8px;
        }

        .turnstile-logo .t-face-front {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            transform: translateZ(22px);
            top: 8px;
            left: 8px;
        }

        .turnstile-logo .t-face-top {
            width: 44px;
            height: 28px;
            background: rgba(0, 212, 255, 0.6);
            transform: rotateX(90deg) translateZ(8px);
            top: -12px;
            left: 8px;
            border-radius: 8px 8px 0 0;
        }

        .turnstile-logo .t-face-right {
            width: 28px;
            height: 44px;
            background: rgba(139, 92, 246, 0.6);
            transform: rotateY(90deg) translateZ(38px);
            top: 8px;
            left: 8px;
            border-radius: 0 8px 8px 0;
        }

        .turnstile-box h2 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .turnstile-box > p {
            color: var(--text-secondary);
            margin-bottom: 2rem;
        }

        .turnstile-box .cf-turnstile {
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .turnstile-loading {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .turnstile-loading.hidden {
            display: none;
        }

        /* 欢迎弹窗样式 */
        .welcome-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 11, 0.95);
            backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .welcome-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .welcome-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .welcome-box {
            position: relative;
            text-align: center;
            padding: 4rem;
            max-width: 600px;
            width: 90%;
        }

        .welcome-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 70%);
            filter: blur(60px);
            pointer-events: none;
            animation: welcomeGlow 3s ease-in-out infinite;
        }

        @keyframes welcomeGlow {
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
            50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
        }

        .welcome-content {
            position: relative;
            z-index: 1;
        }

        .welcome-icon {
            width: 80px;
            height: 80px;
            position: relative;
            transform-style: preserve-3d;
            margin: 0 auto 2.5rem;
            animation: welcomeCubeJump 2s ease-in-out infinite;
        }

        @keyframes welcomeCubeJump {
            0%, 100% { transform: rotateX(10deg) rotateY(-10deg) translateY(5px); }
            50% { transform: rotateX(10deg) rotateY(-10deg) translateY(-5px); }
        }

        .welcome-icon .w-face {
            position: absolute;
            border-radius: 10px;
        }

        .welcome-icon .w-face-front {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            transform: translateZ(28px);
            top: 12px;
            left: 12px;
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
        }

        .welcome-icon .w-face-top {
            width: 56px;
            height: 36px;
            background: rgba(0, 212, 255, 0.6);
            transform: rotateX(90deg) translateZ(12px);
            top: -16px;
            left: 12px;
            border-radius: 10px 10px 0 0;
        }

        .welcome-icon .w-face-right {
            width: 36px;
            height: 56px;
            background: rgba(139, 92, 246, 0.6);
            transform: rotateY(90deg) translateZ(48px);
            top: 12px;
            left: 12px;
            border-radius: 0 10px 10px 0;
        }

        .welcome-title {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
            margin-bottom: 1rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
        }

        .welcome-word {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            animation: welcomeWordIn 0.6s ease forwards;
        }

        .welcome-word:nth-child(1) { animation-delay: 0.1s; }
        .welcome-word:nth-child(2) { animation-delay: 0.2s; }
        .welcome-word:nth-child(3) { animation-delay: 0.3s; }
        .welcome-word:nth-child(4) { animation-delay: 0.4s; }

        .welcome-word.gradient {
            background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes welcomeWordIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .welcome-subtitle {
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 2.5rem;
            opacity: 0;
            animation: welcomeFadeIn 0.6s ease 0.6s forwards;
        }

        .welcome-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 2.5rem;
            background: var(--text-primary);
            color: var(--bg-primary);
            border: none;
            border-radius: 100px;
            font-family: var(--font-main);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            animation: welcomeFadeIn 0.6s ease 0.8s forwards;
        }

        .welcome-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
        }

        @keyframes welcomeFadeIn {
            to {
                opacity: 1;
            }
        }

        /* Turnstile 容器样式 */
        .turnstile-container {
            margin-bottom: 1.25rem;
            display: flex;
            justify-content: center;
        }

        .turnstile-error {
            color: #ef4444;
            font-size: 0.875rem;
            margin-top: 0.5rem;
            text-align: center;
            display: none;
        }

        .modal form .btn-primary {
            width: 100%;
            justify-content: center;
            margin-top: 0.5rem;
            /* Enhanced Liquid Glass Form Button */
            background: linear-gradient(
                135deg,
                rgba(0, 212, 255, 0.9) 0%,
                rgba(139, 92, 246, 0.9) 100%
            );
            color: white;
            font-weight: 600;
            border: none;
            box-shadow: 
                0 8px 32px rgba(0, 212, 255, 0.3),
                0 0 40px rgba(139, 92, 246, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .modal form .btn-primary:hover {
            background: linear-gradient(
                135deg,
                rgba(0, 212, 255, 1) 0%,
                rgba(139, 92, 246, 1) 100%
            );
            box-shadow: 
                0 12px 48px rgba(0, 212, 255, 0.4),
                0 0 60px rgba(139, 92, 246, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
        }

        .modal form .btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: 
                0 4px 16px rgba(0, 212, 255, 0.15);
        }

        .form-error {
            color: #ef4444;
            font-size: 0.875rem;
            margin-bottom: 1rem;
            display: none;
        }

        .form-error.show {
            display: block;
        }

        .modal-switch {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .modal-switch a {
            color: var(--accent);
            cursor: pointer;
            font-weight: 500;
        }

        .modal-switch a:hover {
            text-decoration: underline;
        }

        .hidden {
            display: none !important;
        }

        /* 按钮 loading 状态 */
        .btn-primary .btn-loading {
            display: none;
        }

        .btn-primary.loading .btn-text,
        .btn-primary.loading .btn-arrow {
            display: none;
        }

        .btn-primary.loading .btn-loading {
            display: inline-flex;
        }

        .spinner {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Toast 提示 - Liquid Glass */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%) translateY(30px);
            /* Liquid Glass Toast */
            background: linear-gradient(
                135deg,
                rgba(24, 24, 27, 0.95) 0%,
                rgba(24, 24, 27, 0.85) 100%
            );
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
            padding: 1rem 1.5rem;
            border-radius: 16px;
            font-size: 0.9375rem;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            z-index: 10001;
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(0, 212, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .toast::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(0, 212, 255, 0.5),
                transparent
            );
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Visitor Counter */
        .visitor-counter {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 2rem 4rem;
            border-top: 1px solid var(--border);
            background: linear-gradient(180deg, transparent 0%, rgba(0, 212, 255, 0.02) 100%);
        }

        .visitor-counter-inner {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
        }

        /* Visitor Activity Graph - GitHub Style */
        .visitor-activity {
            padding: 3rem 4rem;
            background: var(--bg-secondary);
        }

        .visitor-activity-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .visitor-activity-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .visitor-activity-title {
            font-size: 1rem;
            font-weight: 600;
            font-family: var(--font-brand);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            letter-spacing: 0.05em;
        }

        .visitor-activity-title .logo-video {
            width: 28px;
            height: 28px;
            border-radius: 7px;
        }

        .visitor-activity-subtitle {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .visitor-activity-wrapper {
            position: relative;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            border: 1px solid var(--glass-border);
            padding: 0.5rem 0.75rem 0.75rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .visitor-activity-months {
            position: relative;
            height: 18px;
            margin-bottom: 0.25rem;
            font-size: 0.7rem;
            color: var(--text-secondary);
            width: 100%;
        }

        .visitor-activity-months span {
            position: absolute;
        }

        .visitor-activity-graph {
            display: flex;
            gap: 3px;
            overflow-x: auto;
            justify-content: center;
        }

        .visitor-activity-week {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .visitor-activity-day {
            width: 13px;
            height: 13px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.05);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .visitor-activity-day:hover {
            transform: scale(1.3);
            outline: 1px solid rgba(255, 255, 255, 0.3);
        }

        .visitor-activity-day[data-level="0"] { background: rgba(255, 255, 255, 0.03); }
        .visitor-activity-day[data-level="1"] { background: rgba(16, 185, 129, 0.2); }
        .visitor-activity-day[data-level="2"] { background: rgba(16, 185, 129, 0.4); }
        .visitor-activity-day[data-level="3"] { background: rgba(16, 185, 129, 0.6); }
        .visitor-activity-day[data-level="4"] { background: rgba(16, 185, 129, 0.85); }

        .visitor-activity-legend {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.5rem;
            margin-top: 0.75rem;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .legend-cells {
            display: flex;
            gap: 3px;
        }

        .legend-cell {
            width: 13px;
            height: 13px;
            border-radius: 2px;
        }

        .legend-cell[data-level="0"] { background: rgba(255, 255, 255, 0.03); }
        .legend-cell[data-level="1"] { background: rgba(16, 185, 129, 0.2); }
        .legend-cell[data-level="2"] { background: rgba(16, 185, 129, 0.4); }
        .legend-cell[data-level="3"] { background: rgba(16, 185, 129, 0.6); }
        .legend-cell[data-level="4"] { background: rgba(16, 185, 129, 0.85); }

        @media (max-width: 768px) {
            .visitor-activity {
                padding: 2rem 1.5rem;
            }

            .visitor-activity-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .visitor-activity-day {
                width: 10px;
                height: 10px;
            }

            .legend-cell {
                width: 10px;
                height: 10px;
            }

            .visitor-activity-wrapper {
                padding: 0.5rem;
            }

            .visitor-activity-months {
                width: 100%;
            }

            .logo-video {
                width: 36px;
                height: 36px;
            }

            .visitor-activity-title .logo-video {
                width: 24px;
                height: 24px;
            }
        }

        .visitor-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .visitor-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 500;
        }

        .visitor-count-wrapper {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
        }

        .visitor-count {
            font-family: 'Inter', monospace;
            font-size: 1.75rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.02em;
        }

        .visitor-suffix {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 400;
        }

        .visitor-live-dot {
            width: 8px;
            height: 8px;
            background: var(--accent-green);
            border-radius: 50%;
            animation: livePulse 2s ease-in-out infinite;
            margin-left: 0.5rem;
        }

        @keyframes livePulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        .visitor-divider {
            width: 1px;
            height: 40px;
            background: var(--border);
            margin: 0 1rem;
        }

        /* Footer */
        footer {
            padding: 3rem 4rem;
            border-top: 1px solid var(--border);
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-links {
            display: flex;
            gap: 2rem;
        }

        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: var(--text-primary);
        }

        .footer-copy {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        /* Pages */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            nav {
                padding: 1rem 2rem;
            }

            .nav-links {
                display: none;
            }

            .mobile-menu-btn {
                display: flex;
            }

            .nav-auth {
                display: none;
            }

            .hero {
                padding: 7rem 1.5rem 3rem;
            }

            .features {
                padding: 4rem 1.5rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .features .section-header h2,
            .demo-container .section-header h2 {
                font-size: 1.5rem;
            }

            .stats {
                flex-direction: column;
                gap: 2rem;
            }

            .demo {
                padding: 4rem 1.5rem;
            }

            footer {
                padding: 2rem 1.5rem;
            }

            .footer-content {
                flex-direction: column;
                gap: 1.5rem;
                text-align: center;
            }

            .visitor-counter {
                padding: 1.5rem;
            }

            .visitor-counter-inner {
                gap: 1rem;
            }

            .visitor-count {
                font-size: 1.5rem;
            }
        }

        /* About Page Styles */
        .about-hero {
            padding: 10rem 4rem 6rem;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .about-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
        }

        .about-hero p {
            font-size: 1.25rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto;
        }

        .about-section {
            padding: 5rem 4rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-content h2 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        .about-content p {
            color: var(--text-secondary);
            font-size: 1.0625rem;
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        .about-visual {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .neural-network {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .node {
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--accent);
            border-radius: 50%;
            animation: pulse 3s ease-in-out infinite;
        }

        /* Values Section */
        .values-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
            margin-top: 3rem;
        }

        .value-card {
            border-radius: 20px;
            padding: 2rem;
            /* Unified Liquid Glass Card */
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .value-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-10px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
        }

        .value-card h3 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            position: relative;
            z-index: 2;
        }

        .value-card p {
            color: var(--text-secondary);
            line-height: 1.6;
            position: relative;
            z-index: 2;
        }

        /* Team Section */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2.5rem;
            margin-top: 3rem;
        }

        .team-card {
            text-align: center;
            padding: 2rem;
            border-radius: 20px;
            /* Unified Liquid Glass Card */
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .team-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-10px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
        }

        .team-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: 700;
        }

        .team-card h4 {
            font-size: 1.125rem;
            margin-bottom: 0.25rem;
        }

        .team-card p {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }

        /* Research Page Styles */
        .research-hero {
            padding: 10rem 4rem 4rem;
            max-width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .research-hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .research-hero p {
            color: var(--text-secondary);
            font-size: 1.125rem;
        }

        .research-section {
            padding: 4rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .papers-list {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .paper-card {
            /* Unified Liquid Glass Card */
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 2rem;
            display: flex;
            gap: 2rem;
            align-items: flex-start;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        .paper-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-10px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
        }

        .paper-icon {
            width: 60px;
            height: 60px;
            background: rgba(0, 212, 255, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .paper-content {
            flex: 1;
        }

        .paper-content h3 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }

        .paper-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .paper-content p {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        .paper-tags {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .paper-tag {
            padding: 0.25rem 0.75rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 100px;
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        /* Docs Page Styles */
        .docs-layout {
            display: flex;
            padding-top: 73px;
            min-height: 100vh;
        }

        .docs-sidebar {
            width: 280px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border);
            padding: 2rem;
            position: fixed;
            top: 73px;
            bottom: 0;
            overflow-y: auto;
        }

        .docs-nav-section {
            margin-bottom: 2rem;
        }

        .docs-nav-section h4 {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .docs-nav-links {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .docs-nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.9375rem;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .docs-nav-links a:hover,
        .docs-nav-links a.active {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        .docs-main {
            flex: 1;
            margin-left: 280px;
            padding: 3rem 4rem;
            max-width: 900px;
        }

        .docs-main h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .docs-main > p {
            color: var(--text-secondary);
            font-size: 1.125rem;
            margin-bottom: 3rem;
        }

        .docs-section {
            margin-bottom: 4rem;
        }

        .docs-section h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        .docs-section p {
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        .code-block {
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            overflow-x: auto;
        }

        .code-block code {
            font-family: var(--font-main);
            font-size: 0.875rem;
            color: var(--accent);
        }

        /* Timeline */
        .timeline {
            position: relative;
            padding-left: 2rem;
            margin-top: 3rem;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border);
        }

        .timeline-item {
            position: relative;
            padding-bottom: 2.5rem;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -2rem;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            background: var(--accent);
            border-radius: 50%;
            transform: translateX(-5px);
        }

        .timeline-item h4 {
            font-size: 1.125rem;
            margin-bottom: 0.5rem;
        }

        .timeline-item .date {
            font-size: 0.875rem;
            color: var(--accent);
            margin-bottom: 0.5rem;
        }

        .timeline-item p {
            color: var(--text-secondary);
        }

        @media (max-width: 1024px) {
            .about-grid {
                grid-template-columns: 1fr;
            }

            .values-grid {
                grid-template-columns: 1fr;
            }

            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .docs-sidebar {
                display: none;
            }

            .docs-main {
                margin-left: 0;
                padding: 2rem;
            }

            .paper-card {
                flex-direction: column;
            }
        }

        /* ==================== 注册成功庆祝动画 ==================== */
        .celebration-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        .celebration-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .celebration-container {
            position: relative;
            text-align: center;
            z-index: 10;
        }

        /* 粒子容器 */
        .particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            animation: particleFloat 4s ease-out forwards;
        }

        @keyframes particleFloat {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-100vh) scale(0);
            }
        }

        /* 光环效果 */
        .celebration-rings {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .ring {
            position: absolute;
            border: 2px solid var(--accent);
            border-radius: 50%;
            opacity: 0;
            transform: translate(-50%, -50%) scale(0);
        }

        .ring-1 {
            width: 100px;
            height: 100px;
            animation: ringExpand 2s ease-out 0.2s forwards;
        }

        .ring-2 {
            width: 200px;
            height: 200px;
            border-color: var(--accent-purple);
            animation: ringExpand 2s ease-out 0.4s forwards;
        }

        .ring-3 {
            width: 300px;
            height: 300px;
            border-color: var(--accent-green);
            animation: ringExpand 2s ease-out 0.6s forwards;
        }

        .ring-4 {
            width: 400px;
            height: 400px;
            border-color: var(--accent-pink);
            animation: ringExpand 2s ease-out 0.8s forwards;
        }

        @keyframes ringExpand {
            0% {
                opacity: 0.8;
                transform: translate(-50%, -50%) scale(0);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.5);
            }
        }

        /* 成功图标 */
        .celebration-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            position: relative;
            opacity: 0;
            transform: scale(0);
            animation: iconAppear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
            box-shadow: 
                0 0 60px rgba(0, 212, 255, 0.4),
                0 0 120px rgba(139, 92, 246, 0.2);
        }

        .celebration-icon::before {
            content: '';
            position: absolute;
            width: 140px;
            height: 140px;
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 50%;
            animation: iconPulse 2s ease-in-out infinite;
        }

        .celebration-icon svg {
            width: 60px;
            height: 60px;
            color: white;
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: checkDraw 0.8s ease-out 0.6s forwards;
        }

        @keyframes iconAppear {
            0% { opacity: 0; transform: scale(0); }
            100% { opacity: 1; transform: scale(1); }
        }

        @keyframes iconPulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.2; }
        }

        @keyframes checkDraw {
            to { stroke-dashoffset: 0; }
        }

        /* 标题文字 */
        .celebration-title {
            font-family: var(--font-main);
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
            opacity: 0;
            transform: translateY(30px);
            animation: textReveal 0.8s ease-out 0.8s forwards;
        }

        .celebration-subtitle {
            font-size: 1.25rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            opacity: 0;
            transform: translateY(20px);
            animation: textReveal 0.8s ease-out 1s forwards;
        }

        .celebration-username {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 2rem;
            opacity: 0;
            transform: translateY(20px);
            animation: textReveal 0.8s ease-out 1.2s forwards;
        }

        @keyframes textReveal {
            to { opacity: 1; transform: translateY(0); }
        }

        /* 特性展示 */
        .celebration-features {
            display: flex;
            gap: 2rem;
            justify-content: center;
            margin-bottom: 3rem;
            opacity: 0;
            animation: featuresReveal 0.8s ease-out 1.4s forwards;
        }

        .celebration-feature {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .celebration-feature-icon {
            width: 48px;
            height: 48px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .celebration-feature-text {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        @keyframes featuresReveal {
            to { opacity: 1; }
        }

        /* 神经网络动画背景 */
        .celebration-neural {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .neural-line {
            position: absolute;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            height: 1px;
            opacity: 0.3;
            animation: neuralFlow 3s linear infinite;
        }

        @keyframes neuralFlow {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100vw); }
        }

        .neural-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--accent);
            border-radius: 50%;
            opacity: 0;
            animation: neuralDotPulse 2s ease-in-out infinite;
        }

        @keyframes neuralDotPulse {
            0%, 100% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 0.6; transform: scale(1); }
        }

        /* 进度条 */
        .celebration-progress {
            width: 200px;
            height: 4px;
            background: var(--bg-card);
            border-radius: 2px;
            margin: 0 auto 1.5rem;
            overflow: hidden;
            opacity: 0;
            animation: featuresReveal 0.5s ease-out 1.6s forwards;
        }

        .celebration-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-purple));
            border-radius: 2px;
            width: 0%;
            animation: progressFill 3s ease-out 1.8s forwards;
        }

        @keyframes progressFill {
            to { width: 100%; }
        }

        /* 跳过按钮 */
        .celebration-skip {
            padding: 0.875rem 2rem;
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            border-radius: 100px;
            font-family: var(--font-main);
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            animation: skipAppear 0.5s ease-out 2s forwards;
        }

        .celebration-skip:hover {
            background: var(--bg-card);
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .celebration-skip.ready {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border: none;
            color: white;
            animation: skipReady 0.5s ease-out forwards;
        }

        .celebration-skip.ready:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
        }

        @keyframes skipAppear {
            to { opacity: 1; }
        }

        @keyframes skipReady {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* 闪光效果 */
        .celebration-sparkle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            pointer-events: none;
            animation: sparkle 1s ease-out forwards;
        }

        @keyframes sparkle {
            0% { opacity: 1; transform: scale(0) rotate(0deg); }
            50% { opacity: 1; transform: scale(1) rotate(180deg); }
            100% { opacity: 0; transform: scale(0) rotate(360deg); }
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .celebration-title {
                font-size: 1.75rem;
            }
            .celebration-features {
                flex-direction: column;
                gap: 1rem;
            }
            .celebration-icon {
                width: 100px;
                height: 100px;
            }
            .celebration-icon svg {
                width: 50px;
                height: 50px;
            }
        }

        /* ==================== 忘记密码链接 ==================== */
        .forgot-password {
            text-align: right;
            margin-top: -0.5rem;
            margin-bottom: 1rem;
        }

        .forgot-password a {
            color: var(--accent);
            font-size: 0.875rem;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .forgot-password a:hover {
            color: var(--accent-purple);
        }

        /* ==================== 用户资料页样式 ==================== */
        .profile-page {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        .profile-header {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }

        .profile-avatar-large {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: 600;
            color: white;
            position: relative;
        }

        .profile-avatar-edit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 36px;
            height: 36px;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .profile-avatar-edit:hover {
            background: var(--accent);
            border-color: var(--accent);
        }

        .profile-info h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .profile-info p {
            color: var(--text-secondary);
        }

        .profile-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0.75rem;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 100px;
            font-size: 0.75rem;
            color: var(--accent);
            margin-top: 0.75rem;
        }

        .profile-badge.verified {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.3);
            color: var(--accent-green);
        }

        .profile-badge.unverified {
            background: rgba(245, 158, 11, 0.1);
            border-color: rgba(245, 158, 11, 0.3);
            color: var(--accent-orange);
            cursor: pointer;
        }

        .profile-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .profile-section h3 {
            font-size: 1.125rem;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .profile-form-group {
            margin-bottom: 1.25rem;
        }

        .profile-form-group label {
            display: block;
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .profile-form-group input {
            width: 100%;
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            transition: all 0.3s ease;
        }

        .profile-form-group input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .profile-form-group input:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .profile-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .profile-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-family: var(--font-main);
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .profile-btn-primary {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border: none;
            color: white;
        }

        .profile-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
        }

        .profile-btn-secondary {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
        }

        .profile-btn-secondary:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .profile-btn-danger {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
        }

        .profile-btn-danger:hover {
            background: rgba(239, 68, 68, 0.1);
        }

        .profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .profile-stat {
            text-align: center;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 12px;
        }

        .profile-stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--accent);
        }

        .profile-stat-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        /* 成功/错误消息 */
        .profile-message {
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            margin-bottom: 1rem;
            display: none;
        }

        .profile-message.success {
            display: block;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: var(--accent-green);
        }

        .profile-message.error {
            display: block;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
        }

        @media (max-width: 768px) {
            .profile-header {
                flex-direction: column;
                text-align: center;
            }

            .profile-stats {
                grid-template-columns: 1fr;
            }

            .profile-actions {
                flex-direction: column;
            }
        }

        /* ==================== ChatBot 页面样式 ==================== */
        .chatbot-hero {
            padding: 8rem 2rem 2rem;
            text-align: center;
        }

        .chatbot-hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .chatbot-hero p {
            color: var(--text-secondary);
            font-size: 1.125rem;
            max-width: 500px;
            margin: 0 auto;
        }

        .chatbot-container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 2rem 4rem;
        }

        .chatbot-window {
            border-radius: 24px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
        }

        .chatbot-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .chatbot-header-dots {
            display: flex;
            gap: 0.5rem;
        }

        .chatbot-header-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .chatbot-header-dot.red { 
            background: linear-gradient(135deg, #ff5f56, #ff3b30);
            box-shadow: 0 0 10px rgba(255, 95, 86, 0.5);
        }
        .chatbot-header-dot.yellow { 
            background: linear-gradient(135deg, #ffbd2e, #ff9500);
            box-shadow: 0 0 10px rgba(255, 189, 46, 0.5);
        }
        .chatbot-header-dot.green { 
            background: linear-gradient(135deg, #27ca40, #28cd41);
            box-shadow: 0 0 10px rgba(39, 202, 64, 0.5);
        }

        .chatbot-header-title {
            flex: 1;
            text-align: center;
            font-weight: 500;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .chatbot-header-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--accent-green);
        }

        .chatbot-header-status::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--accent-green);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .chatbot-messages {
            height: 500px;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .chatbot-messages::-webkit-scrollbar {
            width: 6px;
        }

        .chatbot-messages::-webkit-scrollbar-track {
            background: transparent;
        }

        .chatbot-messages::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
        }

        .chatbot-message {
            display: flex;
            gap: 0.75rem;
            max-width: 85%;
            animation: fadeInUp 0.3s ease;
        }

        .chatbot-message.user {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

        .chatbot-avatar {
            width: 36px;
            height: 36px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(10deg) rotateY(-10deg);
            flex-shrink: 0;
        }

        .chatbot-avatar .cb-face {
            position: absolute;
            border-radius: 4px;
        }

        .chatbot-avatar .cb-face-front {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            transform: translateZ(12px);
            top: 6px;
            left: 6px;
        }

        .chatbot-avatar .cb-face-top {
            width: 24px;
            height: 16px;
            background: rgba(0, 212, 255, 0.6);
            transform: rotateX(90deg) translateZ(6px);
            top: -4px;
            left: 6px;
        }

        .chatbot-avatar .cb-face-right {
            width: 16px;
            height: 24px;
            background: rgba(139, 92, 246, 0.6);
            transform: rotateY(90deg) translateZ(22px);
            top: 6px;
            left: 6px;
        }

        .chatbot-message:not(.user) .chatbot-avatar {
            /* 3D cube styles applied above */
        }

        .chatbot-message.user .chatbot-avatar {
            transform: none;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-primary);
        }

        .chatbot-message.user .chatbot-avatar .cb-face {
            display: none;
        }

        .chatbot-bubble {
            border-radius: 20px;
            padding: 1rem 1.25rem;
            /* Liquid Glass Bubble */
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
        }

        .chatbot-message.user .chatbot-bubble {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border: none;
        }

        .chatbot-bubble p {
            font-size: 0.9375rem;
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .chatbot-message.user .chatbot-bubble p {
            color: white;
        }

        .chatbot-typing {
            display: flex;
            gap: 4px;
            padding: 0.5rem 0;
        }

        .chatbot-typing span {
            width: 8px;
            height: 8px;
            background: var(--text-secondary);
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
        .chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-8px); }
        }

        .chatbot-input {
            display: flex;
            gap: 1rem;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border);
            background: var(--bg-secondary);
        }

        .chatbot-input input {
            flex: 1;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0.875rem 1rem;
            color: var(--text-primary);
            font-family: var(--font-main);
            font-size: 0.9375rem;
            transition: border-color 0.3s ease;
        }

        .chatbot-input input:focus {
            outline: none;
            border-color: var(--accent);
        }

        .chatbot-input input::placeholder {
            color: var(--text-secondary);
        }

        .chatbot-input button {
            padding: 0.875rem 1.5rem;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-family: var(--font-main);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .chatbot-input button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }

        .chatbot-input button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        /* 让 chatbot-window 支持 position relative */
        .chatbot-window {
            position: relative;
        }

        /* ==================== Kit 页面样式 ==================== */
        .kit-hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 8rem 2rem 4rem;
        }

        .kit-hero h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .kit-hero > p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 500px;
            margin-bottom: 3rem;
        }

        .ip-detector-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 24px;
            padding: 3rem;
            max-width: 600px;
            width: 100%;
        }

        .ip-display {
            text-align: center;
            margin-bottom: 2rem;
        }

        .ip-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
        }

        .ip-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }

        .ip-address {
            font-family: var(--font-main);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent);
            word-break: break-all;
        }

        .ip-address.loading {
            font-size: 1.5rem;
            color: var(--text-secondary);
        }

        .ip-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border);
        }

        .ip-detail-item {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            text-align: left;
        }

        .ip-detail-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.25rem;
        }

        .ip-detail-value {
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-primary);
        }

        .ip-refresh-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-purple) 100%);
            color: white;
            border: none;
            border-radius: 100px;
            font-family: var(--font-main);
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 2rem;
        }

        .ip-refresh-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
        }

        .ip-refresh-btn.loading svg {
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .chatbot-messages { height: 400px; }
            .ip-address { font-size: 1.75rem; }
            .ip-details { grid-template-columns: 1fr; }
        }

        /* ==================== Kit Tools Suite Styles ==================== */
        .kit-main-content {
            padding: 8rem 4rem 4rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .kit-page-header {
            text-align: center;
            margin-bottom: 3rem;
            animation: fadeInUp 0.8s ease;
        }

        .kit-page-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            letter-spacing: -0.02em;
        }

        .kit-page-header p {
            color: var(--text-secondary);
            font-size: 1.125rem;
            font-family: var(--font-cn);
        }

        .kit-layout {
            display: flex;
            gap: 2rem;
            position: relative;
        }

        .kit-sidebar {
            width: 240px;
            flex-shrink: 0;
            position: sticky;
            top: 100px;
            height: fit-content;
        }

        .kit-sidebar-title {
            font-family: var(--font-main);
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            padding-left: 0.75rem;
        }

        .kit-category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .kit-category-item {
            margin-bottom: 0.25rem;
        }

        .kit-category-btn {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            background: transparent;
            border: none;
            border-radius: 12px;
            color: var(--text-secondary);
            font-family: var(--font-main);
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s var(--transition-smooth);
            text-align: left;
        }

        .kit-category-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }

        .kit-category-btn.active {
            background: var(--glass-bg);
            color: var(--accent);
            border: 1px solid var(--glass-border);
        }

        .kit-category-icon {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.05);
        }

        .kit-category-btn.active .kit-category-icon {
            background: rgba(41, 151, 255, 0.15);
        }

        .kit-category-count {
            margin-left: auto;
            font-size: 0.75rem;
            font-family: var(--font-main);
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.05);
            padding: 0.125rem 0.5rem;
            border-radius: 20px;
        }

        .kit-category-btn.active .kit-category-count {
            background: rgba(41, 151, 255, 0.2);
            color: var(--accent);
        }

        .kit-main {
            flex: 1;
            min-width: 0;
        }

        .kit-tools-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5rem;
        }

        .kit-tools-grid[data-category="all"] .kit-tool-window {
            display: block;
        }

        .kit-tool-window[data-category] {
            display: none;
        }

        .kit-tool-window.visible {
            display: block;
        }

        .kit-section-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--glass-border);
        }

        .kit-section-icon {
            font-size: 1.5rem;
        }

        .kit-section-title {
            font-family: var(--font-main);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .kit-section-desc {
            font-family: var(--font-cn);
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .kit-tool-window {
            border-radius: 20px;
            overflow: hidden;
            animation: fadeInUp 0.8s ease backwards;
            position: relative;
            /* Unified Liquid Glass Card */
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(40px) saturate(180%);
            -webkit-backdrop-filter: blur(40px) saturate(180%);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .kit-tool-window:nth-child(1) { animation-delay: 0.1s; }
        .kit-tool-window:nth-child(2) { animation-delay: 0.15s; }
        .kit-tool-window:nth-child(3) { animation-delay: 0.2s; }
        .kit-tool-window:nth-child(4) { animation-delay: 0.25s; }
        .kit-tool-window:nth-child(5) { animation-delay: 0.3s; }
        .kit-tool-window:nth-child(6) { animation-delay: 0.35s; }
        .kit-tool-window:nth-child(7) { animation-delay: 0.4s; }
        .kit-tool-window:nth-child(8) { animation-delay: 0.45s; }

        .kit-tool-window:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            transform: scale(1.02);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 0 16px 48px rgba(0, 0, 0, 0.4);
        }

        .kit-tool-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background: rgba(0, 0, 0, 0.15);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .kit-tool-header-left {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .kit-tool-dots {
            display: flex;
            gap: 0.375rem;
        }

        .kit-tool-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .kit-tool-dot.red { 
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
        }
        .kit-tool-dot.yellow { 
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
        }
        .kit-tool-dot.green { 
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.25));
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
        }

        .kit-tool-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .kit-tool-icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
            font-size: 0.875rem;
        }

        .kit-tool-icon.cyan { background: rgba(0, 212, 255, 0.15); color: var(--accent); }
        .kit-tool-icon.purple { background: rgba(139, 92, 246, 0.15); color: var(--accent-purple); }
        .kit-tool-icon.green { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
        .kit-tool-icon.orange { background: rgba(245, 158, 11, 0.15); color: var(--accent-orange); }
        .kit-tool-icon.pink { background: rgba(236, 72, 153, 0.15); color: var(--accent-pink); }
        .kit-tool-icon.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

        .kit-tool-body {
            padding: 1.5rem;
            min-height: 280px;
            display: flex;
            flex-direction: column;
        }

        .kit-input-group {
            margin-bottom: 1rem;
        }

        .kit-input-group label {
            display: block;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .kit-input-row {
            display: flex;
            gap: 0.75rem;
        }

        .kit-input-field {
            flex: 1;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            font-family: var(--font-main);
            font-size: 0.9375rem;
            transition: border-color 0.3s ease;
        }

        .kit-input-field::placeholder {
            color: var(--text-secondary);
        }

        .kit-input-field:focus {
            outline: none;
            border-color: var(--accent);
        }

        select.kit-input-field {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 2.5rem;
        }

        .kit-btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 10px;
            font-family: var(--font-main);
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .kit-btn-primary {
            background: var(--accent);
            color: var(--bg-primary);
        }

        .kit-btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .kit-btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .kit-result-box {
            flex: 1;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            margin-top: 1rem;
            overflow: auto;
        }

        .kit-result-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0;
            border-bottom: 1px solid var(--border);
        }

        .kit-result-item:last-child {
            border-bottom: none;
        }

        .kit-result-label {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .kit-result-value {
            font-family: var(--font-main);
            font-size: 0.875rem;
            color: var(--text-primary);
        }

        .kit-result-value.success { color: var(--accent-green); }
        .kit-result-value.warning { color: var(--accent-orange); }
        .kit-result-value.error { color: #ef4444; }
        .kit-result-value.accent { color: var(--accent); }

        .kit-speed-gauge {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin: 1.5rem 0;
        }

        .kit-gauge-item {
            text-align: center;
        }

        .kit-gauge-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: conic-gradient(var(--accent) 0deg, var(--bg-secondary) 0deg);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-bottom: 0.75rem;
        }

        .kit-gauge-circle.purple {
            background: conic-gradient(var(--accent-purple) 0deg, var(--bg-secondary) 0deg);
        }

        .kit-gauge-circle.green {
            background: conic-gradient(var(--accent-green) 0deg, var(--bg-secondary) 0deg);
        }

        .kit-gauge-circle::before {
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            background: var(--bg-card);
            border-radius: 50%;
        }

        .kit-gauge-value {
            position: relative;
            z-index: 1;
            font-family: var(--font-main);
            font-size: 1.25rem;
            font-weight: 700;
        }

        .kit-gauge-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .kit-gauge-unit {
            font-size: 0.625rem;
            color: var(--text-secondary);
        }

        .kit-loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .kit-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.25rem 0.625rem;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .kit-status-badge.success {
            background: rgba(16, 185, 129, 0.15);
            color: var(--accent-green);
        }

        .kit-status-badge.warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--accent-orange);
        }

        .kit-status-badge.error {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .kit-status-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
        }

        .kit-headers-list {
            font-family: var(--font-main);
            font-size: 0.75rem;
        }

        .kit-header-item {
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .kit-header-item:last-child {
            border-bottom: none;
        }

        .kit-header-name {
            color: var(--accent);
        }

        .kit-header-value {
            color: var(--text-primary);
            word-break: break-all;
        }

        .kit-currency-display {
            text-align: center;
            padding: 1.5rem;
        }

        .kit-currency-amount {
            font-family: var(--font-main);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .kit-currency-rate {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .kit-swap-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            flex-shrink: 0;
            font-size: 1.25rem;
        }

        .kit-swap-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-primary);
        }

        .kit-scan-progress {
            margin: 1rem 0;
        }

        .kit-progress-bar {
            height: 4px;
            background: var(--bg-secondary);
            border-radius: 2px;
            overflow: hidden;
        }

        .kit-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-purple));
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .kit-scan-items {
            margin-top: 1rem;
        }

        .kit-scan-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0;
            font-size: 0.875rem;
        }

        .kit-scan-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
        }

        .kit-scan-icon.pending {
            background: var(--bg-secondary);
            color: var(--text-secondary);
        }

        .kit-scan-icon.checking {
            background: rgba(0, 212, 255, 0.15);
            color: var(--accent);
        }

        .kit-scan-icon.success {
            background: rgba(16, 185, 129, 0.15);
            color: var(--accent-green);
        }

        .kit-scan-icon.warning {
            background: rgba(245, 158, 11, 0.15);
            color: var(--accent-orange);
        }

        .kit-scan-icon.error {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        /* New Kit Tools Styles */
        .kit-qr-output {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .kit-qr-output canvas {
            background: white;
            padding: 8px;
            border-radius: 8px;
        }

        .kit-qr-output .kit-btn {
            margin-top: 1rem;
        }

        .kit-textarea {
            min-height: 80px;
            resize: vertical;
            font-family: var(--font-main);
        }

        .kit-translate-output {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1rem;
            min-height: 80px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            line-height: 1.6;
        }

        .kit-eye-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            opacity: 0.6;
            transition: opacity 0.3s ease;
        }

        .kit-eye-btn:hover {
            opacity: 1;
        }

        .kit-password-meter {
            margin: 1rem 0;
        }

        .kit-meter-bar {
            height: 6px;
            background: var(--bg-secondary);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 0.75rem;
        }

        .kit-meter-fill {
            height: 100%;
            width: 0%;
            border-radius: 3px;
            transition: all 0.4s ease;
        }

        .kit-meter-fill.weak { background: #ef4444; width: 25%; }
        .kit-meter-fill.fair { background: var(--accent-orange); width: 50%; }
        .kit-meter-fill.good { background: #84cc16; width: 75%; }
        .kit-meter-fill.strong { background: var(--accent-green); width: 100%; }

        .kit-password-label {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .kit-password-label.weak { color: #ef4444; }
        .kit-password-label.fair { color: var(--accent-orange); }
        .kit-password-label.good { color: #84cc16; }
        .kit-password-label.strong { color: var(--accent-green); }

        .kit-password-tips {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }

        .kit-tip-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            transition: color 0.3s ease;
        }

        .kit-tip-item.pass {
            color: var(--accent-green);
        }

        .kit-tip-item.pass .kit-tip-icon {
            color: var(--accent-green);
        }

        .kit-tip-icon {
            font-size: 0.75rem;
        }

        .kit-short-url-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid var(--accent);
            border-radius: 10px;
        }

        .kit-short-url-text {
            font-family: var(--font-main);
            font-size: 0.9375rem;
            color: var(--accent);
            word-break: break-all;
        }

        .kit-tool-window:nth-child(9) { animation-delay: 0.5s; }
        .kit-tool-window:nth-child(10) { animation-delay: 0.55s; }
        .kit-tool-window:nth-child(11) { animation-delay: 0.6s; }
        .kit-tool-window:nth-child(12) { animation-delay: 0.65s; }
        .kit-tool-window:nth-child(13) { animation-delay: 0.7s; }
        .kit-tool-window:nth-child(14) { animation-delay: 0.75s; }
        .kit-tool-window:nth-child(15) { animation-delay: 0.8s; }
        .kit-tool-window:nth-child(16) { animation-delay: 0.85s; }
        .kit-tool-window:nth-child(17) { animation-delay: 0.9s; }
        .kit-tool-window:nth-child(18) { animation-delay: 0.95s; }
        .kit-tool-window:nth-child(19) { animation-delay: 1s; }
        .kit-tool-window:nth-child(20) { animation-delay: 1.05s; }

        /* Hash value styling */
        .kit-hash-value {
            font-size: 0.6875rem !important;
            word-break: break-all;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .kit-hash-value:hover {
            color: var(--accent) !important;
        }

        /* Age Calculator Styles */
        .kit-age-display {
            text-align: center;
            padding: 1.5rem;
            background: var(--bg-secondary);
            border-radius: 12px;
            margin-bottom: 1rem;
        }

        .kit-age-main {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 0.5rem;
        }

        .kit-age-number {
            font-family: var(--font-main);
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--accent);
        }

        .kit-age-unit {
            font-size: 1.5rem;
            color: var(--text-secondary);
        }

        .kit-age-detail {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
        }

        /* Date Calculator Tabs */
        .kit-date-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .kit-date-tab {
            flex: 1;
            padding: 0.625rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            font-family: var(--font-main);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .kit-date-tab:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .kit-date-tab.active {
            background: rgba(0, 212, 255, 0.1);
            border-color: var(--accent);
            color: var(--accent);
        }

        /* World Clock Styles */
        .kit-live-indicator {
            font-size: 0.6875rem;
            color: var(--accent-green);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .kit-world-clocks {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .kit-clock-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .kit-clock-item:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .kit-clock-city {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .kit-clock-time {
            font-family: var(--font-main);
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .kit-clock-date {
            font-size: 0.6875rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        /* BMI Calculator Styles */
        .kit-bmi-display {
            margin: 1rem 0;
        }

        .kit-bmi-gauge {
            position: relative;
            margin-bottom: 1rem;
        }

        .kit-bmi-scale {
            display: flex;
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
        }

        .kit-bmi-zone {
            flex: 1;
            font-size: 0;
        }

        .kit-bmi-zone.underweight { background: #3b82f6; }
        .kit-bmi-zone.normal { background: var(--accent-green); }
        .kit-bmi-zone.overweight { background: var(--accent-orange); }
        .kit-bmi-zone.obese { background: #ef4444; }

        .kit-bmi-pointer {
            position: absolute;
            top: -4px;
            width: 4px;
            height: 16px;
            background: white;
            border-radius: 2px;
            transform: translateX(-50%);
            transition: left 0.5s ease;
            left: 0%;
            opacity: 0;
        }

        .kit-bmi-pointer.show {
            opacity: 1;
        }

        .kit-bmi-value {
            text-align: center;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 12px;
        }

        .kit-bmi-number {
            font-family: var(--font-main);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-primary);
            display: block;
        }

        .kit-bmi-status {
            font-size: 0.9375rem;
            color: var(--text-secondary);
        }

        .kit-bmi-status.underweight { color: #3b82f6; }
        .kit-bmi-status.normal { color: var(--accent-green); }
        .kit-bmi-status.overweight { color: var(--accent-orange); }
        .kit-bmi-status.obese { color: #ef4444; }

        /* Random Numbers Display */
        .kit-random-numbers {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
        }

        .kit-random-number {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid var(--accent);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-family: var(--font-main);
            font-size: 1rem;
            color: var(--accent);
        }

        /* Tool window animation delays for new tools */
        .kit-tool-window:nth-child(21) { animation-delay: 1.1s; }
        .kit-tool-window:nth-child(22) { animation-delay: 1.15s; }
        .kit-tool-window:nth-child(23) { animation-delay: 1.2s; }
        .kit-tool-window:nth-child(24) { animation-delay: 1.25s; }
        .kit-tool-window:nth-child(25) { animation-delay: 1.3s; }
        .kit-tool-window:nth-child(26) { animation-delay: 1.35s; }

        /* Scientific Calculator Styles */
        .kit-calc-display {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .kit-calc-history {
            font-size: 0.75rem;
            color: var(--text-secondary);
            min-height: 1.2em;
            text-align: right;
        }

        .kit-calc-input {
            width: 100%;
            background: transparent;
            border: none;
            font-family: var(--font-main);
            font-size: 1.75rem;
            color: var(--text-primary);
            text-align: right;
            outline: none;
        }

        .kit-calc-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
        }

        .kit-calc-btn {
            padding: 0.75rem;
            border: none;
            border-radius: 8px;
            font-family: var(--font-main);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .kit-calc-btn.num {
            background: var(--bg-secondary);
            color: var(--text-primary);
        }

        .kit-calc-btn.op {
            background: rgba(0, 212, 255, 0.15);
            color: var(--accent);
        }

        .kit-calc-btn.func {
            background: rgba(139, 92, 246, 0.15);
            color: var(--accent-purple);
            font-size: 0.875rem;
        }

        .kit-calc-btn.equal {
            background: linear-gradient(135deg, var(--accent), var(--accent-purple));
            color: white;
        }

        .kit-calc-btn.clear {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .kit-calc-btn.del {
            background: rgba(245, 158, 11, 0.15);
            color: var(--accent-orange);
        }

        .kit-calc-btn:hover {
            transform: scale(1.05);
        }

        .kit-calc-btn:active {
            transform: scale(0.95);
        }

        /* Function Graph Styles */
        .kit-graph-container {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            display: flex;
            justify-content: center;
            margin-bottom: 1rem;
        }

        #func-canvas {
            max-width: 100%;
        }

        .kit-func-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

        .kit-preset-label {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .kit-preset-btn {
            padding: 0.375rem 0.75rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 0.8125rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .kit-preset-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        /* Citation Generator Styles */
        .kit-cite-output {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            font-size: 0.9375rem;
            line-height: 1.6;
        }

        .kit-cite-output .cite-text {
            color: var(--text-primary);
            cursor: pointer;
        }

        .kit-cite-output .cite-text:hover {
            color: var(--accent);
        }

        .kit-cite-format-label {
            font-size: 0.75rem;
            color: var(--accent);
            margin-bottom: 0.5rem;
            display: block;
        }

        /* Wavelength Frequency Converter Styles */
        .kit-wave-spectrum {
            position: relative;
            height: 24px;
            margin: 1.5rem 0;
            border-radius: 12px;
            overflow: hidden;
        }

        .kit-spectrum-bar {
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, 
                #8B00FF 0%,    /* Violet 380nm */
                #0000FF 15%,   /* Blue 450nm */
                #00FFFF 30%,   /* Cyan 490nm */
                #00FF00 45%,   /* Green 520nm */
                #FFFF00 60%,   /* Yellow 570nm */
                #FF8000 75%,   /* Orange 590nm */
                #FF0000 90%,   /* Red 650nm */
                #8B0000 100%   /* Deep Red 700nm+ */
            );
        }

        .kit-spectrum-pointer {
            position: absolute;
            top: -4px;
            width: 4px;
            height: 32px;
            background: white;
            border-radius: 2px;
            transform: translateX(-50%);
            transition: left 0.3s ease;
            box-shadow: 0 0 8px rgba(0,0,0,0.5);
            display: none;
        }

        .kit-spectrum-pointer.show {
            display: block;
        }

        /* Lucky Color Styles */
        .kit-lucky-color-display {
            text-align: center;
            padding: 1.5rem;
        }

        .kit-lucky-color-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
            border: 3px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            transition: all 0.5s ease;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }

        .kit-lucky-color-emoji {
            font-size: 2.5rem;
        }

        .kit-lucky-color-name {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .kit-lucky-color-hex {
            font-family: var(--font-main);
            font-size: 1rem;
            color: var(--text-secondary);
        }

        .kit-lucky-color-info {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            margin-top: 1rem;
        }

        /* Tarot Card Styles */
        .kit-tarot-card-container {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
            perspective: 1000px;
        }

        .kit-tarot-card {
            width: 160px;
            height: 240px;
            position: relative;
            cursor: pointer;
            transform-style: preserve-3d;
            transition: transform 0.8s ease;
        }

        .kit-tarot-card.flipped {
            transform: rotateY(180deg);
        }

        .kit-tarot-front, .kit-tarot-back {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 12px;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--border);
        }

        .kit-tarot-front {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }

        .kit-tarot-front::before {
            content: '';
            position: absolute;
            inset: 8px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
        }

        .kit-tarot-symbol {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .kit-tarot-hint {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .kit-tarot-back {
            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
            transform: rotateY(180deg);
            padding: 1rem;
        }

        .kit-tarot-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            margin-bottom: 0.5rem;
        }

        .kit-tarot-emoji {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .kit-tarot-position {
            font-size: 0.75rem;
            color: var(--accent-purple);
            padding: 0.25rem 0.75rem;
            background: rgba(139, 92, 246, 0.15);
            border-radius: 100px;
        }

        .kit-tarot-meaning {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
        }

        .kit-tarot-section {
            margin-bottom: 1rem;
        }

        .kit-tarot-section:last-child {
            margin-bottom: 0;
        }

        .kit-tarot-section-title {
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 0.25rem;
        }

        .kit-tarot-section-content {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Gold Price Styles */
        .kit-gold-display {
            text-align: center;
            padding: 1.5rem;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
            border-radius: 16px;
            margin-bottom: 1rem;
        }

        .kit-gold-price-main {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .kit-gold-price-value {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .kit-gold-price-unit {
            font-size: 1rem;
            color: var(--text-secondary);
        }

        .kit-gold-change {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            font-size: 0.875rem;
        }

        .kit-gold-change-value {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-weight: 600;
        }

        .kit-gold-change-value.up {
            background: rgba(16, 185, 129, 0.15);
            color: var(--accent-green);
        }

        .kit-gold-change-value.down {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .kit-gold-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
        }

        .kit-gold-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .kit-gold-tab {
            flex: 1;
            min-width: 60px;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .kit-gold-tab:hover {
            border-color: var(--accent);
            color: var(--text-primary);
        }

        .kit-gold-tab.active {
            background: rgba(255, 215, 0, 0.15);
            border-color: #FFD700;
            color: #FFD700;
        }

        .kit-gold-chart-container {
            position: relative;
            height: 180px;
            background: var(--bg-secondary);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .kit-gold-chart-canvas {
            width: 100%;
            height: 100%;
        }

        .kit-gold-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        .kit-gold-stat-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.75rem;
            text-align: center;
        }

        .kit-gold-stat-label {
            font-size: 0.6875rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }

        .kit-gold-stat-value {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .kit-gold-stat-value.high {
            color: var(--accent-green);
        }

        .kit-gold-stat-value.low {
            color: #ef4444;
        }

        .kit-gold-refresh-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.75rem;
        }

        .kit-gold-refresh-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--accent-green);
            animation: goldPulse 2s ease-in-out infinite;
        }

        .kit-gold-refresh-dot.domestic {
            background: #ef4444;
        }

        .kit-gold-display.domestic {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%);
        }

        .kit-gold-display.domestic .kit-gold-price-value {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        @keyframes goldPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .kit-gold-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(10px);
            z-index: 10000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .kit-gold-modal-overlay.active {
            display: flex;
        }

        .kit-gold-modal {
            background: var(--glass-bg);
            backdrop-filter: blur(40px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            width: 100%;
            max-width: 600px;
            max-height: 80vh;
            overflow: hidden;
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .kit-gold-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--glass-border);
        }

        .kit-gold-modal-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.125rem;
            font-weight: 600;
        }

        .kit-gold-modal-close {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .kit-gold-modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .kit-gold-modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            max-height: calc(80vh - 80px);
        }

        .kit-gold-chart-large {
            height: 300px;
            background: var(--bg-secondary);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .kit-gold-period-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .kit-gold-period-stat {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
        }

        .kit-gold-period-stat-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .kit-gold-period-stat-value {
            font-size: 1.125rem;
            font-weight: 700;
        }

        @media (max-width: 768px) {
            .kit-password-tips {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 1200px) {
            .kit-tools-grid {
                grid-template-columns: 1fr;
            }
            
            .kit-layout {
                flex-direction: column;
            }
            
            .kit-sidebar {
                width: 100%;
                position: relative;
                top: 0;
                margin-bottom: 2rem;
            }
            
            .kit-category-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .kit-category-item {
                margin-bottom: 0;
            }
            
            .kit-category-btn {
                padding: 0.5rem 1rem;
            }
            
            .kit-category-btn span:not(.kit-category-icon) {
                display: none;
            }
            
            .kit-category-count {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .kit-main-content {
                padding: 6rem 1.5rem 2rem;
            }

            .kit-page-header h1 {
                font-size: 1.75rem;
            }

            .kit-speed-gauge {
                gap: 1.5rem;
            }

            .kit-gauge-circle {
                width: 80px;
                height: 80px;
            }

            .kit-gauge-circle::before {
                width: 64px;
                height: 64px;
            }

            .kit-gauge-value {
                font-size: 1rem;
            }
        }
        /* ==================== 管理员登录入口按钮 ==================== */
        .admin-trigger {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            background: rgba(0, 255, 65, 0.05);
            border: 1px solid rgba(0, 255, 65, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            opacity: 0.7;
            margin-right: 0.5rem;
        }

        .admin-trigger:hover {
            opacity: 1;
            background: rgba(0, 255, 65, 0.15);
            border-color: rgba(0, 255, 65, 0.5);
            box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
        }

        .admin-trigger svg {
            width: 14px;
            height: 14px;
            color: var(--matrix-green);
        }

        /* ==================== 主题切换按钮 ==================== */
        .theme-toggle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
            margin-right: 0.75rem;
        }

        .theme-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(1.1);
        }

        .theme-toggle:active {
            transform: scale(0.95);
        }

        .theme-toggle svg {
            width: 22px;
            height: 22px;
            color: var(--text-secondary);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .theme-toggle:hover svg {
            color: var(--text-primary);
        }

        .theme-toggle .sun-icon {
            position: absolute;
            opacity: 0;
            transform: rotate(-90deg) scale(0);
        }

        .theme-toggle .moon-icon {
            position: absolute;
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        [data-theme="light"] .theme-toggle .sun-icon {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }

        [data-theme="light"] .theme-toggle .moon-icon {
            opacity: 0;
            transform: rotate(90deg) scale(0);
        }

        [data-theme="light"] .theme-toggle:hover {
            background: rgba(0, 0, 0, 0.06);
        }

        /* Light mode specific overrides */
        [data-theme="light"] body {
            background: var(--bg-primary);
        }

        [data-theme="light"] body::before {
            opacity: 0.03;
        }

        [data-theme="light"] .nav-glass-container {
            background: rgba(255, 255, 255, 0.7);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        [data-theme="light"] .nav-glass-container:hover {
            background: rgba(255, 255, 255, 0.85);
            border-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] nav.scrolled .nav-glass-container {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .nav-links a {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.06);
            color: var(--text-secondary);
        }

        [data-theme="light"] .nav-links a:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(0, 0, 0, 0.1);
            color: var(--text-primary);
        }

        [data-theme="light"] .nav-links a.active {
            background: rgba(8, 145, 178, 0.08);
            border-color: rgba(8, 145, 178, 0.2);
            color: var(--text-primary);
        }

        [data-theme="light"] .nav-login {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
            color: var(--text-secondary);
        }

        [data-theme="light"] .nav-login:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(8, 145, 178, 0.3);
            color: var(--text-primary);
        }

        [data-theme="light"] .nav-cta {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #ffffff;
            border-color: rgba(0, 0, 0, 0.2);
        }

        [data-theme="light"] .nav-cta:hover {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        }

        [data-theme="light"] .user-menu {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .user-menu:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(8, 145, 178, 0.3);
        }

        [data-theme="light"] .user-dropdown {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] .user-dropdown-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .liquid-glass {
            background: rgba(255, 255, 255, 0.7);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .feature-card,
        [data-theme="light"] .value-card,
        [data-theme="light"] .paper-card,
        [data-theme="light"] .team-card,
        [data-theme="light"] .stat-item {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .feature-card:hover,
        [data-theme="light"] .value-card:hover,
        [data-theme="light"] .paper-card:hover,
        [data-theme="light"] .team-card:hover {
            background: rgba(255, 255, 255, 1);
            border-color: rgba(0, 0, 0, 0.12);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
        }

        [data-theme="light"] .modal {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .modal-overlay {
            background: rgba(0, 0, 0, 0.4);
        }

        [data-theme="light"] .form-group input {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
            color: var(--text-primary);
        }

        [data-theme="light"] .form-group input:focus {
            border-color: var(--accent);
            background: rgba(255, 255, 255, 1);
        }

        [data-theme="light"] .btn-primary {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: #ffffff;
        }

        [data-theme="light"] .hero-badge {
            background: rgba(8, 145, 178, 0.1);
            border-color: rgba(8, 145, 178, 0.2);
        }

        /* 浅色主题字体优化 */
        [data-theme="light"] h1,
        [data-theme="light"] h2,
        [data-theme="light"] h3,
        [data-theme="light"] h4,
        [data-theme="light"] h5,
        [data-theme="light"] h6 {
            color: #0f172a;
            text-shadow: none;
        }

        [data-theme="light"] p {
            color: #334155;
        }

        [data-theme="light"] .feature-card h3,
        [data-theme="light"] .value-card h3,
        [data-theme="light"] .paper-card h3,
        [data-theme="light"] .team-card h3 {
            color: #0f172a;
        }

        [data-theme="light"] .feature-card p,
        [data-theme="light"] .value-card p,
        [data-theme="light"] .paper-card p,
        [data-theme="light"] .team-card p {
            color: #475569;
        }

        [data-theme="light"] .section-header h2 {
            color: #0f172a;
        }

        [data-theme="light"] .section-header p {
            color: #475569;
        }

        [data-theme="light"] .hero h1 {
            color: #0f172a;
        }

        [data-theme="light"] .hero p {
            color: #475569;
        }

        [data-theme="light"] .demo-window {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .demo-header {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .demo-input {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .demo-input input {
            background: transparent;
            color: #0f172a;
        }

        [data-theme="light"] .demo-input input::placeholder {
            color: #94a3b8;
        }

        [data-theme="light"] .chat-message p {
            color: #334155;
        }

        [data-theme="light"] .chatbot-message p {
            color: #334155;
        }

        [data-theme="light"] .ai-selector-btn {
            background: rgba(0, 0, 0, 0.05);
            border-color: rgba(0, 0, 0, 0.1);
            color: #0f172a;
        }

        [data-theme="light"] .ai-dropdown {
            background: rgba(255, 255, 255, 0.98);
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] .ai-option {
            color: #334155;
        }

        [data-theme="light"] .ai-option:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .ai-option.active {
            background: rgba(8, 145, 178, 0.1);
            color: #0891b2;
        }

        [data-theme="light"] .kit-tool-window {
            background: rgba(255, 255, 255, 0.85);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .chatbot-window {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .chatbot-input {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .chatbot-input input {
            background: transparent;
            color: var(--text-primary);
        }

        [data-theme="light"] .profile-section {
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .profile-form-group input {
            background: rgba(0, 0, 0, 0.03);
            border-color: rgba(0, 0, 0, 0.1);
            color: var(--text-primary);
        }

        [data-theme="light"] .mobile-nav {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .mobile-nav a {
            color: var(--text-secondary);
        }

        [data-theme="light"] .mobile-nav a:hover,
        [data-theme="light"] .mobile-nav a.active {
            background: rgba(8, 145, 178, 0.08);
            color: var(--text-primary);
        }

        [data-theme="light"] .glow-orb {
            opacity: 0.3;
        }

        [data-theme="light"] .gradient {
            background: linear-gradient(135deg, #0891b2 0%, #7c3aed 50%, #db2777 100%);
            -webkit-background-clip: text;
            background-clip: text;
        }

        [data-theme="light"] footer {
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(0, 0, 0, 0.06);
        }

        /* ==================== 管理员登录模态框 ==================== */
        .admin-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .admin-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .admin-modal {
            background: var(--bg-card);
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 16px;
            padding: 2.5rem;
            width: 400px;
            max-width: 90%;
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .admin-modal-overlay.active .admin-modal {
            transform: scale(1) translateY(0);
            animation: glitchBoxSync 3s infinite;
        }

        .admin-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--matrix-green), var(--accent), var(--matrix-green));
            background-size: 200% 100%;
            animation: scanLine 2s linear infinite;
        }

        /* 扫描线覆盖 */
        .admin-modal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 255, 65, 0.02) 2px,
                rgba(0, 255, 65, 0.02) 4px
            );
            pointer-events: none;
            animation: scanlineSync 3s infinite;
        }

        @keyframes scanLine {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .admin-modal-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .admin-modal-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            background: rgba(0, 255, 65, 0.1);
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-modal-icon svg {
            width: 32px;
            height: 32px;
            color: var(--matrix-green);
        }

        .admin-modal-header h2 {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--matrix-green);
            margin-bottom: 0.5rem;
            font-family: var(--font-main);
            animation: glitchSync 3s infinite;
        }

        .admin-modal-header p {
            font-size: 0.875rem;
            color: var(--text-secondary);
            animation: glitchSync 3s infinite;
        }

        .admin-form-group {
            margin-bottom: 1.25rem;
        }

        .admin-form-group label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--matrix-green);
            margin-bottom: 0.5rem;
            font-family: var(--font-main);
            animation: glitchSync 3s infinite;
        }

        .admin-form-group input {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 10px;
            color: var(--matrix-green);
            font-family: var(--font-main);
            font-size: 0.9375rem;
            transition: all 0.3s ease;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-form-group input:focus {
            outline: none;
            border-color: var(--matrix-green);
            box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.1);
        }

        .admin-form-group input::placeholder {
            color: var(--text-secondary);
            font-family: var(--font-main);
        }

        .admin-login-btn {
            width: 100%;
            padding: 0.875rem;
            background: linear-gradient(135deg, var(--matrix-green), #00cc33);
            color: #000;
            border: none;
            border-radius: 10px;
            font-family: var(--font-main);
            font-size: 0.9375rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 255, 65, 0.3);
        }

        .admin-login-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .admin-login-btn .spinner {
            width: 18px;
            height: 18px;
            border: 2px solid transparent;
            border-top-color: #000;
            border-radius: 50%;
            animation: spinAdmin 0.8s linear infinite;
            display: none;
        }

        .admin-login-btn.loading .spinner {
            display: block;
        }

        .admin-login-btn.loading .btn-text {
            display: none;
        }

        @keyframes spinAdmin {
            to { transform: rotate(360deg); }
        }

        .admin-error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #ef4444;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            margin-bottom: 1rem;
            display: none;
        }

        .admin-error.show {
            display: block;
            animation: shake 0.5s ease;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-5px); }
            40%, 80% { transform: translateX(5px); }
        }

        .admin-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 32px;
            height: 32px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .admin-modal-close:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }

        /* ==================== 管理后台 - Matrix风格 ==================== */
        .admin-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            display: none;
        }

        .admin-panel.active {
            display: block;
        }

        .matrix-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000;
            overflow: hidden;
        }

        .matrix-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        /* 欢迎弹窗 */
        .welcome-admin-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease;
        }

        .welcome-admin-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .welcome-admin-box {
            text-align: center;
            padding: 3rem;
        }

        .welcome-admin-icon {
            width: 100px;
            height: 100px;
            margin: 0 auto 2rem;
            background: rgba(0, 255, 65, 0.1);
            border: 2px solid var(--matrix-green);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulseGreen 2s ease-in-out infinite;
        }

        @keyframes pulseGreen {
            0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.3); }
            50% { box-shadow: 0 0 50px rgba(0, 255, 65, 0.6); }
        }

        .welcome-admin-icon svg {
            width: 50px;
            height: 50px;
            color: var(--matrix-green);
        }

        .welcome-admin-title {
            font-family: var(--font-main);
            font-size: 2.5rem;
            color: var(--matrix-green);
            margin-bottom: 0.5rem;
            text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
            animation: glitchSync 3s infinite;
        }

        /* ==================== 同步 Glitch 抖动效果 ==================== */
        /* 所有元素使用相同的动画时间和关键帧，实现同步抖动 */
        
        @keyframes glitchSync {
            0%, 82%, 100% { 
                text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
                transform: translate(0);
                filter: none;
            }
            83% { 
                text-shadow: -4px 0 #ff0000, 4px 0 #00ffff;
                transform: translate(-3px, 2px);
                filter: brightness(1.2);
            }
            85% { 
                text-shadow: 4px 0 #ff0000, -4px 0 #00ffff;
                transform: translate(3px, -2px);
                filter: brightness(0.9);
            }
            87% { 
                text-shadow: -3px 0 #ff0000, 3px 0 #00ffff;
                transform: translate(2px, 3px);
                filter: brightness(1.1);
            }
            89% { 
                text-shadow: 5px 0 #ff0000, -5px 0 #00ffff;
                transform: translate(-4px, -2px);
                filter: brightness(1.3);
            }
            91% { 
                text-shadow: -4px 0 #ff0000, 4px 0 #00ffff;
                transform: translate(3px, 2px);
                filter: brightness(0.8);
            }
            93% { 
                text-shadow: 3px 0 #ff0000, -3px 0 #00ffff;
                transform: translate(-2px, -3px);
                filter: brightness(1.2);
            }
        }

        @keyframes glitchBoxSync {
            0%, 82%, 100% { 
                box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
                transform: translate(0);
                filter: none;
            }
            83% { 
                box-shadow: -4px 0 10px rgba(255, 0, 0, 0.4), 4px 0 10px rgba(0, 255, 255, 0.4);
                transform: translate(-2px, 1px);
                filter: brightness(1.1);
            }
            85% { 
                box-shadow: 4px 0 10px rgba(255, 0, 0, 0.4), -4px 0 10px rgba(0, 255, 255, 0.4);
                transform: translate(2px, -1px);
                filter: brightness(0.95);
            }
            87% { 
                box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), 3px 0 10px rgba(0, 255, 255, 0.4);
                transform: translate(1px, 2px);
                filter: brightness(1.05);
            }
            89% { 
                box-shadow: 5px 0 10px rgba(255, 0, 0, 0.4), -5px 0 10px rgba(0, 255, 255, 0.4);
                transform: translate(-3px, -1px);
                filter: brightness(1.15);
            }
            91% { 
                box-shadow: -4px 0 10px rgba(255, 0, 0, 0.4), 4px 0 10px rgba(0, 255, 255, 0.4);
                transform: translate(2px, 1px);
                filter: brightness(0.9);
            }
            93% { 
                box-shadow: 3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(0, 255, 255, 0.4);
                transform: translate(-1px, -2px);
                filter: brightness(1.1);
            }
        }

        /* 扫描线闪烁 - 同步 */
        @keyframes scanlineSync {
            0%, 82%, 100% { opacity: 0.02; }
            83%, 93% { opacity: 0.08; }
        }

        /* 通用类 */
        .glitch-sync {
            animation: glitchSync 3s infinite !important;
        }
        
        .glitch-box-sync {
            animation: glitchBoxSync 3s infinite !important;
        }

        .welcome-admin-subtitle {
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            animation: glitchSync 3s infinite;
        }

        .welcome-admin-enter {
            padding: 1rem 3rem;
            background: transparent;
            border: 2px solid var(--matrix-green);
            color: var(--matrix-green);
            font-family: var(--font-main);
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            animation: glitchBoxSync 3s infinite;
        }

        .welcome-admin-enter:hover {
            background: var(--matrix-green);
            color: #000;
            box-shadow: 0 0 30px rgba(0, 255, 65, 0.5);
        }

        /* 管理面板内容 */
        .admin-content {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .admin-header {
            padding: 1rem 2rem;
            background: rgba(0, 0, 0, 0.8);
            border-bottom: 1px solid rgba(0, 255, 65, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .admin-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .admin-logo-icon {
            width: 36px;
            height: 36px;
            background: rgba(0, 255, 65, 0.1);
            border: 1px solid var(--matrix-green);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-logo-icon svg {
            width: 20px;
            height: 20px;
            color: var(--matrix-green);
        }

        .admin-logo-text {
            font-family: var(--font-main);
            font-size: 1.25rem;
            color: var(--matrix-green);
            animation: glitchSync 3s infinite;
        }

        .admin-status {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(0, 255, 65, 0.1);
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 100px;
            font-family: var(--font-main);
            font-size: 0.75rem;
            color: var(--matrix-green);
            animation: glitchSync 3s infinite;
        }

        .admin-status::before {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--matrix-green);
            border-radius: 50%;
            animation: blink 1s ease-in-out infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .admin-header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .admin-user {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 1rem;
            background: rgba(0, 255, 65, 0.05);
            border: 1px solid rgba(0, 255, 65, 0.2);
            border-radius: 8px;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-user-avatar {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--matrix-green), #00cc33);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #000;
            font-size: 0.875rem;
        }

        .admin-user-info {
            display: flex;
            flex-direction: column;
        }

        .admin-user-name {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--matrix-green);
            animation: glitchSync 3s infinite;
        }

        .admin-user-role {
            font-size: 0.75rem;
            color: var(--text-secondary);
            animation: glitchSync 3s infinite;
        }

        .admin-logout-btn {
            padding: 0.5rem 1rem;
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.5);
            color: #ef4444;
            font-family: var(--font-main);
            font-size: 0.875rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-logout-btn:hover {
            background: rgba(239, 68, 68, 0.1);
        }

        .admin-main {
            flex: 1;
            padding: 2rem;
            overflow-y: auto;
        }

        .admin-title {
            font-family: var(--font-main);
            font-size: 1.5rem;
            color: var(--matrix-green);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: glitchSync 3s infinite;
        }

        .admin-title svg {
            width: 24px;
            height: 24px;
        }

        .admin-subtitle {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            margin-bottom: 2rem;
            animation: glitchSync 3s infinite;
        }

        /* 统计卡片 */
        .admin-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .admin-stat-card {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(0, 255, 65, 0.2);
            border-radius: 12px;
            padding: 1.25rem;
            transition: all 0.3s ease;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-stat-card:hover {
            border-color: var(--matrix-green);
            box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
        }

        .admin-stat-icon {
            width: 40px;
            height: 40px;
            background: rgba(0, 255, 65, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        .admin-stat-value {
            font-family: var(--font-main);
            font-size: 1.75rem;
            color: var(--matrix-green);
            margin-bottom: 0.25rem;
            animation: glitchSync 3s infinite;
        }

        .admin-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            animation: glitchSync 3s infinite;
        }

        /* 文件仓库 */
        .admin-storage {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(0, 255, 65, 0.2);
            border-radius: 16px;
            overflow: hidden;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-storage-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid rgba(0, 255, 65, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .admin-storage-title {
            font-family: var(--font-main);
            font-size: 1rem;
            color: var(--matrix-green);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            animation: glitchSync 3s infinite;
        }

        .admin-storage-actions {
            display: flex;
            gap: 0.75rem;
        }

        .admin-breadcrumb {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 12px 0;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(0, 255, 65, 0.1);
            flex-wrap: wrap;
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--matrix-green);
            font-size: 13px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .breadcrumb-item:hover {
            background: rgba(0, 255, 65, 0.1);
        }

        .breadcrumb-separator {
            color: rgba(0, 255, 65, 0.3);
            font-size: 12px;
        }

        .folder-row {
            background: rgba(0, 255, 65, 0.03);
        }

        .folder-row:hover {
            background: rgba(0, 255, 65, 0.08) !important;
        }

        .folder-icon {
            color: var(--matrix-green);
            margin-right: 8px;
        }

        .folder-name {
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .folder-name:hover {
            color: var(--matrix-green);
        }

        .admin-btn {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-family: var(--font-main);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-btn-primary {
            background: var(--matrix-green);
            border: none;
            color: #000;
            font-weight: 600;
        }

        .admin-btn-primary:hover {
            box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
        }

        .admin-btn-secondary {
            background: transparent;
            border: 1px solid rgba(0, 255, 65, 0.3);
            color: var(--matrix-green);
        }

        .admin-btn-secondary:hover {
            background: rgba(0, 255, 65, 0.1);
        }

        /* 文件表格 */
        .admin-file-table {
            width: 100%;
        }

        .admin-file-table th,
        .admin-file-table td {
            padding: 1rem 1.5rem;
            text-align: left;
            border-bottom: 1px solid rgba(0, 255, 65, 0.1);
        }

        .admin-file-table th {
            font-family: var(--font-main);
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--matrix-green);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: rgba(0, 255, 65, 0.05);
        }

        .admin-file-table tr:hover td {
            background: rgba(0, 255, 65, 0.05);
        }

        .file-name {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .file-icon {
            width: 36px;
            height: 36px;
            background: rgba(0, 255, 65, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .file-info {
            display: flex;
            flex-direction: column;
        }

        .file-title {
            font-size: 0.9375rem;
            color: var(--text-primary);
        }

        .file-type {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .file-size {
            font-family: var(--font-main);
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .file-date {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .file-actions {
            display: flex;
            gap: 0.5rem;
        }

        .file-action-btn {
            width: 32px;
            height: 32px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .file-action-btn:hover {
            background: rgba(0, 255, 65, 0.1);
            border-color: var(--matrix-green);
            color: var(--matrix-green);
        }

        .file-action-btn.delete:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: #ef4444;
            color: #ef4444;
        }

        /* 空状态 */
        .admin-empty {
            padding: 4rem 2rem;
            text-align: center;
        }

        .admin-empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: rgba(0, 255, 65, 0.1);
            border: 1px dashed rgba(0, 255, 65, 0.3);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
        }

        .admin-empty h3 {
            font-size: 1.125rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .admin-empty p {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }

        /* 上传模态框 */
        .upload-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10002;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .upload-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .upload-modal {
            background: rgba(0, 0, 0, 0.9);
            border: 1px solid rgba(0, 255, 65, 0.3);
            border-radius: 16px;
            padding: 2rem;
            width: 500px;
            max-width: 90%;
            position: relative;
            animation: glitchBoxSync 3s infinite;
        }

        /* 上传弹窗扫描线 */
        .upload-modal::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 255, 65, 0.02) 2px,
                rgba(0, 255, 65, 0.02) 4px
            );
            pointer-events: none;
            border-radius: 16px;
            animation: scanlineSync 3s infinite;
        }

        .upload-modal h3 {
            font-family: var(--font-main);
            font-size: 1.25rem;
            color: var(--matrix-green);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            animation: glitchSync 3s infinite;
        }

        .upload-dropzone {
            border: 2px dashed rgba(0, 255, 65, 0.3);
            border-radius: 12px;
            padding: 3rem 2rem;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            animation: glitchBoxSync 3s infinite;
        }

        .upload-dropzone:hover,
        .upload-dropzone.dragover {
            border-color: var(--matrix-green);
            background: rgba(0, 255, 65, 0.05);
        }

        .upload-dropzone-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 1rem;
            background: rgba(0, 255, 65, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: glitchBoxSync 3s infinite;
        }

        .upload-dropzone-icon svg {
            width: 30px;
            height: 30px;
            color: var(--matrix-green);
        }

        .upload-dropzone h4 {
            font-size: 1rem;
            color: var(--matrix-green);
            margin-bottom: 0.5rem;
            font-family: var(--font-main);
            animation: glitchSync 3s infinite;
        }

        .upload-dropzone p {
            font-size: 0.875rem;
            color: var(--text-secondary);
            animation: glitchSync 3s infinite;
        }

        .upload-dropzone input {
            display: none;
        }

        .upload-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.5rem;
        }

        /* Toast 通知 */
        .admin-toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 1rem 1.5rem;
            background: rgba(0, 0, 0, 0.9);
            border: 1px solid var(--matrix-green);
            border-radius: 10px;
            color: var(--matrix-green);
            font-family: var(--font-main);
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            z-index: 10003;
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .admin-toast.show {
            transform: translateY(0);
            opacity: 1;
            animation: glitchBoxSync 3s infinite;
        }

        .admin-toast.error {
            border-color: #ef4444;
            color: #ef4444;
        }

        @media (max-width: 1024px) {
            .admin-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .admin-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
            }
            
            .admin-stat-card {
                padding: 1rem;
            }
            
            .admin-stat-value {
                font-size: 1.25rem;
            }
            
            .admin-stat-label {
                font-size: 0.75rem;
            }
            
            .admin-header {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem;
            }
            
            .admin-header-left {
                width: 100%;
                justify-content: space-between;
            }
            
            .admin-header-right {
                width: 100%;
                justify-content: space-between;
            }
            
            .admin-main {
                padding: 1rem;
            }
            
            .admin-title {
                font-size: 1.125rem;
            }
            
            .admin-subtitle {
                font-size: 0.8125rem;
                margin-bottom: 1.5rem;
            }
            
            .admin-storage-header {
                flex-direction: column;
                gap: 1rem;
                padding: 1rem;
            }
            
            .admin-storage-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .admin-btn {
                flex: 1;
                justify-content: center;
                padding: 0.625rem 0.75rem;
                font-size: 0.8125rem;
            }
            
            /* 文件表格改为卡片式 */
            .admin-file-table {
                display: block;
            }
            
            .admin-file-table thead {
                display: none;
            }
            
            .admin-file-table tbody {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                padding: 0.75rem;
            }
            
            .admin-file-table tr {
                display: flex;
                flex-wrap: wrap;
                background: rgba(0, 255, 65, 0.03);
                border: 1px solid rgba(0, 255, 65, 0.15);
                border-radius: 10px;
                padding: 0.875rem;
                gap: 0.5rem;
            }
            
            .admin-file-table tr:hover td {
                background: transparent;
            }
            
            .admin-file-table td {
                padding: 0;
                border: none;
            }
            
            .admin-file-table td:first-child {
                width: 100%;
                margin-bottom: 0.5rem;
            }
            
            .admin-file-table td.file-size,
            .admin-file-table td.file-date {
                font-size: 0.75rem;
                color: var(--text-secondary);
            }
            
            .admin-file-table td:last-child {
                margin-left: auto;
            }
            
            .file-name {
                gap: 0.625rem;
            }
            
            .file-icon {
                width: 32px;
                height: 32px;
                font-size: 0.875rem;
            }
            
            .file-title {
                font-size: 0.8125rem;
            }
            
            .file-type {
                font-size: 0.6875rem;
            }
            
            .file-actions {
                gap: 0.375rem;
            }
            
            .file-action-btn {
                width: 28px;
                height: 28px;
            }
            
            .admin-empty {
                padding: 2rem 1rem;
            }
            
            .admin-empty-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }
            
            .admin-empty h3 {
                font-size: 1rem;
            }
            
            .admin-empty p {
                font-size: 0.8125rem;
            }
            
            /* 欢迎弹窗手机端 */
            .welcome-admin-box {
                padding: 2rem 1.5rem;
            }
            
            .welcome-admin-icon {
                width: 70px;
                height: 70px;
            }
            
            .welcome-admin-icon svg {
                width: 35px;
                height: 35px;
            }
            
            .welcome-admin-title {
                font-size: 1.5rem;
            }
            
            .welcome-admin-subtitle {
                font-size: 0.875rem;
                padding: 0 1rem;
            }
            
            .welcome-admin-enter {
                padding: 0.875rem 2rem;
                font-size: 0.875rem;
            }
            
            /* 上传模态框手机端 */
            .upload-modal {
                padding: 1.5rem;
                margin: 1rem;
                width: calc(100% - 2rem);
            }
            
            .upload-modal h3 {
                font-size: 1rem;
            }
            
            .upload-dropzone {
                padding: 2rem 1rem;
            }
            
            .upload-dropzone-icon {
                width: 50px;
                height: 50px;
            }
            
            .upload-dropzone-icon svg {
                width: 24px;
                height: 24px;
            }
            
            .upload-dropzone h4 {
                font-size: 0.875rem;
            }
            
            .upload-dropzone p {
                font-size: 0.75rem;
            }
            
            /* 登录模态框手机端 */
            .admin-modal {
                padding: 1.5rem;
                margin: 1rem;
                width: calc(100% - 2rem);
            }
            
            .admin-modal-icon {
                width: 50px;
                height: 50px;
            }
            
            .admin-modal-icon svg {
                width: 24px;
                height: 24px;
            }
            
            .admin-modal-header h2 {
                font-size: 1.25rem;
            }
            
            .admin-modal-header p {
                font-size: 0.8125rem;
            }
            
            /* Toast手机端 */
            .admin-toast {
                left: 1rem;
                right: 1rem;
                bottom: 1rem;
                font-size: 0.8125rem;
                padding: 0.875rem 1rem;
            }
            
            /* 用户信息手机端 */
            .admin-user {
                padding: 0.375rem 0.625rem;
            }
            
            .admin-user-avatar {
                width: 28px;
                height: 28px;
                font-size: 0.75rem;
            }
            
            .admin-user-name {
                font-size: 0.75rem;
            }
            
            .admin-user-role {
                font-size: 0.625rem;
            }
            
            .admin-logout-btn {
                padding: 0.375rem 0.625rem;
                font-size: 0.75rem;
            }
            
            .admin-logo-text {
                font-size: 1rem;
            }
            
            .admin-status {
                font-size: 0.625rem;
                padding: 0.375rem 0.625rem;
            }
        }
        
        @media (max-width: 480px) {
            .admin-stats {
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }
            
            .admin-stat-card {
                padding: 0.75rem;
            }
            
            .admin-stat-icon {
                width: 32px;
                height: 32px;
                margin-bottom: 0.5rem;
                font-size: 1rem;
            }
            
            .admin-stat-value {
                font-size: 1rem;
            }
            
            .admin-header-left {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .admin-logo {
                gap: 0.5rem;
            }
            
            .admin-logo-icon {
                width: 28px;
                height: 28px;
            }
            
            .admin-logo-icon svg {
                width: 16px;
                height: 16px;
            }
            
            .admin-logo-text {
                font-size: 0.875rem;
            }
        }


/* ========================================
   ULTIMATE LIQUID GLASS ENHANCEMENT v2.0
   超越第一版的极致质感升级
   ======================================== */

/* 1. 增强所有玻璃组件的模糊和透明度 */
.nav-glass-container,
.feature-card,
.kit-tool-window,
.value-card,
.paper-card,
.team-card,
.stat-item,
.chatbot-window,
.liquid-glass,
.modal,
.admin-modal {
    background: rgba(20, 20, 20, 0.35) !important;
    backdrop-filter: blur(50px) saturate(180%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(50px) saturate(180%) brightness(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 24px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* 2. 导航栏终极玻璃效果 */
.nav-glass-container {
    border-radius: 100px !important;
    background: rgba(10, 10, 11, 0.4) !important;
    backdrop-filter: blur(60px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(60px) saturate(200%) !important;
}

/* 3. Hover effect - handled by styles-override.css */

/* 4. 所有标题渐变效果 */
h1, h2, .hero h1, .gradient {
    background: linear-gradient(135deg, #ffffff 0%, #aaaaaa 50%, #2997ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientShift 6s ease-in-out infinite !important;
}

@keyframes gradientShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(20deg); }
}

/* 5. 按钮极致玻璃效果 */
.btn-primary,
.nav-cta,
.kit-btn,
.kit-btn-primary,
button[type="submit"] {
    background: linear-gradient(135deg, 
        rgba(41, 151, 255, 0.9) 0%,
        rgba(30, 127, 217, 0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 8px 25px rgba(41, 151, 255, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn-primary:hover,
.nav-cta:hover,
.kit-btn:hover,
.kit-btn-primary:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 
        0 15px 45px rgba(41, 151, 255, 0.5),
        0 5px 15px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(41, 151, 255, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 6. 输入框玻璃效果 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select,
.kit-input-field,
.form-group input {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(41, 151, 255, 0.5) !important;
    box-shadow: 
        0 0 0 3px rgba(41, 151, 255, 0.1),
        0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.01) !important;
}

/* 7. 统计卡片发光效果 */
.stat-item {
    position: relative;
    overflow: visible !important;
}

.stat-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, 
        rgba(41, 151, 255, 0.3),
        rgba(139, 92, 246, 0.3));
    border-radius: 32px;
    opacity: 0;
    filter: blur(15px);
    transition: opacity 0.4s ease;
    z-index: -1;
}

.stat-item:hover::before {
    opacity: 1;
}

/* 8. Hero徽章样式 */
.hero-badge {
    background: rgba(41, 151, 255, 0.15) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(41, 151, 255, 0.3) !important;
    box-shadow: 
        0 4px 15px rgba(41, 151, 255, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.page-badge {
    background: rgba(41, 151, 255, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(41, 151, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
    display: inline-block;
    margin-bottom: 1rem;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}

/* 9. Chatbot窗口特殊玻璃效果 */
.chatbot-window {
    background: rgba(15, 15, 20, 0.4) !important;
    border-radius: 30px !important;
}

.chatbot-bubble {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.chatbot-input {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(30px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 10. Kit工具窗口Mac风格dots */
.kit-tool-header {
    position: relative;
}

.kit-tool-dots {
    display: flex;
    gap: 6px;
}

.kit-tool-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.kit-tool-dot.red {
    background: linear-gradient(135deg, #ff5f57 0%, #ff3b30 100%);
}

.kit-tool-dot.yellow {
    background: linear-gradient(135deg, #ffbd2e 0%, #ff9500 100%);
}

.kit-tool-dot.green {
    background: linear-gradient(135deg, #28ca42 0%, #34c759 100%);
}

/* 11. 页面切换动画增强 */
.page.active {
    animation: pageSlideIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 12. 模态框终极玻璃 */
.modal-overlay {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

.modal {
    background: rgba(24, 24, 27, 0.85) !important;
    backdrop-filter: blur(60px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(60px) saturate(180%) !important;
    border-radius: 30px !important;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* 13. Footer玻璃效果 */
footer {
    background: rgba(10, 10, 11, 0.6) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* 14. 自定义滚动条玻璃效果 */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, 
        rgba(41, 151, 255, 0.5),
        rgba(139, 92, 246, 0.5));
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, 
        rgba(41, 151, 255, 0.7),
        rgba(139, 92, 246, 0.7));
}

/* 15. 选中文本效果 */
::selection {
    background: rgba(41, 151, 255, 0.3);
    color: #ffffff;
    text-shadow: 0 0 8px rgba(41, 151, 255, 0.5);
}

/* 16. Papers页面卡片增强 */
.paper-card {
    position: relative;
}

.paper-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(41, 151, 255, 0) 0%,
        rgba(41, 151, 255, 0.8) 50%,
        rgba(41, 151, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.paper-card:hover::before {
    opacity: 1;
}

/* 17. Team卡片头像发光 */
.team-avatar,
.user-avatar {
    box-shadow: 
        0 8px 25px rgba(41, 151, 255, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-avatar:hover,
.user-avatar:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 12px 35px rgba(41, 151, 255, 0.5),
        0 0 40px rgba(41, 151, 255, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* 18. 加载动画玻璃效果 */
@keyframes glassShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: glassShimmer 2s infinite;
}

/* 19. Admin Matrix风格保持但增强玻璃质感 */
.admin-modal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(50px) !important;
    border: 1px solid rgba(0, 255, 65, 0.3) !important;
}

/* 20. 响应式优化 - 移动端减少模糊 */
@media (max-width: 768px) {
    .nav-glass-container,
    .feature-card,
    .kit-tool-window,
    .modal {
        backdrop-filter: blur(30px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    }
}

/* 21. 特殊icon动画 - 默认静止，hover时动 */
.feature-icon {
    filter: drop-shadow(0 4px 15px rgba(41, 151, 255, 0.3));
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}

/* 22. 导航链接样式 */
.nav-links a {
    position: relative;
    transition: all 0.3s ease;
}

/* 23. 为所有卡片添加倾斜效果准备 */
.feature-card,
.kit-tool-window,
.value-card,
.paper-card,
.team-card,
.stat-item {
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 24. Logo渐变效果 */
.logo {
    background: linear-gradient(135deg, #ffffff 0%, #2997ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(41, 151, 255, 0.3);
}

/* 25. 终极优化：所有交互元素统一过渡 */
* {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1) !important;
}

button, a, input, select, textarea {
    transition-duration: 0.3s !important;
}

    </style>