:root {
            --neon: #00f2ff;
            --neon-glow: rgba(0, 242, 255, 0.7);
            --bg: #010101;
            --border: rgba(0, 242, 255, 0.3);
            --card-bg: #050505;
            --success: #39ff14;
            --success-glow: rgba(57, 255, 20, 0.5);
            --error: #ff3333;
        }

        /* --- GLOBAL RESET --- */
        * { font-family: 'Orbitron', sans-serif !important; font-weight: 900 !important; text-transform: uppercase; box-sizing: border-box; letter-spacing: 1.5px; }
        body, html { margin: 0; padding: 0; height: 100vh; background: var(--bg); color: #fff; overflow: hidden; }
        canvas#bg-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

        /* --- SYSTEM MODAL --- */
        #system-modal {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.85); backdrop-filter: blur(15px);
            display: none; align-items: center; justify-content: center;
        }
        .modal-content {
            background: #000; border: 2px solid var(--neon);
            padding: 40px; width: 500px; max-width: 90%;
            box-shadow: 0 0 50px rgba(0, 242, 255, 0.3); 
            display: flex; flex-direction: column; align-items: center; text-align: center;
        }
        .modal-header { color: var(--neon); font-size: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; width: 100%; }
        .modal-body { font-size: 11px; line-height: 1.8; color: #bbb; margin-bottom: 25px; }
        .modal-link { color: var(--success); text-decoration: underline; cursor: pointer; }

        /* --- LOGO --- */
        .logo-container { display: inline-flex; align-items: center; gap: 0px; cursor: pointer; }
        .logo-main { font-size: 2rem; letter-spacing: 10px; color: var(--neon); text-shadow: 0 0 30px var(--neon); line-height: 1; }
        .logo-lite-box { background: var(--neon); color: #000; font-size: 9px; padding: 3px 7px; transform: rotate(90deg); margin-left: -8px; box-shadow: 0 0 20px var(--neon); white-space: nowrap; height: 14px; display: flex; align-items: center; justify-content: center; }

        /* --- SPLASH --- */
        #splash { position: fixed; inset: 0; background: #000; z-index: 8000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1); }
        #splash.hidden { transform: translateY(-100%); }
        .splash-logo-pos { transform: scale(2); margin-bottom: 60px; }

        /* --- UI STRUCTURE --- */
        .master-wrapper { display: flex; flex-direction: column; height: 100vh; max-width: 1400px; margin: 0 auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(25px); }
        .header { padding: 30px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 100; }
        .header-controls { display: flex; align-items: center; gap: 30px; }
        .controls-area { padding: 20px 30px; display: flex; gap: 15px; align-items: center; background: rgba(5, 5, 5, 0.9); border-bottom: 1px solid var(--border); position: relative; z-index: 100; }
        #search-input { flex: 1; background: #000; border: 2px solid var(--border); padding: 15px 25px; color: var(--neon); outline: none; font-size: 13px; }

        /* --- ACCORDION KINETIC BUTTONS --- */
        .theater-ops { display: flex; gap: 10px; align-items: center; }
        .btn-tactic {
            background: transparent; border: 2px solid var(--success); color: var(--success);
            cursor: pointer; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s;
            position: relative; overflow: hidden; height: 45px;
            width: 50px; /* Collapsed */
            display: flex; align-items: center; justify-content: center; padding: 0;
            flex-shrink: 0;
        }
        .btn-tactic svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; transition: transform 0.3s; }
        .btn-label { width: 0; opacity: 0; white-space: nowrap; transition: opacity 0.3s, width 0.3s; font-size: 10px; pointer-events: none; overflow: hidden; margin-left: 0; }

        /* Expansion Logic */
        .btn-tactic:hover { background: var(--success); color: #000; box-shadow: 0 0 30px var(--success-glow); padding: 0 15px; }
        .btn-tactic:hover .btn-label { width: auto; opacity: 1; margin-left: 12px; }

        /* Specific Hover Widths to fit text */
        .btn-random:hover { width: 220px; }
        .btn-reboot:hover { width: 200px; }
        .btn-cloak:hover { width: 170px; }
        .btn-expand:hover { width: 180px; }
        .btn-exit:hover { width: 230px; }

        .btn-white { border-color: #fff; color: #fff; }
        .btn-white:hover { background: #fff; color: #000; box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); }
        .btn-exit { border-color: var(--error); color: var(--error); }
        .btn-exit:hover { background: var(--error); color: #000; box-shadow: 0 0 30px rgba(255, 51, 51, 0.6); }

        .shine-effect::before { content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.8), transparent); transform: skewX(-25deg); transition: 0s; }
        .shine-effect:hover::before { left: 150%; transition: 0.5s ease-in-out; }

        /* --- GRID --- */
        .grid-container { flex: 1; overflow-y: auto; padding: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; position: relative; z-index: 1; align-content: start; }
        .game-card { background: var(--card-bg); border: 1px solid var(--border); padding: 20px; text-align: center; cursor: pointer; transition: 0.2s ease-out; position: relative; width: 100%; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
        .game-card:hover { border-color: var(--neon); transform: translateY(-4px); box-shadow: 0 0 20px var(--neon-glow); z-index: 10; }
        .game-card.favorite { border-left: 6px solid var(--success); }
        
        .game-name { font-size: 13px; color: #fff; line-height: 1.2; margin-bottom: 5px; }
        .part-tag { font-size: 5px; color: var(--neon); opacity: 0.4; letter-spacing: 2px; }
        .pin-status { font-size: 5px; color: #fff; margin-top: 4px; opacity: 0.5; letter-spacing: 2px; }

        .fav-star { position: absolute; top: 8px; left: 8px; font-size: 22px; color: #fff; z-index: 5; transition: 0.2s; text-shadow: 0 0 5px #000; }
        .game-card.favorite .fav-star { color: var(--success); }

        /* --- THEATER & LOADERS --- */
        #theater { position: fixed; inset: 0; background: #000; z-index: 9000; display: none; flex-direction: column; }
        #theater.active { display: flex; }
        .theater-head { padding: 10px 25px; background: #080808; border-bottom: 2px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .theater-body { flex: 1; position: relative; overflow: hidden; background: #000; }
        iframe { width: 100%; height: 100%; border: none; display: block; background: #000; }

        .loader-ui { position: absolute; inset: 0; background: #000; z-index: 9100; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .bar-container { width: 550px; height: 35px; background: #050505; border: 2px solid var(--border); overflow: hidden; margin-top: 20px; position: relative; }
        .bar-fill { width: 0%; height: 100%; background: var(--neon); transition: 0.1s; position: relative; }
        .bar-fill.kinetic-slide { width: 35% !important; position: absolute; background: #00f2ff; box-shadow: 0 0 40px var(--neon); animation: kinetic-slide-run 0.8s infinite ease-in-out; }
        @keyframes kinetic-slide-run { 0% { left: -35%; } 100% { left: 100%; } }

        /* --- SLIDER --- */
        .slider-wrap { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--neon); }
        .switch { position: relative; display: inline-block; width: 44px; height: 20px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #111; border: 1px solid var(--neon); transition: .4s; }
        .slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 4px; bottom: 3px; background-color: var(--neon); transition: .4s; }
        input:checked + .slider { border-color: var(--success); }
        input:checked + .slider:before { transform: translateX(22px); background-color: var(--success); box-shadow: 0 0 10px var(--success); }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-thumb { background: var(--neon); }