.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f5f5f5;padding:20px}.login-box{background:#fff;border-radius:12px;box-shadow:0 15px 35px #0000001a;padding:40px;width:100%;max-width:400px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:30px}.login-header h1{color:#333;margin:0 0 8px;font-size:28px;font-weight:700}.login-header p{color:#666;margin:0;font-size:14px}.login-form{width:100%}.form-group label{display:block;margin-bottom:6px;color:#333;font-weight:500;font-size:14px}.form-group input{width:100%;padding:12px 16px;border:2px solid #e1e5e9;border-radius:8px;font-size:14px;transition:border-color .3s ease;box-sizing:border-box}.form-group input:disabled{background-color:#f8f9fa;cursor:not-allowed}.error-message{background-color:#fee;color:#c53030;padding:12px;border-radius:6px;font-size:14px;margin-bottom:20px;border:1px solid #fed7d7}.login-button{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:20px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.login-footer{text-align:center;color:#666;font-size:12px}.login-footer p{margin:0}.dashboard-layout{min-height:100vh;background-color:#f5f7fa;display:flex;flex-direction:column}.dashboard-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000001a;position:sticky;top:0;z-index:100;min-height:70px}.header-left{flex:0 0 250px}.header-left .dashboard-title{margin:0;font-size:1.5rem;font-weight:700}.header-left .dashboard-subtitle{font-size:.9rem;opacity:.9}.header-center{flex:1;display:flex;justify-content:center}.header-right{flex:0 0 300px;display:flex;align-items:center;justify-content:flex-end;gap:1rem}.current-time{font-size:.9rem;font-weight:500;background:#ffffff1a;padding:.5rem 1rem;border-radius:20px;white-space:nowrap}.header-right .user-info{display:flex;align-items:center;gap:1rem}.welcome-text{font-size:.9rem}.logout-button{background:#fff3;color:#fff;border:none;padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all .3s ease;font-size:.9rem}.logout-button:hover{background:#ffffff4d;transform:translateY(-1px)}.header-nav{display:flex;gap:.25rem;background:#ffffff1a;padding:.5rem;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-nav .nav-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;background:transparent;border-radius:20px;cursor:pointer;transition:all .3s ease;font-size:.85rem;color:#ffffffe6;white-space:nowrap}.header-nav .nav-button:hover{background:#fff3;color:#fff}.header-nav .nav-button.active{background:#ffffff40;color:#fff;font-weight:600}.header-nav .nav-icon{font-size:1rem}.dashboard-nav{display:none}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;padding:2rem;margin:0}.stat-card{background:#fff;border-radius:12px;padding:1.5rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 10px #0000000d;transition:transform .3s ease,box-shadow .3s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0000001a}.stat-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.stat-icon.total{background:linear-gradient(135deg,#667eea,#764ba2)}.stat-icon.online{background:linear-gradient(135deg,#4caf50,#45a049)}.stat-icon.warning{background:linear-gradient(135deg,#ff9800,#f57c00)}.stat-icon.offline{background:linear-gradient(135deg,#f44336,#d32f2f)}.stat-content .stat-number{font-size:2rem;font-weight:700;color:#333;margin:0}.stat-content .stat-label{font-size:.9rem;color:#666;margin:0}.dashboard-content{flex:1;padding:0 2rem 2rem}@media (max-width: 1024px){.dashboard-header{flex-direction:column;gap:1rem;padding:1rem;min-height:auto}.header-left,.header-center,.header-right{flex:none}.header-center{order:2}.header-right{order:1;justify-content:center;flex-direction:column;gap:.5rem}.header-nav{flex-wrap:wrap;justify-content:center}.header-nav .nav-button{font-size:.8rem;padding:.4rem .8rem}}@media (max-width: 768px){.dashboard-header{padding:.75rem}.header-nav{flex-direction:column;gap:.25rem;width:100%}.header-nav .nav-button{justify-content:flex-start;width:100%}.current-time{font-size:.8rem;padding:.4rem .8rem}.stats-grid{grid-template-columns:1fr;padding:1rem;gap:1rem}.dashboard-content{padding:0 1rem 1rem}}.react-flow{direction:ltr}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__minimap{background-color:#fff}.react-flow__minimap svg{display:block}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.system-overview{height:100%;display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000d;overflow:hidden}.overview-header{padding:1.5rem;background:#fff;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;align-items:center}.overview-title h2{margin:0 0 .5rem;color:#333;font-size:1.5rem;font-weight:600}.connection-status{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#666}.status-indicator{width:8px;height:8px;border-radius:50%;display:inline-block}.status-indicator.connected{background:#4caf50;animation:pulse 2s infinite}.status-indicator.disconnected{background:#f44336}@keyframes pulse{0%{box-shadow:0 0 #4caf50b3}70%{box-shadow:0 0 0 10px #4caf5000}to{box-shadow:0 0 #4caf5000}}.last-update{margin-left:1rem;font-size:.8rem;color:#888}.overview-controls{display:flex;gap:.5rem}.control-button{padding:.5rem 1rem;border:1px solid #e1e5e9;background:#fff;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:.9rem;color:#666}.control-button:hover{background:#f8f9fa;border-color:#667eea;color:#667eea}.flow-container{flex:1;height:600px;background:#fafafa}.overview-footer{padding:1rem 1.5rem;background:#fff;border-top:1px solid #e1e5e9}.legend{display:flex;gap:2rem;justify-content:center}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:#666}.legend-color{width:12px;height:12px;border-radius:3px;display:inline-block}.legend-color.online{background:#4caf50}.legend-color.warning{background:#ff9800}.legend-color.error{background:#f44336}.legend-color.offline{background:#9e9e9e}.react-flow__node{font-family:inherit}.react-flow__controls{background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 2px 10px #0000001a}.react-flow__controls-button{background:#fff;border:none;border-bottom:1px solid #e1e5e9;color:#666;transition:all .3s ease}.react-flow__controls-button:hover{background:#f8f9fa;color:#667eea}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__minimap{background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 2px 10px #0000001a}.react-flow__attribution{background:#fffc;color:#666;font-size:10px;padding:2px 4px;border-radius:3px}.flow-list-container{flex:1;padding:1.5rem;overflow-y:auto}.flow-list-header{margin-bottom:2rem;text-align:center}.flow-list-header h3{margin:0 0 .5rem;color:#333;font-size:1.3rem;font-weight:600}.flow-list-header p{margin:0;color:#666;font-size:.95rem}.no-flows{text-align:center;padding:3rem 1rem;color:#666}.no-flows-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.no-flows h3{margin:0 0 .5rem;color:#333;font-size:1.2rem}.no-flows p{margin:0 0 2rem;color:#666}.create-flow-btn{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .3s ease}.create-flow-btn:hover{background:#5a67d8;transform:translateY(-1px)}.flow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}.flow-card{background:#fff;border:1px solid #e1e5e9;border-radius:12px;padding:1.5rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000000d}.flow-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26;transform:translateY(-2px)}.flow-card-header{margin-bottom:1rem}.flow-card-header h4{margin:0 0 .5rem;color:#333;font-size:1.1rem;font-weight:600}.flow-stats{display:flex;gap:1rem;font-size:.85rem;color:#666}.flow-card-description{color:#666;font-size:.9rem;line-height:1.5;margin-bottom:1rem;min-height:3rem}.flow-card-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0f0;padding-top:1rem}.flow-date{font-size:.8rem;color:#999}.view-flow-btn{padding:.4rem .8rem;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s ease}.view-flow-btn:hover{background:#5a67d8}.default-flow-section{border-top:2px solid #f0f0f0;padding-top:2rem}.default-flow-header{margin-bottom:1rem;text-align:center}.default-flow-header h3{margin:0 0 .5rem;color:#333;font-size:1.2rem;font-weight:600}.default-flow-header p{margin:0;color:#666;font-size:.9rem}.default-flow{height:400px;border:1px solid #e1e5e9;border-radius:8px;background:#fafafa}.flow-info-panel{background:#fff;padding:1rem;border-radius:8px;box-shadow:0 2px 8px #0000001a;border:1px solid #e1e5e9;min-width:200px}.flow-info-panel h4{margin:0 0 .5rem;color:#333;font-size:1rem;font-weight:600}.flow-info-panel p{margin:0 0 1rem;color:#666;font-size:.85rem;line-height:1.4}.flow-info-panel .flow-stats{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:#888}@media (max-width: 768px){.overview-header{flex-direction:column;gap:1rem;align-items:flex-start}.legend{flex-wrap:wrap;gap:1rem;justify-content:flex-start}.flow-container{height:500px}.flow-grid{grid-template-columns:1fr}.default-flow{height:300px}}.device-management{padding:0}.device-management-header{margin-bottom:2rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000d;display:flex;justify-content:space-between;align-items:center}.header-left h2{margin:0 0 .5rem;color:#333;font-size:1.5rem;font-weight:600}.header-left p{margin:0;color:#666;font-size:.9rem}.header-right{display:flex;align-items:center}.scan-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #007bff33}.scan-btn:hover:not(:disabled){background:linear-gradient(135deg,#0056b3,#004085);transform:translateY(-1px);box-shadow:0 4px 8px #007bff4d}.scan-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.scan-btn.scanning{background:linear-gradient(135deg,#6c757d,#5a6268)}.scan-icon{font-size:1rem}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000d}.device-header h2{margin:0;color:#333;font-size:1.5rem;font-weight:600}.device-actions{display:flex;gap:.75rem}.refresh-btn,.sync-btn{padding:.5rem 1rem;border:1px solid #e1e5e9;background:#fff;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:.9rem;color:#666}.refresh-btn:hover{background:#f8f9fa;border-color:#4caf50;color:#4caf50}.sync-btn:hover{background:#f8f9fa;border-color:#667eea;color:#667eea}.error-banner{background:#ffebee;color:#c62828;padding:1rem;border-radius:8px;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;border:1px solid #ffcdd2}.error-banner button{background:none;border:none;color:#c62828;font-size:1.2rem;cursor:pointer;padding:.25rem}.loading{text-align:center;padding:3rem;color:#666;font-size:1.1rem}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;padding:0}.device-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px #0000000d;transition:all .3s ease;border-left:4px solid #e1e5e9;cursor:move}.device-card:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0000001a}.device-card.online{border-left-color:#4caf50}.device-card.warning{border-left-color:#ff9800}.device-card.offline{border-left-color:#f44336}.device-status{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.online{background:#4caf50;animation:pulse 2s infinite}.status-dot.warning{background:#ff9800}.status-dot.offline{background:#f44336}.status-text{font-size:.8rem;font-weight:600;color:#666}.device-info .device-name{margin:0 0 1rem;color:#333;font-size:1.2rem;font-weight:600}.device-details{margin-bottom:1.5rem}.detail-row{display:flex;justify-content:space-between;margin-bottom:.5rem;padding:.25rem 0}.detail-row .label{font-weight:500;color:#666;font-size:.9rem}.detail-row .value{color:#333;font-size:.9rem;font-family:Courier New,monospace}.device-actions-card{display:flex;gap:.5rem;border-top:1px solid #f0f0f0;padding-top:1rem}.edit-btn,.config-btn{flex:1;padding:.5rem;border:1px solid #e1e5e9;background:#fff;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:.85rem;color:#666}.edit-btn:hover{background:#f8f9fa;border-color:#667eea;color:#667eea}.config-btn:hover{background:#f8f9fa;border-color:#ff9800;color:#ff9800}.no-devices{text-align:center;padding:4rem 2rem;color:#666}.no-devices-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.no-devices h3{margin:0 0 .5rem;color:#333}.no-devices p{margin:0;color:#666}.modal{background:#fff;border-radius:12px;width:90%;max-width:500px;box-shadow:0 20px 40px #0000001a;animation:modalShow .3s ease-out;overflow:hidden}@keyframes modalShow{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-header{padding:1.5rem;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:1.2rem}.close-btn{background:none;border:none;font-size:1.5rem;color:#666;cursor:pointer;padding:.25rem}.close-btn:hover{color:#333}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.groups-section{margin-bottom:2rem}.groups-section h3{margin:0 0 1rem;color:#333;font-size:1.2rem;font-weight:600;padding-left:.5rem}.groups-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1.5rem;margin-bottom:2rem}.group-zone{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px #0000000d;border:2px dashed transparent;transition:all .3s ease;min-height:200px}.group-zone.drag-over{border-color:#667eea;background:#f8f9ff;transform:scale(1.02)}.group-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.group-header h4{margin:0;color:#333;font-size:1.1rem;font-weight:600}.group-description{margin:0 0 1rem;color:#666;font-size:.9rem;line-height:1.4}.group-devices{min-height:100px}.empty-group{display:flex;align-items:center;justify-content:center;height:100px;border:2px dashed #ddd;border-radius:8px;color:#999;font-size:.9rem;background:#fafafa}.device-grid-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.device-card-mini{background:#f8f9fa;border-radius:8px;padding:1rem;border-left:3px solid #e1e5e9;cursor:move;transition:all .3s ease;display:flex;align-items:center;gap:1rem}.device-card-mini:hover{transform:translateY(-2px);box-shadow:0 3px 12px #0000001a}.device-card-mini.online{border-left-color:#4caf50}.device-card-mini.warning{border-left-color:#ff9800}.device-card-mini.offline{border-left-color:#f44336}.device-status-mini{display:flex;align-items:center}.device-info-mini{flex-grow:1}.device-info-mini h5{margin:0 0 .25rem;color:#333;font-size:.9rem;font-weight:600}.device-type{color:#666;font-size:.8rem}.device-actions-mini{display:flex;gap:.25rem}.edit-btn-mini,.remove-btn-mini{background:none;border:1px solid #e1e5e9;border-radius:4px;width:28px;height:28px;cursor:pointer;transition:all .3s ease;font-size:.8rem;display:flex;align-items:center;justify-content:center}.edit-btn-mini:hover{background:#f0f0f0;border-color:#667eea}.remove-btn-mini:hover{background:#fee;border-color:#f44336}.ungrouped-section{margin-bottom:2rem}.ungrouped-section h3{margin:0 0 1rem;color:#333;font-size:1.2rem;font-weight:600;padding-left:.5rem}.form-group input{width:100%;padding:.75rem;border:1px solid #e1e5e9;border-radius:6px;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.device-info-readonly{background:#f8f9fa;padding:1rem;border-radius:6px;margin-top:1rem}.device-info-readonly p{margin:.25rem 0;font-size:.9rem;color:#666}.modal-footer{padding:1.5rem;border-top:1px solid #e1e5e9;display:flex;justify-content:flex-end;gap:.75rem}.cancel-btn,.save-btn{padding:.75rem 1.5rem;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.cancel-btn{background:#f8f9fa;color:#666;border:1px solid #e1e5e9}.cancel-btn:hover{background:#e9ecef}.save-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.save-btn:hover{transform:translateY(-1px);box-shadow:0 5px 15px #667eea4d}.adoption-toggle{display:flex;align-items:center;gap:.5rem}.switch{position:relative;display:inline-block;width:48px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:#007bff}input:checked+.slider:before{transform:translate(24px)}.adoption-status{font-size:.8rem;font-weight:500;padding:.2rem .4rem;border-radius:4px}.adoption-status.adopted{color:#28a745;background-color:#28a7451a}.adoption-status.not-adopted{color:#dc3545;background-color:#dc35451a}.adoption-toggle-mini{display:flex;align-items:center;gap:.25rem;margin-top:.25rem}.switch-mini{position:relative;display:inline-block;width:32px;height:16px}.switch-mini input{opacity:0;width:0;height:0}.slider-mini{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:16px}.slider-mini:before{position:absolute;content:"";height:12px;width:12px;left:2px;bottom:2px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider-mini{background-color:#007bff}input:checked+.slider-mini:before{transform:translate(16px)}.adoption-status-mini{font-size:.7rem;font-weight:500;padding:.1rem .2rem;border-radius:3px;min-width:12px;text-align:center}.adoption-status-mini.adopted{color:#28a745;background-color:#28a7451a}.adoption-status-mini.not-adopted{color:#dc3545;background-color:#dc35451a}@media (max-width: 768px){.device-header{flex-direction:column;gap:1rem;align-items:flex-start}.device-grid{grid-template-columns:1fr}.modal{width:95%;margin:1rem}.device-management-header{flex-direction:column;gap:1rem;align-items:flex-start}.header-right{width:100%;justify-content:flex-start}}.reactflow-wrapper{background:linear-gradient(135deg,#1a1a1a,#0d1117)}.react-flow__background{background-color:#0d1117!important}.react-flow__edge-path{stroke:#58a6ff;stroke-width:2px}.react-flow__edge.selected .react-flow__edge-path{stroke:#f85149;stroke-width:3px}.react-flow__connection-line{stroke:#58a6ff;stroke-width:3px;stroke-dasharray:5,5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(88,166,255,.6));animation:dashFlow 1s linear infinite}@keyframes dashFlow{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}.react-flow__edge-path{stroke:#58a6ff;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(88,166,255,.3))}.react-flow__edge.selected .react-flow__edge-path{stroke:#f85149;stroke-width:3px;filter:drop-shadow(0 0 8px rgba(248,81,73,.6))}.react-flow__controls{background:#0d1117cc;border:1px solid #30363d;border-radius:8px}.react-flow__controls button{background:#fff;border:1px solid #30363d;color:#c9d1d9;border-radius:4px}.react-flow__controls button:hover{background:#fff;border-color:#58a6ff}.react-flow__minimap{background:#0d1117e6;border:1px solid #30363d;border-radius:8px}.react-flow__edge.execution-edge .react-flow__edge-path{stroke:#ff6b35;stroke-width:4px;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,107,53,.5))}.react-flow__edge.data-edge .react-flow__edge-path{stroke:#58a6ff;stroke-width:2px;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(88,166,255,.4))}.react-flow__edge.boolean-edge .react-flow__edge-path{stroke:#27ae60;stroke-width:2px;stroke-linecap:round;stroke-dasharray:3,3;filter:drop-shadow(0 0 4px rgba(39,174,96,.4))}.react-flow__edge.string-edge .react-flow__edge-path{stroke:#e91e63;stroke-width:2px;stroke-linecap:round;stroke-dasharray:2,4;filter:drop-shadow(0 0 4px rgba(233,30,99,.4))}.react-flow__edge.number-edge .react-flow__edge-path{stroke:#66bb6a;stroke-width:2px;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(102,187,106,.4))}.react-flow__edge.executing .react-flow__edge-path{stroke:#ff6b35;stroke-width:5px;stroke-dasharray:8,4;animation:executionFlow .8s linear infinite;filter:drop-shadow(0 0 12px rgba(255,107,53,.8))}@keyframes executionFlow{0%{stroke-dashoffset:12}to{stroke-dashoffset:0}}.react-flow__node.selected{box-shadow:0 0 0 2px #58a6ff,0 0 12px #58a6ff80;z-index:1000}.react-flow__node.react-flow__node-dragging{transform:none!important;transition:none!important}.react-flow__handle{border:2px solid #ffffff!important;width:5px!important;height:5px!important;transition:all .2s ease}.react-flow__handle:hover{transform:scale(1.3);box-shadow:0 0 8px #79c0ffcc}.react-flow__handle.connecting{background:#ff6b35!important;animation:pulse 1s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.4)}}.react-flow__pane{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes pulse{0%,to{box-shadow:0 4px 12px #ff44444d}50%{box-shadow:0 6px 20px #9c27b080}}.react-flow__edge-path{stroke:#58a6ff;stroke-width:2px;filter:drop-shadow(0 0 4px rgba(88,166,255,.3));transition:all .2s ease}.react-flow__edge:hover .react-flow__edge-path{stroke:#79c0ff;stroke-width:3px;filter:drop-shadow(0 0 8px rgba(121,192,255,.6))}.react-flow__edge.selected .react-flow__edge-path{stroke:#58a6ff;stroke-width:3px;filter:drop-shadow(0 0 8px rgba(88,166,255,.8))}.react-flow__edge[data-type=data] .react-flow__edge-path{stroke:#58a6ff;stroke-dasharray:none}.react-flow__edge[data-type=exec] .react-flow__edge-path{stroke:#ff6b35;stroke-width:3px;filter:drop-shadow(0 0 4px rgba(255,107,53,.4))}.react-flow__edge[data-type=bool] .react-flow__edge-path{stroke:#27ae60;stroke-width:2px;filter:drop-shadow(0 0 4px rgba(39,174,96,.3))}@keyframes flowAnimation{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}@keyframes flowToProcessing{0%{stroke-dashoffset:12}to{stroke-dashoffset:0}}@keyframes processingPulse{0%,to{stroke-width:3px;filter:drop-shadow(0 0 6px rgba(74,222,128,.4))}50%{stroke-width:4px;filter:drop-shadow(0 0 12px rgba(74,222,128,.8))}}.react-flow__edge.executing .react-flow__edge-path,.react-flow__edge[data-type=data].executing .react-flow__edge-path,.react-flow__edge[data-type=exec].executing .react-flow__edge-path,.react-flow__edge[data-type=bool].executing .react-flow__edge-path{stroke:#ff6b35!important;stroke-width:4px!important;stroke-dasharray:5,5!important;animation:flowAnimation .5s linear infinite!important;filter:drop-shadow(0 0 12px rgba(255,107,53,.8))!important}.react-flow__edge.processing .react-flow__edge-path,.react-flow__edge[data-type=data].processing .react-flow__edge-path,.react-flow__edge[data-type=exec].processing .react-flow__edge-path,.react-flow__edge[data-type=bool].processing .react-flow__edge-path{stroke:#4ade80!important;stroke-width:3px!important;animation:processingPulse 1.5s ease-in-out infinite!important}.react-flow__edge.processing-incoming .react-flow__edge-path,.react-flow__edge[data-type=data].processing-incoming .react-flow__edge-path,.react-flow__edge[data-type=exec].processing-incoming .react-flow__edge-path,.react-flow__edge[data-type=bool].processing-incoming .react-flow__edge-path{stroke:#4ade80!important;stroke-width:3px!important;stroke-dasharray:8,4!important;animation:flowToProcessing .4s linear infinite!important;filter:drop-shadow(0 0 8px rgba(74,222,128,.6))!important}.type-error-notification{animation:slideIn .3s ease-out,fadeOut .5s ease-in 4.5s forwards}.type-error-notification.warning{background:linear-gradient(135deg,#f57c00,#e65100)!important;box-shadow:0 4px 12px #f57c004d!important;border:1px solid #ff9800!important}.type-error-notification.exception{background:linear-gradient(135deg,#7b1fa2,#4a148c)!important;box-shadow:0 4px 12px #7b1fa24d!important;border:1px solid #9c27b0!important;animation:slideIn .3s ease-out,pulse 1s ease-in-out infinite,fadeOut .5s ease-in 7s forwards!important}.type-error-close-btn{transition:opacity .2s ease}.type-error-close-btn:hover{opacity:1!important;background:#fff3!important}.reactflow-wrapper{width:100%;height:100%;position:relative}.type-error-container{position:absolute;top:20px;right:20px;z-index:1000;max-width:400px;pointer-events:none}.type-error-item{pointer-events:auto;background:linear-gradient(135deg,#f44,#c33);color:#fff;padding:12px 16px;border-radius:8px;margin-bottom:8px;box-shadow:0 4px 12px #ff44444d;border:1px solid #ff6666;font-size:13px;line-height:1.4;position:relative}@keyframes button-glow{0%,to{box-shadow:0 6px 20px #10b98140}50%{box-shadow:0 8px 30px #10b98166}}@keyframes save-button-glow{0%,to{box-shadow:0 6px 20px #3b82f640}50%{box-shadow:0 8px 30px #3b82f666}}@keyframes load-button-glow{0%,to{box-shadow:0 6px 20px #8b5cf640}50%{box-shadow:0 8px 30px #8b5cf666}}@keyframes success-flash{0%{background-color:#10b9811a}50%{background-color:#10b9814d}to{background-color:#10b9811a}}@keyframes shimmer{0%{left:-100%}to{left:100%}}.button-container{display:flex;gap:12px;justify-content:center;align-items:center}.modern-button{position:relative;overflow:hidden;border:none;border-radius:12px;padding:14px 24px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;box-shadow:0 6px 20px #00000026;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.modern-button:hover{transform:translateY(-3px) scale(1.02)}.modern-button:active{transform:translateY(-1px) scale(.98)}.modern-button.run-button{background:linear-gradient(135deg,#10b981,#059669,#047857)}.modern-button.run-button:hover{box-shadow:0 12px 30px #10b98166}.modern-button.save-button{background:linear-gradient(135deg,#3b82f6,#2563eb,#1d4ed8)}.modern-button.save-button:hover{box-shadow:0 12px 30px #3b82f666}.modern-button.load-button{background:linear-gradient(135deg,#8b5cf6,#7c3aed,#6d28d9)}.modern-button.load-button:hover{box-shadow:0 12px 30px #8b5cf666}.modern-button.running{background:linear-gradient(135deg,#ef4444,#dc2626,#b91c1c);cursor:not-allowed;opacity:.8}.modern-button.running:hover{transform:none;box-shadow:0 8px 25px #ef44444d}.react-flow__handle{border:2px solid white!important;transition:all .2s ease;box-shadow:0 2px 4px #0003}.react-flow__handle:hover{transform:scale(1.3);box-shadow:0 0 12px #fffc}.iot-handle{width:8px!important;height:8px!important;border-radius:50%!important;border:2px solid #ffffff!important;box-shadow:0 0 4px #0000004d,inset 0 1px 1px #fff3;transition:all .2s ease}.iot-handle:hover{transform:scale(1.4);box-shadow:0 0 15px #58a6ffcc,inset 0 1px 1px #ffffff4d}.iot-handle-exec{border-color:#ff6b35!important;box-shadow:0 0 6px #ff6b3566,inset 0 1px 1px #fff3}.iot-handle-data{border-color:#58a6ff!important;box-shadow:0 0 6px #58a6ff66,inset 0 1px 1px #fff3}.iot-handle-exec-true{border-color:#27ae60!important;box-shadow:0 0 6px #27ae6066,inset 0 1px 1px #fff3}.iot-handle-exec-false{border-color:#e74c3c!important;box-shadow:0 0 6px #e74c3c66,inset 0 1px 1px #fff3}.react-flow__handle.connecting{box-shadow:0 0 20px #58a6ffe6;transform:scale(1.5);animation:pulse-connect 1s infinite}@keyframes pulse-connect{0%{box-shadow:0 0 20px #58a6ffe6}50%{box-shadow:0 0 30px #58a6ff}to{box-shadow:0 0 20px #58a6ffe6}}.react-flow__handle.connected{box-shadow:0 0 8px #fff9,inset 0 1px 2px #ffffff4d}.handle-execution{width:8px!important;height:8px!important;background:#fff!important;clip-path:polygon(0 50%,100% 0,100% 100%)!important;border-radius:0!important;border:2px solid white!important}.handle-data{width:12px!important;height:12px!important;border-radius:50%!important;border:2px solid white!important}.handle-int{background:#66bb6a!important}.handle-float{background:#81c784!important}.handle-double{background:#a5d6a7!important}.handle-string{background:#e91e63!important}.handle-bool{background:#ef5350!important}.handle-char{background:#9c27b0!important}.handle-file{background:#ff9800!important}.handle-any{background:gold!important}.handle-input{left:-8px!important}.handle-output{right:-8px!important}.handle-execution.handle-input{left:-6px!important}.handle-execution.handle-output{right:-6px!important}.react-flow__handle.connecting{background:#58a6ff!important;box-shadow:0 0 12px #58a6ffcc}.react-flow__handle.connected{box-shadow:0 0 6px #fff6}.handle-error{background:#f44!important;animation:pulse-error 1s infinite}@keyframes pulse-error{0%{box-shadow:0 0 #ff4444b3}70%{box-shadow:0 0 0 4px #f440}to{box-shadow:0 0 #f440}}.handle-warning{background:orange!important;animation:pulse-warning 2s infinite}@keyframes pulse-warning{0%{box-shadow:0 0 #ffa50080}70%{box-shadow:0 0 0 3px #ffa50000}to{box-shadow:0 0 #ffa50000}}.handle-large{width:14px!important;height:14px!important}.handle-small{width:10px!important;height:10px!important}.function-node .handle-execution{top:35px!important}.value-node .handle-output{top:50%!important;transform:translateY(-50%)}.logic-node .handle-output{top:108px!important}.react-flow__handle-left,.react-flow__handle-right{transform:translateY(-0%)!important}.iot-blueprint-node{background:linear-gradient(135deg,#21262d,#161b22);border:2px solid #30363d;border-radius:8px;box-shadow:0 4px 12px #0006;min-width:160px;font-family:Arial,sans-serif;position:relative;transition:all .2s ease}.iot-blueprint-node:hover{border-color:#58a6ff;box-shadow:0 6px 20px #58a6ff4d;transform:translateY(-1px)}.iot-blueprint-node.selected{border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff33}.iot-blueprint-node.executing{border-color:#ff6b35!important;box-shadow:0 0 25px #ff6b35cc,0 4px 20px #0000004d!important;animation:executeGlow .8s ease-in-out infinite alternate,executePulse 2s ease-in-out infinite;transform:translateY(-2px) scale(1.02);z-index:10;position:relative}.iot-processing-indicator{margin-left:8px;animation:spin .8s linear infinite,processingPulse 1.5s ease-in-out infinite;font-size:14px;filter:drop-shadow(0 0 3px rgba(255,107,53,.8))}@keyframes processingPulse{0%,to{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.7;transform:scale(1.1) rotate(180deg)}}@keyframes executeGlow{0%{box-shadow:0 0 20px #ff6b3599,0 4px 16px #0003;border-color:#ff6b35}to{box-shadow:0 0 35px #ff6b35e6,0 6px 24px #0006;border-color:#ff8c42}}@keyframes executePulse{0%,to{transform:translateY(-2px) scale(1.02)}50%{transform:translateY(-3px) scale(1.03)}}.iot-node-header{padding:8px 12px;color:#fff;font-weight:700;font-size:12px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:6px;border-top-right-radius:5px;border-top-left-radius:5px}.iot-node-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iot-node-icon{font-size:14px;opacity:.9}.iot-node-body{padding:8px 12px;background:#21262dcc;color:#c9d1d9;font-size:11px;min-height:0px;display:flex;flex-direction:column;gap:4px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.iot-node-input{background:#21262d;border:1px solid #30363d;border-radius:4px;color:#c9d1d9;padding:4px 6px;font-size:11px;font-family:inherit;transition:border-color .2s ease}.iot-node-input:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 2px #58a6ff33}.iot-node-select{background:#21262d;border:1px solid #30363d;border-radius:4px;color:#c9d1d9;padding:4px 6px;font-size:11px;font-family:inherit;cursor:pointer}.iot-node-select:focus{outline:none;border-color:#58a6ff}.iot-node-checkbox{margin-right:6px;accent-color:#58a6ff}.iot-node-label{font-size:10px;color:#7d8590;margin-bottom:2px;font-weight:500}.iot-node-description{font-size:9px;color:#7d8590;font-style:italic;margin-top:2px;line-height:1.2}.iot-header-events{background:linear-gradient(135deg,#e74c3c,#c0392b)}.iot-header-control{background:linear-gradient(135deg,#f39c12,#e67e22)}.iot-header-sensors{background:linear-gradient(135deg,#3498db,#2980b9)}.iot-header-actuators{background:linear-gradient(135deg,#e67e22,#d35400)}.iot-header-communication{background:linear-gradient(135deg,#16a085,#138d75)}.iot-header-processing{background:linear-gradient(135deg,#8e44ad,#7d3c98)}.iot-header-values{background:linear-gradient(135deg,#34495e,#2c3e50)}.iot-header-utilities{background:linear-gradient(135deg,#95a5a6,#7f8c8d)}.react-flow__handle.iot-handle{width:12px;height:12px;border:2px solid #fff;border-radius:50%;transition:all .2s ease}.react-flow__handle.iot-handle:hover{transform:scale(1.2);box-shadow:0 0 8px #fff9}.react-flow__handle.iot-handle-exec{background:#fff;border-color:#fff}.react-flow__handle.iot-handle-data{background:#fff;border-color:#58a6ff}.react-flow__handle.iot-handle-exec-true{background:#28a745;border-color:#28a745}.react-flow__handle.iot-handle-exec-false{background:#dc3545;border-color:#dc3545}@keyframes iot-node-pulse{0%{box-shadow:0 0 #58a6ff66}70%{box-shadow:0 0 0 6px #58a6ff00}to{box-shadow:0 0 #58a6ff00}}.iot-blueprint-node.executing{animation:iot-node-pulse 1.5s infinite}@media (max-width: 768px){.iot-blueprint-node{min-width:140px}.iot-node-header{padding:6px 10px;font-size:11px}.iot-node-body{padding:6px 10px;font-size:10px}}.group-dropdown{position:absolute;top:100%;left:0;right:0;background:#21262d;border:1px solid #30363d;border-radius:6px;box-shadow:0 8px 24px #00000080;z-index:1000;max-height:300px;overflow:hidden;animation:slideDown .2s ease-out}.group-dropdown-search{padding:8px;border-bottom:1px solid #30363d}.group-dropdown-search input{width:90%;padding:6px 8px;background:#0d1117;border:1px solid #30363d;border-radius:4px;color:#c9d1d9;font-size:12px;transition:border-color .2s ease}.group-dropdown-search input:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 2px #58a6ff1a}.group-dropdown-list{max-height:200px;overflow-y:auto}.group-dropdown-item{padding:8px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid #30363d;transition:background-color .2s ease;font-size:11px}.group-dropdown-item:hover{background:#161b22}.group-dropdown-item.selected{background:#0d1117}.group-dropdown-item input[type=checkbox]{margin:0;cursor:pointer;transform:scale(1.1)}.group-dropdown-item-info{flex:1;min-width:0;overflow:hidden}.group-dropdown-item-name{color:#c9d1d9;font-size:11px;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-dropdown-item-count{color:#7d8590;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-dropdown-empty{padding:12px;text-align:center;color:#7d8590;font-size:11px}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.group-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.group-dialog{background:#21262d;border:1px solid #30363d;border-radius:8px;width:400px;max-height:500px;display:flex;flex-direction:column;animation:slideIn .3s ease-out;box-shadow:0 10px 30px #00000080}.group-dialog-header{padding:16px;border-bottom:1px solid #30363d;display:flex;justify-content:space-between;align-items:center}.group-dialog-title{margin:0;color:#c9d1d9;font-size:16px;font-weight:600}.group-dialog-close{background:transparent;border:none;color:#7d8590;cursor:pointer;font-size:18px;padding:4px;border-radius:4px;transition:all .2s ease}.group-dialog-close:hover{color:#c9d1d9;background:#30363d}.group-dialog-search{padding:16px;border-bottom:1px solid #30363d}.group-dialog-search input{width:100%;padding:8px 12px;background:#0d1117;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;font-size:14px;transition:border-color .2s ease}.group-dialog-search input:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff1a}.group-dialog-list{flex:1;overflow-y:auto;max-height:300px}.group-dialog-item{padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;border-bottom:1px solid #30363d;transition:background-color .2s ease}.group-dialog-item:hover{background:#161b22}.group-dialog-item.selected{background:#0d1117}.group-dialog-item input[type=checkbox]{margin:0;cursor:pointer;transform:scale(1.2)}.group-dialog-item-info{flex:1}.group-dialog-item-name{color:#c9d1d9;font-size:14px;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-dialog-item-count{color:#7d8590;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-dialog-footer{padding:16px;border-top:1px solid #30363d;display:flex;justify-content:space-between;align-items:center}.group-dialog-counter{color:#7d8590;font-size:12px}.group-dialog-buttons{display:flex;gap:8px}.group-dialog-button{padding:6px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease}.group-dialog-button.secondary{background:transparent;border:1px solid #30363d;color:#7d8590}.group-dialog-button.secondary:hover{background:#21262d;color:#c9d1d9}.group-dialog-button.primary{background:#238636;border:none;color:#fff}.group-dialog-button.primary:hover{background:#2ea043}.group-dialog-empty{padding:20px;text-align:center;color:#7d8590}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 480px){.group-dialog{width:90%;max-width:350px}}.relay-mapper{padding:20px;background:#f5f5f5;border-radius:8px;margin:10px 0;max-height:80vh;overflow-y:auto}.relay-mapper h3{margin:0 0 20px;color:#333;font-size:18px;font-weight:700}.relay-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;padding:15px;background:#fff;border-radius:8px;border:1px solid #ddd}.search-container{display:flex;gap:10px;align-items:center}.search-input-wrapper{position:relative;flex:1}.search-input{width:calc(100% - 50px);padding:10px 40px 10px 12px;border:1px solid #ccc;border-radius:6px;font-size:14px;background:#fff;transition:border-color .2s ease}.search-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff33}.clear-search{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:18px;color:#666;cursor:pointer;padding:2px;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.clear-search:hover{background:#f0f0f0;color:#333}.status-filter{padding:8px 12px;border:1px solid #ccc;border-radius:6px;background:#fff;color:#333;font-size:14px;cursor:pointer;min-width:140px}.status-filter:focus{outline:none;border-color:#007bff}.control-buttons{display:flex;gap:8px;align-items:center}.refresh-button,.clear-filters{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:all .2s ease}.refresh-button{background:#007bff;color:#fff}.refresh-button:hover:not(:disabled){background:#0056b3}.refresh-button:disabled{background:#ccc;cursor:not-allowed}.clear-filters{background:#6c757d;color:#fff}.clear-filters:hover{background:#545b62}.device-stats{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:8px 12px;background:#ffffffb3;border-radius:6px;font-size:14px}.device-count{color:#666;font-weight:500}.online-count{color:#28a745;font-size:12px}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#666}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}.error{display:flex;align-items:flex-start;gap:15px;padding:20px;background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;color:#721c24}.error-icon{font-size:24px;flex-shrink:0}.error-content{flex:1}.error-content strong{display:block;margin-bottom:8px;font-size:16px}.error-content p{margin:0 0 12px;line-height:1.4}.retry-button{padding:8px 16px;background:#dc3545;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.retry-button:hover{background:#c82333}.relay-list{display:flex;flex-direction:column;gap:15px}.relay-device{background:#fff;border:2px solid #ddd;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.relay-device:hover{border-color:#007bff;box-shadow:0 4px 12px #007bff26;transform:translateY(-2px)}.relay-device.selected{border-color:#28a745;box-shadow:0 4px 12px #28a74540;background:linear-gradient(135deg,#f8fff9,#fff)}.relay-device.online{border-left:4px solid #28a745}.relay-device.offline{border-left:4px solid #dc3545;opacity:.8}.device-header{margin-bottom:15px}.device-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.device-name strong{font-size:16px;color:#333}.device-badges{display:flex;gap:8px;align-items:center}.status-indicator{font-size:12px;padding:4px 8px;border-radius:12px;font-weight:500}.status-indicator.online{background:#d4edda;color:#155724}.status-indicator.offline{background:#f8d7da;color:#721c24}.selected-badge{background:#28a745;color:#fff;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:500}.device-mac{font-size:12px;color:#666;font-family:Courier New,monospace;background:#f8f9fa;padding:4px 8px;border-radius:4px;display:inline-block}.device-details{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:20px;padding:15px;background:#f8f9fa;border-radius:8px}.detail-row{display:flex;flex-direction:column;gap:4px}.detail-label{font-size:12px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.5px}.detail-value{font-size:14px;color:#333;font-family:Courier New,monospace;background:#fff;padding:4px 8px;border-radius:4px;border:1px solid #e9ecef}.gpio-info{border-top:1px solid #eee;padding-top:15px}.gpio-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.gpio-header strong{color:#333;font-size:14px}.gpio-count{background:#e9ecef;color:#495057;padding:2px 8px;border-radius:12px;font-size:12px}.gpio-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.gpio-item{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:12px;transition:all .2s ease}.gpio-item:hover{background:#e9ecef;border-color:#adb5bd}.gpio-name{font-weight:700;color:#495057;font-size:13px;display:block;margin-bottom:4px}.gpio-topic{color:#6c757d;font-family:Courier New,monospace;font-size:11px;display:block;margin-bottom:4px}.gpio-trigger{color:#007bff;font-size:10px;background:#e7f3ff;padding:2px 6px;border-radius:4px;display:inline-block}.no-gpio{text-align:center;color:#6c757d;font-style:italic;padding:20px}.device-actions{margin-top:15px;padding-top:15px;border-top:1px solid #eee;text-align:right}.select-device-btn{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.select-device-btn:hover{background:linear-gradient(135deg,#0056b3,#004085);transform:translateY(-1px);box-shadow:0 2px 8px #007bff4d}.no-devices{text-align:center;padding:60px 20px;color:#666;background:#fff;border-radius:12px;border:2px dashed #ddd}.no-devices-icon{font-size:48px;margin-bottom:20px;opacity:.5}.no-devices strong{display:block;font-size:18px;margin-bottom:12px;color:#333}.no-devices p{margin-bottom:15px;line-height:1.5}.no-devices ul{text-align:left;display:inline-block;margin:0;padding:0;list-style:none}.no-devices li{padding:4px 0;color:#666}@media (max-width: 768px){.relay-mapper{padding:15px}.search-container{flex-direction:column;align-items:stretch}.device-details{grid-template-columns:1fr;gap:10px}.gpio-list{grid-template-columns:1fr}.device-stats{flex-direction:column;gap:8px;align-items:flex-start}}.relay-node-creator-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.relay-node-creator-modal{background:#21262d;border:2px solid #30363d;border-radius:12px;max-width:900px;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #30363d;background:linear-gradient(135deg,#e67e22,#d35400);color:#fff}.modal-header h3{margin:0;font-size:18px}.close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;line-height:1}.close-button:hover{opacity:.7}.modal-content{padding:20px;color:#c9d1d9;max-height:calc(80vh - 80px);overflow-y:auto}.modal-content p{margin-bottom:16px;color:#7d8590}.save-blueprint-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.save-blueprint-dialog{background:#fff;border-radius:12px;width:100%;max-width:500px;max-height:90vh;overflow:hidden;box-shadow:0 10px 30px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.dialog-header h3{margin:0;font-size:1.3rem;font-weight:600}.close-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .3s ease}.close-btn:hover{background:#ffffff1a}.dialog-content{padding:24px;overflow-y:auto;max-height:calc(90vh - 140px)}.error-message{background:#f8d7da;color:#721c24;padding:12px 16px;border-radius:6px;border:1px solid #f5c6cb;margin-bottom:20px;font-size:.9rem}.form-group label{display:block;margin-bottom:6px;font-weight:500;color:#333;font-size:.9rem}.form-input,.form-textarea{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:border-color .3s ease;font-family:inherit;resize:vertical}.form-input:focus,.form-textarea:focus{outline:none;border-color:#667eea}.form-input:disabled,.form-textarea:disabled{background:#f8f9fa;cursor:not-allowed;opacity:.7}.form-help{font-size:.8rem;color:#6c757d;margin-top:4px;font-style:italic}.checkbox-label{display:flex;align-items:center;cursor:pointer;font-size:.9rem;margin-bottom:0!important}.checkbox-label input[type=checkbox]{opacity:0;position:absolute}.checkmark{width:20px;height:20px;background:#e0e0e0;border-radius:4px;margin-right:10px;position:relative;transition:all .3s ease}.checkbox-label input[type=checkbox]:checked+.checkmark{background:#667eea}.checkbox-label input[type=checkbox]:checked+.checkmark:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.checkbox-label:hover .checkmark{background:#d0d0d0}.checkbox-label input[type=checkbox]:checked:hover+.checkmark{background:#5a67d8}.blueprint-preview{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:16px;margin-top:10px}.preview-label{font-size:.9rem;font-weight:500;color:#495057;margin-bottom:8px}.preview-stats{display:flex;gap:16px;font-size:.85rem;color:#6c757d}.preview-stats span{display:flex;align-items:center;gap:4px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid #e0e0e0;background:#f8f9fa}.cancel-btn,.save-btn{padding:12px 24px;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:80px}.cancel-btn{background:#6c757d;color:#fff}.cancel-btn:hover:not(:disabled){background:#545b62}.save-btn{background:#28a745;color:#fff}.save-btn:hover:not(:disabled){background:#1e7e34}@media (max-width: 600px){.save-blueprint-overlay{padding:10px}.save-blueprint-dialog{max-height:95vh}.dialog-header,.dialog-content,.dialog-actions{padding-left:16px;padding-right:16px}.dialog-actions{flex-direction:column}.cancel-btn,.save-btn{width:100%}.preview-stats{flex-direction:column;gap:8px}}.edit-blueprint-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#fffc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.edit-blueprint-dialog{background:#fff;border:1px solid #d1d9e0;border-radius:12px;box-shadow:0 20px 32px #00000026;width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.dialog-header{padding:20px 24px;border-bottom:1px solid #d1d9e0;display:flex;align-items:center;justify-content:space-between}.dialog-header h2{margin:0;color:#f0f6fc;font-size:20px;font-weight:600}.close-btn{background:none;border:none;color:#656d76;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn:hover:not(:disabled){background:#f3f4f6;color:#1f2328}.close-btn:disabled{opacity:.5;cursor:not-allowed}.dialog-content{flex:1;padding:24px;overflow-y:auto}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#656d76}.spinner{width:32px;height:32px;border:3px solid #f3f4f6;border-top:3px solid #0969da;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.spinner-small{display:inline-block;width:16px;height:16px;border:2px solid #f3f4f6;border-top:2px solid #1f2328;border-radius:50%;animation:spin 1s linear infinite;margin-right:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-state{display:flex;flex-direction:column;align-items:center;padding:40px}.error-message{color:#f85149;margin-bottom:16px;text-align:center}.retry-btn{background:#f3f4f6;border:1px solid #d1d9e0;color:#1f2328;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease}.retry-btn:hover{background:#e1e4e8;border-color:#656d76}.blueprint-info{background:#f6f8fa;border:1px solid #d1d9e0;border-radius:8px;padding:20px;margin-bottom:24px}.info-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.info-header h3{margin:0;color:#1f2328;font-size:16px;font-weight:600}.status-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;text-transform:uppercase}.status-badge.active{background:#2ea04326;color:#3fb950;border:1px solid rgba(46,160,67,.4)}.status-badge.inactive{background:#f8514926;color:#f85149;border:1px solid rgba(248,81,73,.4)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.info-item{display:flex;flex-direction:column;gap:4px}.info-label{color:#656d76;font-size:12px;font-weight:500;text-transform:uppercase}.info-value{color:#1f2328;font-size:14px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;word-break:break-all}.edit-form{background:#f6f8fa;border:1px solid #d1d9e0;border-radius:8px;padding:20px}.edit-form h3{margin:0 0 20px;color:#1f2328;font-size:16px;font-weight:600}.form-group{margin-bottom:20px}.form-label{display:block;color:#1f2328;font-size:14px;font-weight:500;margin-bottom:6px}.required{color:#d1242f}.form-input,.form-textarea{width:100%;background:#fff;border:1px solid #d1d9e0;color:#1f2328;padding:8px 12px;border-radius:6px;font-size:14px;font-family:inherit;transition:border-color .2s ease;box-sizing:border-box}.form-input:focus,.form-textarea:focus{outline:none;border-color:#0969da;box-shadow:0 0 0 3px #0969da4d}.form-input:disabled,.form-textarea:disabled{opacity:.6;cursor:not-allowed}.form-textarea{resize:vertical;min-height:80px}.form-hint{display:block;color:#656d76;font-size:12px;margin-top:4px}.dialog-footer{padding:20px 24px;border-top:1px solid #d1d9e0;display:flex;justify-content:flex-end;gap:12px;background:#f6f8fa}.cancel-btn,.save-btn{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.cancel-btn{background:#f3f4f6;border:1px solid #d1d9e0;color:#1f2328}.cancel-btn:hover:not(:disabled){background:#e1e4e8;border-color:#656d76}.save-btn{background:#1f883d;border:1px solid #1f883d;color:#fff}.save-btn:hover:not(:disabled){background:#1a7f37;border-color:#1a7f37}.cancel-btn:disabled,.save-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.edit-blueprint-overlay{padding:10px}.edit-blueprint-dialog{max-width:100%;max-height:95vh}.dialog-header,.dialog-content,.dialog-footer{padding:16px}.info-grid{grid-template-columns:1fr}.dialog-footer{flex-direction:column}.cancel-btn,.save-btn{width:100%;justify-content:center}}@media (max-width: 480px){.dialog-header h2{font-size:18px}.dialog-header,.dialog-content,.dialog-footer{padding:12px}}.blueprint-overview{padding:20px;margin:0 auto;min-height:100vh;background:#fff}.blueprint-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:20px}.blueprint-header h2{margin:0;font-size:2rem;font-weight:600;color:#1f2328}.blueprint-actions{display:flex;gap:15px;align-items:center}.search-input{padding:10px 15px;border-radius:8px;font-size:14px;width:250px;color:#1f2328;background:#fff;border:1px solid #d1d9e0;transition:border-color .3s ease}.search-input:focus{outline:none;border-color:#0969da;box-shadow:0 0 0 3px #0969da4d}.search-input::placeholder{color:#656d76}.refresh-btn{padding:10px 15px;background:#1f883d;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .3s ease}.refresh-btn:hover{background:#1a7f37}.blueprint-stats{display:flex;gap:20px;margin-bottom:30px;flex-wrap:wrap}.stat{background:linear-gradient(135deg,#1f883d,#1a7f37);color:#fff;padding:20px;border-radius:12px;text-align:center;min-width:120px;box-shadow:0 4px 6px #0000001a;border:1px solid #d1d9e0}.stat-number{display:block;font-size:2rem;font-weight:700;margin-bottom:5px}.stat-label{font-size:.9rem;opacity:.9}.blueprint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px}.blueprint-card{background:#fff;border:1px solid #d1d9e0;border-radius:12px;padding:20px;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.blueprint-card:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000026;border-color:#0969da}.blueprint-card.inactive{opacity:.6;background:#f6f8fa}.blueprint-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.blueprint-name{margin:0;font-size:1.3rem;font-weight:600;flex:1;color:#1f2328}.blueprint-status{margin-left:10px}.status-badge{padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:500;text-transform:uppercase}.status-badge.active{background:#1f883d26;color:#1f883d;border:1px solid rgba(31,136,61,.4)}.status-badge.inactive{background:#d1242f26;color:#d1242f;border:1px solid rgba(209,36,47,.4)}.blueprint-description{color:#656d76;margin:0 0 15px;line-height:1.6;font-size:.9rem}.blueprint-meta{margin-bottom:15px;border-top:1px solid #d1d9e0;padding-top:15px}.meta-item{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.85rem}.meta-label{font-weight:500;color:#656d76}.meta-value{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;color:#1f2328}.blueprint-tags{margin-bottom:15px;display:flex;flex-wrap:wrap;gap:6px}.tag{background:#f6f8fa;color:#0969da;padding:4px 10px;border-radius:16px;font-size:.75rem;font-weight:500;border:1px solid #d1d9e0}.blueprint-actions{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #d1d9e0;padding-top:15px}.action-btn{padding:8px 14px;border:none;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:6px;border:1px solid transparent;width:170px}.action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.load-btn{background:#0969da;color:#fff}.load-btn:hover{background:#0550ae}.edit-btn{background:#1f883d;color:#fff}.edit-btn:hover{background:#1a7f37}.toggle-btn.activate{background:#bf8700;color:#fff}.toggle-btn.activate:hover{background:#9a6700}.toggle-btn.deactivate{background:#656d76;color:#fff}.toggle-btn.deactivate:hover{background:#8b949e}.delete-btn{background:#d1242f;color:#fff}.delete-btn:hover{background:#a40e26}.loading{text-align:center;padding:40px;color:#656d76;font-size:1.1rem}.error{text-align:center;padding:40px;color:#d1242f;background:#d1242f1a;border:1px solid rgba(209,36,47,.4);border-radius:8px;margin:20px 0}.retry-btn{margin-left:10px;padding:8px 16px;background:#d1242f;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.retry-btn:hover{background:#a40e26}.no-blueprints{text-align:center;padding:60px 20px;color:#656d76;font-size:1.1rem;background:#f6f8fa;border-radius:12px;border:2px dashed #d1d9e0}@media (max-width: 768px){.blueprint-overview{padding:15px}.blueprint-header{flex-direction:column;align-items:stretch}.search-input{width:100%;max-width:300px}.blueprint-stats{justify-content:center}.blueprint-grid{grid-template-columns:1fr}.blueprint-actions{justify-content:center}.action-btn{flex:1;min-width:0;justify-content:center}}.user-management{padding:20px;max-width:1200px;margin:0 auto}.user-management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.user-management-header h2{margin:0;color:#333;font-size:24px}.user-management-loading{display:flex;justify-content:center;align-items:center;height:200px;font-size:18px;color:#666}.error-message{background-color:#fee;color:#c33;padding:10px;border-radius:4px;margin-bottom:20px;border:1px solid #fcc}.users-table-container{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.users-table{width:100%;border-collapse:collapse;font-size:14px}.users-table th,.users-table td{padding:12px;text-align:left;border-bottom:1px solid #eee}.users-table th{background-color:#f8f9fa;font-weight:600;color:#555;border-bottom:2px solid #dee2e6}.users-table tr:hover{background-color:#f8f9fa}.status{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:500;text-transform:uppercase}.status.activate{background-color:#d4edda;color:#155724}.status.deactivate{background-color:#f8d7da;color:#721c24}.action-buttons{display:flex;gap:8px}.btn{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s}.btn:hover{transform:translateY(-1px)}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-edit{background-color:#28a745;color:#fff}.btn-edit:hover{background-color:#1e7e34}.btn-delete{background-color:#dc3545;color:#fff}.btn-delete:hover{background-color:#c82333}.btn-activate{background-color:#17a2b8;color:#fff}.btn-activate:hover{background-color:#138496}.btn-deactivate{background-color:#fd7e14;color:#fff}.btn-deactivate:hover{background-color:#e76500}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:#fff;border-radius:8px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 6px #0000001a}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee}.modal-header h3{margin:0;color:#333}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:#333}.modal-body{padding:20px}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:4px;font-weight:500;color:#333}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.form-group input:disabled{background-color:#f8f9fa;color:#6c757d}.form-group input[type=checkbox]{width:auto;margin-right:8px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid #eee}.modal-footer button{padding:8px 16px}@media (max-width: 768px){.user-management{padding:10px}.user-management-header{flex-direction:column;gap:15px;align-items:stretch}.users-table-container{overflow-x:auto}.users-table{min-width:600px}.action-buttons{flex-direction:column;gap:4px}.action-buttons .btn{width:100%;text-align:center}.modal{width:95%;margin:20px}}.iot-groups-container{padding:0}.iot-groups-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000d}.iot-groups-header h2{margin:0;color:#333;font-size:1.5rem;font-weight:600}.create-group-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease}.create-group-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.btn-icon{font-size:1rem}.error-banner{background:#fee;border:1px solid #fcc;color:#c44;padding:1rem;border-radius:8px;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}.error-banner button{background:none;border:none;color:#c44;font-size:1.2rem;cursor:pointer;padding:0;margin-left:1rem}.no-groups{text-align:center;padding:4rem 2rem;color:#666}.no-groups-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.no-groups h3{margin:0 0 .5rem;color:#333}.no-groups p{margin:0;color:#666}.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;padding:0}.group-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px #0000000d;transition:all .3s ease;border-left:4px solid #667eea}.group-card:hover{transform:translateY(-2px);box-shadow:0 5px 20px #0000001a}.group-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.group-name{margin:0;color:#333;font-size:1.2rem;font-weight:600;flex-grow:1;margin-right:1rem}.group-actions{display:flex;gap:.5rem}.edit-btn:hover{background:#f8f9fa;border-color:#667eea}.delete-btn:hover{background:#fee;border-color:#f44336}.group-details{color:#666}.group-description{margin:0 0 1rem;font-size:.9rem;line-height:1.4}.group-stats{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #f0f0f0;font-size:.85rem}.created-date{color:#999}.loading{text-align:center;padding:2rem;color:#666;font-size:1.1rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:#fff;border-radius:12px;width:90%;max-width:500px;box-shadow:0 10px 30px #0000004d;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #f0f0f0}.modal-header h3{margin:0;color:#333;font-size:1.2rem;font-weight:600}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#999;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .3s ease}.close-btn:hover{background:#f0f0f0;color:#666}.modal-body{padding:1.5rem}.form-group{margin-bottom:1rem}.form-group:last-child{margin-bottom:0}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500;font-size:.9rem}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid #e1e5e9;border-radius:6px;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box;font-family:inherit}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{resize:vertical;min-height:80px}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1.5rem;border-top:1px solid #f0f0f0}.cancel-btn,.create-btn,.save-btn{padding:.75rem 1.5rem;border:1px solid #e1e5e9;border-radius:6px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease}.cancel-btn{background:#fff;color:#666}.cancel-btn:hover{background:#f8f9fa;border-color:#d1d5db}.create-btn,.save-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}.create-btn:hover,.save-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #667eea66}.system-settings{padding-left:20px}.settings-tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:1px solid #30363d}.tab-button{padding:10px 20px;background:transparent;border:none;color:#7d8590;cursor:pointer;border-radius:6px 6px 0 0;transition:all .2s ease}.tab-button:hover{color:#c9d1d9}.tab-button.active{color:#58a6ff;border-bottom:2px solid #58a6ff}.settings-section{border-radius:6px;padding:20px}.settings-section h3{margin-top:0;margin-bottom:15px;font-size:18px}.settings-section h4{margin-top:0;margin-bottom:10px;color:#c9d1d9;font-size:16px}.add-setting-form{margin-bottom:20px;padding:15px;background:#161b22;border:1px solid #30363d;border-radius:6px}.form-row{display:flex;gap:10px;align-items:center}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;color:#c9d1d9;font-weight:500}.form-input{padding:8px 12px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;font-size:14px;transition:border-color .2s ease}.form-input:focus{outline:none;border-color:#58a6ff;box-shadow:0 0 0 3px #58a6ff1a}.form-input::placeholder{color:#7d8590}.btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn-primary{background:#238636;color:#fff}.btn-primary:hover{background:#2ea043}.btn-danger{background:#da3633;color:#fff}.btn-danger:hover{background:#f85149}.btn-sm{padding:6px 12px;font-size:12px}.settings-list{display:flex;flex-direction:column;gap:10px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#161b22;border:1px solid #30363d;border-radius:6px}.setting-info{flex:1;display:flex;flex-direction:column;gap:4px}.setting-info strong{color:#58a6ff;font-size:14px}.setting-value{color:#c9d1d9;font-size:13px;font-family:Courier New,monospace;background:#21262d;padding:4px 8px;border-radius:4px;border:1px solid #30363d;max-width:300px;word-break:break-all}.setting-date{color:#7d8590;font-size:11px}.variables-list{display:flex;flex-direction:column;gap:15px}.variable-item{display:flex;justify-content:space-between;align-items:flex-start;padding:15px;background:#161b22;border:1px solid #30363d;border-radius:6px;max-width:700px}.variable-info{flex:1;display:flex;flex-direction:column;gap:8px;margin-right:15px}.variable-info strong{color:#58a6ff;font-size:14px}.variable-input{padding:6px 10px;background:#21262d;border:1px solid #30363d;border-radius:4px;color:#c9d1d9;font-size:13px;font-family:Courier New,monospace;width:100%;max-width:400px}.variable-input:focus{outline:none;border-color:#58a6ff}.variable-source{color:#7d8590;font-size:11px}.variable-actions{display:flex;gap:8px;flex-shrink:0}.current-firmware{background:#161b22;border:1px solid #30363d;border-radius:6px;padding:15px;margin-bottom:20px}.current-firmware p{margin:5px 0;color:#c9d1d9}.current-firmware strong{color:#58a6ff}.firmware-form{background:#161b22;border:1px solid #30363d;border-radius:6px;padding:20px;margin-top:20px}.firmware-form .form-input{width:100%;max-width:500px}.firmware-upload-section{background:#161b22;border:1px solid #30363d;border-radius:6px;padding:20px;margin-bottom:20px}.upload-area{border:2px dashed #30363d;border-radius:6px;padding:20px;text-align:center;background:#0d1117;transition:border-color .2s ease}.upload-area:hover{border-color:#58a6ff}.file-input{padding:10px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#c9d1d9;width:100%;max-width:400px;cursor:pointer}.file-input:focus{outline:none;border-color:#58a6ff}.file-input:disabled{opacity:.6;cursor:not-allowed}.selected-file{margin-top:15px;padding:15px;background:#21262d;border:1px solid #30363d;border-radius:6px;text-align:left}.selected-file p{margin:5px 0;color:#c9d1d9}.selected-file strong{color:#58a6ff}.file-actions{margin-top:15px;display:flex;gap:10px;justify-content:center}.btn-secondary{background:#6e7681;color:#fff}.btn-secondary:hover{background:#7d8590}.upload-progress{margin-top:15px;padding:15px;background:#21262d;border:1px solid #30363d;border-radius:6px}.progress-bar{width:100%;height:8px;background:#30363d;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#238636,#2ea043);transition:width .3s ease;border-radius:4px}.progress-text{text-align:center;color:#c9d1d9;font-weight:500;margin:0}.upload-status{margin-top:15px;padding:10px 15px;border-radius:6px;text-align:center;font-weight:500}.upload-status.success{background:#23863626;color:#56d364;border:1px solid rgba(35,134,54,.4)}.upload-status.error{background:#f8514926;color:#f85149;border:1px solid rgba(248,81,73,.4)}.loading{display:flex;justify-content:center;align-items:center;height:200px;color:#7d8590;font-size:16px}@media (max-width: 768px){.system-settings{padding:10px}.form-row{flex-direction:column}.form-input{width:100%}.setting-item,.variable-item{flex-direction:column;gap:10px;align-items:stretch}.variable-actions{justify-content:flex-end}.settings-tabs{flex-wrap:wrap}.tab-button{flex:1;min-width:120px}.file-actions{flex-direction:column;align-items:stretch}.file-actions .btn{justify-content:center}.upload-area{padding:15px}.firmware-upload-section,.firmware-form{margin:10px 0;padding:15px}}.settings-container{display:flex;height:calc(100vh - 140px);background-color:#f8f9fa}.settings-sidebar{width:250px;background:#fff;border-right:1px solid #dee2e6;padding:20px;box-shadow:2px 0 4px #0000001a}.settings-sidebar h3{margin:0 0 20px;color:#333;font-size:20px;font-weight:600}.settings-nav{display:flex;flex-direction:column;gap:8px}.settings-nav-item{display:flex;align-items:center;padding:12px 16px;background:none;border:none;border-radius:8px;cursor:pointer;text-align:left;transition:all .2s;font-size:14px;color:#555}.settings-nav-item:hover{background-color:#f8f9fa;color:#333}.settings-nav-item.active{background-color:#007bff;color:#fff}.settings-nav-item .nav-icon{margin-right:12px;font-size:16px}.settings-content{flex:1;padding:20px;overflow-y:auto}.settings-welcome{text-align:center;padding:60px 20px;color:#666}.settings-welcome h2{margin:0 0 16px;color:#333;font-size:28px}.settings-welcome p{font-size:16px;max-width:500px;margin:0 auto;line-height:1.5}.settings-placeholder{text-align:center;padding:60px 20px;color:#666}.settings-placeholder h2{margin:0 0 16px;color:#333;font-size:24px}.settings-placeholder p{font-size:16px;max-width:400px;margin:0 auto;line-height:1.5}@media (max-width: 768px){.settings-container{flex-direction:column;height:auto}.settings-sidebar{width:100%;border-right:none;border-bottom:1px solid #dee2e6}.settings-nav{flex-direction:row;overflow-x:auto;gap:4px}.settings-nav-item{flex-shrink:0;white-space:nowrap}.settings-content{padding:15px}.settings-welcome,.settings-placeholder{padding:40px 15px}}.App{text-align:center}.App-header{background-color:#282c34;padding:20px;color:#fff}.App-header h1{margin:0;font-size:24px}.react-flow__node{border:1px solid #ddd;border-radius:8px;background:#fff;box-shadow:0 2px 4px #0000001a}.react-flow__node-input{background:#e3f2fd;border-color:#2196f3}.react-flow__node-output{background:#e8f5e8;border-color:#4caf50}.react-flow__handle{width:8px;height:8px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{width:100vw;height:100vh}