:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #21262d;--bg-elevated: #30363d;--bg-overlay: rgba(0, 0, 0, .7);--text-primary: #f0f6fc;--text-secondary: #8b949e;--text-tertiary: #6e7681;--text-link: #58a6ff;--border-primary: #30363d;--border-secondary: #21262d;--border-active: #58a6ff;--accent-blue: #58a6ff;--accent-blue-hover: #79b8ff;--accent-green: #3fb950;--accent-green-hover: #56d364;--accent-purple: #a371f7;--accent-purple-hover: #bc8cff;--accent-orange: #d29922;--accent-orange-hover: #e3b341;--accent-red: #f85149;--accent-red-hover: #ff7b72;--accent-cyan: #39c5cf;--accent-pink: #db61a2;--server-color: #58a6ff;--network-color: #3fb950;--virtualization-color: #a371f7;--storage-color: #d29922;--service-color: #39c5cf;--annotation-color: #8b949e;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-glow-blue: 0 0 20px rgba(88, 166, 255, .4);--shadow-glow-green: 0 0 20px rgba(63, 185, 80, .4);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--header-height: 56px;--palette-width: 260px;--properties-width: 300px;--status-height: 28px}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f6f8fa;--bg-tertiary: #eaeef2;--bg-elevated: #ffffff;--bg-overlay: rgba(255, 255, 255, .9);--text-primary: #1f2328;--text-secondary: #656d76;--text-tertiary: #8c959f;--text-link: #0969da;--border-primary: #d0d7de;--border-secondary: #e6e8eb;--border-active: #0969da;--accent-blue: #0969da;--accent-blue-hover: #0550ae;--accent-green: #1a7f37;--accent-purple: #8250df;--accent-orange: #bf8700;--accent-red: #cf222e;--accent-cyan: #0d8282;--accent-pink: #bf3989;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .15);--shadow-glow-blue: 0 0 20px rgba(9, 105, 218, .2)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh;width:100vw}::selection{background:var(--accent-blue);color:#fff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.app-header{height:var(--header-height);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-md);z-index:100;flex-shrink:0}.logo{display:flex;align-items:center;gap:var(--spacing-sm)}.logo-icon{width:28px;height:28px;color:var(--accent-blue)}.logo-text{font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-text-container{display:flex;align-items:center}.logo-text-input{font-family:inherit;font-size:1.25rem;font-weight:700;color:var(--text-primary);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:0 4px;outline:none;min-width:150px;transition:all var(--transition-fast)}.logo-text-input:hover{border-color:var(--border-primary);background:var(--bg-tertiary)}.logo-text-input:focus{border-color:var(--accent-blue);background:var(--bg-tertiary);box-shadow:0 0 0 2px #58a6ff33}.toolbar{display:flex;align-items:center;gap:var(--spacing-xs)}.toolbar-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:.875rem;font-family:inherit}.toolbar-btn svg{width:18px;height:18px}.toolbar-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.toolbar-btn:active{transform:scale(.96)}.toolbar-btn:disabled{opacity:.4;pointer-events:none}.toolbar-divider{width:1px;height:24px;background:var(--border-primary);margin:0 var(--spacing-sm)}.tool-selector{position:absolute;top:var(--spacing-md);left:50%;transform:translate(-50%);display:flex;background:#161b22d9;border:1px solid var(--border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;padding:4px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.selector-items{display:flex;align-items:center;gap:4px}.selector-divider{width:1px;height:24px;background:var(--border-primary);margin:0 4px}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);min-width:75px}.tool-btn svg{width:20px;height:20px}.tool-btn span{font-size:.75rem;font-weight:500}.tool-btn:hover{background:#ffffff0d;color:var(--text-primary)}.tool-btn.active{background:var(--bg-tertiary);color:var(--accent-blue);box-shadow:0 0 12px #58a6ff1a;border-color:#58a6ff33}.tool-btn.active[data-type=wireless]{color:var(--accent-purple);border-color:#a371f733}.tool-btn.active[data-type=fiber]{color:var(--accent-orange);border-color:#d2992233}.tool-btn.active[data-type=usb]{color:var(--accent-cyan);border-color:#39c5cf33}.tool-btn[data-type=ethernet] svg{color:var(--accent-blue)}.tool-btn[data-type=wireless] svg{color:var(--accent-purple)}.tool-btn[data-type=fiber] svg{color:var(--accent-orange)}.tool-btn[data-type=usb] svg{color:var(--accent-cyan)}.zoom-level{font-family:var(--font-mono);font-size:.75rem;color:var(--text-tertiary);min-width:48px;text-anchor:middle;text-align:center}.header-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.btn-theme{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn-theme svg{width:18px;height:18px;color:var(--text-secondary);transition:all var(--transition-fast)}.btn-theme:hover{background:var(--bg-tertiary);border-color:var(--border-active)}.btn-theme:hover svg{color:var(--accent-orange)}.btn-theme .moon-icon,[data-theme=light] .btn-theme .sun-icon{display:none}[data-theme=light] .btn-theme .moon-icon{display:block}.app-main{flex:1;display:flex;overflow:hidden}.palette{width:var(--palette-width);background:var(--bg-secondary);border-right:1px solid var(--border-primary);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.palette-header{padding:var(--spacing-md);border-bottom:1px solid var(--border-primary);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}.palette-toggle{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.palette-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary)}.palette-toggle svg{width:16px;height:16px}.palette.collapsed{width:42px}.palette.collapsed .palette-header{padding:var(--spacing-sm);justify-content:center}.palette.collapsed .palette-header h2,.palette.collapsed .palette-search,.palette.collapsed .palette-content{display:none}.palette.collapsed .palette-toggle svg{transform:rotate(180deg)}.palette-header h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:var(--spacing-sm)}.palette-search{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:.875rem;outline:none;transition:all var(--transition-fast)}.palette-search::placeholder{color:var(--text-tertiary)}.palette-search:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #58a6ff33}.palette-content{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.palette-section{margin-bottom:var(--spacing-sm);border-radius:var(--radius-md);overflow:hidden}.palette-section-header{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;color:var(--text-secondary);font-family:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);text-align:left}.palette-section-header svg{width:16px;height:16px;transition:transform var(--transition-fast)}.palette-section-header:hover{color:var(--text-primary);background:var(--bg-tertiary)}.palette-section.collapsed .palette-section-header svg{transform:rotate(-90deg)}.palette-section.collapsed .palette-items{display:none}.palette-section[data-section=hardware] .palette-section-header{color:var(--accent-blue)}.palette-section[data-section=hardware] .palette-section-header:hover{background:#58a6ff1a}.palette-section[data-section=hardware] .palette-item{border-left:2px solid var(--accent-blue)}.palette-section[data-section=v-os] .palette-section-header{color:var(--accent-purple)}.palette-section[data-section=v-os] .palette-section-header:hover{background:#a371f71a}.palette-section[data-section=v-os] .palette-item{border-left:2px solid var(--accent-purple)}.palette-section[data-section=network] .palette-section-header{color:var(--accent-green)}.palette-section[data-section=network] .palette-section-header:hover{background:#3fb9501a}.palette-section[data-section=network] .palette-item{border-left:2px solid var(--accent-green)}.palette-section[data-section=operating-system] .palette-section-header{color:var(--accent-orange)}.palette-section[data-section=operating-system] .palette-section-header:hover{background:#d299221a}.palette-section[data-section=operating-system] .palette-item{border-left:2px solid var(--accent-orange)}.palette-section[data-section=applications] .palette-section-header{color:var(--accent-cyan)}.palette-section[data-section=applications] .palette-section-header:hover{background:#39c5cf1a}.palette-section[data-section=applications] .palette-item{border-left:2px solid var(--accent-cyan)}.palette-section[data-section=user-devices] .palette-section-header{color:#ec4899}.palette-section[data-section=user-devices] .palette-section-header:hover{background:#ec48991a}.palette-section[data-section=user-devices] .palette-item{border-left:2px solid #ec4899}.palette-items{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xs);padding:var(--spacing-xs)}.palette-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-sm);background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius-md);cursor:grab;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.palette-item:hover{background:var(--bg-elevated);border-color:var(--border-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.palette-item:active{cursor:grabbing;transform:scale(.95)}.palette-item span{font-size:.6875rem;color:var(--text-secondary);text-align:center;line-height:1.3}.canvas-container{flex:1;position:relative;overflow:hidden;touch-action:none;background:var(--bg-primary);background-image:linear-gradient(var(--border-secondary) 1px,transparent 1px),linear-gradient(90deg,var(--border-secondary) 1px,transparent 1px),linear-gradient(var(--border-primary) 1px,transparent 1px),linear-gradient(90deg,var(--border-primary) 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px;background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px}.canvas-wrapper{position:absolute;width:100%;height:100%;left:0;top:0;cursor:grab;transform-origin:0 0;transition:cursor var(--transition-fast)}.canvas-wrapper.mode-connect{cursor:crosshair!important}.canvas-wrapper.mode-select{cursor:grab!important}.canvas-wrapper.mode-select:active{cursor:grabbing!important}.canvas-wrapper.panning{cursor:grabbing}.canvas-wrapper.connecting{cursor:crosshair}.canvas-grid{display:none}.connections-layer{position:absolute;top:-20000px;left:-20000px;width:40000px;height:40000px;pointer-events:none;z-index:2}.groups-layer{position:absolute;top:-20000px;left:-20000px;width:40000px;height:40000px;transform:translate(20000px,20000px);pointer-events:none;z-index:1}.nodes-layer{position:absolute;top:-20000px;left:-20000px;width:40000px;height:40000px;transform:translate(20000px,20000px);z-index:3;pointer-events:none}.canvas-overlay{position:absolute;inset:0;pointer-events:none;z-index:100}.grid-pattern{stroke:var(--border-secondary);stroke-width:.5}.grid-pattern.major{stroke:var(--border-primary);stroke-width:1}.properties-panel{width:var(--properties-width);background:var(--bg-secondary);border-left:1px solid var(--border-primary);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.properties-panel.collapsed{width:0;border-left:none}.panel-header{padding:var(--spacing-md);border-bottom:1px solid var(--border-primary);display:flex;align-items:center;justify-content:space-between}.panel-header h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}.panel-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast)}.panel-close svg{width:14px;height:14px}.panel-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.panel-content{flex:1;overflow-y:auto;padding:var(--spacing-md)}.empty-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--text-tertiary);padding:var(--spacing-xl)}.empty-panel svg{width:48px;height:48px;margin-bottom:var(--spacing-md);opacity:.5}.empty-panel p{font-size:.875rem;line-height:1.6}.property-group{margin-bottom:var(--spacing-lg)}.property-group-title{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--border-secondary)}.property-row{margin-bottom:var(--spacing-sm)}.property-label{display:block;font-size:.75rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.property-input{width:100%;padding:var(--spacing-sm);background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.8125rem;outline:none;transition:all var(--transition-fast)}.property-input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #58a6ff26}.property-input::placeholder{color:var(--text-tertiary)}textarea.property-input{resize:vertical;min-height:60px}.property-select{width:100%;padding:var(--spacing-sm);background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.8125rem;outline:none;cursor:pointer}.property-select:focus{border-color:var(--accent-blue)}.group-members-list{display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:300px;overflow-y:auto;margin-bottom:var(--spacing-sm)}.group-member-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.group-member-item:hover{background:var(--bg-primary);border-color:var(--border-secondary)}.member-name{font-size:.8125rem;color:var(--text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-remove-member{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;margin-left:var(--spacing-sm)}.btn-remove-member:hover{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.btn-remove-member svg{width:14px;height:14px}.property-color{width:100%;height:36px;padding:2px;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);cursor:pointer}.status-bar{height:var(--status-height);background:var(--bg-tertiary);border-top:1px solid var(--border-primary);display:flex;align-items:center;justify-content:space-between;padding:0 var(--spacing-md);font-size:.6875rem;color:var(--text-tertiary);flex-shrink:0}.status-left,.status-right{display:flex;align-items:center;gap:var(--spacing-md)}.status-center{flex:1;text-align:center}.status-item{font-family:var(--font-mono)}.context-menu{position:fixed;min-width:180px;background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-xs);z-index:1000;display:none}.context-menu.visible{display:block;animation:contextMenuIn .15s ease}@keyframes contextMenuIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-item{width:100%;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.8125rem;text-align:left;cursor:pointer;transition:all var(--transition-fast)}.context-item svg{width:16px;height:16px;color:var(--text-tertiary)}.context-item:hover{background:var(--accent-blue);color:#fff}.context-item:hover svg{color:#fff}.context-item kbd{margin-left:auto;font-family:var(--font-mono);font-size:.6875rem;color:var(--text-tertiary);background:var(--bg-tertiary);padding:2px 6px;border-radius:var(--radius-sm)}.context-item:hover kbd{background:#fff3;color:#fffc}.context-divider{height:1px;background:var(--border-primary);margin:var(--spacing-xs) 0}.context-submenu{position:relative}.submenu-arrow{width:12px!important;height:12px!important;margin-left:auto;opacity:.5}.context-submenu:hover .submenu-arrow{opacity:1}.context-submenu-panel{position:fixed;min-width:160px;background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--spacing-xs);z-index:1001;display:none;max-height:300px;overflow-y:auto}.context-submenu-panel.visible{display:block;animation:contextMenuIn .15s ease}.context-submenu-panel .context-item{font-size:.75rem}.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-overlay.visible{opacity:1;visibility:visible}.modal{width:90%;max-width:480px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);transform:scale(.95) translateY(20px);transition:transform var(--transition-normal)}.modal-overlay.visible .modal{transform:scale(1) translateY(0)}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-primary);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:1.125rem;font-weight:600}.modal-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast)}.modal-close svg{width:18px;height:18px}.modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.modal-content{padding:var(--spacing-lg);max-height:60vh;overflow-y:auto}.modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--border-primary);display:flex;justify-content:flex-end;gap:var(--spacing-sm)}.btn{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-primary{background:var(--accent-blue);color:#fff}.btn-primary:hover{background:var(--accent-blue-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-primary)}.btn-secondary:hover{background:var(--bg-elevated);border-color:var(--text-tertiary)}.btn-danger{background:var(--accent-red);color:#fff}.btn-danger:hover{background:var(--accent-red-hover)}.toast-container{position:fixed;bottom:calc(var(--status-height) + var(--spacing-md));right:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:1001}.toast{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:toastIn .3s ease;max-width:320px}@keyframes toastIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast.hiding{animation:toastOut .3s ease forwards}@keyframes toastOut{to{opacity:0;transform:translate(100%)}}.toast-icon{width:20px;height:20px;flex-shrink:0}.toast-icon.success{color:var(--accent-green)}.toast-icon.error{color:var(--accent-red)}.toast-icon.warning{color:var(--accent-orange)}.toast-icon.info{color:var(--accent-blue)}.toast-message{flex:1;font-size:.875rem;color:var(--text-primary)}.toast-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-tertiary);cursor:pointer;flex-shrink:0}.toast-close:hover{color:var(--text-primary)}.selection-box{position:absolute;background:#58a6ff1a;border:1px solid var(--accent-blue);pointer-events:none;z-index:100}.minimap{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);width:160px;height:120px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);z-index:50}.minimap-viewport{position:absolute;background:#58a6ff33;border:2px solid var(--accent-blue);cursor:move}@media(max-width:1200px){.properties-panel{width:260px}}@media(max-width:1024px){.palette{width:200px}.palette-items{grid-template-columns:1fr}.toolbar-btn span{display:none}}@media(max-width:768px){.palette{position:absolute;left:0;top:var(--header-height);bottom:var(--status-height);z-index:50;transform:translate(-100%);transition:transform var(--transition-normal)}.palette.open{transform:translate(0)}.properties-panel{position:absolute;right:0;top:var(--header-height);bottom:var(--status-height);z-index:50;transform:translate(100%);transition:transform var(--transition-normal)}.properties-panel.open{transform:translate(0)}}@media print{.app-header,.palette,.properties-panel,.status-bar,.context-menu,.modal-overlay,.toast-container{display:none!important}.canvas-container{position:static}.canvas-wrapper{transform:none!important;left:0;top:0}}.property-resource-group{margin-top:var(--spacing-md);padding:var(--spacing-sm);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-secondary)}.resource-row{margin-bottom:var(--spacing-sm)}.resource-row:last-child{margin-bottom:0}.resource-info{display:flex;justify-content:space-between;margin-bottom:4px;font-size:.75rem;font-family:var(--font-mono)}.resource-label{color:var(--text-secondary)}.resource-value{color:var(--text-primary);font-weight:600}.resource-bar-bg{height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden}.resource-bar-fill{height:100%;border-radius:3px;transition:width .3s ease}.resource-bar-fill.cpu{background:#3b82f6}.resource-bar-fill.ram{background:#ef4444}.resource-bar-fill.storage{background:#10b981}.spec-input-container{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.spec-header{display:flex;justify-content:space-between;align-items:center}.spec-numeric-input{width:40px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.75rem;padding:2px 6px;font-family:var(--font-mono);text-align:right;-webkit-appearance:none;appearance:none;-moz-appearance:textfield}.spec-numeric-input::-webkit-outer-spin-button,.spec-numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.spec-numeric-input:focus{border-color:var(--accent-blue);outline:none}.spec-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;outline:none}.spec-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text-primary);cursor:pointer;border:2px solid var(--accent-blue);box-shadow:0 0 5px #58a6ff80;transition:transform .1s ease}.spec-slider.cpu::-webkit-slider-thumb{border-color:#3b82f6;box-shadow:0 0 5px #3b82f680}.spec-slider.ram::-webkit-slider-thumb{border-color:#ef4444;box-shadow:0 0 5px #ef444480}.spec-slider.storage::-webkit-slider-thumb{border-color:#10b981;box-shadow:0 0 5px #10b98180}.spec-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.spec-unit{font-size:.7rem;color:var(--text-tertiary);margin-left:4px}@media(max-width:768px){.logo-text-input{width:120px;font-size:.95rem}.logo-icon{width:24px;height:24px}.toolbar{display:none!important}.mobile-menus{display:flex;gap:8px;margin-left:auto}.mobile-menu-btn{display:flex!important;width:36px;height:36px;padding:6px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer}.mobile-menu-btn svg{width:100%;height:100%}.mobile-dropdown{display:none;position:fixed;top:calc(var(--header-height) + 4px);right:8px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:140px;z-index:2100;overflow:hidden}.mobile-dropdown.visible{display:flex;flex-direction:column}.mobile-dropdown-item{background:none;border:none;padding:12px 16px;text-align:left;color:var(--text-primary);font-size:.95rem;cursor:pointer;border-bottom:1px solid var(--border-secondary)}.mobile-dropdown-item:last-child{border-bottom:none}.mobile-dropdown-item:hover,.mobile-dropdown-item:active{background:var(--bg-hover)}.fab-palette{display:flex!important;position:fixed;bottom:76px;right:12px;width:56px;height:56px;border-radius:50%;background:var(--accent-primary);color:#fff;border:none;box-shadow:var(--shadow-lg);z-index:2000;justify-content:center;align-items:center;cursor:pointer;transition:transform .2s,box-shadow .2s}.fab-palette:active{transform:scale(.92)}.fab-palette svg{width:28px;height:28px}.tool-selector{position:fixed;bottom:0;left:0;right:0;top:auto!important;transform:none!important;width:100%;height:auto;background:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:6px 4px;justify-content:space-evenly;gap:2px;z-index:1900}.selector-items{width:100%;justify-content:space-evenly;gap:2px}.tool-btn{min-width:44px;max-width:64px;padding:4px 2px;flex:1;flex-direction:column;gap:2px}.tool-btn .tool-icon{width:20px;height:20px}.tool-btn span{font-size:.6rem;line-height:1}.coordinates-display{display:block!important;position:fixed;bottom:80px;right:6px;font-size:.55rem;background:#0009;color:#ffffffe6;padding:3px 6px;border-radius:4px;z-index:1000;pointer-events:none;font-family:monospace}.palette{position:fixed;top:var(--header-height);left:0;bottom:0;width:85%;max-width:320px;height:calc(100vh - var(--header-height));z-index:2500;box-shadow:var(--shadow-lg);transform:translate(-100%);transition:transform .3s ease}.palette.visible{transform:translate(0)}.palette.collapsed{transform:translate(-100%)}.palette-toggle{display:none}.palette-items{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}.palette-item{flex-direction:column!important;padding:8px 4px!important;min-height:auto;height:auto;gap:4px;cursor:grab}.palette-item:active{cursor:grabbing;transform:scale(.98)}.palette-item-icon{width:32px!important;height:32px!important;margin:0 auto}.palette-item-icon svg,.palette-item-icon i{width:24px!important;height:24px!important}.palette-item span{font-size:.65rem!important;text-align:center;line-height:1.1;white-space:normal;word-break:break-word}.palette-header h2{font-size:.7rem}.palette-search{font-size:.8rem;padding:6px 10px}.properties-panel{display:none!important}.properties-popup{display:block;position:fixed;inset:0;background:var(--bg-secondary);border-top:none;border-radius:0;box-shadow:none;z-index:3000;transform:translateY(100%);transition:transform .3s ease;max-height:100vh;overflow-y:auto}.properties-popup.visible{transform:translateY(0)}.properties-popup-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);position:sticky;top:0;z-index:1}.properties-popup-header h3{margin:0;font-size:1.05rem}.properties-popup-content{padding:16px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}.mobile-property-meta{margin-bottom:14px;padding:10px 12px;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);font-size:.8rem}.mobile-property-meta strong{color:var(--text-primary)}.mobile-property-grid{display:grid;grid-template-columns:1fr;gap:10px}.mobile-property-grid.two-col{grid-template-columns:1fr 1fr}.mobile-property-unit{color:var(--text-tertiary);font-size:.75rem;margin-left:4px}}@media(min-width:769px){.mobile-menus,.fab-palette,.coordinates-display,.properties-popup{display:none!important}.palette{transform:none!important}}.palette-item-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;position:relative}.palette-item-icon svg{width:24px;height:24px;color:var(--text-secondary)}.palette-item:hover .palette-item-icon svg{color:var(--accent-blue)}.server-icon,.nas-icon,.raspberry-pi-icon,.hardware-icon{background:transparent;border:none;display:flex;align-items:center;justify-content:center;background-repeat:no-repeat;background-position:center;background-size:contain}.server-icon{background-image:url(/Homelab-Studio/icons/hardware/mdi--server-outline.svg)}.server-icon:before{content:none}.nas-icon{background-image:url(/Homelab-Studio/icons/hardware/mdi--nas.svg)}.nas-icon:before{content:none}.raspberry-pi-icon{background-image:url(/Homelab-Studio/icons/hardware/devicon--raspberrypi.svg)}.raspberry-pi-icon:before,.raspberry-pi-icon:after{content:none}.hardware-icon{background-image:url(/Homelab-Studio/icons/devices/carbon--iot-platform.svg)}.hardware-icon:before{content:none}.router-icon,.switch-icon,.network-icon{width:32px;height:32px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;border:none}.router-icon{-webkit-mask-image:url(/Homelab-Studio/icons/hardware/router.svg);mask-image:url(/Homelab-Studio/icons/hardware/router.svg)}.switch-icon{-webkit-mask-image:url(/Homelab-Studio/icons/hardware/switch.svg);mask-image:url(/Homelab-Studio/icons/hardware/switch.svg);transform:scale(1.1)}.network-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='13' rx='2' ry='2'/%3E%3Cpath d='M16 7V4a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='13' rx='2' ry='2'/%3E%3Cpath d='M16 7V4a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3'/%3E%3C/svg%3E")}.modem-icon:before{content:"";width:10px;height:20px;background:var(--network-color);border-radius:2px}.os-icon{background:transparent;border:none;display:flex;align-items:center;justify-content:center}.os-icon:before{content:"";width:20px;height:20px;background:#f97316;border-radius:50%;position:relative}.os-icon:after{content:"";position:absolute;width:8px;height:8px;background:#ffffff4d;border-radius:50%;left:6px;top:6px}.service-icon{background:transparent;border:none;display:flex;align-items:center;justify-content:center}.service-icon:before{content:"";width:18px;height:18px;background:#14b8a6;border-radius:3px}.vm-icon,.container-icon,.hypervisor-icon,.kubernetes-icon{background:linear-gradient(135deg,#a371f733,#a371f71a);border:1px solid var(--virtualization-color)}.vm-icon:before{content:"";width:20px;height:16px;background:transparent;border:2px dashed var(--virtualization-color);border-radius:2px}.container-icon:before{content:"";width:18px;height:18px;background:transparent;border:2px solid var(--accent-cyan);border-radius:2px}.container-icon:after{content:"";position:absolute;width:6px;height:6px;background:var(--accent-cyan);border-radius:1px}.hypervisor-icon:before{content:"";width:24px;height:6px;background:var(--virtualization-color);border-radius:1px}.hypervisor-icon:after{content:"";position:absolute;width:6px;height:6px;background:var(--virtualization-color);bottom:6px;left:50%;transform:translate(-50%)}.kubernetes-icon:before{content:"";width:20px;height:20px;background:transparent;border:2px solid var(--accent-blue);transform:rotate(45deg)}.proxmox-icon,.proxmox_os-icon,.esxi-icon,.xcp_ng-icon,.xcp_ng_os-icon,.truenas-icon,.truenas_scale_os-icon,.harvester-icon,.ovirt-icon,.citrix-icon,.oracle-icon,.oracle_vm-icon,.opennebula-icon,.smartos-icon{width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;align-items:center;justify-content:center}.proxmox-icon,.proxmox_os-icon{background-image:url(/Homelab-Studio/icons/virtualization/cib--proxmox.svg)}.proxmox-icon:before,.proxmox_os-icon:before{content:none}.esxi-icon{background-image:url(/Homelab-Studio/icons/virtualization/lineicons--vmware.svg)}.esxi-icon:before{content:none}.xcp_ng-icon,.xcp_ng_os-icon{background-image:url(/Homelab-Studio/icons/virtualization/xcp-org.png)}.xcp_ng-icon:before,.xcp_ng_os-icon:before{content:none}.truenas-icon,.truenas_scale_os-icon{background-image:url(/Homelab-Studio/icons/virtualization/simple-icons--truenas.svg)}.truenas-icon:before,.truenas_scale_os-icon:before{content:none}.harvester-icon{background-image:url(/Homelab-Studio/icons/virtualization/devicon--harvester-wordmark.svg)}.harvester-icon:before{content:none}.ovirt-icon{background-image:url(/Homelab-Studio/icons/virtualization/arcticons--movirt.svg)}.ovirt-icon:before{content:none}.citrix-icon{background-image:url(/Homelab-Studio/icons/virtualization/simple-icons--citrix.svg)}.citrix-icon:before{content:none}.oracle-icon,.oracle_vm-icon{background-image:url(/Homelab-Studio/icons/virtualization/lineicons--oracle.svg)}.oracle-icon:before,.oracle_vm-icon:before{content:none}.opennebula-icon{background-image:url(/Homelab-Studio/icons/virtualization/simple-icons--opennebula.svg)}.opennebula-icon:before{content:none}.smartos-icon{background-image:url(/Homelab-Studio/icons/virtualization/file-icons--smartos.svg)}.smartos-icon:before{content:none}.custom-v-os-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:relative}.custom-v-os-icon:before{content:"";width:20px;height:20px;background:#8b5cf6;border-radius:3px}.ubuntu-icon,.debian-icon,.windows-icon,.macos-icon,.centos-icon,.casaos-icon,.umbrel-icon,.yunohost-icon,.unraid-icon,.startos-icon,.omv-icon{width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;align-items:center;justify-content:center}.ubuntu-icon{background-image:url(/Homelab-Studio/icons/os/logos--ubuntu.svg)}.ubuntu-icon:before,.ubuntu-icon:after{content:none}.trash-icon:before,.trash-icon:after{content:none}.config-icon{width:12px;height:12px;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:flex;align-items:center;justify-content:center}.config-icon:before,.config-icon:after{content:none}.debian-icon{background-image:url(/Homelab-Studio/icons/os/logos--debian.svg)}.debian-icon:before{content:none}.windows-icon{background-image:url(/Homelab-Studio/icons/os/logos--microsoft-windows-icon.svg)}.windows-icon:before{content:none}.macos-icon{background-image:url("/Homelab-Studio/icons/os/wpf--macos(1).svg")}.macos-icon:before{content:none}.centos-icon{background-image:url(/Homelab-Studio/icons/os/devicon--centos.svg)}.centos-icon:before{content:none}.casaos-icon{background-image:url("/Homelab-Studio/icons/os/cbi--casaos(2).svg")}.casaos-icon:before{content:none}.umbrel-icon{background-image:url(/Homelab-Studio/icons/os/umbrelOS.png)}.umbrel-icon:before{content:none}.yunohost-icon{background-image:url(/Homelab-Studio/icons/os/devicon-plain--yunohost.svg)}.yunohost-icon:before{content:none}.unraid-icon{background-image:url(/Homelab-Studio/icons/os/simple-icons--unraid.svg)}.unraid-icon:before{content:none}.startos-icon{background-image:url(/Homelab-Studio/icons/virtualization/file-icons--smartos.svg)}.startos-icon:before{content:none}.omv-icon{background-image:url(/Homelab-Studio/icons/os/cbi--openmediavault.svg)}.omv-icon:before{content:none}.pihole-icon,.docker-icon,.plex-icon,.homeassistant-icon{width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;align-items:center;justify-content:center}.pihole-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--pihole.svg)}.pihole-icon:before{content:none}.docker-icon{background-image:url(/Homelab-Studio/icons/applications/material-icon-theme--docker.svg)}.docker-icon:before{content:none}.plex-icon{background-image:url(/Homelab-Studio/icons/applications/cib--plex.svg)}.plex-icon:before{content:none}.homeassistant-icon{background-image:url(/Homelab-Studio/icons/applications/vscode-icons--file-type-homeassistant.svg)}.homeassistant-icon:before{content:none}.hdd-icon,.ssd-icon,.raid-icon,.cloud-storage-icon{background:linear-gradient(135deg,#d2992233,#d299221a);border:1px solid var(--storage-color)}.hdd-icon:before{content:"";width:20px;height:20px;background:var(--storage-color);border-radius:50%}.hdd-icon:after{content:"";position:absolute;width:6px;height:6px;background:var(--bg-primary);border-radius:50%}.ssd-icon:before{content:"";width:20px;height:14px;background:var(--storage-color);border-radius:2px}.raid-icon:before{content:"";width:22px;height:16px;background:repeating-linear-gradient(90deg,var(--storage-color) 0px,var(--storage-color) 4px,transparent 4px,transparent 6px)}.cloud-storage-icon:before{content:"";width:20px;height:12px;background:var(--storage-color);border-radius:10px;position:relative;top:2px}.cloud-storage-icon:after{content:"";position:absolute;width:10px;height:10px;background:var(--storage-color);border-radius:50%;top:4px;left:8px}.database-icon,.web-server-icon,.dns-icon,.media-icon,.vpn-icon,.monitoring-icon{background:linear-gradient(135deg,#39c5cf33,#39c5cf1a);border:1px solid var(--service-color)}.database-icon:before{content:"";width:18px;height:18px;background:conic-gradient(var(--service-color) 0deg,var(--service-color) 360deg);border-radius:2px 2px 6px 6px}.web-server-icon:before{content:"";width:18px;height:18px;background:var(--service-color);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}.dns-icon:before{content:"DNS";font-family:var(--font-mono);font-size:8px;font-weight:700;color:var(--service-color)}.media-icon:before{content:"";width:0;height:0;border-left:10px solid var(--service-color);border-top:8px solid transparent;border-bottom:8px solid transparent}.vpn-icon:before{content:"";width:18px;height:18px;background:transparent;border:2px solid var(--accent-green);border-radius:50%}.vpn-icon:after{content:"";position:absolute;width:8px;height:10px;background:var(--accent-green);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%)}.monitoring-icon:before{content:"";width:20px;height:12px;background:transparent;border:2px solid var(--service-color);border-radius:2px}.monitoring-icon:after{content:"";position:absolute;width:14px;height:2px;background:linear-gradient(90deg,transparent 0%,var(--accent-green) 25%,var(--accent-green) 30%,transparent 30%,transparent 40%,var(--accent-green) 50%,transparent 60%,var(--accent-green) 70%,transparent 100%)}.tv-icon,.smartphone-icon,.tablet-icon,.laptop-icon,.desktop-icon,.printer-icon,.camera-icon,.speaker-icon,.game-console-icon,.iot-device-icon{width:32px;height:32px;background-color:var(--node-color, currentColor);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:flex;align-items:center;justify-content:center;position:relative}.tv-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/material-symbols-light--tv-outline-rounded.svg);mask-image:url(/Homelab-Studio/icons/devices/material-symbols-light--tv-outline-rounded.svg)}.tv-icon:before{content:none}.smartphone-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/gridicons--phone.svg);mask-image:url(/Homelab-Studio/icons/devices/gridicons--phone.svg)}.smartphone-icon:before{content:none}.tablet-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/ic--twotone-tablet.svg);mask-image:url(/Homelab-Studio/icons/devices/ic--twotone-tablet.svg)}.tablet-icon:before{content:none}.laptop-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/ant-design--laptop-outlined.svg);mask-image:url(/Homelab-Studio/icons/devices/ant-design--laptop-outlined.svg)}.laptop-icon:before{content:none}.desktop-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/fluent--desktop-mac-24-regular.svg);mask-image:url(/Homelab-Studio/icons/devices/fluent--desktop-mac-24-regular.svg)}.desktop-icon:before{content:none}.printer-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/bx--printer.svg);mask-image:url(/Homelab-Studio/icons/devices/bx--printer.svg)}.printer-icon:before{content:none}.camera-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/hugeicons--cctv-camera.svg);mask-image:url(/Homelab-Studio/icons/devices/hugeicons--cctv-camera.svg)}.camera-icon:before,.camera-icon:after{content:none}.speaker-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/material-symbols--speaker-outline.svg);mask-image:url(/Homelab-Studio/icons/devices/material-symbols--speaker-outline.svg)}.speaker-icon:before,.speaker-icon:after{content:none}.game-console-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/game-icons--game-console.svg);mask-image:url(/Homelab-Studio/icons/devices/game-icons--game-console.svg)}.game-console-icon:before,.game-console-icon:after{content:none}.iot-device-icon{-webkit-mask-image:url(/Homelab-Studio/icons/devices/carbon--iot-platform.svg);mask-image:url(/Homelab-Studio/icons/devices/carbon--iot-platform.svg)}.iot-device-icon:before,.iot-device-icon:after{content:none}.trash-icon{width:12px;height:12px;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}.nginx-icon,.portainer-icon,.grafana-icon,.influxdb-icon,.redis-icon,.postgresql-icon,.mariadb-icon,.mongodb-icon,.prometheus-icon,.uptime-kuma-icon,.ollama-icon,.obsidian-icon,.paperless-ngx-icon,.node-red-icon,.jellyfin-icon,.photoprism-icon,.immich-icon,.minio-icon,.syncthing-icon,.frigate-icon,.adguard-icon,.traefik-icon,.wireguard-icon,.tailscale-icon,.cloudflare-dns-icon,.pfsense-icon,.openwrt-icon{width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;align-items:center;justify-content:center}.nginx-icon{background-image:url(/Homelab-Studio/icons/applications/material-icon-theme--nginx.svg)}.portainer-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--portainer.svg)}.grafana-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--grafana.svg)}.influxdb-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--influxdb.svg)}.redis-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--redis-wordmark.svg)}.postgresql-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--postgresql.svg)}.mariadb-icon{background-image:url(/Homelab-Studio/icons/applications/logos--mariadb.svg)}.mongodb-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--mongodb-wordmark.svg)}.prometheus-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--prometheus-wordmark.svg)}.uptime-kuma-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--uptimekuma.svg)}.ollama-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--ollama.svg)}.obsidian-icon{background-image:url(/Homelab-Studio/icons/applications/logos--obsidian-icon.svg)}.paperless-ngx-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--paperlessngx.svg)}.node-red-icon{background-image:url(/Homelab-Studio/icons/applications/cib--node-red.svg)}.jellyfin-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--jellyfin.svg)}.photoprism-icon{background-image:url(/Homelab-Studio/icons/applications/arcticons--photoprism-gallery.svg)}.immich-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--immich.svg)}.minio-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--minio.svg)}.syncthing-icon{background-image:url(/Homelab-Studio/icons/applications/simple-icons--syncthing.svg)}.frigate-icon{background-image:url(/Homelab-Studio/icons/devices/hugeicons--cctv-camera.svg)}.adguard-icon{background-image:url(/Homelab-Studio/icons/applications/streamline-ultimate--adguard-logo-bold.svg)}.traefik-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--traefikproxy.svg)}.wireguard-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--wireguard.svg)}.tailscale-icon{background-image:url(/Homelab-Studio/icons/applications/arcticons--tailscale.svg)}.cloudflare-dns-icon{background-image:url(/Homelab-Studio/icons/applications/devicon--cloudflare.svg)}.pfsense-icon{background-image:url(/Homelab-Studio/icons/os/simple-icons--pfsense.svg)}.openwrt-icon{background-image:url(/Homelab-Studio/icons/os/simple-icons--openwrt.svg)}.llama-icon,.llama-cpp-icon,.anythingllm-icon,.lm-studio-icon,.localai-icon,.text-gen-webui-icon,.gpt4all-icon,.vllm-icon,.huggingface-icon,.privategpt-icon,.jan-icon,.custom-model-icon,.llama-3-icon,.mistral-icon,.gemma-icon,.phi-3-icon,.qwen-icon,.yi-icon,.deepseek-icon,.command-r-icon,.tinyllama-icon,.falcon-icon,.stable-diffusion-icon,.generic-model-icon{width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:contain;display:flex;align-items:center;justify-content:center}.llama-icon,.llama-cpp-icon{background-image:url(/Homelab-Studio/icons/local_llm/llamacpp.png)}.huggingface-icon{background-image:url(/Homelab-Studio/icons/local_llm/huggingface.svg)}.localai-icon{background-image:url(/Homelab-Studio/icons/local_llm/localai.png)}.lm-studio-icon{background-image:url(/Homelab-Studio/icons/local_llm/lmstudio.png)}.vllm-icon{background-image:url(/Homelab-Studio/icons/local_llm/vllm.svg)}.gpt4all-icon{background-image:url(/icons/applications/carbon--bot.svg)}.jan-icon{background-image:url(/Homelab-Studio/icons/local_llm/jan.svg)}.privategpt-icon{background-image:url(/Homelab-Studio/icons/local_llm/privateGPT.png)}.anythingllm-icon{background-image:url(/Homelab-Studio/icons/local_llm/anythingllm.svg)}.text-gen-webui-icon{background-image:url(/icons/local_llm/webui.png)}.custom-model-icon{background-image:url(/Homelab-Studio/icons/local_llm/custom_model.svg)}.openwebui-icon{background-image:url(/Homelab-Studio/icons/local_llm/openwebui.png)}.llama-3-icon,.tinyllama-icon{background-image:url(/icons/applications/simple-icons--meta.svg)}.mistral-icon{background-image:url(/icons/applications/carbon--windy.svg)}.gemma-icon{background-image:url(/icons/applications/simple-icons--google.svg)}.phi-3-icon{background-image:url(/icons/applications/simple-icons--microsoft.svg)}.qwen-icon{background-image:url(/icons/applications/simple-icons--alibaba.svg)}.deepseek-icon{background-image:url(/icons/applications/carbon--code.svg)}.stable-diffusion-icon{background-image:url(/icons/applications/simple-icons--stabilityai.svg)}.generic-model-icon,.yi-icon,.falcon-icon,.command-r-icon{background-image:url(/icons/applications/carbon--model.svg)}.canvas-wrapper.mode-select{cursor:grab}.canvas-wrapper.mode-select:active{cursor:grabbing}.canvas-wrapper.mode-connect,.canvas-wrapper.mode-marquee{cursor:crosshair}.canvas-node{position:absolute;background:var(--bg-secondary);border:3px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);cursor:move;-webkit-user-select:none;user-select:none;transition:box-shadow var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);z-index:10;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto}.canvas-node:hover{border-color:var(--node-color, var(--text-tertiary));box-shadow:0 8px 32px #0006;z-index:20}.canvas-node.selected{border-color:var(--accent-blue);box-shadow:0 0 0 3px #58a6ff4d,0 8px 32px #0006;z-index:30}.canvas-node.connecting-source{border-color:var(--accent-green);box-shadow:0 0 0 3px #3fb9504d}.canvas-node.drop-target{border-color:var(--accent-purple);border-style:dashed}.canvas-node.drop-potential{border-color:var(--accent-blue);box-shadow:0 0 0 4px #58a6ff66;transform:scale(1.02)}.node-header{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm);background:linear-gradient(180deg,var(--bg-tertiary),transparent);border-bottom:1px solid var(--border-secondary)}.node-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.node-icon svg{width:24px;height:24px}.node-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.node-title{font-size:.875rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-subtitle{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-tertiary)}.node-actions{display:flex;gap:4px;align-items:center;margin-left:auto;padding-right:4px;position:relative;z-index:10;pointer-events:auto}.node-action-btn{width:20px;height:20px;padding:4px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:4px;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all var(--transition-fast);flex-shrink:0;pointer-events:auto;position:relative;z-index:10}.canvas-node:hover .node-action-btn{opacity:1}.node-delete-btn:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}.node-properties-btn:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}@media(max-width:768px){.node-actions{gap:8px}.node-action-btn{width:24px;height:24px;opacity:1}}.node-status{width:10px;height:10px;border-radius:50%;flex-shrink:0}.node-status.online{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green);animation:pulse 2s infinite}.node-status.offline{background:var(--accent-red);box-shadow:none}.node-status.warning{background:var(--accent-orange);box-shadow:0 0 8px var(--accent-orange)}.node-resource-load{padding:8px 12px;display:flex;flex-direction:column;gap:8px;background:#0000001a;border-bottom:1px solid var(--border-secondary)}.load-bar-group{display:flex;flex-direction:column;gap:4px}.load-label{display:flex;justify-content:space-between;font-size:.625rem;font-family:var(--font-mono);color:var(--text-tertiary);font-weight:500}.load-bar{height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;position:relative}.load-fill{height:100%;width:0%;border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1),background-color .3s ease}.load-fill.cpu{background:linear-gradient(90deg,#3b82f6,#60a5fa);box-shadow:0 0 4px #3b82f680}.load-fill.ram{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 4px #ef444480}.load-fill.storage{background:linear-gradient(90deg,#10b981,#34d399);box-shadow:0 0 4px #10b98180}.load-fill[data-load-level=warning]{background:linear-gradient(90deg,#eab308,#facc15)}.load-fill[data-load-level=critical]{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 8px #ef444466}.node-specs{padding:var(--spacing-xs) var(--spacing-md);display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.spec-tag{font-size:.625rem;font-family:var(--font-mono);padding:2px 6px;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);display:flex;align-items:center;gap:4px;max-width:100%;word-wrap:break-word;word-break:break-word;white-space:normal;line-height:1.3}.os-tag{color:var(--text-primary);border-color:var(--accent-blue);background:#58a6ff0d}.spec-icon{display:flex;align-items:center;justify-content:center;width:12px;height:12px}.spec-icon svg{width:100%;height:100%}.node-apps-container{flex:1;display:flex;flex-direction:column;padding:var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);min-height:60px}.node-apps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-xs)}.apps-label{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}.btn-add-app{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.btn-add-app:hover{background:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.node-apps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-sm);flex:1;min-height:48px;background:var(--bg-primary);border:1px dashed var(--border-secondary);border-radius:var(--radius-md);padding:var(--spacing-sm);align-content:start;overflow:hidden}.node-apps-container.has-apps .node-apps-grid{border-style:solid;background:var(--bg-tertiary)}.os-env-group{margin-top:var(--spacing-sm);border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--bg-primary);overflow:hidden}.os-env-header{display:flex;align-items:center;gap:var(--spacing-xs);padding:4px var(--spacing-sm);background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary)}.os-env-content{background:var(--bg-primary)}.os-env-group .os-env-group{margin:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);border-color:var(--border-secondary)}.os-env-icon{width:14px;height:14px;display:flex;align-items:center}.os-env-icon svg{width:100%;height:100%;color:var(--accent-blue)}.os-env-name{font-size:.625rem;font-weight:600;color:var(--text-secondary)}.os-env-grid{min-height:40px;background:var(--bg-primary)!important;border:none!important}.os-env-group.drop-potential-inner{border-color:var(--accent-blue);background:#58a6ff0d;box-shadow:inset 0 0 8px #58a6ff1a}.no-apps{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--text-tertiary);font-style:italic}.node-app-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:var(--bg-primary);border:1px solid var(--border-secondary);border-radius:var(--radius-sm);transition:all var(--transition-fast);min-width:0}.node-app-item:hover{background:var(--bg-elevated);transform:translateY(-2px);border-color:var(--accent-blue)}.node-app-icon{transform:scale(.75);margin:-4px 0}.node-app-name{font-size:.625rem;font-weight:500;color:var(--text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.node-item-delete{position:absolute;top:2px;right:2px;width:16px;height:16px;padding:2px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:4px;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all var(--transition-fast);z-index:10}.node-app-item,.os-env-header{position:relative}.node-app-item:hover .node-item-delete,.os-env-header:hover .node-item-delete{opacity:1}.node-item-delete:hover{background:var(--accent-red);color:#fff;border-color:var(--accent-red)}.os-env-header .node-item-delete{position:relative;top:0;right:0;margin-left:auto}.node-item-config{position:absolute;top:2px;right:22px;width:16px;height:16px;padding:2px;background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:4px;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all var(--transition-fast);z-index:10}.node-app-item:hover .node-item-config,.os-env-header:hover .node-item-config{opacity:1}.node-item-config:hover{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.os-env-header .node-item-config{position:relative;top:0;right:0;margin-left:4px}.mobile-only{display:none}@media(max-width:768px){.mobile-only{display:flex!important}.node-app-item .node-item-delete,.node-app-item .node-item-config,.os-env-header .node-item-delete,.os-env-header .node-item-config{opacity:1}}.node-ports{position:absolute;inset:0;pointer-events:none}.node-port{position:absolute;width:12px;height:12px;background:var(--bg-secondary);border:2px solid var(--node-color, var(--border-primary));border-radius:50%;pointer-events:auto;cursor:crosshair;transition:all var(--transition-fast);transform:translate(-50%,-50%)}.node-port:hover{transform:translate(-50%,-50%) scale(1.3);background:var(--node-color, var(--accent-blue));border-color:var(--node-color, var(--accent-blue))}.port-left{left:0;top:50%}.port-right{left:100%;top:50%}.node-port{position:absolute;width:14px;height:14px;background:var(--bg-elevated);border:2px solid var(--border-primary);border-radius:50%;cursor:crosshair;pointer-events:auto;transition:all var(--transition-fast);z-index:5}.node-port:hover{background:var(--accent-blue);border-color:var(--accent-blue);transform:scale(1.3)}.node-port.active{background:var(--accent-green);border-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.node-port.top{left:50%;top:-7px;transform:translate(-50%)}.node-port.bottom{left:50%;bottom:-7px;transform:translate(-50%)}.node-port.left{left:-7px;top:50%;transform:translateY(-50%)}.node-port.right{right:-7px;top:50%;transform:translateY(-50%)}.selection-marquee{position:absolute;background:#58a6ff1a;border:1px solid var(--accent-blue);border-radius:2px;pointer-events:none;z-index:10000}.canvas-group{position:absolute;border:2px solid var(--group-color, rgba(88, 166, 255, .8));background:color-mix(in srgb,var(--group-color, #58a6ff) 3%,transparent);border-radius:8px;pointer-events:none;z-index:5;transition:all .2s ease-out;box-shadow:8px 0 0 8px #0000000d,0 2px 8px #0000001a;outline:6px solid var(--bg-primary);outline-offset:2px}.group-label{position:absolute;top:-24px;left:0;background:transparent;color:var(--group-color);padding:4px 8px;font-size:14px;font-weight:600;border:none;pointer-events:auto;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer;z-index:1}.network-node .node-apps-container,.network-node .node-specs{display:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.canvas-node[data-node-type=router],.canvas-node[data-node-type=switch]{background:transparent!important;border:none!important;box-shadow:none!important;overflow:visible!important}.canvas-node[data-node-type=router]:before,.canvas-node[data-node-type=switch]:before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain;transition:all var(--transition-fast);z-index:-1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}.canvas-node[data-node-type=router]:before{background-image:url(/Homelab-Studio/icons/hardware/router.svg)}.canvas-node[data-node-type=switch]:before{background-image:url(/Homelab-Studio/icons/hardware/switch.svg)}.canvas-node[data-node-type=router]:hover:before,.canvas-node[data-node-type=switch]:hover:before{filter:drop-shadow(0 0 4px var(--accent-blue)) drop-shadow(0 4px 8px rgba(0,0,0,.4))}.canvas-node[data-node-type=router].selected:before,.canvas-node[data-node-type=switch].selected:before{filter:drop-shadow(0 0 0 2px var(--accent-blue)) drop-shadow(0 4px 12px rgba(0,0,0,.5))}.canvas-node[data-node-type=router] .node-header,.canvas-node[data-node-type=switch] .node-header{background:transparent;border:none;flex-direction:column;justify-content:center;height:100%;padding:0;margin-top:100px}.canvas-node[data-node-type=router] .node-icon,.canvas-node[data-node-type=switch] .node-icon{display:none}.canvas-node[data-node-type=router] .node-info,.canvas-node[data-node-type=switch] .node-info{align-items:center;text-align:center;background:#0009;padding:4px 8px;border-radius:4px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.canvas-node[data-node-type=router] .node-title,.canvas-node[data-node-type=switch] .node-title{color:#fff;font-size:.75rem}.canvas-node[data-node-type=router] .node-subtitle,.canvas-node[data-node-type=switch] .node-subtitle{color:#ccc;font-size:.65rem}.canvas-node[data-category=hardware] .node-icon{background:linear-gradient(135deg,#58a6ff33,#58a6ff1a);border:1px solid var(--server-color)}.canvas-node[data-category=network] .node-icon{background:linear-gradient(135deg,#3fb95033,#3fb9501a);border:1px solid var(--network-color)}.canvas-node[data-category=virtualization] .node-icon{background:linear-gradient(135deg,#a371f733,#a371f71a);border:1px solid var(--virtualization-color)}.canvas-node[data-category=storage] .node-icon{background:linear-gradient(135deg,#d2992233,#d299221a);border:1px solid var(--storage-color)}.canvas-node[data-category=services] .node-icon{background:linear-gradient(135deg,#39c5cf33,#39c5cf1a);border:1px solid var(--service-color)}.canvas-node.group-node{background:#58a6ff0d;border:2px dashed var(--accent-blue);border-radius:var(--radius-lg);min-width:200px;min-height:150px}.canvas-node.group-node .node-header{background:#58a6ff1a;border-bottom:1px dashed var(--accent-blue)}.canvas-node.text-node{background:transparent;border:none;min-width:auto;min-height:auto}.canvas-node.text-node .node-body{font-size:1rem;color:var(--text-primary)}.canvas-node.note-node{background:#d299221a;border:1px solid var(--accent-orange);min-width:150px}.canvas-node.note-node .node-header{background:#d2992233}.node-resize{position:absolute;width:12px;height:12px;right:-6px;bottom:-6px;cursor:se-resize;opacity:0;transition:opacity var(--transition-fast)}.canvas-node:hover .node-resize,.canvas-node.selected .node-resize{opacity:1}.node-resize:before{content:"";position:absolute;right:2px;bottom:2px;width:8px;height:8px;border-right:2px solid var(--text-tertiary);border-bottom:2px solid var(--text-tertiary)}.connection{fill:none;stroke:var(--border-primary);stroke-width:2;pointer-events:stroke;transition:stroke var(--transition-fast),stroke-width var(--transition-fast);cursor:pointer}.connection:hover{stroke-width:4}.connection.selected{stroke:var(--accent-blue)!important;stroke-width:3;filter:drop-shadow(0 0 4px var(--accent-blue))}.connection.ethernet{stroke:var(--accent-blue);stroke-dasharray:12,6;animation:connection-flow 25s linear infinite}.connection.wireless{stroke:var(--accent-purple);stroke-dasharray:4,6;animation:connection-flow 40s linear infinite reverse;opacity:.8}.connection.usb{stroke:var(--accent-cyan);stroke-dasharray:2,4;animation:connection-flow 15s linear infinite}.connection.fiber{stroke:var(--accent-orange);stroke-width:3;filter:drop-shadow(0 0 2px rgba(245,158,11,.4))}.connection-temp{stroke-width:2;opacity:.7;pointer-events:none;stroke-dasharray:6,6;animation:connection-ghost 1.2s linear infinite;filter:drop-shadow(0 0 4px rgba(88,166,255,.35));stroke-linecap:round}@keyframes connection-ghost{0%{stroke-dashoffset:24}to{stroke-dashoffset:0}}@keyframes connection-flow{0%{stroke-dashoffset:500}to{stroke-dashoffset:0}}.connection-label{font-family:var(--font-sans);font-size:12px;font-weight:500;fill:var(--text-primary);text-anchor:middle;dominant-baseline:middle;pointer-events:none}.connection-label-group{pointer-events:none}.connection-label-bg{fill:var(--bg-primary);opacity:.95}.connection-delete-btn{display:none;opacity:0;transition:opacity var(--transition-fast);pointer-events:auto}.delete-btn-bg{fill:var(--bg-primary);stroke:var(--border-primary);stroke-width:1.5;transition:all var(--transition-fast)}.connection-delete-btn:hover .delete-btn-bg{fill:var(--accent-red);stroke:var(--accent-red)}@media(max-width:768px){.connection-delete-btn{display:block;opacity:1}.connection-delete-btn circle{r:16}.connection-delete-btn foreignObject{width:20px;height:20px}}.connection-control-point{opacity:1;transition:opacity var(--transition-fast);pointer-events:auto;cursor:grab}.connection-control-point.dragging{cursor:grabbing}.control-point-outer{fill:var(--bg-primary);stroke:var(--accent-blue);stroke-width:2;transition:all var(--transition-fast)}.control-point-inner{fill:var(--accent-blue);pointer-events:none}.control-point-start{fill:var(--accent-green)}.control-point-end{fill:var(--accent-red)}.connection-control-point:hover .control-point-outer{fill:var(--accent-blue);stroke:var(--accent-blue);r:12}.connection-control-point:hover .control-point-inner{fill:#fff;r:6}.connection-control-point.dragging .control-point-outer{fill:var(--accent-blue);stroke:var(--accent-blue);r:12;opacity:.8}.connection-control-point.dragging .control-point-inner{fill:#fff;r:6}@media(max-width:768px){.connection-control-point{opacity:1}.control-point-outer{r:8}.control-point-inner{r:4}}.node-app-item.dragging,.os-env-group.dragging{opacity:.5;cursor:grabbing}.drop-target-active{background:#58a6ff1a;border:2px dashed var(--accent-blue);border-radius:var(--radius-md)}.node-app-item[draggable=true]{cursor:grab;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.node-app-item[draggable=true]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.os-env-header[draggable=true]{cursor:grab}.os-env-header[draggable=true]:hover{background:#58a6ff0d}.node-resize-handle{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;opacity:0;transition:opacity var(--transition-fast);z-index:10}.node-resize-handle:after{content:"";position:absolute;right:2px;bottom:2px;width:0;height:0;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent var(--text-secondary) transparent}.canvas-node:hover .node-resize-handle,.canvas-node.resizing .node-resize-handle{opacity:1}.canvas-node.resizing{transition:none!important}.node-title,.spec-value,.node-spec-tag{cursor:text!important;position:relative;transition:all .15s ease;border-radius:2px;padding:1px 2px}.node-title:hover,.spec-value:hover,.node-spec-tag:hover{background:#ffffff0d;outline:1px solid rgba(255,255,255,.2)}.inline-edit-input{outline:none}.inline-edit-input:focus{box-shadow:0 0 0 2px var(--primary-color)}.canvas-text{position:absolute;cursor:grab;-webkit-user-select:none;user-select:none;pointer-events:all;transform:translate(-50%,-50%);min-width:50px;min-height:20px;z-index:10}.canvas-text.editing{cursor:text;z-index:100}.canvas-text .text-content{white-space:pre-wrap;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.5);font-family:var(--font-sans)}.canvas-text textarea{background:#00000080;border:1px solid var(--accent-blue);border-radius:4px;color:inherit;font-family:inherit;font-size:inherit;padding:4px;margin:0;outline:none;resize:none;overflow:hidden;text-align:center;width:200px;height:auto}.mode-text .canvas-container{cursor:text!important}.mode-text .canvas-node,.mode-text .connection{pointer-events:none}.canvas-text:hover{border:1px dashed rgba(255,255,255,.3)}.canvas-text.selected{outline:2px solid var(--accent-primary);background:rgba(var(--accent-primary-rgb),.1);border:none;z-index:20}.canvas-text.dragging{cursor:grabbing}#shortcuts-modal{max-width:600px;width:90%;max-height:80vh;display:none;flex-direction:column;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001}#shortcuts-modal.visible{display:flex}#shortcuts-modal .modal-body{overflow-y:auto;padding:var(--spacing-lg);flex:1}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-xl)}.shortcut-group h3{font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:var(--spacing-md);border-bottom:1px solid var(--border-secondary);padding-bottom:var(--spacing-xs)}.shortcut-item{display:flex;margin-bottom:var(--spacing-sm);letter-spacing:1px;gap:var(--spacing-xs);font-size:.875rem}.shortcut-desc{color:var(--text-secondary)}kbd{background-color:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:4px;box-shadow:0 1px 1px #0000001a;color:var(--text-primary);font-family:monospace;font-size:.75rem;padding:2px 6px;white-space:nowrap}.modal-footer{border-top:1px solid var(--border-primary);padding:var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.checkbox-label{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.875rem;color:var(--text-secondary);cursor:pointer}#shortcuts-modal-overlay{z-index:1000}
