:root{--bg-color: #07090e;--panel-bg: rgba(13, 17, 23, .92);--border-color: #1e293b;--neon-cyan: #00f0ff;--neon-purple: #bd00ff;--neon-green: #00ff66;--neon-red: #ff0055;--neon-amber: #ffaa00;--text-main: #e2e8f0;--text-muted: #64748b;--grid-size: 20px}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;touch-action:manipulation}body{background-color:var(--bg-color);color:var(--text-main);overflow:hidden;height:100vh;width:100vw}header{position:fixed;top:0;left:0;right:0;height:50px;background:#07090ef2;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{font-weight:800;font-size:16px;letter-spacing:2px;color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,240,255,.5);display:flex;align-items:center;gap:8px}.header-actions{display:flex;gap:6px;align-items:center}#tab-bar{position:fixed;top:50px;left:0;right:0;height:38px;background:#0b0f19;border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 12px;gap:4px;z-index:999;overflow-x:auto}.tab-btn{background:#ffffff08;border:1px solid var(--border-color);border-bottom:none;color:var(--text-muted);padding:5px 10px;font-size:11px;font-weight:600;border-radius:4px 4px 0 0;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;-webkit-user-select:none;user-select:none}.tab-btn.active{background:var(--panel-bg);color:var(--neon-cyan);border-color:var(--neon-cyan);border-bottom:2px solid var(--neon-cyan)}.tab-nav-arrow{color:var(--text-muted);font-size:10px;padding:0 2px}.tab-nav-arrow:hover{color:var(--neon-cyan)}.tab-close{font-size:11px;color:var(--text-muted);padding:0 3px}.tab-close:hover{color:var(--neon-red)}#canvas-viewport{position:absolute;top:88px;bottom:30px;left:0;right:0;overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.15) 1px,transparent 0);background-size:var(--grid-size) var(--grid-size);cursor:grab;touch-action:none}#canvas-viewport:active{cursor:grabbing}#canvas-container{position:absolute;transform-origin:0 0;width:4000px;height:3000px}#canvas-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none;opacity:.3;z-index:0}.widget{position:absolute;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 20px #0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;overflow:visible;-webkit-user-select:none;user-select:none;z-index:10;transition:border-color .2s,box-shadow .2s}.widget:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid transparent;border-radius:8px;pointer-events:none;transition:border-color .2s ease,box-shadow .2s ease}.widget:hover:before,.widget.active-control:before{border-color:var(--neon-cyan);box-shadow:0 0 14px #00f0ff4d}.widget-control-overlay{position:absolute;top:-10px;right:-10px;display:flex;gap:6px;opacity:0;transform:translateY(2px);transition:opacity .2s,transform .2s;pointer-events:auto;z-index:30}.widget:hover .widget-control-overlay,.widget.active-control .widget-control-overlay{opacity:1;transform:translateY(0)}.widget-btn-close{width:22px!important;height:22px!important;border-radius:50%!important;background:#0d1117!important;border:1px solid var(--neon-red)!important;color:var(--neon-red)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:11px!important;font-weight:700!important;cursor:pointer!important;box-shadow:0 2px 8px #000c;min-height:unset!important;padding:0!important}.widget-btn-close:hover{background:var(--neon-red)!important;color:#fff!important;box-shadow:0 0 8px var(--neon-red)}.widget.dragging{transition:none!important;box-shadow:0 8px 32px #00f0ff66;z-index:500!important}.widget-header{padding:8px 12px;background:#ffffff08;border-bottom:1px solid var(--border-color);cursor:move;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;letter-spacing:1px;color:var(--neon-cyan);border-top-left-radius:7px;border-top-right-radius:7px}.widget-body{padding:10px;flex:1;overflow-y:auto}.resize-handle{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:se-resize;z-index:20}.resize-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:100%;height:100%;border-right:2px solid var(--neon-cyan);border-bottom:2px solid var(--neon-cyan);border-radius:1px}.widget-body div[style*="position: absolute"],.smart-item,.hmi-element,[class*=control-item],[class*=smart-element]{position:absolute!important;border:1px solid var(--border-color)!important;border-radius:6px!important;transition:border-color .15s ease,box-shadow .15s ease!important;overflow:visible!important}.widget-body div[style*="position: absolute"]:hover,.smart-item:hover,.hmi-element:hover,[class*=control-item]:hover,[class*=smart-element]:hover{border-color:var(--neon-red)!important;box-shadow:0 0 12px #f056!important;z-index:100!important}.widget-body button[style*=background],.widget-body div[style*="background: red"],.widget-body div[style*="background: #ff"],.widget-body [class*=delete],.widget-body [class*=close],.elem-btn-delete{position:absolute!important;top:-8px!important;right:-8px!important;width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;min-height:20px!important;max-height:20px!important;border-radius:50%!important;background:#0d1117!important;border:1px solid var(--neon-red)!important;color:var(--neon-red)!important;font-size:11px!important;font-weight:900!important;line-height:18px!important;text-align:center!important;padding:0!important;margin:0!important;box-shadow:0 2px 8px #000000e6!important;cursor:pointer!important;opacity:0!important;transition:opacity .15s ease,background-color .15s ease,transform .15s ease!important;z-index:150!important;display:flex!important;align-items:center!important;justify-content:center!important}.widget-body div[style*="position: absolute"]:hover button,.widget-body div[style*="position: absolute"]:hover [class*=delete],.widget-body div[style*="position: absolute"]:hover [class*=close],.smart-item:hover .elem-btn-delete,.hmi-element:hover .elem-btn-delete{opacity:1!important}.widget-body button[style*=background]:hover,.widget-body [class*=delete]:hover,.widget-body [class*=close]:hover,.elem-btn-delete:hover{background:var(--neon-red)!important;color:#fff!important;transform:scale(1.1)!important;box-shadow:0 0 10px var(--neon-red)!important}.widget-body div[style*="cursor: se-resize"],.widget-body [class*=resize],.elem-resize-handle{position:absolute!important;right:2px!important;bottom:2px!important;width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;background:transparent!important;border:none!important;border-right:2px solid var(--neon-cyan)!important;border-bottom:2px solid var(--neon-cyan)!important;border-radius:0!important;opacity:0!important;cursor:se-resize!important;transition:opacity .15s ease!important;z-index:140!important}.widget-body div[style*="position: absolute"]:hover div[style*="cursor: se-resize"],.widget-body div[style*="position: absolute"]:hover [class*=resize],.smart-item:hover .elem-resize-handle,.hmi-element:hover .elem-resize-handle{opacity:1!important}select,input,button{background:#0f172a;border:1px solid var(--border-color);color:var(--text-main);padding:5px 8px;border-radius:4px;outline:none;font-size:11px}select:focus,button:focus,input:focus{border-color:var(--neon-cyan)}button{cursor:pointer;background:#00f0ff1a;color:var(--neon-cyan);border-color:var(--neon-cyan);transition:all .2s;min-height:32px}button:hover{background:var(--neon-cyan);color:#000}.push-btn{width:100%;padding:6px 10px;font-weight:700;letter-spacing:1px;border:1px solid var(--neon-purple);color:#fff;background:#bd00ff26;border-radius:4px}.push-btn:active{background:var(--neon-purple);box-shadow:0 0 12px var(--neon-purple)}.annunciator-led{width:14px;height:14px;border-radius:50%;background:#333;border:1px solid #555;box-shadow:inset 0 0 4px #000;transition:all .3s ease}.annunciator-led.active{background:var(--neon-green);box-shadow:0 0 10px var(--neon-green);border-color:#fff}.annunciator-led.inactive{background:var(--neon-red);box-shadow:0 0 6px var(--neon-red)}.gauge-container{width:100%;background:#000;border:1px solid var(--border-color);border-radius:4px;height:16px;position:relative;overflow:hidden}.gauge-bar{height:100%;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-purple));width:0%;transition:width .3s ease}.gauge-text{position:absolute;top:0;left:0;right:0;bottom:0;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 0 4px #000}.dial-control-container{display:flex;align-items:center;gap:12px;background:#0000004d;padding:6px;border-radius:6px;border:1px solid var(--border-color)}.dial-knob{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,#1e293b,#0f172a);border:2px solid var(--neon-cyan);position:relative;cursor:ns-resize;box-shadow:0 0 8px #00f0ff33;flex-shrink:0}.dial-knob-pointer{width:3px;height:18px;background:var(--neon-cyan);position:absolute;top:4px;left:calc(50% - 1.5px);border-radius:2px;transform-origin:50% 21px;box-shadow:0 0 6px var(--neon-cyan);transform:rotate(-135deg)}.dial-info-box{display:flex;flex-direction:column;gap:2px;flex:1}.dial-value-input{width:100%;font-size:13px;font-weight:700;color:var(--neon-cyan);background:#000;border:1px solid var(--border-color);text-align:center;border-radius:4px;padding:2px 0}.sparkline-svg{width:100%;height:38px;background:#0006;border:1px solid var(--border-color);border-radius:4px}.switch{position:relative;display:inline-block;width:34px;height:18px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#1e293b;transition:.2s;border-radius:20px}.slider:before{position:absolute;content:"";height:12px;width:12px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%}input:checked+.slider{background-color:var(--neon-green)}input:checked+.slider:before{transform:translate(16px)}.camera-stream{width:100%;height:100%;min-height:200px;background:#000;border:0;border-radius:4px}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.metric-card{background:#ffffff05;border:1px solid rgba(255,255,255,.05);padding:6px;border-radius:4px}.metric-label{font-size:9px;color:var(--text-muted);text-transform:uppercase}.metric-value{font-size:12px;font-weight:700;margin-top:2px;color:#fff}.meteogram-img{width:100%;height:auto;border-radius:4px;border:1px solid var(--border-color);margin-top:6px}footer{position:fixed;bottom:0;left:0;right:0;height:30px;background:#07090ef2;border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;color:var(--text-muted);z-index:1000}.context-menu{display:none;position:fixed;background:#0d1117;border:1px solid var(--neon-cyan);border-radius:6px;box-shadow:0 8px 32px #000000e6;z-index:4000;min-width:200px;padding:4px 0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:visible!important}.context-menu-item{padding:7px 14px;font-size:11px;color:var(--text-main);cursor:pointer;display:flex;justify-content:space-between;align-items:center;position:relative;white-space:nowrap;overflow:visible!important}.context-menu-item:hover{background:#00f0ff26;color:var(--neon-cyan)}.context-menu-divider{height:1px;background:var(--border-color);margin:4px 0}.context-submenu{display:none;position:absolute;left:100%;top:-4px;background:#0d1117;border:1px solid var(--neon-cyan);border-radius:6px;min-width:220px;box-shadow:0 8px 32px #000000e6;padding:4px 0;z-index:4001;overflow:visible!important}.context-menu-item:hover>.context-submenu{display:block}.tag-scroll-list{max-height:280px;overflow-y:auto!important;overflow-x:visible!important;scrollbar-width:thin;scrollbar-color:var(--neon-cyan) transparent}.tag-scroll-list::-webkit-scrollbar{width:4px}.tag-scroll-list::-webkit-scrollbar-thumb{background:var(--neon-cyan);border-radius:2px}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;z-index:2000;align-items:center;justify-content:center}.modal-content{background:#0d1117;border:1px solid var(--neon-cyan);padding:16px;border-radius:8px;width:840px;height:640px;max-width:95vw;max-height:90vh;overflow:auto;resize:both;display:flex;flex-direction:column;box-shadow:0 0 30px #00f0ff33}.modal-body-scroll{flex:1;overflow-y:auto;padding-right:4px}.form-group{margin-bottom:12px}.form-group label{display:block;font-size:10px;color:var(--text-muted);margin-bottom:4px;text-transform:uppercase}.form-group input,.form-group select{width:100%}.element-config-row{background:#ffffff05;border:1px solid var(--border-color);padding:8px;border-radius:4px;margin-bottom:8px;display:grid;grid-template-columns:1fr 1.2fr 1.1fr 1.8fr 70px 30px;gap:6px;align-items:center}.builder-output-box{background:#000;border:1px solid var(--neon-green);padding:10px;border-radius:4px;color:var(--neon-green);font-family:monospace;font-size:11px;word-break:break-all;margin-top:8px}#vpn-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#030509f5;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:9999;display:flex;align-items:center;justify-content:center;text-align:center}.vpn-card{background:#0b0f19;border:2px solid var(--neon-red);padding:32px 40px;border-radius:12px;box-shadow:0 0 40px #ff00554d;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:16px}.vpn-icon{font-size:42px;color:var(--neon-red);animation:pulse 1.5s infinite alternate}@keyframes pulse{0%{transform:scale(1);opacity:.8}to{transform:scale(1.1);opacity:1}}@keyframes spin-rotor{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rotor-icon{width:28px;height:28px;fill:var(--text-muted);transition:fill .3s ease}.rotor-icon.active{fill:var(--neon-cyan);animation:spin-rotor 1.2s linear infinite}