:root{--primary: #4F46E5;--primary-hover: #4338CA;--success: #10B981;--danger: #EF4444;--warning: #F59E0B;--bg-primary: #F8FAFC;--bg-secondary: #FFFFFF;--bg-tertiary: #F1F5F9;--text-primary: #1E293B;--text-secondary: #64748B;--border: #E2E8F0;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--radius: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden}.app-container{display:flex;height:100vh}.svg-canvas-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.svg-canvas-container{flex:1;position:relative;overflow:hidden}.svg-canvas{display:block;width:100%;height:100%}.svg-device{cursor:pointer;-webkit-user-select:none;user-select:none}.svg-device:active{cursor:grabbing}.svg-device.selected .svg-device-rect{filter:drop-shadow(0 0 5px rgba(79,70,229,.4))}.svg-device.connect-source .svg-device-rect{animation:pulse-connect 1.5s infinite}@keyframes pulse-connect{0%,to{filter:drop-shadow(0 0 3px rgba(79,70,229,.3))}50%{filter:drop-shadow(0 0 10px rgba(79,70,229,.8))}}.resize-handle{transition:opacity .2s;cursor:se-resize}.resize-handle:hover circle:first-child{opacity:1!important;fill:#4338ca}.resize-handle circle{transition:all .2s}.temporary-wire path{animation:dash-animation 1s linear infinite}@keyframes dash-animation{to{stroke-dashoffset:-10}}.svg-pin-port.highlighted circle:first-child{fill:#10b981!important;stroke:#059669!important;r:8!important}.svg-pin-port.highlighted circle:nth-child(2){fill:#fff!important;stroke:#10b981!important;r:6!important}.svg-connector-port.highlighted circle:first-child{fill:#10b981!important;stroke:#059669!important;r:15!important}.svg-connector-port.highlighted circle:nth-child(2){fill:#fff!important;stroke:#10b981!important;r:12!important}.svg-device.device-connect-source{filter:drop-shadow(0 0 8px rgba(79,70,229,.6))}.svg-canvas.dragging{cursor:grabbing}.svg-connection{pointer-events:stroke}.svg-connection:hover path[stroke]{filter:drop-shadow(0 0 3px rgba(79,70,229,.5))}.svg-connection.selected path[stroke]{filter:drop-shadow(0 0 5px rgba(239,68,68,.6))}.svg-connector-port{cursor:pointer;transition:all .2s}.svg-connector-port:hover circle{fill:#4f46e5!important;stroke:#4338ca!important}.svg-connector-port.selected circle{fill:#4f46e5!important;stroke:#4338ca!important}.svg-pin-port{cursor:pointer;transition:all .2s}.svg-pin-port:hover circle{fill:#4f46e5!important;stroke:#4338ca!important;r:6!important}.svg-pin-port.selected circle{fill:#4f46e5!important;stroke:#4338ca!important}.zoom-controls{display:flex;gap:4px;align-items:center}.zoom-controls .btn-sm{padding:4px 8px;font-size:14px;line-height:1}.svg-canvas-container .loading-indicator{font-size:16px;color:var(--text-secondary);animation:pulse 1s infinite}.svg-canvas-container .error-message{font-size:14px;color:var(--danger);padding:12px 16px;background:#fef2f2;border:1px solid #FCA5A5;border-radius:var(--radius)}.sidebar{width:300px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{padding:16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-tertiary)}.sidebar-actions{padding:12px;border-bottom:1px solid var(--border)}.btn-sm{padding:6px 12px;font-size:12px;width:auto}.sidebar-header h3{font-size:13px;font-weight:600;text-transform:uppercase;color:var(--text-secondary)}.sidebar-content{flex:1;overflow-y:auto;padding:12px}.device-item{padding:0;margin:6px 0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s}.device-item-content{display:flex;justify-content:space-between;align-items:center;padding:12px}.device-item-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s}.device-item:hover .device-item-actions{opacity:1}.btn-icon{background:var(--bg-tertiary);border:none;border-radius:4px;padding:4px 6px;cursor:pointer;font-size:12px;line-height:1;transition:all .2s}.btn-icon:hover{background:var(--primary);transform:scale(1.1)}.device-item:hover{border-color:var(--primary);box-shadow:var(--shadow)}.device-item.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.device-item.selected .device-item-actions{opacity:1}.device-item.selected .btn-icon:hover{background:#fff3}.device-sku{font-weight:600;font-size:14px}.device-name{font-size:12px;color:var(--text-secondary)}.device-item.selected .device-name{color:#fffc}.loading-indicator{font-size:14px;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.error-message{padding:12px;margin:8px;background:#fef2f2;border:1px solid #FCA5A5;border-radius:var(--radius);color:#dc2626;font-size:13px}.btn-retry{margin-top:8px;padding:4px 12px;background:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.btn-retry:hover{background:var(--primary-hover)}.empty-state{padding:20px;text-align:center;color:var(--text-secondary);font-size:13px}.project-indicator{margin-left:auto;font-size:13px;color:var(--text-secondary);padding:4px 12px;background:var(--bg-tertiary);border-radius:var(--radius)}.nodes-count{font-size:12px;color:var(--text-secondary);padding:4px 12px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.active{background:var(--primary);color:#fff;box-shadow:0 0 0 2px #4f46e54d}.canvas-wrapper{flex:1;display:flex;flex-direction:column}.toolbar{padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:center}.btn{padding:8px 16px;border:none;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--bg-secondary);border-radius:var(--radius);padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary)}.modal-body{margin-bottom:20px}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.toast{position:fixed;bottom:24px;right:24px;padding:14px 20px;background:var(--text-primary);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow);z-index:2000;animation:slideIn .3s ease}.toast.success{background:var(--success)}.toast.error{background:var(--danger)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.form-group{margin-bottom:16px}.export-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border)}.export-section:last-child{border-bottom:none;margin-bottom:0}.export-section h4{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.format-options{display:flex;gap:12px}.format-btn{flex:1;padding:16px 24px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-secondary);cursor:pointer;font-size:16px;font-weight:600;transition:all .2s}.format-btn:hover{border-color:var(--primary);background:var(--bg-tertiary)}.format-btn.selected{border-color:var(--primary);background:#4f46e51a;color:var(--primary)}.orientation-options{display:flex;gap:12px}.orientation-btn{flex:1;padding:16px 24px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg-secondary);cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:all .2s}.orientation-btn:hover{border-color:var(--primary);background:var(--bg-tertiary)}.orientation-btn.selected{border-color:var(--primary);background:#4f46e51a;color:var(--primary)}.orientation-size{font-size:11px;color:var(--text-secondary);font-weight:400}.selected-info{padding:12px;background:var(--bg-tertiary);border-radius:var(--radius);font-size:14px}.frame-checkbox-label{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-tertiary);border-radius:var(--radius);cursor:pointer;font-size:14px;font-weight:500}.frame-checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--primary)}.checkbox-text{flex:1}.frame-preview{margin-top:12px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);text-align:center}.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:8px;color:var(--text-primary)}.form-group input,.form-group select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg-secondary);color:var(--text-primary);transition:border-color .2s}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.form-group input::placeholder{color:var(--text-secondary)}.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg-secondary);color:var(--text-primary);font-family:inherit;resize:vertical}.image-upload-content{display:flex;flex-direction:column;gap:12px}.image-upload-wrapper{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.image-upload-wrapper .btn-secondary{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-upload-wrapper .btn-danger{flex-shrink:0;white-space:nowrap}.image-preview{width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center}.image-preview.image-portrait{aspect-ratio:1 / 1}.image-preview img{display:block;max-width:100%;max-height:100%;object-fit:contain}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-section{margin:20px 0;padding:16px;background:var(--bg-tertiary);border-radius:var(--radius)}.form-section h4{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;margin-bottom:12px}.device-pins-info{font-size:11px;color:var(--text-secondary);margin-top:4px}.compatibility-pins-section{margin-top:16px;padding:16px;background:var(--bg-tertiary);border-radius:var(--radius)}.pins-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.pins-header h4{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;margin:0}.pin-pair-row{display:flex;align-items:flex-end;gap:12px;padding:12px;margin:8px 0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius)}.pin-pair-number{font-size:12px;font-weight:600;color:var(--text-secondary);min-width:24px}.pin-select-group{flex:1;display:flex;flex-direction:column;gap:4px}.pin-select-group label{font-size:11px;color:var(--text-secondary);font-weight:500}.pin-select-group select{font-size:12px;padding:6px 8px}.pin-pair-arrow{font-size:18px;color:var(--primary);padding-bottom:8px}.btn-remove{background:var(--danger);color:#fff;font-size:14px;padding:6px 8px;margin-bottom:8px}.btn-remove:hover{background:#dc2626}.connector-group{margin:12px 0;padding:8px;background:var(--bg-tertiary);border-radius:4px}.connector-name{font-size:11px;font-weight:600;color:var(--text-secondary);padding:4px 0;text-transform:uppercase}.connector-type{font-weight:400;text-transform:none;color:var(--text-secondary);opacity:.8}.connector-pins{margin-top:8px}.no-pins{font-size:11px;color:var(--text-secondary);padding:4px 0}.connectors-preview{font-size:10px;color:var(--text-secondary);margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}.connectors-section{margin-top:24px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius)}.image-section{margin-top:24px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:0}.image-section .section-header{padding:10px 12px;background:var(--bg-tertiary);cursor:pointer;border-bottom:1px solid transparent}.image-section .section-header:hover{background:var(--bg-primary)}.image-section .section-header h4{display:flex;align-items:center;margin:0;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.image-section .image-upload-content{padding:16px}.connector-item{margin:8px 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.connector-item-header{display:flex;align-items:center;padding:10px 12px;background:var(--bg-tertiary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.connector-item-header:hover{background:var(--bg-primary)}.expand-icon{font-size:10px;margin-right:8px;color:var(--text-secondary);width:12px}.connector-item-name{flex:1;font-size:13px;font-weight:600;color:var(--text-primary)}.connector-item-type{font-weight:400;color:var(--text-secondary)}.connector-pins-count{font-size:11px;color:var(--text-secondary);margin-left:8px}.btn-remove-small{font-size:14px;padding:4px 6px;background:transparent;border:1px solid transparent}.btn-remove-small:hover{background:var(--danger);color:#fff}.connector-item-body{padding:12px;background:var(--bg-secondary)}.pins-list{margin-top:12px}.pins-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border)}.pins-header span{font-size:12px;font-weight:600;color:var(--text-secondary)}.pin-item{display:flex;align-items:flex-start;gap:8px;padding:8px;margin:4px 0;background:var(--bg-primary);border:1px solid var(--border);border-radius:4px}.pin-item-number{font-size:11px;font-weight:600;color:var(--text-secondary);min-width:20px;padding-top:8px}.pin-item-fields{flex:1;display:flex;gap:8px}.pins-list-title{display:flex;justify-content:center;align-items:center;padding:8px;margin-bottom:8px;background:var(--bg-tertiary);border-radius:4px}.pins-list-title span{font-size:12px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}.pins-list-header{display:flex;gap:8px;padding:6px 8px;margin-bottom:4px;background:var(--bg-tertiary);border-radius:4px;font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase}.pins-list-header span:first-child{min-width:20px}.pins-list-header span:nth-child(2){flex:1}.pins-list-header span:nth-child(3){flex:1}.pin-purpose{flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:4px;font-size:12px;background:var(--bg-secondary)}.pin-purpose:focus{outline:none;border-color:var(--primary)}.connect-modal-content{padding:8px 0}.connect-arrow{text-align:center;font-size:20px;color:var(--text-secondary);margin:8px 0}.selected-device-info{padding:8px 12px;background:var(--bg-tertiary);border-radius:var(--radius);font-size:13px;margin-bottom:16px}.search-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;background:var(--bg-secondary);color:var(--text-primary)}.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.devices-list{max-height:200px;overflow-y:auto;margin:12px 0;border:1px solid var(--border);border-radius:var(--radius)}.device-option{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s}.device-option.selected{background:var(--primary);color:#fff}.device-option-sku{font-weight:600;font-size:13px;flex:1}.device-option-name{font-size:12px;opacity:.8}.device-option.selected .device-option-name{opacity:1}.device-option-badge{background:var(--success);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.warning-modal-content{background:var(--bg-secondary);border-radius:var(--radius);padding:24px;max-width:500px;width:90%;box-shadow:0 20px 60px #0000004d}.warning-modal-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.warning-icon{font-size:32px}.warning-modal-header h3{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.warning-modal-body{margin-bottom:24px}.warning-message{margin:0 0 20px;color:var(--text-secondary);font-size:14px;line-height:1.5}.warning-devices{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;background:var(--bg-tertiary);border-radius:var(--radius)}.warning-device{display:flex;flex-direction:column;gap:4px}.device-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase}.device-name{font-size:14px;font-weight:600;color:var(--text-primary)}.warning-arrow{font-size:20px;color:var(--primary);margin-top:8px}.warning-modal-actions{display:flex;gap:12px;justify-content:flex-end}.compat-form{display:flex;flex-direction:column;gap:20px;max-height:75vh;overflow-y:auto}.compat-form-header{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--border)}.compat-form-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.compat-subtitle{margin:0;font-size:13px;color:var(--text-secondary)}.compat-subtitle strong{color:var(--primary)}.compat-devices{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-tertiary);border-radius:var(--radius)}.compat-device-card{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--bg-secondary);border-radius:8px;border:2px solid var(--border)}.compat-device-label{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.compat-device-sku{font-size:14px;font-weight:700;color:var(--primary)}.compat-device-name{font-size:12px;color:var(--text-secondary)}.compat-arrow{font-size:28px;color:var(--primary);font-weight:700}.compat-connections-section{display:flex;flex-direction:column;gap:12px}.compat-section-header{display:flex;justify-content:space-between;align-items:center}.compat-section-header h4{margin:0;font-size:14px;font-weight:600;color:var(--text-primary)}.compat-section-actions{display:flex;gap:8px}.connections-list{display:flex;flex-direction:column;gap:12px}.connection-group{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;transition:all .2s}.connection-group:hover{border-color:var(--primary);box-shadow:0 2px 8px #4f46e51a}.connection-group-header{display:flex;align-items:center;gap:12px}.connection-num{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);border-radius:50%;font-size:12px;font-weight:600;color:var(--text-secondary);flex-shrink:0}.connection-side{flex:1}.connection-select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color .2s}.connection-select:hover{border-color:var(--primary)}.connection-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.connection-select:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.connection-arrow{font-size:18px;color:var(--primary);font-weight:700;flex-shrink:0}.connection-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}.pins-list-container{display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--bg-tertiary);border-radius:6px;margin-top:4px}.pin-pair-row{display:flex;align-items:center;gap:8px}.pin-pair-num{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--bg-secondary);border-radius:50%;font-size:10px;font-weight:600;color:var(--text-secondary);flex-shrink:0}.pin-select-wrapper{flex:1}.pin-select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:4px;font-size:11px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color .2s}.pin-select:hover{border-color:var(--primary)}.pin-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #4f46e51a}.pin-select:disabled{opacity:.5;cursor:not-allowed;background:var(--bg-tertiary)}.pin-pair-arrow{font-size:14px;color:var(--primary);font-weight:700;flex-shrink:0}.btn-remove-pin{background:var(--danger)!important;color:#fff!important;font-size:12px;padding:4px 6px;border-radius:4px;border:none;cursor:pointer;transition:all .2s;flex-shrink:0}.btn-remove-pin:hover{background:#dc2626!important;transform:scale(1.05)}.show-more{text-align:center;padding:12px}.devices-list{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius)}.device-option{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s}.device-option:last-child{border-bottom:none}.device-option:hover{background:var(--bg-tertiary)}.device-option-sku{font-size:13px;font-weight:600;color:var(--text-primary);flex:1}.device-option-name{font-size:12px;color:var(--text-secondary);flex:2}.device-option-badge{font-size:14px}.view-switcher{display:flex;align-items:center;gap:12px}.view-tabs{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:8px}.view-tab{padding:8px 16px;border:none;background:transparent;border-radius:6px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.view-tab:hover{background:#4f46e51a;color:var(--text-primary)}.view-tab.active{background:var(--primary);color:#fff}.view-tab.active:hover{background:var(--primary-hover)}.toolbar{padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:center;justify-content:space-between}.toolbar-left{display:flex;gap:12px;align-items:center}.toolbar-right{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--text-secondary)}.breadcrumb-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.breadcrumb-path{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-primary)}.breadcrumb-icon{font-size:16px}.breadcrumb-text{color:var(--text-secondary)}.breadcrumb-actions{display:flex;align-items:center;gap:12px}.lod-indicator{margin-left:16px}.lod-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--bg-tertiary);border-radius:20px;font-size:12px;font-weight:600;color:var(--text-primary)}.lod-badge.device{background:#dbeafe;color:#1e40af}.lod-badge.connector{background:#dcfce7;color:#166534}.lod-badge.pin{background:#fef3c7;color:#92400e}.svg-device{background:#fff;border:1px solid var(--border);box-shadow:0 2px 8px #0000001a;cursor:grab;overflow:hidden;border-radius:8px}.svg-device.selected{border:2px solid var(--primary);box-shadow:0 0 0 3px #4f46e533}.node-title-simple{font-size:12px;font-weight:600;color:var(--text-primary);text-align:center;overflow:hidden}.node-image-simple{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.node-image-simple img,.device-image{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;display:block}.device-handle-hidden{width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.svg-device-resizing .svg-device,.svg-device-resizing .svg-canvas{pointer-events:none!important;touch-action:none!important}.svg-device-resizing .svg-device .node-resize-handle{pointer-events:all!important;cursor:nwse-resize!important;touch-action:none!important}.node-resize-handle{position:absolute;right:0;bottom:0;width:24px;height:24px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--primary) 50%);border-radius:0 0 8px;z-index:1000;pointer-events:all;touch-action:none;-webkit-user-select:none;user-select:none}.node-resize-handle:hover{background:linear-gradient(135deg,transparent 50%,var(--primary-hover) 50%)}.node-resize-handle:active{cursor:nwse-resize}.device-info-panel{position:absolute;bottom:20px;right:20px;width:280px;background:var(--bg-secondary);border-radius:var(--radius);box-shadow:0 4px 20px #00000026;border:1px solid var(--border);overflow:hidden;animation:slideInRight .3s ease;z-index:100}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.device-info-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.device-info-icon{font-size:18px}.device-info-title{font-size:13px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}.device-info-content{padding:16px}.device-info-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}.device-info-label{font-size:12px;color:var(--text-secondary);font-weight:500;min-width:70px}.device-info-value{font-size:12px;color:var(--text-primary);font-weight:600;text-align:right;flex:1}.device-info-value.device-id{font-family:Consolas,Monaco,monospace;font-size:11px;background:var(--bg-tertiary);padding:4px 8px;border-radius:4px}.device-info-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}.device-info-subheader{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.device-info-input-wrapper{position:relative;display:flex;align-items:center;flex:1}.device-info-input{width:100%;padding:6px 30px 6px 8px;border:1px solid var(--border);border-radius:4px;font-size:12px;font-weight:600;color:var(--text-primary);background:var(--bg-secondary);transition:all .2s}.device-info-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #4f46e51a}.device-info-input.editing{border-color:var(--primary);background:var(--bg-primary)}.device-info-unit{position:absolute;right:8px;font-size:10px;color:var(--text-secondary);pointer-events:none}.device-info-hint{font-size:10px;color:var(--text-secondary);text-align:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}