:root {
            --bg-main: #0f172a;
            --glass-bg: rgba(30, 41, 59, 0.7);
            --glass-border: rgba(255, 255, 255, 0.1);
            --accent-color: #3b82f6;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --card-hover-shadow: 0 20px 40px rgba(0,0,0,0.4);
            --shine-opacity: 0.1;
            --bubble-opacity: 0.2;
        }

        [data-bs-theme="light"] {
            --bg-main: #f1f5f9;
            --glass-bg: rgba(255, 255, 255, 0.85);
            --glass-border: rgba(0, 0, 0, 0.1);
            --accent-color: #4f46e5;
            --text-main: #1e293b;
            --text-muted: #64748b;
            --card-hover-shadow: 0 20px 40px rgba(79, 70, 229, 0.15);
            --shine-opacity: 0.4;
            --bubble-opacity: 0.15;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--bg-main);
            color: var(--text-main);
            transition: background-color 0.5s ease, color 0.5s ease;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }

        .bubble-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none;
        }
        .bubble {
            position: absolute; border-radius: 50%; opacity: 0; background: var(--accent-color); bottom: -100px; animation: floatUp linear infinite;
        }
        @keyframes floatUp {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            20% { opacity: var(--bubble-opacity); }
            80% { opacity: var(--bubble-opacity); }
            100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
        }

        nav, .container-xl, footer { position: relative; z-index: 1; }
        
        .navbar-glass { z-index: 1030; position: sticky; top: 0; border-bottom: 1px solid var(--glass-border); }
        .glass { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }
        
        /* Sidebar styles */
        .offcanvas-glass { 
            background: var(--glass-bg); 
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px); 
            color: var(--text-main);
            z-index: 1050; 
        }

        .tool-card {
            border-radius: 16px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); height: 100%; position: relative; overflow: hidden;
            border: 1px solid var(--glass-border); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); background: var(--glass-bg);
        }
        .tool-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 15px 30px -10px rgba(0,0,0,0.3), 0 0 0 1px var(--accent-color), 0 0 20px rgba(59, 130, 246, 0.4);
            border-color: transparent;
        }
        [data-bs-theme="light"] .tool-card:hover {
            box-shadow: 0 15px 30px -10px rgba(79, 70, 229, 0.2), 0 0 0 1px var(--accent-color), 0 0 20px rgba(79, 70, 229, 0.2);
        }
        .tool-card:hover .card-icon { display: inline-block; animation: iconPulse 1s ease-in-out infinite; }
        @keyframes iconPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
        .tool-card::before {
            content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
            background: linear-gradient(120deg, transparent, rgba(255,255,255, var(--shine-opacity)), transparent);
            transform: skewX(-25deg); transition: 0.5s; pointer-events: none;
        }
        .tool-card:hover::before { left: 200%; transition: 0.8s ease-in-out; }

        .btn-mesh {
            background: linear-gradient(125deg, var(--accent-color), #9333ea, #2563eb, #0891b2); background-size: 300% 300%;
            animation: meshFlow 6s ease-in-out infinite; border: none; color: #ffffff !important; position: relative; z-index: 1;
            transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
        }
        .btn-mesh:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); filter: brightness(1.1); }
        @keyframes meshFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

        .like-btn { color: var(--text-muted); transition: all 0.2s; cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); }
        [data-bs-theme="light"] .like-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.05); }
        .like-btn:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }
        .like-btn.liked { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.1); }
        .heart-icon.animate { animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

        .cat-badge { font-size: 0.7rem; letter-spacing: 0.5px; text-transform: uppercase; }
        .ver-badge { font-size: 0.7rem; font-family: monospace; opacity: 0.8; }
        
        .cat-scroll { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
        .cat-scroll::-webkit-scrollbar { display: none; }
        
        .btn-filter { border-radius: 50px; border: 1px solid var(--glass-border); color: var(--text-muted); background: rgba(255,255,255,0.05); transition: 0.3s; }
        [data-bs-theme="light"] .btn-filter { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
        .btn-filter:hover, .btn-filter.active { background: var(--accent-color); color: white; border-color: var(--accent-color); transform: scale(1.05); }

        .search-input { background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); color: var(--text-main); border-radius: 50px; padding: 12px 20px; }
        [data-bs-theme="light"] .search-input { background: rgba(255,255,255,0.8); border-color: rgba(0,0,0,0.1); }
        .search-input:focus { background: transparent; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); border-color: var(--accent-color); color: var(--text-main); }
        .search-input::placeholder { color: var(--text-muted); }

        .theme-toggle { cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; }
        .theme-toggle:hover { background: rgba(255,255,255,0.1); transform: rotate(15deg); }
        [data-bs-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.05); }
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 100px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            /* background: #ccff00; */
            background: #ff9b00;
            border-radius: 50%;
            box-shadow: 0 0 10px #ccff00;
        }