/* --- CORE RESET & VARIABLES --- */
        :root {
            --bg-dark: #0a0a0c;
            --panel-bg: #141416;
            --border-color: #2a2a2e;
            --input-bg: #000000;
            --text-main: #c0c0c0;
            --text-muted: #666;
            --terminal-green: #00ff41;
            
            /* System Colors */
            --accent-ps1: #5271ff;
            --accent-n64: #d82e2e;
            --accent-saturn: #fab429;
            --accent-dc: #ff6600;
            --accent-gba: #8b5cf6;
        }

        * { box-sizing: border-box; }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-size: 12px;
        }

        /* --- DRAG & DROP OVERLAY --- */
        #dropOverlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2000;
            display: flex; align-items: center; justify-content: center;
            border: 4px dashed #666; margin: 20px; border-radius: 10px;
            pointer-events: none; opacity: 0; transition: opacity 0.2s;
        }
        #dropOverlay.active { opacity: 1; }
        .drop-msg { font-size: 24px; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }

        /* --- INTRO SCREEN --- */
        #introScreen {
            position: fixed; inset: 0; z-index: 1000;
            background-color: #000;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-family: 'Courier New', monospace;
            transition: opacity 0.5s ease;
        }
        .intro-logo { font-size: 32px; font-weight: bold; color: #fff; margin-bottom: 8px; letter-spacing: -1px; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
        .intro-sub { font-size: 12px; color: #666; margin-bottom: 40px; letter-spacing: 2px; }
        .lang-container { display: flex; gap: 20px; }
        .lang-btn {
            background: transparent; border: 2px solid #333; color: #888;
            padding: 15px 30px; font-size: 14px; cursor: pointer; text-transform: uppercase;
            font-family: monospace; transition: all 0.2s;
        }
        .lang-btn:hover { border-color: #fff; color: #fff; background: #111; transform: scale(1.05); }
        .boot-log {
            position: absolute; bottom: 20px; left: 20px;
            font-size: 10px; color: #444; line-height: 1.5;
            text-align: left;
        }

        /* --- UTILITIES --- */
        .hidden { display: none !important; }
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .gap-1 { gap: 4px; }
        .gap-2 { gap: 8px; }
        .gap-3 { gap: 12px; }
        .gap-4 { gap: 16px; }
        .w-full { width: 100%; }
        .text-xs { font-size: 10px; }
        .font-bold { font-weight: bold; }
        .uppercase { text-transform: uppercase; }
        .text-center { text-align: center; }
        .mb-1 { margin-bottom: 4px; }
        .mb-2 { margin-bottom: 8px; }
        .mt-2 { margin-top: 8px; }
        .mt-auto { margin-top: auto; }
        .p-2 { padding: 8px; }
        .p-3 { padding: 12px; }
        .p-4 { padding: 16px; }

        /* --- SCROLLBAR --- */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #050505; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #555; }

        /* --- LAYOUT --- */
        .header-bar {
            height: 48px; padding: 0 16px; background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
            border-bottom: 2px solid #333; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
            transition: border-bottom-color 0.3s ease;
        }
        .header-bar.ps1 { border-bottom-color: var(--accent-ps1); }
        .header-bar.n64 { border-bottom-color: var(--accent-n64); }
        .header-bar.saturn { border-bottom-color: var(--accent-saturn); }
        .header-bar.dc { border-bottom-color: var(--accent-dc); }
        .header-bar.gba { border-bottom-color: var(--accent-gba); }

        .app-title { font-size: 18px; font-weight: bold; color: #fff; letter-spacing: -0.5px; }
        .version-tag { font-size: 10px; background: #fff; color: #000; padding: 1px 4px; border-radius: 2px; margin-left: 6px; vertical-align: top; }

        .main-workspace { flex: 1; display: flex; overflow: hidden; opacity: 0; transition: opacity 1s; } /* Hidden initially */
        .main-workspace.visible { opacity: 1; }

        .sidebar { width: 320px; background-color: var(--panel-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; z-index: 20; overflow-y: auto; }
        .sidebar-section { border-bottom: 1px solid #222; background: #111; }

        .right-panel { 
            width: 260px; 
            background-color: var(--panel-bg); 
            border-left: 1px solid var(--border-color); 
            display: flex; 
            flex-direction: column; 
            flex-shrink: 0; 
            z-index: 20;
        }

        .viewport-container { flex: 1; display: flex; flex-direction: column; position: relative; background-color: #050505; overflow: hidden; }
        .viewport-toolbar { height: 32px; background: #111; border-bottom: 1px solid #222; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; z-index: 10; }

        /* --- UI ELEMENTS --- */
        .dev-btn {
            background: #222; border: 1px solid #444; color: #aaa; font-family: monospace; text-transform: uppercase;
            padding: 8px; cursor: pointer; transition: all 0.1s ease; font-size: 10px; letter-spacing: 0.5px;
        }
        .dev-btn:hover { background: #333; color: #fff; border-color: #666; }
        .dev-btn:active { transform: translateY(1px); }
        .dev-btn.primary { background: #333; border-color: #888; color: #fff; font-weight: bold; }
        .dev-btn.yellow { color: #eab308; border-color: #713f12; }
        .dev-btn.green { color: #22c55e; border-color: #14532d; }
        .dev-btn.blue { color: #3b82f6; border-color: #1e3a8a; }
        .dev-btn.mini { padding: 2px 6px; font-size: 9px; min-width: 24px; }

        select, input[type="text"] { background: #000; border: 1px solid #444; color: #ddd; padding: 4px; font-family: monospace; font-size: 11px; width: 100%; }
        select:focus, input[type="text"]:focus { outline: 1px solid #666; border-color: #888; color: #fff; }
        
        /* FIX: Dropdown options visibility */
        option { background-color: #000; color: #ddd; }

        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

        .sys-group { display: flex; background: #000; border: 1px solid #444; padding: 2px; border-radius: 4px; gap: 1px; }
        .sys-item { padding: 4px 10px; cursor: pointer; opacity: 0.5; transition: 0.2s; font-weight: bold; font-size: 10px; display: flex; align-items: center; border-radius: 2px; }
        .sys-item:hover { opacity: 0.8; background: #111; }
        .sys-item.active { opacity: 1; background: #222; }
        .sys-item.active.ps1 { color: var(--accent-ps1); text-shadow: 0 0 8px rgba(82, 113, 255, 0.4); }
        .sys-item.active.n64 { color: var(--accent-n64); text-shadow: 0 0 8px rgba(216, 46, 46, 0.4); }
        .sys-item.active.saturn { color: var(--accent-saturn); text-shadow: 0 0 8px rgba(250, 180, 41, 0.4); }
        .sys-item.active.dc { color: var(--accent-dc); text-shadow: 0 0 8px rgba(255, 102, 0, 0.4); }
        .sys-item.active.gba { color: var(--accent-gba); text-shadow: 0 0 8px rgba(139, 92, 246, 0.4); }

        .lbl { font-size: 10px; font-weight: bold; color: #666; text-transform: uppercase; margin-bottom: 4px; display: block; letter-spacing: 0.5px; }
        .lbl-sm { font-size: 9px; color: #888; }
        .val-disp { float: right; color: #aaa; }

        input[type="range"] { -webkit-appearance: none; appearance: none; background: #222; height: 4px; border-radius: 2px; width: 100%; margin: 6px 0; }
        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: #666; border-radius: 50%; cursor: pointer; }
        input[type="range"]::-webkit-slider-thumb:hover { background: #fff; }

        .palette-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: #222; padding: 1px; margin-top: 4px; }
        .palette-swatch { aspect-ratio: 1; width: 100%; cursor: pointer; transition: transform 0.1s; }
        .palette-swatch:hover { transform: scale(1.2); z-index: 10; border: 1px solid #fff; }

        .bar-track { width: 100%; height: 4px; background: #222; margin-top: 4px; margin-bottom: 8px; position: relative; overflow: hidden; }
        .bar-fill { height: 100%; background: #666; width: 0%; transition: width 0.3s, background-color 0.3s; }

        .viewport-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; background-position: center center; perspective: 800px; overflow: hidden; cursor: grab; }
        .viewport-stage:active { cursor: grabbing; }

        .cube-wrapper { 
            width: 100%; height: 100%; 
            display: flex; align-items: center; justify-content: center; 
            transform-style: preserve-3d;
            /* CRITICAL: Removing transition fixes the "lag/drag" issue */
            /* transition: transform 0.1s linear; */ 
            will-change: transform;
        }
        .texture-plane { box-shadow: 0 0 0 1px rgba(255,255,255,0.1); image-rendering: pixelated; background-color: #000; position: relative; }

        /* GRID OVERLAY */
        .grid-overlay {
            position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 10;
            background-image: 
                linear-gradient(rgba(0, 255, 0, 0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 255, 0, 0.3) 1px, transparent 1px);
        }
        .grid-8 { background-size: 8px 8px; opacity: 1; }
        .grid-16 { background-size: 16px 16px; opacity: 1; }
        .grid-32 { background-size: 32px 32px; opacity: 1; }

        .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; }
        .cube-face { position: absolute; width: 200px; height: 200px; border: 1px solid rgba(255,255,255,0.15); background-size: 100% 100%; image-rendering: pixelated; background-color: #111; display: none; backface-visibility: hidden; }
        .mode-cube .cube-face { display: block; }
        .mode-cube .texture-plane { display: none; }
        .cube-front { transform: rotateY(0deg) translateZ(100px); }
        .cube-back { transform: rotateY(180deg) translateZ(100px); }
        .cube-right { transform: rotateY(90deg) translateZ(100px); }
        .cube-left { transform: rotateY(-90deg) translateZ(100px); }
        .cube-top { transform: rotateX(90deg) translateZ(100px); }
        .cube-bottom { transform: rotateX(-90deg) translateZ(100px); }

        .crt-overlay { pointer-events: none; position: absolute; inset: 0; z-index: 50; opacity: 0; transition: opacity 0.3s; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; }
        .crt-active .crt-overlay { opacity: 1; }

        .terminal { height: 120px; background: #080808; border-top: 1px solid #222; padding: 8px; overflow-y: auto; font-family: monospace; font-size: 10px; color: #666; }
        .log-entry { margin-bottom: 2px; }
        .log-success { color: var(--terminal-green); }
        .log-err { color: #ef4444; }
        .log-warn { color: #eab308; }

        .hex-view { font-family: monospace; font-size: 10px; color: #555; line-height: 1.2; padding: 8px; opacity: 0.8; }
        .hex-byte { margin-right: 4px; }
        .hex-byte:nth-child(8n) { margin-right: 12px; }

        .check-group { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #888; cursor: pointer; }
        .check-group:hover { color: #fff; }
        .panel-box { border: 1px solid #333; background: rgba(0,0,0,0.2); border-radius: 4px; padding: 8px; margin-bottom: 8px; }