body {
            font-family: 'Inter', sans-serif;
            background-color: #0a0e1a;
            color: #e2e8f0;
            overflow-x: hidden;
        }
        body::before {
            content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: 
                radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.2), transparent 40%),
                radial-gradient(circle at 85% 75%, rgba(139, 92, 246, 0.15), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.1), transparent 50%);
            background-size: 200% 200%;
            animation: gradient-flow 25s ease-in-out infinite;
            z-index: -1;
        }
        @keyframes gradient-flow {
            0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
        }
        .glass-card {
            background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(24px) saturate(150%);
            border: 1px solid rgba(71, 85, 105, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
        .pulse-glow { animation: pulse-animation 2s infinite; }
        @keyframes pulse-animation {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .tab-button.active { background-color: #3b82f6; color: #ffffff; }
        .tab-button { color: #94a3b8; }
        .tab-button:not(.active):hover { background-color: #334155; color: #cbd5e1; }
        .lesson-item {
            display: flex; align-items: center; padding: 12px 16px; border-radius: 10px;
            font-weight: 500; color: #94a3b8; transition: all 0.2s ease-in-out;
            cursor: pointer; text-decoration: none;
        }
        .lesson-item:hover { background-color: rgba(59, 130, 246, 0.2); color: #e2e8f0; transform: translateX(4px); }
        .lesson-item.active { background-color: rgba(59, 130, 246, 0.3); color: #ffffff; font-weight: 600; }
        .lesson-number {
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.8rem; font-weight: 700; width: 28px; height: 28px;
            margin-right: 12px; border-radius: 8px;
            background-color: rgba(71, 85, 105, 0.4); color: #cbd5e1;
        }
        .lesson-item.active .lesson-number { background-color: #3b82f6; color: white; }
        .floating-menu {
            position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
            padding: 6px; border-radius: 999px; display: flex; align-items: center;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }
        .menu-scroll { display: flex; align-items: center; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
        .menu-scroll::-webkit-scrollbar { display: none; }
        .menu-button {
            padding: 10px 24px; margin: 0 4px; border-radius: 999px; color: #94a3b8; font-weight: 500;
            cursor: pointer; transition: all 0.3s ease; white-space: nowrap; background: transparent; border: none;
        }
        .menu-button.active { color: #ffffff; background-color: #3b82f6; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); }
        .menu-dropdown {
            position: fixed; top: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
            width: 90%; max-width: 600px; padding: 32px; border-radius: 20px; z-index: 999;
            opacity: 0; visibility: hidden; transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
        }
        .menu-dropdown.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 998;
            opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s;
        }
        .overlay.show { opacity: 1; visibility: visible; }