:root{--navy:#1e293b;--sidebar-w:220px;--border:#e2e8f0;--bg:#f1f5f9;--green:#16a34a;--red:#dc2626;--amber:#d97706;--blue:#2563eb}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:#1e293b;margin:0;font-size:14px}.app-wrap{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--navy);display:flex;flex-direction:column;z-index:200}.sidebar-brand{padding:16px;border-bottom:1px solid hsla(0,0%,100%,.08);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}.sidebar-brand small{font-size:11px;color:#94a3b8;font-weight:400;display:block}.nav-section{padding:8px 10px}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;padding:4px 6px 2px}.nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;color:#94a3b8;font-size:13px;font-weight:500;border:none;background:none;border-radius:6px;cursor:pointer;text-align:left;transition:background .15s,color .15s}.nav-btn:hover{background:hsla(0,0%,100%,.06);color:#e2e8f0}.nav-btn.active{background:var(--blue);color:#fff}.nav-btn .badge{margin-left:auto;font-size:10px;padding:2px 6px}.sidebar-footer{margin-top:auto;padding:12px 10px;border-top:1px solid hsla(0,0%,100%,.08)}.sidebar-footer .reset-btn{width:100%;background:none;border:1px solid hsla(0,0%,100%,.1);color:#94a3b8;font-size:12px;padding:6px;border-radius:6px;cursor:pointer}.sidebar-footer .reset-btn:hover{color:#fff;border-color:hsla(0,0%,100%,.2)}.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:190}@media (max-width:991px){.sidebar{position:fixed;top:0;bottom:0;left:0;transform:translateX(-100%);transition:transform .25s}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{display:block}}.main-wrap{flex:1 1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow-y:auto}.top-bar{height:52px;background:#fff;border-bottom:1px solid var(--border);justify-content:space-between;padding:0 16px;gap:12px;position:-webkit-sticky;position:sticky;top:0;z-index:100}.demo-pill,.top-bar{display:flex;align-items:center}.demo-pill{font-size:11px;font-weight:700;letter-spacing:.05em;padding:3px 10px;border-radius:999px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;gap:5px}.demo-dot{width:6px;height:6px;border-radius:50%;background:#ef4444;animation:blink 1.8s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.uk-clock{font-family:monospace;font-size:13px;font-weight:600;background:#f8fafc;border:1px solid var(--border);padding:3px 10px;border-radius:6px;color:#1e293b}.card{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden}.card-header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px;color:#0f172a;display:flex;align-items:center;justify-content:space-between}.card-body{padding:16px}.stat-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px 16px}.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;margin-bottom:4px}.stat-value{font-size:22px;font-weight:700;color:#0f172a;line-height:1}.stat-sub{font-size:11px;color:#94a3b8;margin-top:3px}.simple-table{width:100%;border-collapse:collapse;font-size:13px}.simple-table th{background:#f8fafc;color:#64748b;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--border);text-align:left}.simple-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.simple-table tbody tr:hover{background:#f8fafc}.simple-table tbody tr:last-child td{border-bottom:none}.badge-online{background:#dcfce7;color:var(--green);border:1px solid #bbf7d0}.badge-offline{background:#f1f5f9;color:#64748b;border:1px solid var(--border)}.badge-active{background:#dbeafe;color:var(--blue);border:1px solid #bfdbfe}.badge-alarm{background:#fee2e2;color:var(--red);border:1px solid #fecaca}.badge-warn{background:#fef3c7;color:var(--amber);border:1px solid #fde68a}.badge-parent{background:#ede9fe;color:#7c3aed;border:1px solid #ddd6fe}.badge-child{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd}.badge-neutral{background:#f1f5f9;color:#475569;border:1px solid var(--border)}.sbadge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}.sbadge .dot{width:5px;height:5px;border-radius:50%;background:currentColor}.relay-active{background:var(--blue);color:#fff;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700;animation:pulse-relay 1.2s infinite}@keyframes pulse-relay{0%,to{opacity:1}50%{opacity:.65}}.relay-switch{width:120px;height:120px;border-radius:50%;border:4px solid var(--border);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:14px;gap:4px;transition:all .2s}.relay-switch.on{background:var(--blue);color:#fff;border-color:#93c5fd;box-shadow:0 0 20px rgba(37,99,235,.35)}.relay-switch.off{background:#f1f5f9;color:#64748b}.relay-switch.off:hover{background:#e2e8f0}.flow-node{background:#fff;border:2px solid var(--border);border-radius:8px;padding:12px;transition:all .25s}.flow-node.triggered{border-color:var(--red);background:#fef2f2}.flow-node.active{border-color:var(--blue);background:#eff6ff}.own-relay-card{border:2px solid #dc2626;border-radius:6px;background:#fff;padding:8px 10px;transition:all .2s}.own-relay-card.active{background:#fef2f2;border-color:#b91c1c;box-shadow:0 0 12px rgba(220,38,38,.25)}.yellow-callout{background:#fef9c3;border:1px solid #fde047;color:#713f12;border-radius:6px;padding:8px 12px}.log-row{padding:8px 0;border-bottom:1px solid #f1f5f9}.log-row:last-child{border-bottom:none}.toast-stack{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:340px}.toast-item{background:#fff;border-radius:8px;padding:10px 14px;box-shadow:0 4px 16px rgba(0,0,0,.1);border-left:4px solid var(--blue);display:flex;align-items:flex-start;gap:10px;font-size:13px;animation:slide-up .2s ease}.toast-item.success{border-left-color:var(--green)}.toast-item.danger{border-left-color:var(--red)}.toast-item.warning{border-left-color:var(--amber)}@keyframes slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-box{background:#fff;border-radius:10px;width:100%;max-width:480px;box-shadow:0 20px 40px rgba(0,0,0,.15)}.modal-head{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:space-between}.modal-body{padding:18px}.modal-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}.form-control,.form-select{font-size:13px!important}label.form-label{font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}.tab-bar{display:flex;gap:2px;border-bottom:2px solid var(--border);padding:0 16px;background:#fff;flex-wrap:wrap}.tab-btn{padding:10px 14px;font-size:13px;font-weight:500;color:#64748b;background:none;cursor:pointer;border:none;border-bottom:2px solid transparent;margin-bottom:-2px}.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}.tab-btn:hover:not(.active){color:#1e293b}.btn-sm{padding:5px 12px!important;font-size:12px!important;border-radius:6px!important}.contact-open{background:#dcfce7;color:var(--green);border:2px solid #bbf7d0;border-radius:8px}.contact-closed,.contact-open{padding:8px 16px;font-weight:700;text-align:center}.contact-closed{background:#fee2e2;color:var(--red);border:2px solid #fecaca;border-radius:8px;animation:blink .8s infinite}.custom-nav-tabs{border-bottom:none!important}.custom-nav-tabs .nav-link{color:#64748b!important;border:none!important;font-size:13px}.custom-nav-tabs .nav-link.active{color:var(--blue)!important;font-weight:600!important;border-bottom:2px solid var(--blue)!important}.drop-zone{border:2px dashed #94a3b8;border-radius:8px;background:#f8fafc;padding:16px;text-align:center;transition:all .2s ease;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center}.drop-zone.drag-over{border-color:var(--blue);background:#eff6ff;transform:scale(1.01)}.draggable-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 10px;cursor:-webkit-grab;cursor:grab;transition:transform .15s,box-shadow .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.draggable-card:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.06);border-color:#cbd5e1}.draggable-card:active{cursor:-webkit-grabbing;cursor:grabbing}.flow-pill{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;border:1px solid var(--border);background:#fff;color:#475569;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}.flow-pill:hover{background:#f8fafc;color:#1e293b}.flow-pill.active{background:var(--blue);color:#fff;border-color:var(--blue)}.flow-canvas{background:#fff;background-image:radial-gradient(#e2e8f0 1.2px,transparent 0);background-size:24px 24px;border:1px solid var(--border);border-radius:12px;min-height:520px;position:relative;overflow:hidden;display:flex;flex-direction:column}.canvas-toolbar{background:#fff;border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.canvas-node{background:#fff;border:1.5px solid #cbd5e1;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.04);padding:14px;transition:all .2s ease;min-width:220px}.canvas-node:hover{box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:#94a3b8}.canvas-node.node-triggered{border-color:var(--red);background:snow;box-shadow:0 0 14px rgba(220,38,38,.15)}.canvas-node.node-active{border-color:var(--blue);background:#f8faff;box-shadow:0 0 14px rgba(37,99,235,.15)}.canvas-tray{background:#fff;border-top:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:10px;overflow-x:auto}.chip-device{background:#f8fafc;border:1px solid #cbd5e1;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:-webkit-grab;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;transition:all .15s ease}.chip-device:hover{background:#eff6ff;border-color:#93c5fd;transform:translateY(-1px)}.chip-device:active{cursor:-webkit-grabbing;cursor:grabbing}