:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a28;--bg-panel: rgba(20, 20, 35, .85);--bg-hover: rgba(255, 255, 255, .05);--bg-active: rgba(255, 255, 255, .1);--text-primary: #e8e8f0;--text-secondary: #8888aa;--text-muted: #555577;--accent-cyan: #00d4ff;--accent-cyan-dim: rgba(0, 212, 255, .2);--accent-magenta: #ff00cc;--accent-magenta-dim: rgba(255, 0, 204, .15);--accent-green: #00ff88;--accent-green-dim: rgba(0, 255, 136, .15);--accent-red: #ff3355;--accent-red-dim: rgba(255, 51, 85, .15);--accent-yellow: #ffcc00;--accent-orange: #ff8800;--border-color: rgba(255, 255, 255, .08);--border-glow: rgba(0, 212, 255, .3);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-glow: 0 0 20px rgba(0, 212, 255, .15);--shadow-panel: 0 4px 24px rgba(0, 0, 0, .4);--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-sans: "Inter", "Segoe UI", system-ui, sans-serif;font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}.app{display:grid;grid-template-columns:220px 1fr 310px;grid-template-rows:48px 1fr 200px;height:100vh;gap:1px;background:var(--border-color)}.app-header{grid-column:1 / -1;background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border-color)}.app-header h1{font-size:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-resolution{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-left:8px}.header-fps{font-family:var(--font-mono);font-size:10px;font-weight:600;margin-left:6px;padding:1px 6px;border-radius:3px;background:#ffffff0d}.fps-good{color:var(--accent-green)}.fps-warn{color:var(--accent-yellow)}.fps-bad{color:var(--accent-red)}.header-controls{display:flex;align-items:center;gap:8px}.header-tabs{display:flex;gap:0;background:var(--bg-tertiary);border-radius:var(--radius-sm);padding:2px}.header-tab{padding:4px 14px;font-size:12px;font-weight:500;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s;white-space:nowrap}.header-tab:hover{color:var(--text-primary);background:#ffffff0d}.header-tab.active{background:var(--accent-cyan-dim);color:var(--accent-cyan);font-weight:600}.main-split{display:flex;overflow:hidden;background:var(--bg-primary);position:relative}.packet-trail-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.header-tab.trail-active{background:#c864ff26!important;color:#c878ff!important;animation:pulse-trail 2s ease-in-out infinite}@keyframes pulse-trail{0%,to{box-shadow:0 0 8px #c864ff4d}50%{box-shadow:0 0 18px #c864ff99}}.main-split .main-canvas{flex:1;min-width:0;position:relative;transition:flex .4s cubic-bezier(.4,0,.2,1)}.main-split .main-monitor{flex:0 0 0%;overflow:hidden;opacity:0;transition:flex .4s cubic-bezier(.4,0,.2,1),opacity .3s ease .1s}.main-split.split-active .main-canvas{flex:1}.main-split.split-active .main-monitor{flex:1;opacity:1;border-left:1px solid var(--border-color)}.main-monitor{background:var(--bg-primary);overflow-y:auto;overflow-x:hidden}.monitor-inline{height:100%;display:flex;flex-direction:column;overflow:hidden}.monitor-controls-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary);flex-shrink:0}.monitor-controls-bar label{font-size:10px;color:var(--text-secondary);margin-right:4px}.monitor-controls-bar input[type=number]{width:60px}.monitor-toggle-btn{padding:8px 24px!important;font-size:13px!important;font-weight:700!important;min-width:180px;letter-spacing:.5px;border-radius:var(--radius-md)!important;transition:all .2s ease;color:#fff!important}.monitor-toggle-btn.btn-live{background:linear-gradient(135deg,#f22,#c00)!important;box-shadow:0 0 14px #ff222280;animation:pulse-live 1.5s ease-in-out infinite}.monitor-toggle-btn.btn-live:hover{box-shadow:0 0 24px #ff2222b3;transform:scale(1.03)}.monitor-toggle-btn.btn-listen{background:linear-gradient(135deg,#0c6,#00994d)!important;box-shadow:0 0 14px #00cc6680;animation:pulse-listen 1.5s ease-in-out infinite}.monitor-toggle-btn.btn-listen:hover{box-shadow:0 0 24px #00cc66b3;transform:scale(1.03)}.monitor-toggle-btn.btn-off{background:linear-gradient(135deg,#445,#334)!important;color:var(--text-secondary)!important;box-shadow:none}.monitor-toggle-btn.btn-off:hover{background:linear-gradient(135deg,#556,#445)!important;color:var(--text-primary)!important;transform:scale(1.02)}@keyframes pulse-live{0%,to{box-shadow:0 0 14px #ff222280}50%{box-shadow:0 0 28px #f22c}}@keyframes pulse-listen{0%,to{box-shadow:0 0 14px #00cc6680}50%{box-shadow:0 0 28px #0c6c}}.header-tab.active{background:var(--accent-cyan-dim);color:var(--accent-cyan);font-weight:600;animation:pulse-listen 2s ease-in-out infinite}.patch-legend{display:flex;gap:6px;align-items:center;margin-left:4px}.patch-legend-item{display:flex;align-items:center;gap:3px;font-size:10px;font-family:var(--font-mono);color:var(--text-secondary)}.patch-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.main-canvas{background:#000;position:relative;overflow:hidden}.main-canvas canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair}.studio-canvas-gl{z-index:0}.studio-canvas-overlay{z-index:1}.bottom-panel{grid-column:1 / -1;background:var(--bg-secondary);display:flex;flex-direction:column;overflow:hidden;border-top:1px solid var(--border-color)}.bottom-panel-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);flex-shrink:0}.bottom-panel-body{flex:1;display:flex;overflow:hidden}.bottom-panel-left{width:280px;overflow-y:auto;padding:0;border-right:1px solid var(--border-color);flex-shrink:0}.bottom-panel-mid{flex:1;overflow-y:auto;padding:8px}.bottom-panel-right{width:320px;overflow-y:auto;border-left:1px solid var(--border-color);padding:8px}.sidebar{background:var(--bg-secondary);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:12px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}.sidebar-list{flex:1;overflow-y:auto;padding:4px}.fixture-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;font-size:13px}.fixture-item:hover{background:var(--bg-hover)}.fixture-item.active{background:var(--accent-cyan-dim);border:1px solid var(--accent-cyan)}.fixture-item .fixture-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.fixture-item .fixture-info{flex:1;min-width:0}.fixture-item .fixture-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fixture-item .fixture-address{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}.main-content{background:var(--bg-primary);overflow-y:auto;padding:16px}.faders-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}.fader-channel{display:flex;flex-direction:column;align-items:center;width:56px;padding:8px 4px;background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.fader-channel .channel-label{font-size:9px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px;text-align:center;letter-spacing:.5px;line-height:1.2;height:22px;display:flex;align-items:center}.fader-track{position:relative;width:8px;height:140px;background:var(--bg-tertiary);border-radius:4px;cursor:pointer;overflow:hidden}.fader-fill{position:absolute;bottom:0;width:100%;border-radius:4px;transition:height .05s}.fader-fill.dimmer{background:linear-gradient(to top,#666,#fff)}.fader-fill.red{background:linear-gradient(to top,#600,#f22)}.fader-fill.green{background:linear-gradient(to top,#060,#2f2)}.fader-fill.blue{background:linear-gradient(to top,#006,#26f)}.fader-fill.white{background:linear-gradient(to top,#333,#fff)}.fader-fill.pan,.fader-fill.tilt{background:linear-gradient(to top,#553300,var(--accent-orange))}.fader-fill.strobe{background:linear-gradient(to top,#553355,var(--accent-magenta))}.fader-fill.generic{background:linear-gradient(to top,#334455,var(--accent-cyan))}.fader-value{margin-top:8px;font-size:11px;font-family:var(--font-mono);font-weight:500;color:var(--text-primary)}.right-panel{background:var(--bg-secondary);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.panel-section{border-bottom:1px solid var(--border-color);padding:12px}.panel-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:10px}.color-picker-area{display:flex;flex-direction:column;align-items:center;gap:10px}.color-preview{width:100%;height:48px;border-radius:var(--radius-md);border:1px solid var(--border-color);transition:background-color .1s}.color-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;width:100%}.color-input-group{display:flex;flex-direction:column;align-items:center;gap:2px}.color-input-group label{font-size:10px;color:var(--text-muted);font-weight:600}.color-input-group input[type=range]{width:100%;height:4px;appearance:none;border-radius:2px;outline:none;cursor:pointer}.color-input-group input[type=range].red-slider{background:linear-gradient(to right,#000,red)}.color-input-group input[type=range].green-slider{background:linear-gradient(to right,#000,#0f0)}.color-input-group input[type=range].blue-slider{background:linear-gradient(to right,#000,#00f)}.color-input-group input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.3);cursor:pointer}.scenes-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.scene-button{padding:8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-primary);font-size:11px;cursor:pointer;transition:all .15s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-button:hover{background:var(--bg-hover);border-color:var(--accent-cyan)}.scene-button.active{background:var(--accent-cyan-dim);border-color:var(--accent-cyan);box-shadow:0 0 8px #00d4ff33}.bottom-panel{grid-column:1 / -1;background:var(--bg-secondary);display:flex;flex-direction:column;overflow:hidden}.bottom-panel-header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border-color)}.bottom-panel-header h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.cue-controls{display:flex;gap:6px}.cue-table{flex:1;overflow-y:auto;padding:4px 16px}.cue-row{display:grid;grid-template-columns:40px 1fr 80px 80px 80px 40px;gap:8px;padding:6px 8px;align-items:center;font-size:12px;border-radius:var(--radius-sm);transition:background .15s}.cue-row:hover{background:var(--bg-hover)}.cue-row.active{background:var(--accent-green-dim);border-left:3px solid var(--accent-green)}.cue-row .cue-num{font-family:var(--font-mono);color:var(--text-muted);font-size:11px}.cue-row .cue-name{color:var(--text-primary)}.cue-row .cue-time{font-family:var(--font-mono);color:var(--text-secondary);font-size:11px;text-align:center}.btn{padding:6px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-tertiary);color:var(--text-primary);font-size:12px;cursor:pointer;transition:all .15s;font-family:var(--font-sans);display:inline-flex;align-items:center;gap:4px}.btn:hover{background:var(--bg-hover);border-color:var(--text-muted)}.btn-sm{padding:4px 8px;font-size:11px}.btn-icon{padding:4px 6px;font-size:14px;line-height:1}.btn-primary{background:var(--accent-cyan-dim);border-color:var(--accent-cyan);color:var(--accent-cyan)}.btn-primary:hover{background:#00d4ff4d}.btn-danger{background:var(--accent-red-dim);border-color:var(--accent-red);color:var(--accent-red)}.btn-danger:hover{background:#ff33554d}.btn-success{background:var(--accent-green-dim);border-color:var(--accent-green);color:var(--accent-green)}.btn-success:hover{background:#00ff884d}.btn-blackout{background:var(--accent-red-dim);border-color:var(--accent-red);color:var(--accent-red);font-weight:600;text-transform:uppercase;letter-spacing:1px}.btn-blackout.active{background:var(--accent-red);color:#fff;animation:pulse-red 1s infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 8px #f356}50%{box-shadow:0 0 20px #f35c}}.master-fader{display:flex;align-items:center;gap:8px}.master-fader label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.master-fader input[type=range]{width:100px;height:6px;appearance:none;background:linear-gradient(to right,var(--bg-tertiary),var(--accent-cyan));border-radius:3px;outline:none;cursor:pointer}.master-fader input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent-cyan);border:2px solid var(--bg-primary);cursor:pointer;box-shadow:0 0 6px #00d4ff80}.master-value{font-family:var(--font-mono);font-size:12px;color:var(--accent-cyan);min-width:30px;text-align:right}.connection-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-red)}.connection-dot.connected{background:var(--accent-green);box-shadow:0 0 6px #00ff8880}.settings-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.settings-row label{font-size:11px;color:var(--text-secondary);min-width:60px}.settings-row input[type=text],.settings-row input[type=number]{flex:1;padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;outline:none}.settings-row input:focus{border-color:var(--accent-cyan)}.settings-nic{flex:1}.settings-hint{font-size:10px;color:var(--text-muted);padding:2px 0 6px 68px;font-family:var(--font-mono)}.effect-add-form{display:flex;gap:4px;margin-bottom:8px}.effect-name-input{flex:1;padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:11px;outline:none}.effect-name-input:focus{border-color:var(--accent-cyan)}.effect-type-select{padding:4px 6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:11px;cursor:pointer}.effect-list{display:flex;flex-direction:column;gap:6px}.effect-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px;transition:border-color .2s}.effect-item.running{border-color:var(--accent-green);box-shadow:0 0 8px #00ff8826}.effect-item-header{display:flex;align-items:center;gap:6px;margin-bottom:6px}.effect-icon{font-size:14px}.effect-name{flex:1;font-size:12px;font-weight:500;color:var(--text-primary)}.btn-xs{padding:2px 6px;font-size:9px}.effect-controls{display:flex;flex-direction:column;gap:4px}.effect-slider{display:flex;align-items:center;gap:6px}.effect-slider label{font-size:10px;color:var(--text-secondary);min-width:50px}.effect-slider input[type=range]{flex:1;height:4px}.effect-slider span{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);min-width:55px;text-align:right}.project-save-form{display:flex;gap:4px;margin-bottom:8px}.project-message{font-size:11px;padding:4px 8px;margin-bottom:6px;background:#00ff881a;border-radius:var(--radius-sm);color:var(--accent-green)}.project-list{display:flex;flex-direction:column;gap:4px}.project-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .2s,background .2s}.project-item:hover{border-color:var(--accent-cyan);background:#00d4ff0d}.project-name{font-size:12px;color:var(--text-primary)}.project-date{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;min-width:360px;box-shadow:var(--shadow-panel)}.modal h2{font-size:16px;margin-bottom:16px;color:var(--text-primary)}.modal .form-group{margin-bottom:12px}.modal .form-group label{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.modal .form-group input,.modal .form-group select{width:100%;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none}.modal .form-group input:focus,.modal .form-group select:focus{border-color:var(--accent-cyan)}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}.effect-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:var(--radius-sm);margin-bottom:4px;background:var(--bg-tertiary);border:1px solid var(--border-color)}.effect-item .effect-name{font-size:12px;color:var(--text-primary)}.effect-item .effect-type{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}.effect-item.running{border-color:var(--accent-green);background:var(--accent-green-dim)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:8px}.empty-state .empty-icon{font-size:48px;opacity:.3}.empty-state p{font-size:13px}.monitor-page{display:flex;flex-direction:column;height:100vh;background:var(--bg-primary);overflow:hidden}.monitor-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.monitor-header-left,.monitor-header-right{display:flex;align-items:center;gap:12px}.monitor-title{font-size:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,var(--accent-green),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.monitor-nic-select{display:flex;align-items:center;gap:6px}.monitor-nic-select label{font-size:11px;color:var(--text-secondary)}.nic-dropdown{padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:11px;outline:none;min-width:180px;cursor:pointer}.nic-dropdown:focus{border-color:var(--accent-cyan)}.nic-dropdown:disabled{opacity:.5;cursor:not-allowed}.monitor-port-input{display:flex;align-items:center;gap:6px}.monitor-port-input label{font-size:11px;color:var(--text-secondary)}.monitor-port-input input{width:80px;padding:4px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;outline:none}.monitor-port-input input:focus{border-color:var(--accent-cyan)}.monitor-port-input input:disabled{opacity:.5}.monitor-stats{display:flex;gap:16px;padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.stat{display:flex;flex-direction:column;gap:2px}.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.stat-value{font-family:var(--font-mono);font-size:13px;color:var(--text-primary);display:flex;align-items:center;gap:6px}.stat-value.active{color:var(--accent-green)}.monitor-universe-tabs{display:flex;gap:6px;padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.monitor-universe-tabs .has-data{position:relative}.universe-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-green);display:inline-block;margin-left:4px;box-shadow:0 0 4px #00ff8880}.monitor-grid-container{flex:1;overflow-y:auto;padding:12px 16px}.monitor-grid{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:2px}.monitor-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 1px;border-radius:2px;background:var(--bg-tertiary);border:1px solid transparent;min-height:36px;transition:background-color .1s;cursor:default}.monitor-cell.active{border-color:#ffffff1a}.cell-addr{font-size:7px;font-family:var(--font-mono);color:var(--text-muted);line-height:1}.cell-value{font-size:10px;font-family:var(--font-mono);font-weight:500;color:var(--text-primary);line-height:1.4;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}.monitor-cell.active .cell-value{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.3)}.vgen-page{display:flex;flex-direction:column;height:100vh;background:var(--bg-primary);color:var(--text-primary)}.vgen-page.vgen-fullscreen{position:fixed;inset:0;z-index:9999}.vgen-page.vgen-fullscreen .vgen-header,.vgen-page.vgen-fullscreen .vgen-controls{display:none}.vgen-page.vgen-fullscreen .vgen-preview{flex:1}.vgen-page.vgen-fullscreen .vgen-canvas{width:100%;height:100%}.vgen-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.vgen-header-left,.vgen-header-right{display:flex;align-items:center;gap:12px}.vgen-title{font-size:16px;font-weight:600;margin:0}.vgen-body{display:flex;flex:1;overflow:hidden}.vgen-preview{flex:1;display:flex;align-items:center;justify-content:center;background:#000;padding:16px}.vgen-canvas{border:1px solid var(--border-color);border-radius:var(--radius-sm);image-rendering:pixelated;width:100%;max-width:640px;height:auto;aspect-ratio:4/3}.vgen-controls{width:280px;background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow-y:auto;padding:12px}.vgen-section{margin-bottom:16px}.vgen-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:8px;font-weight:600}.vgen-pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.vgen-pattern-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s}.vgen-pattern-btn:hover{border-color:var(--accent-cyan);color:var(--text-primary)}.vgen-pattern-btn.active{border-color:var(--accent-cyan);background:#00d4ff1a;color:var(--accent-cyan)}.pattern-icon{font-size:16px}.pattern-label{font-size:8px;text-transform:uppercase}.vgen-color-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.vgen-color-row label{font-size:11px;color:var(--text-secondary);min-width:50px}.vgen-color-row input[type=color]{width:40px;height:24px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-tertiary);cursor:pointer}.vgen-slider-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}.vgen-slider-row label{font-size:10px;color:var(--text-secondary);min-width:50px}.vgen-slider-row input[type=range]{flex:1;height:4px}.vgen-slider-row span{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);min-width:35px;text-align:right}.vgen-link-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.vgen-link-row label{font-size:10px;color:var(--text-secondary);min-width:60px}.vgen-link-row select,.vgen-link-row input[type=number]{flex:1;padding:3px 6px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:11px}.patch-page{display:flex;flex-direction:column;height:100vh;background:var(--bg-primary);color:var(--text-primary)}.patch-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.patch-header-left,.patch-header-right{display:flex;align-items:center;gap:12px}.patch-title{font-size:16px;font-weight:600;margin:0}.patch-legend{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-secondary)}.patch-legend-item{display:flex;align-items:center;gap:4px}.patch-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.patch-body{display:flex;flex:1;overflow:hidden}.patch-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#0d0d1a;padding:16px}.patch-canvas{border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:crosshair;max-width:100%;height:auto}.patch-sidebar{width:240px;background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow-y:auto;padding:12px}.patch-section{margin-bottom:16px}.patch-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:8px;font-weight:600}.patch-fixture-list{display:flex;flex-direction:column;gap:3px}.patch-fixture-item{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .2s}.patch-fixture-item:hover{border-color:var(--accent-cyan)}.patch-fixture-item.selected{border-color:#fff;background:#ffffff0d}.patch-fixture-name{flex:1;font-size:11px;color:var(--text-primary)}.patch-fixture-addr{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}.patch-detail-row{display:flex;justify-content:space-between;padding:4px 0;font-size:11px}.patch-detail-row label{color:var(--text-secondary)}.patch-detail-row span{color:var(--text-primary);font-family:var(--font-mono)}.patch-color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.2);flex-shrink:0;transition:background .2s,box-shadow .2s}.patch-color-preview{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:10px;background:#0000004d;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.patch-color-swatch{width:42px;height:42px;border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.15);transition:background-color .2s,box-shadow .3s}.patch-color-label{font-size:10px;color:var(--text-muted);font-family:var(--font-mono)}.fader-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.fader-header-left{flex:1}.fixture-color-preview{display:flex;align-items:center;gap:10px}.color-swatch{width:36px;height:36px;border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.15);transition:background-color .15s,box-shadow .3s}.color-values{display:flex;flex-direction:column;gap:2px}.color-rgb-text{font-size:10px;font-family:var(--font-mono);color:var(--text-secondary)}.color-dim-text{font-size:10px;font-family:var(--font-mono);color:var(--text-muted)}.target-ip-group{display:flex;gap:4px;flex:1}.target-ip-group select,.target-ip-group input{flex:1;min-width:0}.target-ip-group .btn{flex-shrink:0;padding:2px 6px;font-size:12px}.studio-page{display:flex;flex-direction:column;height:100vh;background:#111118;color:var(--text-primary)}.studio-header{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;background:#1a1a24;border-bottom:1px solid var(--border-color);min-height:36px;gap:8px}.studio-header-left{display:flex;align-items:center;gap:8px}.studio-title{font-size:14px;font-weight:600;margin:0;color:var(--accent-primary)}.studio-header-right{display:flex;align-items:center;gap:8px}.studio-body{display:flex;flex:1;overflow:hidden}.studio-left{width:200px;min-width:200px;background:#141420;border-right:1px solid var(--border-color);overflow-y:auto;display:flex;flex-direction:column}.studio-section{padding:8px;border-bottom:1px solid rgba(255,255,255,.06)}.studio-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px}.studio-fixture-list{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow-y:auto}.studio-fixture-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:3px;cursor:pointer;font-size:11px;transition:background .15s}.studio-fixture-item:hover{background:#ffffff0d}.studio-fixture-item.selected{background:#00c8ff1f;border-left:2px solid var(--accent-primary)}.studio-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.15);transition:background .2s,box-shadow .2s}.studio-fixture-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.studio-fixture-addr{font-family:var(--font-mono);font-size:9px;color:var(--text-muted)}.studio-color-preview{display:flex;align-items:center;gap:8px}.studio-color-swatch{width:36px;height:36px;border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.12);transition:background-color .2s,box-shadow .3s}.studio-color-info{display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-size:9px;color:var(--text-secondary)}.studio-dmx-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px;font-size:11px}.studio-dmx-row label{color:var(--text-secondary);font-size:10px;min-width:50px}.studio-dmx-row select,.studio-dmx-row input{flex:1;max-width:80px;padding:2px 4px;font-size:10px;background:#1e1e30;border:1px solid var(--border-color);color:var(--text-primary);border-radius:3px}.studio-center{flex:1;display:flex;align-items:center;justify-content:center;background:#0a0a12;position:relative;overflow:hidden}.studio-canvas{width:100%;height:100%;display:block;cursor:default}.studio-right{width:200px;min-width:200px;background:#141420;border-left:1px solid var(--border-color);overflow-y:auto;display:flex;flex-direction:column}.studio-pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.studio-pattern-btn{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border:1px solid transparent;border-radius:3px;background:#ffffff08;color:var(--text-secondary);cursor:pointer;transition:all .15s;font-size:9px}.studio-pattern-btn:hover{background:#ffffff14}.studio-pattern-btn.active{background:#00c8ff26;border-color:var(--accent-primary);color:var(--text-primary)}.studio-pattern-btn .pattern-icon{font-size:16px;line-height:1}.studio-pattern-btn .pattern-label{font-size:8px;margin-top:2px;white-space:nowrap}.studio-color-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}.studio-color-row label{font-size:10px;color:var(--text-secondary);min-width:30px}.studio-color-row input[type=color]{width:32px;height:20px;border:1px solid var(--border-color);border-radius:3px;cursor:pointer;background:transparent;padding:0}.studio-slider-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.studio-slider-row label{font-size:10px;color:var(--text-secondary);min-width:42px}.studio-slider-row input[type=range]{flex:1;height:4px;accent-color:var(--accent-primary)}.studio-slider-row span{font-size:9px;font-family:var(--font-mono);color:var(--text-muted);min-width:22px;text-align:right}.source-mode-tabs{display:flex;gap:2px;margin-bottom:8px;background:#ffffff08;border-radius:var(--radius-sm);padding:2px}.source-mode-tab{flex:1;padding:6px 8px;font-size:11px;font-weight:600;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s}.source-mode-tab:hover{color:var(--text-primary);background:#ffffff0d}.source-mode-tab.active{background:var(--accent-cyan-dim);color:var(--accent-cyan)}.btn-add-media{float:right;font-size:10px;padding:2px 8px;border:1px solid var(--accent-cyan);border-radius:var(--radius-sm);background:transparent;color:var(--accent-cyan);cursor:pointer;transition:all .15s}.btn-add-media:hover{background:var(--accent-cyan-dim)}.media-empty{text-align:center;padding:24px 12px;color:var(--text-muted);font-size:11px;line-height:1.6}.media-empty-icon{font-size:32px;margin-bottom:8px;opacity:.4}.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.media-thumb{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;transition:all .15s;aspect-ratio:16 / 9}.media-thumb:hover{border-color:#fff3}.media-thumb.active{border-color:var(--accent-cyan);box-shadow:0 0 8px #00c8ff4d}.media-thumb img{width:100%;height:100%;object-fit:cover;display:block}.media-thumb-label{position:absolute;bottom:0;left:0;right:0;padding:2px 4px;font-size:8px;color:#fff;background:linear-gradient(transparent,#000c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-thumb-type{position:absolute;top:2px;left:4px;font-size:10px;text-shadow:0 1px 3px rgba(0,0,0,.8)}.media-thumb-remove{position:absolute;top:2px;right:2px;width:16px;height:16px;border:none;background:#0009;color:#fff;font-size:11px;line-height:1;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center}.media-thumb:hover .media-thumb-remove{opacity:1}.media-thumb-remove:hover{background:#ff3c3ccc}select,.nic-dropdown{background:var(--surface-primary, #1a1a2e);color:var(--text-primary, #e0e0e0);border:1px solid var(--border-color, #333);border-radius:4px;padding:4px 24px 4px 8px;font-size:12px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}select:hover,.nic-dropdown:hover{border-color:var(--accent-primary, #ff2d7c)}select:focus,.nic-dropdown:focus{border-color:var(--accent-primary, #ff2d7c);box-shadow:0 0 4px #ff2d7c4d}select:disabled,.nic-dropdown:disabled{opacity:.5;cursor:not-allowed}option{background:#1a1a2e;color:#e0e0e0;padding:4px 8px}option:checked{background:#2a2a44}.universe-tab-btn{transition:box-shadow .15s ease,background .15s ease,border-color .15s ease;border:1px solid transparent;position:relative}.universe-tab-btn.has-data{animation:universe-pulse 1.5s ease-in-out infinite alternate}@keyframes universe-pulse{0%{filter:brightness(1)}to{filter:brightness(1.15)}}.universe-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-left:6px;animation:dot-blink .8s ease-in-out infinite alternate}@keyframes dot-blink{0%{opacity:.4}to{opacity:1}}.monitor-activity-section{display:flex;gap:8px;padding:6px 16px;background:#0003;border-bottom:1px solid var(--border-color)}.universe-activity-row{flex:1;display:flex;align-items:center;gap:6px}.universe-activity-label{font-size:10px;font-weight:700;font-family:var(--font-mono);min-width:22px}.universe-activity-bar-bg{flex:1;height:8px;background:#ffffff0a;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}.universe-activity-bar-fill{height:100%;border-radius:3px;transition:width .3s ease,background .3s ease,box-shadow .3s ease;min-width:0}.universe-activity-value{font-size:9px;font-family:var(--font-mono);color:var(--text-secondary);min-width:32px;text-align:right}.universe-activity-ch{font-size:9px;font-family:var(--font-mono);color:var(--text-muted);min-width:32px;text-align:right}.preset-bar{display:flex;flex-direction:column;height:100%;background:var(--bg-secondary)}.preset-bar-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--border-color);flex-shrink:0}.preset-bar-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary)}.preset-save-btn{font-size:10px!important;padding:3px 10px!important}.preset-scroll{flex:1;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:4px}.preset-empty{font-size:11px;color:var(--text-muted);text-align:center;padding:20px 8px;line-height:1.5}.preset-card{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-tertiary);cursor:pointer;transition:all .2s ease;position:relative;flex-shrink:0}.preset-card:hover{border-color:var(--accent-cyan);background:#00d4ff0d}.preset-card.active{border-color:var(--accent-cyan);background:var(--accent-cyan-dim);box-shadow:0 0 12px #00d4ff40,inset 0 0 8px #00d4ff1a}.preset-thumb{width:56px;height:40px;border-radius:3px;overflow:hidden;background:#000;flex-shrink:0;display:flex;align-items:center;justify-content:center}.preset-thumb img{width:100%;height:100%;object-fit:cover}.preset-thumb-icon{font-size:20px}.preset-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.preset-card-name{font-size:11px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-card-pattern{font-size:9px;color:var(--text-muted)}.preset-remove-btn{position:absolute;top:2px;right:2px;width:16px;height:16px;border:none;background:#ff325099;color:#fff;font-size:8px;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center;line-height:1}.preset-card:hover .preset-remove-btn{opacity:1}.preset-remove-btn:hover{background:#ff3250e6}