:root{--bg: #050505;--container: #111111;--container-alt: #1A1A1A;--border: rgba(255, 255, 255, .06);--border-active: rgba(0, 255, 209, .15);--cyan: #00FFD1;--cyan-dim: rgba(0, 255, 209, .3);--cyan-glow: rgba(0, 255, 209, .08);--orange: #FF3E00;--orange-dim: rgba(255, 62, 0, .3);--orange-glow: rgba(255, 62, 0, .08);--text: #E0E0E0;--text-dim: #666666;--text-muted: #444444;--success: #00FF88;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased}.app-layout{display:grid;grid-template-columns:260px 1fr 280px;grid-template-rows:40px 1fr 250px;height:100vh;width:100vw;gap:1px;background:var(--border)}.header-bar{grid-column:1 / -1;background:var(--container);display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border)}.header-bar .logo{font-size:13px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 20px var(--cyan-dim)}.header-subtitle{font-size:9px;letter-spacing:3px;color:var(--text-muted);text-transform:uppercase}.header-bar .status-indicators{display:flex;gap:20px;font-size:10px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}.header-bar .status-indicators span{display:flex;align-items:center;gap:6px}.status-dot{width:6px;height:6px;background:var(--cyan);box-shadow:0 0 8px var(--cyan);display:inline-block}.status-dot.warning{background:var(--orange);box-shadow:0 0 8px var(--orange);animation:pulse-dot 1s ease-in-out infinite}.panel{background:var(--container);border:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}.panel-header{padding:10px 14px;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);background:#ffffff03;display:flex;align-items:center;gap:8px;flex-shrink:0}.panel-header .accent-bar{width:3px;height:12px;background:var(--cyan);box-shadow:0 0 6px var(--cyan-dim)}.panel-body{padding:12px 14px;flex:1;overflow-y:auto}.left-sidebar{grid-row:2 / 3}.viewport-wrapper{grid-row:2 / 3;grid-column:2 / 3;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg)}.tab-nav{position:relative;display:flex;justify-content:center;gap:0;background:var(--container);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0;height:34px}.tab-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 24px;height:100%;background:transparent;border:none;color:var(--text-dim);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:color .25s ease,text-shadow .25s ease;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:2}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--cyan);text-shadow:0 0 12px var(--cyan-dim)}.tab-icon{font-size:11px;line-height:1}.tab-label-dim{color:var(--text-muted);font-weight:400;letter-spacing:1px;font-size:9px}.tab-btn.active .tab-label-dim{color:var(--cyan-dim)}.tab-indicator{position:absolute;bottom:0;height:2px;width:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan-dim),0 0 30px var(--cyan-glow);transition:left .3s cubic-bezier(.4,0,.2,1)}.tab-indicator.left{left:0}.tab-indicator.right{left:50%}.viewport-container{position:relative;flex:1;width:100%;min-height:0;overflow:hidden;background:var(--bg);cursor:crosshair}.viewport-container canvas{cursor:crosshair!important}.hw-controls-bar{position:absolute;bottom:14px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:2px;padding:3px;background:#080808e6;border:1px solid var(--border);z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 24px #00000080}.hw-ctrl-btn{display:flex;align-items:center;gap:7px;padding:7px 16px;background:transparent;border:1px solid transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}.hw-ctrl-btn:hover{color:var(--text);background:#ffffff08;border-color:var(--border)}.hw-ctrl-btn.active{color:var(--cyan);background:#00ffd10f;border-color:#00ffd126;text-shadow:0 0 10px var(--cyan-dim)}.hw-ctrl-btn.active:hover{box-shadow:0 0 15px var(--cyan-glow)}.hw-ctrl-icon{font-size:13px;line-height:1}.hw-ctrl-divider{width:1px;height:18px;background:var(--border);margin:0 4px}.right-sidebar{grid-row:2 / 3}.bottom-bar{grid-column:1 / -1;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:1px;background:var(--border)}.bottom-mid-panels{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--border);overflow:hidden}.bottom-mid-panels .panel{min-height:0;overflow:hidden}.bottom-mid-panels .panel-body{padding:6px 8px;overflow:hidden}.readout{margin-bottom:14px}.readout-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px}.readout-value{font-size:26px;font-weight:300;color:var(--cyan);text-shadow:0 0 15px var(--cyan-dim);letter-spacing:2px}.readout-value.warning{color:var(--orange);text-shadow:0 0 15px var(--orange-dim)}.readout-value.critical{color:var(--orange);text-shadow:0 0 20px var(--orange);animation:pulse-text .8s ease-in-out infinite}.readout-unit{font-size:10px;color:var(--text-dim);margin-left:4px}.progress-bar-container{width:100%;height:4px;background:#ffffff0a;margin-top:6px;position:relative;overflow:hidden}.progress-bar-fill{height:100%;background:var(--cyan);box-shadow:0 0 10px var(--cyan-dim);transition:width .3s ease,background .3s ease,box-shadow .3s ease}.progress-bar-fill.warning{background:var(--orange);box-shadow:0 0 10px var(--orange-dim)}.feature-importance{margin-top:16px}.fi-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}.fi-label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);width:80px;flex-shrink:0}.fi-bar-track{flex:1;height:6px;background:#ffffff0a;position:relative}.fi-bar-fill{height:100%;background:var(--cyan);box-shadow:0 0 8px var(--cyan-dim);transition:width .5s ease}.fi-bar-fill.high{background:var(--orange);box-shadow:0 0 8px var(--orange-dim)}.fi-value{font-size:10px;color:var(--text-dim);width:36px;text-align:right}.toggle-group{margin-bottom:18px}.toggle-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.toggle-switch{width:100%;height:36px;background:var(--container-alt);border:1px solid var(--border);display:flex;cursor:pointer;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.toggle-switch .toggle-option{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);transition:color .2s ease;z-index:1;font-family:var(--font-mono)}.toggle-switch .toggle-option.active{color:var(--bg)}.toggle-switch .toggle-slider{position:absolute;top:0;width:50%;height:100%;background:var(--cyan);box-shadow:0 0 20px var(--cyan-dim);transition:left .25s ease}.toggle-switch.off .toggle-slider{left:0}.toggle-switch.on .toggle-slider{left:50%}.slider-group{margin-bottom:18px}.slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.slider-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim)}.slider-value{font-size:13px;font-weight:500;color:var(--cyan);text-shadow:0 0 10px var(--cyan-dim)}.slider-value.hot{color:var(--orange);text-shadow:0 0 10px var(--orange-dim)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#ffffff0f;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);border:none;cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--cyan);box-shadow:0 0 10px var(--cyan);border:none;border-radius:0;cursor:pointer}.btn{width:100%;padding:10px 16px;border:1px solid var(--border);background:var(--container-alt);color:var(--text);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .15s ease;margin-bottom:8px}.btn:hover{border-color:var(--cyan);box-shadow:0 0 15px var(--cyan-glow);color:var(--cyan)}.btn.danger{border-color:#ff3e004d}.btn.danger:hover{border-color:var(--orange);box-shadow:0 0 15px var(--orange-glow);color:var(--orange)}.btn.danger:active{background:#ff3e001a}.terminal{font-size:10px;line-height:1.8;color:var(--text-dim);position:relative}.terminal:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);pointer-events:none;z-index:1}.terminal-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0}.terminal-line .time{color:var(--text-muted);margin-right:8px}.terminal-line.info{color:var(--cyan-dim)}.terminal-line.warn{color:var(--orange-dim)}.terminal-line.critical{color:var(--orange)}.terminal-line.ai{color:var(--cyan);text-shadow:0 0 8px var(--cyan-dim)}.chart-container{flex:1;min-height:0}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:#ffffff08}.battery-status{margin-top:14px;padding:10px;border:1px solid var(--border);background:#00ffd105}.battery-status.active{border-color:var(--cyan);background:#00ffd10a;animation:battery-pulse 1.5s ease-in-out infinite}.battery-icon{display:flex;align-items:center;gap:8px;margin-bottom:6px}.battery-icon svg{width:20px;height:12px}.battery-charge-bar{width:100%;height:3px;background:#ffffff0a;margin-top:4px}.battery-charge-fill{height:100%;background:var(--cyan);box-shadow:0 0 6px var(--cyan-dim);transition:width .5s ease}.separator{width:100%;height:1px;background:var(--border);margin:14px 0}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}@keyframes pulse-text{0%,to{opacity:1}50%{opacity:.6}}@keyframes battery-pulse{0%,to{box-shadow:0 0 0 var(--cyan-glow)}50%{box-shadow:0 0 15px var(--cyan-glow)}}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.chaos-active{animation:alarm-flash 2s infinite}@keyframes alarm-flash{0%,to{box-shadow:inset 0 0 #ff3e0000}50%{box-shadow:inset 0 0 50px #ff3e0066}}