body { background-color: #0f172a; color: white; overflow: hidden; margin: 0; font-family: sans-serif; touch-action: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #1e293b; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }
        canvas { touch-action: none; outline: none; }
        
        .telemetry-bar-bg { background: #1e293b; height: 6px; border-radius: 3px; overflow: hidden; position: relative; }
        .telemetry-bar-fill { height: 100%; transition: width 0.1s linear; }
        .bar-steer-l { background: #60a5fa; position: absolute; right: 50%; height: 100%; }
        .bar-steer-r { background: #60a5fa; position: absolute; left: 50%; height: 100%; }

        #sidebar { transition: transform 0.3s ease-in-out; z-index: 50; }
        #sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 49; backdrop-filter: blur(2px); }
        #sidebar-overlay.show { display: block; }
        @media (max-width: 1024px) {
            #sidebar { position: fixed; top: 0; left: 0; height: 100%; height: 100dvh; width: min(85vw, 340px); transform: translateX(-105%); overflow-y: auto; }
            #sidebar.open { transform: translateX(0); box-shadow: 4px 0 30px rgba(0,0,0,0.5); }
        }
        @media (max-width: 640px) {
            #sidebar { width: 100vw; }
        }