body {
            background-color: #0d1515;
            color: #dce4e4;
            overflow: hidden; /* Prevent scrolling for HUD feel */
        }
        
        /* Hexagonal Grid Background */
        .bg-hex-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='104' viewBox='0 0 60 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l30 17.32v34.64L30 69.28 0 51.96V17.32zM0 103.92l30-17.32v-34.64l-30-17.32M60 103.92l-30-17.32v-34.64l30-17.32' stroke='%2300dbe7' stroke-width='1' stroke-opacity='0.05' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
            background-size: 60px 104px;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        
        .material-symbols-outlined.filled {
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        /* Glitch Animation for Toggles */
        @keyframes glitch {
            0% { transform: translate(0) }
            20% { transform: translate(-2px, 1px) }
            40% { transform: translate(-1px, -1px) }
            60% { transform: translate(2px, 1px) }
            80% { transform: translate(1px, -1px) }
            100% { transform: translate(0) }
        }

        .relay-btn {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .relay-btn.active {
            background-color: rgba(0, 219, 231, 0.2);
            border-color: #00dbe7;
            box-shadow: inset 0 0 20px rgba(0, 219, 231, 0.3), 0 0 10px rgba(0, 219, 231, 0.2);
        }
        
        .relay-btn.active .status-indicator {
            background-color: #00dbe7;
            box-shadow: 0 0 10px #00dbe7;
        }
        
        .relay-btn.active .status-text {
            color: #00dbe7;
        }
        
        .relay-btn.active .icon-container {
            color: #00dbe7;
            text-shadow: 0 0 8px rgba(0, 219, 231, 0.5);
        }

        .relay-btn:active {
            transform: scale(0.98);
        }

        /* Glass Panel Styling */
        .glass-panel {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 219, 231, 0.2);
            position: relative;
        }
        
        .glass-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 1px;
            background: #00dbe7;
        }
        
        .glass-panel::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 8px;
            background: #00dbe7;
        }