body {
            background-color: #060A14;
            color: #FFFFFF;
            overflow-x: hidden;
        }

        #bgCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            pointer-events: none;
        }

        .ease-spring {
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }
       
        .accordion-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .accordion-content.active {
            opacity: 1;
        }


        .glass-panel {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 168, 255, 0.15);
            border-radius: 16px;
            transition: all 0.3s ease;
        }

        .glass-panel:hover {
            border-color: rgba(0, 168, 255, 0.5);
            box-shadow: 0 0 20px rgba(0, 168, 255, 0.1);
            transform: translateY(-2px);
        }

        .neon-text {
            text-shadow: 0 0 20px rgba(0, 168, 255, 0.8);
        }
        
        .gold-glow {
            text-shadow: 0 0 15px rgba(245, 197, 24, 0.6);
        }

 
        .neon-text {
            text-shadow: 0 0 10px rgba(0, 168, 255, 0.4), 0 0 20px rgba(0, 168, 255, 0.2);
        }

        .neon-btn {
            background: linear-gradient(135deg, #00A8FF 0%, #0EA5E9 100%);
            box-shadow: 0 0 25px rgba(0, 168, 255, 0.5);
            transition: all 0.3s ease;
        }

        .neon-btn:hover {
            box-shadow: 0 0 35px rgba(0, 168, 255, 0.8);
            transform: scale(1.02);
        }

        .hud-scanline {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(0, 168, 255, 0.5);
            box-shadow: 0 0 10px #00A8FF;
            animation: scanline 4s linear infinite;
            opacity: 0.5;
        }

        @keyframes scanline {
            0% { top: 0%; opacity: 0; }
            10% { opacity: 0.5; }
            90% { opacity: 0.5; }
            100% { top: 100%; opacity: 0; }
        }

        /* Accordion transitions */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out;
            opacity: 0;
        }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

        
        .accordion-content.active {
            opacity: 1;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }


        /* Toast Notification */
        #toast {
            visibility: hidden;
            min-width: 250px;
            background-color: #080C18;
            color: #fff;
            text-align: center;
            border-radius: 8px;
            padding: 16px;
            position: fixed;
            z-index: 1000;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            border: 1px solid #00A8FF;
            box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
            opacity: 0;
            transition: opacity 0.3s, bottom 0.3s;
        }

        #toast.show {
            visibility: visible;
            opacity: 1;
            bottom: 50px;
        }
        
        .lightning-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 168, 255, 0.8), transparent);
            box-shadow: 0 0 10px rgba(0, 168, 255, 0.5);
            margin: 3rem 0;
        }

        @keyframes drawChart {
            to { stroke-dashoffset: 0; }
        }
        @keyframes scanline {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(200%); }
        }
        @keyframes dataStream {
            0% { transform: translateX(-200%); }
            100% { transform: translateX(400%); }
        }