@import"https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--accent-blue: #1a6fff;--accent-teal: #00ffcc;--accent-amber: #ffb020}[data-theme=dark]{--bg-base: #050c1a;--bg-panel: #0a1628;--bg-glass: rgba(12, 25, 50, .85);--bg-card: rgba(14, 30, 60, .9);--accent-cyan: #00d4ff;--accent-red: #ff3355;--accent-green: #00ee88;--border-subtle: rgba(0, 212, 255, .15);--border-glow: rgba(0, 212, 255, .5);--text-primary: #e8f4ff;--text-secondary: #7aa0cc;--text-dim: #3a5a7a;--val-blue-bg: #0a2a6e;--val-blue-fg: #4ab0ff;--val-green-bg: #003d22;--val-green-fg: #00ee88;--val-amber-bg: rgba(20, 35, 55, .8);--val-amber-fg: var(--text-secondary);--val-amber-border: var(--border-subtle);--val-gray-bg: #1a2a3a;--val-gray-fg: #5a7a9a;--glow-cyan: 0 0 8px rgba(0, 212, 255, .6), 0 0 24px rgba(0, 212, 255, .2);--glow-green: 0 0 8px rgba(0, 238, 136, .6), 0 0 24px rgba(0, 238, 136, .2);--glow-red: 0 0 8px rgba(255, 51, 85, .7), 0 0 24px rgba(255, 51, 85, .3);--glow-amber: 0 0 8px rgba(255, 176, 32, .6), 0 0 24px rgba(255, 176, 32, .2);--btn-bg: rgba(20, 40, 80, .6);--btn-border: rgba(0, 212, 255, .25);--btn-hover-bg: rgba(0, 100, 180, .35);--btn-shadow: none;--modal-bg: rgba(8, 16, 36, .95);--modal-border: rgba(0, 212, 255, .25);--modal-shadow: 0 0 60px rgba(0, 212, 255, .1), 0 36px 90px rgba(0, 0, 0, .6);--panel-title-bg: linear-gradient(135deg, rgba(0, 100, 180, .5) 0%, rgba(0, 60, 120, .5) 100%);--panel-title-border: rgba(0, 212, 255, .2);--panel-title-shadow: 0 0 12px rgba(0, 212, 255, .5);--table-header-bg: transparent;--table-border: rgba(255, 255, 255, .05);--alarm-bg: rgba(50, 10, 20, .6);--alarm-border: rgba(255, 51, 85, .35);--alarm-color: rgba(255, 120, 140, .85);--alarm-hover-bg: rgba(100, 10, 30, .7);--status-run-bg: rgba(0, 60, 30, .8);--status-run-fg: #00ffaa;--status-run-border: rgba(0, 238, 136, .35);--status-fault-bg: rgba(60, 0, 15, .9);--status-fault-fg: var(--accent-red);--status-fault-border: rgba(255, 51, 85, .5);--status-idle-bg: rgba(20, 35, 55, .8);--status-idle-fg: var(--text-secondary);--status-idle-border: var(--border-subtle);--btn-active-blue-bg: #0a2a6e;--btn-active-blue-fg: #ffffff;--btn-active-blue-border: #4ab0ff;--btn-active-red-bg: #dc2626;--btn-active-red-fg: #ffffff;--btn-active-red-border: #ff5555;--alarm-active-bg: rgba(80, 0, 20, .95);--alarm-active-fg: var(--accent-red);--alarm-panel-bg: rgba(8, 16, 32, .98);--alarm-panel-border: rgba(0, 212, 255, .2);--alarm-entry-border: rgba(255, 255, 255, .05);--alarm-status-fault-bg: rgba(220, 38, 38, .2);--alarm-status-fault-fg: #ff3355;--alarm-status-fault-border: rgba(255, 51, 85, .3);--alarm-status-clear-bg: rgba(22, 163, 74, .2);--alarm-status-clear-fg: #00ee88;--alarm-status-clear-border: rgba(0, 238, 136, .3);--confirm-btn-fg: #000000;--green-btn-fg: #000000;--prog-btn-bg: linear-gradient(135deg, rgba(0, 212, 255, .1) 0%, rgba(0, 100, 180, .05) 100%);--prog-btn-hover-bg: linear-gradient(135deg, rgba(0, 212, 255, .2) 0%, rgba(0, 212, 255, .05) 100%)}[data-theme=light]{--bg-base: #f4f7fa;--bg-panel: #ffffff;--bg-glass: rgba(255, 255, 255, .95);--bg-card: #ffffff;--accent-cyan: #0284c7;--accent-red: #dc2626;--accent-green: #16a34a;--border-subtle: rgba(0, 0, 0, .08);--border-glow: rgba(0, 0, 0, .12);--text-primary: #111827;--text-secondary: #4b5563;--text-dim: #9ca3af;--val-blue-bg: #f0f9ff;--val-blue-fg: #0369a1;--val-green-bg: #f0fdf4;--val-green-fg: #15803d;--val-amber-bg: #f3f4f6;--val-amber-fg: #6b7280;--val-amber-border: #e5e7eb;--val-gray-bg: #f9fafb;--val-gray-fg: #4b5563;--glow-cyan: 0 2px 8px rgba(2, 132, 199, .2);--glow-green: 0 2px 8px rgba(22, 163, 74, .2);--glow-red: 0 2px 8px rgba(220, 38, 38, .2);--glow-amber: 0 2px 8px rgba(217, 119, 6, .2);--btn-bg: #ffffff;--btn-border: #d1d5db;--btn-hover-bg: #f0f9ff;--btn-shadow: 0 1px 2px rgba(0, 0, 0, .05);--modal-bg: #ffffff;--modal-border: #e2e8f0;--modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);--panel-title-bg: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);--panel-title-border: #e2e8f0;--panel-title-shadow: none;--table-header-bg: #f8fafc;--table-border: #f1f5f9;--alarm-bg: #fee2e2;--alarm-border: #fecaca;--alarm-color: #b91c1c;--alarm-hover-bg: #fecaca;--status-run-bg: #dcfce7;--status-run-fg: #16a34a;--status-run-border: #bbf7d0;--status-fault-bg: #fee2e2;--status-fault-fg: #dc2626;--status-fault-border: #fecaca;--status-idle-bg: #f3f4f6;--status-idle-fg: #6b7280;--status-idle-border: #e5e7eb;--btn-active-blue-bg: #0284c7;--btn-active-blue-fg: #ffffff;--btn-active-blue-border: #bae6fd;--btn-active-red-bg: #dc2626;--btn-active-red-fg: #ffffff;--btn-active-red-border: #fecaca;--alarm-active-bg: #dc2626;--alarm-active-fg: #ffffff;--alarm-panel-bg: #ffffff;--alarm-panel-border: #e2e8f0;--alarm-entry-border: #f1f5f9;--alarm-status-fault-bg: #fee2e2;--alarm-status-fault-fg: #dc2626;--alarm-status-fault-border: #fecaca;--alarm-status-clear-bg: #dcfce7;--alarm-status-clear-fg: #16a34a;--alarm-status-clear-border: #bbf7d0;--confirm-btn-fg: #ffffff;--green-btn-fg: #ffffff;--prog-btn-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);--prog-btn-hover-bg: linear-gradient(135deg, #e0f2fe 0%, #d0e8fc 100%)}html,body{width:100%;height:100%;overflow:hidden;background:transparent}#app{width:100%;height:100vh;display:flex;flex-direction:column;background:#f8faff;background-attachment:fixed;font-family:"Exo 2",Arial,sans-serif;font-size:18px;-webkit-user-select:none;user-select:none;color:var(--text-primary)}.hdr{height:96px;min-height:96px;background:var(--bg-panel);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 0 0 24px;position:relative;flex-shrink:0;-webkit-app-region:drag;z-index:100}.hdr>*{-webkit-app-region:no-drag}.hdr:after{content:"";position:absolute;bottom:0;left:2%;right:2%;height:1px;background:linear-gradient(90deg,transparent,var(--accent-cyan) 30%,var(--accent-teal) 70%,transparent);opacity:.5}.hdr-logo{margin-right:20px;flex-shrink:0}.hdr-logo img{height:72px;width:72px;object-fit:contain;border-radius:6px;filter:drop-shadow(0 0 10px rgba(0,212,255,.3))}.hdr-system{display:flex;flex-direction:column;gap:2px}.hdr-sys-label{font-family:Rajdhani,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:4px;color:var(--text-dim);text-transform:uppercase}.hdr-title{font-family:Rajdhani,sans-serif;font-size:30px;font-weight:700;color:var(--accent-cyan);letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 18px rgba(0,212,255,.5);line-height:1;animation:hdr-title-pulse 3s ease-in-out infinite}@keyframes hdr-title-pulse{0%,to{opacity:1;text-shadow:0 0 18px rgba(0,212,255,.5)}50%{opacity:.8;text-shadow:0 0 25px rgba(0,212,255,.8),0 0 5px rgba(255,255,255,.2)}}.hdr-sep{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 15px;opacity:.6}.hdr-sep-line{flex:1;height:1.5px;background:linear-gradient(90deg,transparent,var(--border-subtle))}.hdr-sep-line.rev{background:linear-gradient(90deg,var(--border-subtle),transparent)}.hdr-sep-icon{font-size:12px;color:var(--text-dim);letter-spacing:3px}.hdr-nav{display:flex;align-items:center;gap:15px;margin-right:30px;padding-right:30px;border-right:1px solid var(--border-subtle)}.hdr-datetime{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}.hdr-date{font-family:Share Tech Mono,monospace;font-size:12.5px;letter-spacing:1.5px;color:var(--accent-amber);background:#ffb0201a;border:1px solid rgba(255,176,32,.25);border-radius:4px;padding:3px 15px}.hdr-time{font-family:Share Tech Mono,monospace;font-size:18px;letter-spacing:3px;color:var(--accent-cyan);background:#00d4ff14;border:1px solid rgba(0,212,255,.25);border-radius:4px;padding:3px 15px;box-shadow:var(--glow-cyan)}.hdr-window-controls{display:flex;margin-left:30px;height:100%}.tb-btn{width:69px;height:100%;background:transparent;border:none;color:var(--text-dim);cursor:default;font-size:21px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(255,255,255,.03)}.tb-btn:hover{background:#ffffff0f;color:var(--text-primary)}.tb-cls:hover{background:#ff335526!important;color:var(--accent-red)!important}.machine-row{display:flex;gap:9px;padding:12px 15px 9px;background:var(--bg-base);border-bottom:1px solid #000000;flex-shrink:0}.machine-panel{flex:1;border:1px solid var(--border-subtle);border-radius:9px;overflow:hidden;background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s;position:relative}.machine-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.5),transparent);opacity:0;transition:opacity .3s}.machine-panel:hover{border-color:var(--accent-cyan);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.machine-panel:hover:before{opacity:1}.mp-title{background:var(--panel-title-bg);border-bottom:1px solid var(--panel-title-border);color:var(--accent-cyan);text-align:center;font-family:Rajdhani,sans-serif;font-weight:700;font-size:16.5px;padding:6px 0;letter-spacing:3px;box-shadow:var(--panel-title-shadow);cursor:default;transition:filter .2s}.mp-title:hover{filter:brightness(1.3)}.mp-fields{padding:8px 9px}.mp-row{display:flex;align-items:center;gap:8px;margin-bottom:5px}.mp-row>span{min-width:75px;font-size:14px;color:var(--text-secondary);font-family:Rajdhani,sans-serif;font-weight:600;letter-spacing:.8px;text-transform:uppercase}.val-box{flex:1;height:27px;border:1px solid var(--border-subtle);border-radius:4px;background:var(--val-gray-bg);display:flex;align-items:center;justify-content:center;font-family:Share Tech Mono,monospace;font-size:15px;font-weight:700;color:var(--val-gray-fg);transition:all .35s ease;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}.blue-box{background:var(--val-blue-bg);color:var(--val-blue-fg);border-color:var(--border-subtle)}.green-box{background:var(--val-green-bg);color:var(--val-green-fg);border-color:var(--border-subtle)}.amber-box{background:var(--val-amber-bg);color:var(--val-amber-fg);border-color:var(--val-amber-border)}.status-box{background:var(--val-gray-bg);color:var(--text-secondary);border-color:var(--border-subtle);letter-spacing:1px}.status-box.status-run{background:var(--status-run-bg);color:var(--status-run-fg);border-color:var(--status-run-border);box-shadow:var(--glow-green)}.status-box.status-fault{background:var(--status-fault-bg);color:var(--status-fault-fg);border-color:var(--status-fault-border);box-shadow:var(--glow-red);animation:blink-fault .8s ease-in-out infinite}.status-box.status-idle{background:var(--status-idle-bg);color:var(--status-idle-fg);border-color:var(--status-idle-border)}@keyframes blink-fault{0%,to{opacity:1;box-shadow:var(--glow-red)}50%{opacity:.5;box-shadow:none}}#scene-wrap{flex:1;position:relative;overflow:hidden;background:#f8faff;min-height:0;border-top:1px solid #000000;border-bottom:1px solid #000000}#three-canvas{display:block;width:100%;height:100%;background:#f8faff}.crane-labels{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.clabel{position:absolute;top:33%;transform:translate(-50%);font-family:Rajdhani,sans-serif;font-size:15px;font-weight:700;padding:3px 10px;border-radius:5px;letter-spacing:2px;color:#fff;border:none;text-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 4px 12px #0003}#lbl-L2_left{background:linear-gradient(135deg,#6366f1,#3b82f6)}#lbl-G2_left{background:linear-gradient(135deg,#3b82f6,#06b6d4)}#lbl-C2{background:linear-gradient(135deg,#8b5cf6,#d946ef)}#lbl-G1{background:linear-gradient(135deg,#f43f5e,#fb923c)}#lbl-L2_right{background:linear-gradient(135deg,#10b981,#2dd4bf)}.crane-lbl{top:58.25%}.status-bar{height:64px;min-height:64px;background:var(--bg-base);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid #000000;display:flex;align-items:center;padding:0 21px;gap:24px;flex-shrink:0}.prog-selected{display:flex;align-items:center;gap:12px;font-family:Rajdhani,sans-serif;font-weight:600;font-size:11px;letter-spacing:1.5px;color:var(--text-secondary);text-transform:uppercase}.prog-selected .val-box{width:72px;background:var(--val-green-bg);color:var(--val-green-fg);border-color:#00ee8840}.status-sys-info{display:flex;align-items:center;gap:18px;flex:1}.status-tag{font-family:Share Tech Mono,monospace;font-size:16px;color:var(--text-dim);letter-spacing:1.5px}.status-tag span{color:var(--text-secondary)}.status-auto{color:var(--accent-green)!important;font-weight:700}.status-manual{color:var(--accent-amber)!important;font-weight:700}.conn-status{display:flex;align-items:center;gap:9px;font-family:Rajdhani,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;color:var(--text-secondary);text-transform:uppercase}.conn-dot{width:12px;height:12px;border-radius:50%;background:#64789680;transition:all .5s}.conn-dot.connected{background:var(--accent-green);box-shadow:var(--glow-green)}.conn-dot.simulation{background:var(--accent-amber);box-shadow:var(--glow-amber)}.conn-dot.error{background:var(--accent-red);box-shadow:var(--glow-red)}.nav-btn{height:56px;padding:0 24px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:6px;font-family:Rajdhani,sans-serif;font-weight:700;font-size:15px;cursor:default;letter-spacing:2px;color:var(--text-secondary);text-transform:uppercase;transition:all .2s ease;position:relative;overflow:hidden;box-shadow:var(--btn-shadow);display:flex;align-items:center;justify-content:center}.nav-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,212,255,.1),transparent);transition:left .4s ease}.nav-btn:hover{background:var(--btn-hover-bg);border-color:var(--accent-cyan);color:var(--accent-cyan)}.nav-btn:hover:before{left:100%}.nav-btn:active{transform:scale(.97)}.alarm-btn{background:var(--alarm-bg);border-color:var(--alarm-border);color:var(--alarm-color)}.alarm-btn:hover{background:var(--alarm-hover-bg);border-color:var(--accent-red);color:var(--accent-red)}.alarm-btn.alarm-active{background:var(--alarm-active-bg);border-color:var(--accent-red);color:var(--alarm-active-fg);box-shadow:var(--glow-red);animation:pulse-alarm 1.2s ease-in-out infinite}@keyframes pulse-alarm{0%,to{box-shadow:var(--glow-red)}50%{box-shadow:0 0 20px #f359,0 0 40px #f353}}.alarm-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;background:var(--accent-red);color:#fff;border-radius:8px;font-family:Share Tech Mono,monospace;font-size:9px;font-weight:700;padding:0 4px;margin-left:5px;vertical-align:middle;box-shadow:0 0 6px #ff335580;transition:all .3s ease}.alarm-btn.alarm-active .alarm-count{background:#fff;color:var(--accent-red);box-shadow:0 0 10px #fff}.ctrl-btn{height:44px;padding:0 20px;border:1px solid var(--btn-border);border-radius:4px;background:var(--btn-bg);color:var(--text-secondary);font-family:Rajdhani,sans-serif;font-weight:700;font-size:16px;letter-spacing:1.5px;cursor:default;transition:all .2s ease;text-transform:uppercase;box-shadow:var(--btn-shadow);display:flex;align-items:center;justify-content:center}.ctrl-btn:hover{background:var(--btn-hover-bg);color:var(--accent-blue);border-color:var(--accent-blue)}.ctrl-btn:active{transform:scale(.95)}.btn-program-selection{background:var(--prog-btn-bg);border:1px solid var(--btn-border);box-shadow:var(--btn-shadow);justify-content:center;color:var(--accent-cyan);border-radius:6px;display:flex;align-items:center;gap:12px;padding:0 18px;font-weight:600;letter-spacing:2px}.btn-program-selection:hover{background:var(--prog-btn-hover-bg);border-color:var(--accent-cyan);box-shadow:var(--glow-cyan);color:var(--accent-cyan)}.btn-program-selection .val-box{background:var(--val-blue-bg);border:1px solid var(--btn-border);color:var(--val-blue-fg);text-shadow:none;height:32px;min-width:44px;font-size:18px;border-radius:4px;transition:all .3s ease}.btn-program-selection:hover .val-box{background:var(--accent-cyan);color:var(--confirm-btn-fg);box-shadow:0 0 12px var(--accent-cyan)}.btn-pos:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:var(--glow-cyan)}.btn-op:hover{border-color:var(--accent-green);color:var(--accent-green);box-shadow:var(--glow-green)}.btn-stop:hover{border-color:var(--accent-red);color:var(--accent-red);box-shadow:var(--glow-red)}.btn-parking:hover{border-color:var(--accent-amber);color:var(--accent-amber);box-shadow:var(--glow-amber)}.estop-indicator{height:44px;padding:0 20px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:4px;color:var(--text-secondary);font-family:Rajdhani,sans-serif;font-weight:700;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;cursor:default;transition:all .2s ease;box-shadow:var(--btn-shadow);display:flex;align-items:center;justify-content:center}.alarm-panel{position:fixed;right:-470px;top:30px;bottom:0;width:450px;background:var(--alarm-panel-bg);border-left:1px solid var(--alarm-panel-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);z-index:100;box-shadow:-6px 0 45px #00000080}.alarm-panel.visible{right:0}.alarm-panel-header{display:flex;align-items:center;justify-content:space-between;background:var(--panel-title-bg);border-bottom:1px solid var(--panel-title-border);padding:12px 21px;font-family:Rajdhani,sans-serif;font-weight:700;font-size:19.5px;color:var(--accent-cyan);letter-spacing:3px;text-shadow:0 0 12px rgba(0,212,255,.4)}.ap-close{background:none;border:none;color:var(--text-secondary);cursor:default;font-size:21px;transition:color .15s;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:4px}.ap-close:hover{color:var(--accent-red);background:#ff33551a}.alarm-log-list{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin;scrollbar-color:rgba(0,212,255,.2) transparent}.alarm-log-list::-webkit-scrollbar{width:4px}.alarm-log-list::-webkit-scrollbar-thumb{background:#00d4ff33;border-radius:2px}.alarm-entry{display:flex;gap:9px;align-items:center;padding:8px 18px;border-bottom:1px solid var(--alarm-entry-border);font-size:15px}.alarm-time{font-family:Share Tech Mono,monospace;color:var(--text-secondary);min-width:81px}.alarm-machine{color:var(--text-primary);flex:1;font-family:Rajdhani,sans-serif;font-weight:600}.alarm-status{font-family:Rajdhani,sans-serif;font-weight:700;font-size:13.5px;padding:3px 9px;border-radius:4px;letter-spacing:.8px}.alarm-status.fault{background:var(--alarm-status-fault-bg);color:var(--alarm-status-fault-fg);border:1px solid var(--alarm-status-fault-border)}.alarm-status.clear{background:var(--alarm-status-clear-bg);color:var(--alarm-status-clear-fg);border:1px solid var(--alarm-status-clear-border)}.nav-modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;align-items:center;justify-content:center}.nav-modal.visible{display:flex}.nav-modal-box{position:relative;background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:15px;padding:42px 54px;min-width:800px;text-align:center;display:flex;flex-direction:column;gap:24px;box-shadow:var(--modal-shadow);animation:modal-in .25s cubic-bezier(.4,0,.2,1)}.modal-close{position:absolute;top:15px;right:15px;width:32px;height:32px;background:#0000001a;border:1px solid var(--border-subtle);color:var(--text-secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:default;z-index:10;transition:all .2s;font-size:16px}.modal-close:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red);transform:rotate(90deg)}.nav-modal-title{font-family:Rajdhani,sans-serif;font-size:30px;font-weight:700;color:var(--accent-cyan);letter-spacing:4.5px;text-align:center}@keyframes modal-in{0%{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modal-shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}50%{transform:translate(8px)}75%{transform:translate(-4px)}}.nav-modal-body{font-family:"Exo 2",sans-serif;font-size:18px;color:var(--text-secondary);line-height:1.7;max-height:70vh;overflow-y:auto;padding-right:10px}.detail-dialog{padding:10px}.detail-table{width:100%;border-collapse:collapse}.detail-table th{text-align:left;padding:10px 5px;border-bottom:2px solid var(--table-border);background:var(--table-header-bg);color:var(--text-primary);font-family:Rajdhani,sans-serif;letter-spacing:1px}.detail-table td{padding:8px 5px;border-bottom:1px solid var(--table-border);font-size:16px;color:var(--text-secondary)}.detail-footer{margin-top:25px;font-size:12px;color:#94a3b8;border-top:1px solid #f1f5f9;padding-top:10px;text-align:center}.status-gate-tracker{display:flex;align-items:center;gap:12px;flex:1.5;background:#00000040;border:1px solid var(--border-subtle);border-radius:4px;padding:2px 10px;height:34px}.sg-label{font-family:Rajdhani,sans-serif;font-weight:700;font-size:10px;letter-spacing:1px;color:var(--text-dim);border-right:1px solid var(--border-subtle);padding-right:10px;margin-right:4px;height:100%;display:flex;align-items:center}.sg-slots{display:flex;gap:4px;flex:1}.sg-slot{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a142880;border:1px solid rgba(255,255,255,.05);border-radius:2px;min-width:32px;transition:all .3s}.sg-slot span{font-size:8px;color:#444;font-family:Rajdhani,sans-serif;font-weight:600;line-height:1}.sg-slot .v{font-family:Share Tech Mono,monospace;font-size:11px;font-weight:700;color:var(--text-dim);line-height:1.2}.sg-slot.occupied{background:#00d4ff1a;border-color:#00d4ff4d}.sg-slot.occupied span{color:var(--accent-cyan)}.sg-slot.occupied .v{color:var(--accent-cyan);text-shadow:0 0 8px var(--accent-cyan)}.sg-slot.bin-only .v{color:var(--accent-amber)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:left}.detail-table{width:100%;border-collapse:collapse;margin:15px 0;font-family:Share Tech Mono,monospace}.detail-table th{text-align:left;color:#888;font-size:11px;padding:8px;border-bottom:1px solid #333}.detail-table td{padding:10px 8px;border-bottom:1px solid #222;font-size:14px}.detail-table tr:last-child td{border-bottom:none}.val-blue{color:#00d4ff;text-shadow:0 0 5px rgba(0,212,255,.3)}.val-green{color:#0fa;text-shadow:0 0 5px rgba(0,255,170,.3)}.status-run{color:#0fa;font-weight:700}.status-fault{color:#f34;font-weight:700;animation:blink 1s infinite}.detail-footer{font-size:10px;color:#555;text-align:center;margin-top:10px}.program-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;padding:10px 0}.prog-grid-btn{height:60px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:6px;color:var(--text-secondary);font-family:Rajdhani,sans-serif;font-weight:700;font-size:20px;cursor:default;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.prog-grid-btn:hover{background:var(--btn-hover-bg);border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:var(--glow-cyan);transform:translateY(-2px)}.prog-grid-btn.active{background:var(--accent-cyan);border-color:var(--accent-cyan);color:var(--confirm-btn-fg);box-shadow:var(--glow-cyan)}.btn-estop.estop-active{background:var(--btn-active-red-bg)!important;color:var(--btn-active-red-fg)!important;border-color:var(--btn-active-red-border)!important;border-width:2px!important;box-shadow:0 0 15px var(--btn-active-red-bg);animation:estop-blink-red .8s ease-in-out infinite}@keyframes estop-blink-red{0%,to{box-shadow:0 0 10px #ff00004d;border-color:var(--btn-active-red-bg)!important;transform:scale(1)}50%{box-shadow:0 0 20px #f009;border-color:var(--btn-active-red-border)!important;transform:scale(1.03);filter:brightness(1.15)}}.ctrl-btn.active-state{background:var(--btn-active-blue-bg)!important;color:var(--btn-active-blue-fg)!important;border-color:var(--btn-active-blue-border)!important;border-width:2px!important;box-shadow:0 0 10px var(--btn-active-blue-bg);animation:active-pulse-blue .8s ease-in-out infinite}.btn-stop.active-state{background:var(--btn-active-red-bg)!important;color:var(--btn-active-red-fg)!important;border-color:var(--btn-active-red-border)!important;border-width:2px!important;box-shadow:0 0 15px var(--btn-active-red-bg);animation:estop-blink-red .8s ease-in-out infinite!important}@keyframes active-pulse-blue{0%,to{box-shadow:0 0 8px #4ab0ff33;border-color:var(--btn-active-blue-bg)!important;transform:scale(1)}50%{box-shadow:0 0 15px #4ab0ff66;border-color:var(--btn-active-blue-border)!important;transform:scale(1.02);filter:brightness(1.1)}}@media screen and (max-width: 1024px){html,body{height:auto;overflow:auto}#app{height:auto;min-height:100dvh}.hdr{height:auto;min-height:auto;flex-wrap:wrap;padding:10px;gap:10px}.hdr-logo img{height:40px;width:40px}.hdr-system,.hdr-title,.hdr-sep{display:none}.hdr-nav{border-right:none;margin-right:0;padding-right:0;width:100%;justify-content:center;order:4}.nav-btn{height:40px;font-size:12px;padding:0 12px}.hdr-datetime{margin-left:auto;display:flex;flex-direction:row;align-items:baseline;gap:10px}#hdr-date{font-size:11px;color:var(--text-secondary);opacity:.8;letter-spacing:.5px}#hdr-time{font-size:15px;color:var(--accent-cyan);font-weight:700;text-shadow:0 0 8px rgba(0,212,255,.4)}.machine-row{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:10px;gap:10px;-webkit-overflow-scrolling:touch}.machine-row::-webkit-scrollbar{height:6px}.machine-row::-webkit-scrollbar-thumb{background:#00d4ff4d;border-radius:3px}.machine-panel{flex:0 0 auto;width:260px;scroll-snap-align:start}#scene-wrap{min-height:250px}.clabel{font-size:10px;padding:2px 6px;letter-spacing:1px}.status-bar{flex-wrap:wrap;height:auto;padding:10px;gap:10px;justify-content:space-between}.status-sys-info{order:-1;width:100%;justify-content:space-between}.btn-program-selection{font-size:12px;padding:0 10px;height:36px}.btn-program-selection .val-box{height:26px;min-width:32px;font-size:14px}.status-controls{width:100%;flex-wrap:wrap;margin:0!important;gap:8px}.ctrl-btn,.estop-indicator{flex:1 1 30%;height:38px;font-size:12px;padding:0 5px;text-align:center}.nav-modal-box{min-width:0;width:92%;padding:20px}.nav-modal-title{font-size:20px}.detail-grid{grid-template-columns:1fr;gap:15px}.program-grid{grid-template-columns:repeat(3,1fr)}.alarm-panel{width:100%;right:-100%}}@media screen and (max-width: 480px){.ctrl-btn,.estop-indicator{flex:1 1 45%}.program-grid{grid-template-columns:repeat(3,1fr)}}[data-theme=modern]{--bg-base: #f0f4ff;--bg-panel: #ffffff;--bg-glass: rgba(255, 255, 255, .85);--bg-card: #ffffff;--accent-cyan: #4f46e5;--accent-red: #ef4444;--accent-green: #10b981;--border-subtle: rgba(79, 70, 229, .1);--border-glow: rgba(79, 70, 229, .2);--text-primary: #1e293b;--text-secondary: #475569;--text-dim: #94a3b8;--val-blue-bg: rgba(59, 130, 246, .08);--val-blue-fg: #2563eb;--val-green-bg: rgba(16, 185, 129, .08);--val-green-fg: #059669;--val-amber-bg: rgba(245, 158, 11, .08);--val-amber-fg: #d97706;--val-amber-border: rgba(245, 158, 11, .2);--val-gray-bg: #f8fafc;--val-gray-fg: #64748b;--glow-cyan: 0 4px 12px rgba(79, 70, 229, .15);--glow-green: 0 4px 12px rgba(16, 185, 129, .15);--glow-red: 0 4px 12px rgba(239, 44, 68, .15);--glow-amber: 0 4px 12px rgba(245, 158, 11, .15);--btn-bg: #ffffff;--btn-border: #e2e8f0;--btn-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, .05) 0%, rgba(59, 130, 246, .05) 100%);--btn-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);--modal-bg: rgba(255, 255, 255, .98);--modal-border: rgba(79, 70, 229, .15);--modal-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04), 0 0 40px rgba(79, 70, 229, .05);--panel-title-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);--panel-title-fg: #ffffff;--panel-title-border: #4f46e5;--panel-title-shadow: 0 4px 10px rgba(79, 70, 229, .2);--table-header-bg: #f8fafc;--table-border: #f1f5f9;--alarm-bg: #fef2f2;--alarm-border: #fee2e2;--alarm-color: #dc2626;--alarm-hover-bg: #fee2e2;--status-run-bg: #ecfdf5;--status-run-fg: #059669;--status-run-border: #d1fae5;--status-fault-bg: #fef2f2;--status-fault-fg: #dc2626;--status-fault-border: #fee2e2;--status-idle-bg: #f1f5f9;--status-idle-fg: #64748b;--status-idle-border: #e2e8f0;--btn-active-blue-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);--btn-active-blue-fg: #ffffff;--btn-active-blue-border: #4f46e5;--btn-active-red-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--btn-active-red-fg: #ffffff;--btn-active-red-border: #dc2626;--alarm-active-bg: #dc2626;--alarm-active-fg: #ffffff;--alarm-panel-bg: #ffffff;--alarm-panel-border: rgba(79, 70, 229, .1);--alarm-entry-border: #f1f5f9;--alarm-status-fault-bg: rgba(239, 44, 68, .1);--alarm-status-fault-fg: #dc2626;--alarm-status-fault-border: rgba(239, 44, 68, .2);--alarm-status-clear-bg: rgba(16, 185, 129, .1);--alarm-status-clear-fg: #059669;--alarm-status-clear-border: rgba(16, 185, 129, .2);--confirm-btn-fg: #ffffff;--green-btn-fg: #ffffff;--prog-btn-bg: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);--prog-btn-hover-bg: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%)}[data-theme=modern] .hdr{background:linear-gradient(90deg,#fff,#f0f4ff);border-bottom:2px solid rgba(79,70,229,.1)}[data-theme=modern] .hdr-title{background:linear-gradient(135deg,#4f46e5,#a855f7,#4f46e5);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:modern-title-shimmer 4s linear infinite}@keyframes modern-title-shimmer{to{background-position:200% center}}[data-theme=modern] .hdr-datetime{flex-direction:row;align-items:center;gap:10px;background:#4f46e50d;padding:5px 15px;border-radius:12px;border:1px solid rgba(79,70,229,.1);box-shadow:inset 0 0 10px #4f46e505}[data-theme=modern] .hdr-date{color:#6366f1;background:transparent;border:none;font-weight:600;padding:0;font-size:14px}[data-theme=modern] .hdr-time{color:#4f46e5;background:linear-gradient(135deg,#4f46e51a,#a855f71a);border:1px solid rgba(79,70,229,.2);padding:4px 12px;border-radius:8px;font-size:20px;box-shadow:0 4px 15px #4f46e526;position:relative;overflow:hidden}[data-theme=modern] .hdr-time:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skew(-20deg);animation:clock-shine 3s infinite}[data-theme=modern] .hdr-time .clock-sep{animation:clock-pulse 1.5s infinite;opacity:.8;margin:0 2px}@keyframes clock-pulse{0%,to{opacity:1;transform:scale(1.1)}50%{opacity:.3;transform:scale(.9)}}[data-theme=modern] .status-bar{background:linear-gradient(90deg,#f0f4ff,#fff);border-top:2px solid rgba(79,70,229,.1)}[data-theme=modern] .nav-btn:hover{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-color:#4f46e5;box-shadow:0 10px 15px -3px #4f46e54d}[data-theme=modern] .active-state{background:linear-gradient(135deg,#6366f1,#4f46e5)!important;color:#fff!important;border-color:#4f46e5!important;box-shadow:0 4px 12px #4f46e533!important}[data-theme=modern] .btn-stop.active-state{background:var(--btn-active-red-bg)!important;color:var(--btn-active-red-fg)!important;border-color:var(--btn-active-red-border)!important;box-shadow:0 0 15px var(--btn-active-red-bg);animation:modern-breathe-red .8s ease-in-out infinite!important}@keyframes modern-breathe-red{0%,to{box-shadow:0 0 10px #ef44444d;transform:scale(1)}50%{box-shadow:0 0 20px #ef444499;transform:scale(1.02)}}[data-theme=modern] #panel-L2_left{--card-color: #6366f1;--card-gradient: linear-gradient(135deg, #6366f1, #3b82f6)}[data-theme=modern] #panel-G2_left{--card-color: #3b82f6;--card-gradient: linear-gradient(135deg, #3b82f6, #06b6d4)}[data-theme=modern] #panel-C2{--card-color: #8b5cf6;--card-gradient: linear-gradient(135deg, #8b5cf6, #d946ef)}[data-theme=modern] #panel-G2_right{--card-color: #f43f5e;--card-gradient: linear-gradient(135deg, #f43f5e, #fb923c)}[data-theme=modern] #panel-L2_right{--card-color: #10b981;--card-gradient: linear-gradient(135deg, #10b981, #2dd4bf)}[data-theme=modern] .machine-panel{border-top:3px solid var(--card-color);box-shadow:0 10px 15px -3px #0000000d}[data-theme=modern] .mp-title{background:var(--card-gradient);border-bottom:1px solid rgba(255,255,255,.1);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.1)}[data-theme=modern] #app{background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.03) 0%,transparent 70%),linear-gradient(rgba(99,102,241,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.05) 1px,transparent 1px),#f8faff;background-size:100% 100%,40px 40px,40px 40px;animation:modern-bg-move 60s linear infinite}@keyframes modern-bg-move{0%{background-position:0 0,0 0,0 0}to{background-position:0 0,40px 40px,40px 40px}}[data-theme=modern] .mp-fields{background:linear-gradient(135deg,transparent 0%,rgba(99,102,241,.01) 45%,rgba(168,85,247,.03) 50%,rgba(99,102,241,.01) 55%,transparent 100%);background-size:200% 200%;animation:modern-holo 10s ease infinite}@keyframes modern-holo{0%{background-position:0% 0%}50%{background-position:100% 100%}to{background-position:0% 0%}}[data-theme=modern] .active-state{animation:modern-breathe 2s ease-in-out infinite}[data-theme=modern] .status-box.status-run{animation:modern-breathe-green 3s ease-in-out infinite}@keyframes modern-breathe{0%,to{box-shadow:0 4px 12px #4f46e533}50%{box-shadow:0 4px 20px #4f46e580,0 0 10px #4f46e533}}@keyframes modern-breathe-green{0%,to{box-shadow:0 2px 8px #10b9811a}50%{box-shadow:0 4px 15px #10b9814d,0 0 8px #10b9811a}}[data-theme=modern] .val-box{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-color:#4f46e514}.val-changed{animation:val-flash .6s ease-out}@keyframes val-flash{0%{background-color:#4f46e54d;transform:scale(1.05)}to{background-color:transparent;transform:scale(1)}}.ripple-effect{position:absolute;border-radius:50%;background:#fff6;transform:scale(0);animation:ripple-animation .6s linear;pointer-events:none;z-index:10}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}[data-theme=modern] .ripple-effect{background:#6366f166}@keyframes clock-shine{0%{left:-100%}20%{left:150%}to{left:150%}}[data-theme=modern] button.ctrl-btn.btn-stop.active-state,button.ctrl-btn.btn-stop.active-state{background:linear-gradient(135deg,#ef4444,#dc2626)!important;background-color:#dc2626!important;color:#fff!important;border-color:#f55!important;box-shadow:0 0 20px #dc262699!important;animation:modern-breathe-red .8s ease-in-out infinite!important}[data-theme=modern] .alarm-panel{background:#ffffffe6!important;border-left:1px solid rgba(79,70,229,.15)!important;box-shadow:-10px 0 50px #4f46e51a!important;-webkit-backdrop-filter:blur(30px)!important;backdrop-filter:blur(30px)!important;top:0!important}[data-theme=modern] .alarm-panel-header{background:linear-gradient(135deg,#6366f1,#4f46e5)!important;color:#fff!important;text-shadow:0 2px 4px rgba(0,0,0,.1)!important;padding:18px 24px!important;border-bottom:none!important}[data-theme=modern] .ap-close{color:#fffc!important}[data-theme=modern] .ap-close:hover{color:#fff!important;background:#ffffff1a!important}[data-theme=modern] .alarm-time{color:#6366f1!important}[data-theme=modern] .alarm-machine{color:#1e293b!important}[data-theme=modern] .alarm-log-list::-webkit-scrollbar-thumb{background:#6366f133!important}.notif-filter-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 25px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.05);gap:20px;flex-wrap:wrap}[data-theme=modern] .notif-filter-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0}[data-theme=light] .notif-filter-bar{background:#f1f5f9;border-bottom:1px solid #e2e8f0}.filter-group{display:flex;gap:8px}.filter-btn{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--text-dim);padding:6px 16px;border-radius:6px;font-family:Rajdhani,sans-serif;font-weight:700;font-size:13px;cursor:default;transition:all .2s ease;letter-spacing:.5px}.filter-btn:hover{background:#ffffff0d;color:var(--text-primary)}.filter-btn.active{background:var(--accent-cyan);border-color:var(--accent-cyan);color:#000}[data-theme=modern] .filter-btn,[data-theme=light] .filter-btn{border-color:#e2e8f0;color:#64748b}[data-theme=modern] .filter-btn:hover,[data-theme=light] .filter-btn:hover{background:#f1f5f9;color:#1e293b}[data-theme=modern] .filter-btn.active{background:#4f46e5;border-color:#4f46e5;color:#fff}[data-theme=light] .filter-btn.active{background:#0284c7;border-color:#0284c7;color:#fff}.search-group{position:relative;flex:1;min-width:250px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.5}#notif-search{width:100%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:8px 12px 8px 36px;border-radius:6px;color:var(--text-primary);font-family:inherit;font-size:14px;outline:none;transition:all .2s}#notif-search:focus{border-color:var(--accent-cyan);background:#ffffff14;box-shadow:0 0 0 3px #00d4ff1a}[data-theme=modern] #notif-search,[data-theme=light] #notif-search{background:#fff;border-color:#e2e8f0;color:#1e293b}[data-theme=modern] #notif-search:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51a}[data-theme=light] #notif-search:focus{border-color:#0284c7;box-shadow:0 0 0 3px #0284c71a}.notif-table-container{max-height:55vh;overflow-y:auto;margin-top:10px;border-radius:8px;background:#0000001a;scrollbar-width:thin}[data-theme=modern] .notif-table-container,[data-theme=light] .notif-table-container{background:#fff;border:1px solid #e2e8f0}.notif-table{width:100%;border-collapse:collapse;text-align:left}.notif-table th{background:#ffffff08;padding:12px 18px;font-family:Rajdhani,sans-serif;font-weight:700;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;position:sticky;top:0;z-index:10}[data-theme=modern] .notif-table th,[data-theme=light] .notif-table th{background:#f8fafc;color:#64748b;border-bottom:1px solid #e2e8f0}.notif-table td{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;vertical-align:middle}[data-theme=modern] .notif-table td,[data-theme=light] .notif-table td{border-bottom:1px solid #f1f5f9;color:#334155}.notif-row-error{background:#ff335505}.notif-row-warning{background:#ffaa0005}.notif-level-badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:800;text-transform:uppercase}.badge-ERROR{background:#f353;color:#f57;border:1px solid rgba(255,51,85,.3)}.badge-WARNING{background:#fa03;color:#fb3;border:1px solid rgba(255,170,0,.3)}.badge-INFO{background:#00d4ff33;color:#3cf;border:1px solid rgba(0,212,255,.3)}[data-theme=modern] .badge-ERROR,[data-theme=light] .badge-ERROR{background:#fee2e2;color:#b91c1c;border:none}[data-theme=modern] .badge-WARNING,[data-theme=light] .badge-WARNING{background:#fef3c7;color:#b45309;border:none}[data-theme=modern] .badge-INFO,[data-theme=light] .badge-INFO{background:#e0f2fe;color:#0369a1;border:none}.notif-time{font-family:Share Tech Mono,monospace;font-size:13px;color:var(--text-dim)}.notif-source{font-weight:700;color:var(--accent-cyan)}[data-theme=modern] .notif-source{color:#4f46e5}[data-theme=light] .notif-source{color:#0284c7}.notif-msg{line-height:1.4}