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

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

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

        :root {
            --primary: #8b5cf6;
            --primary-dark: #7c3aed;
            --bg: #ffffff;
            --text: #1f2937;
            --text-light: #6b7280;
            --card-bg: #f9fafb;
            --border: #e5e7eb;
        }

        .dark {
            --primary: #a78bfa;
            --primary-dark: #8b5cf6;
            --bg: #111827;
            --text: #f3f4f6;
            --text-light: #9ca3af;
            --card-bg: #1f2937;
            --border: #374151;
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            transition: background-color 0.5s ease, color 0.3s ease;
            font-family: 'Inter', sans-serif;
        }

        .logo-placeholder {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-weight: bold;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .logo-placeholder:hover {
            transform: rotate(10deg) scale(1.1);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .tool-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: center;
            animation: fadeIn 0.6s ease-out forwards;
            opacity: 0;
            animation-delay: calc(var(--order) * 0.1s);
        }

        .tool-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: var(--primary);
        }

        .tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .category-text {
            background-color: rgba(99, 102, 241, 0.1);
            color: var(--primary);
        }

        .category-image {
            background-color: rgba(220, 38, 38, 0.1);
            color: #dc2626;
        }

        .category-video {
            background-color: rgba(217, 70, 239, 0.1);
            color: #d946ef;
        }

        .category-coding {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .category-productivity {
            background-color: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .category-audio {
            background-color: rgba(6, 182, 212, 0.1);
            color: #06b6d4;
        }

        .category-research {
            background-color: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
        }

        .pricing-free {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .pricing-freemium {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }

        .pricing-paid {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        #theme-toggle:checked ~ .toggle-dot {
            transform: translateX(100%);
            background-color: var(--primary);
        }

        .theme-toggle-bg {
            background-color: var(--border);
            transition: background-color 0.3s ease;
        }

        #theme-toggle:checked ~ .theme-toggle-bg {
            background-color: var(--primary);
        }

        .filter-btn.active {
            background-color: var(--primary);
            color: white;
            transform: scale(1.05);
        }

        .search-input:focus {
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
        }

        .hero-title {
            background: linear-gradient(90deg, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: float 3s ease-in-out infinite;
        }

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

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .tool-card .visit-btn {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            background-size: 200% auto;
            transition: all 0.3s ease;
        }

        .tool-card:hover .visit-btn {
            background-position: right center;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
        }

        .social-icon {
            transition: all 0.3s ease;
        }

        .social-icon:hover {
            transform: translateY(-3px) scale(1.1);
            color: var(--primary) !important;
        }

        .fade-in {
            animation: fadeIn 0.6s ease-out forwards;
        }

        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }