@keyframes diag-spin{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes diag-flow{to{stroke-dashoffset:-20}}@keyframes diag-hint-fade{0%{opacity:0}15%,70%{opacity:1}to{opacity:0;pointer-events:none}}@keyframes diag-fade-in{0%{opacity:0}to{opacity:1}}@keyframes diag-modal-in{0%{transform:scale(.9) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes diag-status-pulse{0%,to{opacity:1}50%{opacity:.5}}:root{--diag-bg:#0f172a;--diag-bg-secondary:#1e293b;--diag-accent:#06b6d4;--diag-accent-glow:rgba(6, 182, 212, 0.4);--diag-text:#f1f5f9;--diag-text-secondary:#94a3b8;--diag-border:rgba(255, 255, 255, 0.08);--diag-radius:12px;--diag-transition:0.25s cubic-bezier(0.4, 0, 0.2, 1)}body,html{margin:0;padding:0}body.diag-page{font-family:"Inter",system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#0f172a 0,#1e293b 50%,#0f172a 100%);background-attachment:fixed;color:var(--diag-text);width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}.diag-header{background:rgba(15,23,42,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 1px 20px rgba(0,0,0,.4);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;flex-shrink:0;min-height:48px}.diag-header-left{display:flex;align-items:center;gap:14px;min-width:0}.text-cyan-arrow{color:#22d3ee;transition:all var(--diag-transition);display:flex;align-items:center;flex-shrink:0;padding:6px;border-radius:10px;background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.15)}.text-cyan-arrow:hover{color:#67e8f9;background:rgba(6,182,212,.18);transform:translateX(-2px)}.text-cyan-arrow svg{width:22px;height:22px}.diag-header-logo{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);object-fit:contain}.diag-header-title{font-size:1.05rem;font-weight:700;background:linear-gradient(135deg,#22d3ee,#06b6d4,#0891b2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;white-space:nowrap}.diag-header-subtitle{font-size:.68rem;color:var(--diag-text-secondary);margin-top:1px;opacity:.7}.diag-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.diag-model-selector{display:flex;background:rgba(15,23,42,.5);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:3px}.diag-model-tab{padding:5px 14px;border-radius:8px;font-size:12px;font-weight:600;color:#64748b;text-decoration:none;transition:all var(--diag-transition);letter-spacing:.02em}.diag-model-tab:hover{color:#cbd5e1}.diag-model-tab.active{background:linear-gradient(135deg,#06b6d4 0,#0369a1 100%);color:#fff;box-shadow:0 2px 10px rgba(6,182,212,.35)}.diag-btn-back,.diag-btn-energize{display:flex;align-items:center;border-radius:10px;cursor:pointer}.diag-btn-energize{justify-content:center;gap:7px;width:240px;height:36px;padding:0 16px;font-weight:700;font-size:.78rem;border:0;transition:box-shadow .3s ease;white-space:nowrap;letter-spacing:.01em;overflow:hidden;flex-shrink:0}.diag-btn-energize.off{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 0 12px rgba(22,163,74,.35)}.diag-btn-energize.off:hover{box-shadow:0 0 24px rgba(22,163,74,.55)}.diag-btn-energize.on{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 0 15px rgba(239,68,68,.45)}.diag-btn-energize.on:hover{box-shadow:0 0 30px rgba(239,68,68,.7)}.diag-btn-back{gap:6px;padding:8px 16px;font-weight:600;font-size:.8rem;border:1px solid rgba(255,255,255,.12);background:rgba(30,41,59,.8);color:var(--diag-text-secondary);transition:all var(--diag-transition);text-decoration:none}.diag-btn-back:hover{background:rgba(6,182,212,.12);border-color:var(--diag-accent-glow);color:#22d3ee}.diag-canvas,.diag-canvas-wrapper{position:relative;background:#020617}.diag-canvas-wrapper{flex:1;overflow:hidden;cursor:grab}.diag-canvas-wrapper:active{cursor:grabbing}.diag-canvas{transform-origin:0 0}.diag-zoom-controls:hover{opacity:1}.diag-zoom-btn{border:0;background:rgba(255,255,255,.04);color:var(--diag-text-secondary);transition:all var(--diag-transition)}.diag-zoom-btn:hover{background:rgba(6,182,212,.2)}.diag-zoom-btn:active{transform:scale(.92)}.diag-node,.diag-node-icon{display:flex;align-items:center;justify-content:center}.diag-node{position:absolute;flex-direction:column;text-align:center;font-size:10.5px;font-weight:500;padding:4px 6px;border-width:1.5px;border-style:solid;border-radius:8px;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .2s ease;transform:translate(-50%,-50%);z-index:5;line-height:1.2;word-break:break-word;background:rgba(15,23,42,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);letter-spacing:.01em}.diag-node:hover{transform:translate(-50%,-50%) scale(1.1);z-index:10;border-width:2px}.diag-node:active{transform:translate(-50%,-50%) scale(.97)}.diag-node.selected{box-shadow:0 0 0 3px rgba(6,182,212,.4),0 0 25px rgba(6,182,212,.25);transform:translate(-50%,-50%) scale(1.1);z-index:10}.diag-node.motor{border-radius:50%;border-width:2px;font-weight:600}.diag-node.color-red{border-color:#ef4444;color:#fca5a5}.diag-node.color-red:hover{box-shadow:0 0 18px rgba(239,68,68,.3)}.diag-node.color-red.highlight{background:rgba(239,68,68,.12)}.diag-node.color-red-bold{border-color:#dc2626;color:#fca5a5;font-weight:700;background:rgba(239,68,68,.1)}.diag-node.color-red-bold:hover{box-shadow:0 0 20px rgba(220,38,38,.4)}.diag-node.color-yellow{border-color:#eab308;color:#fde68a}.diag-node.color-yellow:hover{box-shadow:0 0 16px rgba(234,179,8,.25)}.diag-node.color-yellow.highlight{background:rgba(234,179,8,.1)}.diag-node.color-green{border-color:#22c55e;color:#86efac}.diag-node.color-green:hover{box-shadow:0 0 16px rgba(34,197,94,.25)}.diag-node.color-green.highlight{background:rgba(34,197,94,.1)}.diag-node.color-green-bold{border-color:#16a34a;color:#86efac;font-weight:700;background:rgba(34,197,94,.08)}.diag-node.color-purple{border-color:#a855f7;color:#d8b4fe}.diag-node.color-purple:hover{box-shadow:0 0 16px rgba(168,85,247,.25)}.diag-node.color-purple.highlight{background:rgba(168,85,247,.1)}.diag-node.color-blue{border-color:#3b82f6;color:#93c5fd}.diag-node.color-blue:hover{box-shadow:0 0 16px rgba(59,130,246,.25)}.diag-node.color-blue.highlight{background:rgba(59,130,246,.1)}.diag-node.color-cyan{border-color:#06b6d4;color:#67e8f9}.diag-node.color-cyan:hover{box-shadow:0 0 16px rgba(6,182,212,.3)}.diag-node.color-gray{border-color:#4b5563;color:#d1d5db}.diag-node.color-gray:hover{box-shadow:0 0 14px rgba(107,114,128,.2)}.diag-node.color-slate{border-color:#475569;color:#cbd5e1}.diag-node.color-slate.motor{border-color:#334155;background:rgba(51,65,85,.4)}.diag-node.color-slate:hover{box-shadow:0 0 14px rgba(71,85,105,.3)}.diag-node-icon{gap:4px;width:100%}.diag-node-icon svg{flex-shrink:0}.diag-node-label{white-space:pre-wrap;line-height:1.15;font-weight:500;width:100%;text-align:center}.diag-spin{animation:diag-spin 1.5s linear infinite}.diag-flow-fast{stroke-dasharray:6 6;animation:diag-flow .4s linear infinite}.diag-flow-med,.diag-flow-slow{stroke-dasharray:6 6;animation:diag-flow .8s linear infinite}.diag-flow-slow{animation:diag-flow 1.5s linear infinite}.diag-stroke-red{stroke:#ef4444}.diag-stroke-yellow{stroke:#eab308}.diag-stroke-green{stroke:#22c55e}.diag-stroke-purple{stroke:#a855f7}.diag-stroke-blue{stroke:#3b82f6}.diag-stroke-cyan{stroke:#06b6d4}.diag-text-red{fill:#ef4444}.diag-text-yellow{fill:#eab308}.diag-text-green{fill:#22c55e}.diag-text-purple{fill:#a855f7}.diag-text-blue{fill:#3b82f6}.diag-text-cyan{fill:#06b6d4}svg path,svg polygon{fill:none!important}svg text{fill:currentColor!important}.diag-legend{background:rgba(15,23,42,.95);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px;z-index:100;font-size:.7rem;box-shadow:0 8px 32px rgba(0,0,0,.5);max-width:220px;position:absolute;bottom:20px;right:20px}.diag-zoom-controls{position:absolute;bottom:20px;left:20px;display:flex;flex-direction:column;gap:8px;z-index:1000}.diag-zoom-btn{width:44px;height:44px;background:rgba(15,23,42,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#f1f5f9;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px rgba(0,0,0,.4)}.diag-zoom-btn:hover{background:#1e293b;transform:scale(1.05);border-color:#38bdf8;color:#38bdf8}.diag-zoom-btn svg{width:22px;height:22px}.diag-hint{display:none}.diag-legend-title{font-weight:700;color:var(--diag-accent);margin-bottom:6px;font-size:.68rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}.diag-legend-title::after{content:"▾";font-size:.75rem;transition:transform .2s ease;opacity:.5}.diag-legend.collapsed .diag-legend-title::after{transform:rotate(-90deg)}.diag-legend-body{overflow:hidden;max-height:200px;transition:max-height .3s ease,opacity .25s ease;opacity:1}.diag-legend.collapsed .diag-legend-body{max-height:0;opacity:0}.diag-legend-item{display:flex;align-items:center;gap:8px;margin-bottom:4px}.diag-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.diag-hint-overlay{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:diag-hint-fade 3.5s ease forwards}.diag-hint-content{background:rgba(15,23,42,.85);backdrop-filter:blur(12px);border:1px solid rgba(6,182,212,.2);border-radius:16px;padding:16px 24px;text-align:center;color:var(--diag-text-secondary);font-size:.82rem;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:280px}.diag-hint-content svg{display:block;margin:0 auto 8px;color:var(--diag-accent);opacity:.7}.diag-hint-content span{color:var(--diag-accent);font-weight:600}.diag-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100;justify-content:center;align-items:center;padding:16px;animation:diag-fade-in .2s ease}.diag-modal-overlay.active{display:flex}.diag-modal{background:linear-gradient(160deg,rgba(30,41,59,.98),rgba(15,23,42,.98));border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.6),0 0 50px rgba(6,182,212,.08);max-width:440px;width:100%;padding:24px;position:relative;transform:scale(1);animation:diag-modal-in .3s cubic-bezier(.34,1.56,.64,1)}.diag-modal-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.05);color:var(--diag-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--diag-transition)}.diag-modal-close:hover{background:rgba(239,68,68,.15);color:#fca5a5;transform:rotate(90deg)}.diag-modal-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;margin-top:2px}.diag-modal-icon-wrap{padding:10px;border-radius:14px;border:1.5px solid;display:flex;align-items:center;justify-content:center;flex-shrink:0}.diag-modal-icon-wrap.red{border-color:#ef4444;background:rgba(239,68,68,.08);color:#fca5a5}.diag-modal-icon-wrap.yellow{border-color:#eab308;background:rgba(234,179,8,.08);color:#fde68a}.diag-modal-icon-wrap.green{border-color:#22c55e;background:rgba(34,197,94,.08);color:#86efac}.diag-modal-icon-wrap.purple{border-color:#a855f7;background:rgba(168,85,247,.08);color:#d8b4fe}.diag-modal-icon-wrap.blue{border-color:#3b82f6;background:rgba(59,130,246,.08);color:#93c5fd}.diag-modal-icon-wrap.cyan{border-color:#06b6d4;background:rgba(6,182,212,.08);color:#67e8f9}.diag-modal-icon-wrap.gray{border-color:#6b7280;background:rgba(107,114,128,.08);color:#d1d5db}.diag-modal-icon-wrap.slate{border-color:#475569;background:rgba(71,85,105,.08);color:#cbd5e1}.diag-modal-title{font-size:1.25rem;font-weight:700;color:#fff;line-height:1.25}.diag-modal-voltage{display:inline-block;margin-top:6px;font-size:.65rem;font-weight:600;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--diag-text-secondary);border:1px solid rgba(255,255,255,.06);letter-spacing:.02em}.diag-modal-body{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:14px 16px;margin-top:6px}.diag-modal-body-title{font-size:.65rem;font-weight:700;color:var(--diag-text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.diag-modal-body-text{font-size:.88rem;color:var(--diag-text);line-height:1.6;font-weight:400}.diag-modal-btn{margin-top:16px;width:100%;padding:10px;border-radius:12px;border:0;font-weight:700;font-size:.85rem;cursor:pointer;background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;box-shadow:0 4px 15px rgba(6,182,212,.25);transition:all .3s ease;letter-spacing:.02em}.diag-modal-btn:hover{box-shadow:0 6px 24px rgba(6,182,212,.45);transform:translateY(-1px)}.diag-modal-btn:active{transform:translateY(0) scale(.98)}.diag-status-bar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:20;background:rgba(15,23,42,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:8px 18px;font-size:.7rem;color:var(--diag-text-secondary);box-shadow:0 8px 32px rgba(0,0,0,.35);opacity:.7;transition:opacity .3s ease;pointer-events:none;white-space:nowrap}.diag-status-bar:hover{opacity:1}.diag-status-indicator{display:flex;align-items:center;gap:5px}.diag-status-dot{width:6px;height:6px;border-radius:50%;background:#6b7280}.diag-status-dot.active{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5);animation:diag-status-pulse 1.5s ease-in-out infinite}.diag-status-separator{width:1px;height:14px;background:rgba(255,255,255,.1)}@media (max-width:768px){.diag-header{padding:6px 10px;min-height:40px}.diag-header-left{gap:8px}.text-cyan-arrow{padding:4px}.text-cyan-arrow svg{width:18px;height:18px}.diag-header-title{font-size:.8rem}.diag-header-subtitle{font-size:.58rem;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.diag-model-selector{padding:2px}.diag-model-tab{padding:3px 8px;font-size:10px}.diag-btn-energize{width:180px;height:30px;padding:0 8px;font-size:.65rem;gap:4px;border-radius:8px}.diag-btn-energize svg{width:13px;height:13px;flex-shrink:0}.diag-zoom-controls{bottom:12px;left:10px;padding:4px;gap:4px;border-radius:10px}.diag-zoom-btn{width:28px;height:28px;border-radius:6px}.diag-zoom-btn svg{width:14px;height:14px}.diag-legend{bottom:8px;right:8px;padding:6px 10px;font-size:.58rem;max-width:160px;border-radius:10px}.diag-legend-title{font-size:.6rem}.diag-modal{padding:16px;max-width:95vw;border-radius:16px}.diag-modal-title{font-size:1.1rem}.diag-modal-body-text{font-size:.82rem}.diag-status-bar{display:none}.diag-hint-content{font-size:.72rem;padding:12px 18px}}@media (max-width:480px){.diag-btn-energize span,.diag-header-subtitle{display:none}.diag-header-title{font-size:.72rem}.diag-btn-energize{width:36px;height:30px;padding:0;gap:0}.diag-legend{bottom:6px;right:6px;padding:5px 8px;font-size:.55rem}}.action-btn-locked{position:relative;opacity:.45;pointer-events:none;cursor:not-allowed!important}.action-btn-locked .lock-badge{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:4px;font-size:.65rem;color:#94a3b8;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.action-btn-unlocked{pointer-events:auto;opacity:1;cursor:pointer!important}