:root{--bg:#0d0d0d;--surface:#1a1a1a;--surface2:#242424;--surface3:#2e2e2e;--hover:#333;--text:#e0e0e0;--dim:#888;--bright:#fff;--border:#333;--accent:#4f9eff;--success:#4caf50;--danger:#f44336;--warn:#ff9800;--radius:8px;--shadow:0 2px 8px #0000004d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.layout{grid-template-columns:220px 1fr;height:100vh;display:grid}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-direction:column;display:flex}.sidebar-logo{color:var(--bright);border-bottom:1px solid var(--border);padding:20px;font-size:18px;font-weight:700}.nav-item{cursor:pointer;color:var(--dim);border-left:3px solid #0000;align-items:center;gap:10px;padding:14px 20px;font-size:14px;transition:all .15s;display:flex}.nav-item:hover{background:var(--surface2);color:var(--text)}.nav-item.active{background:var(--surface3);color:var(--accent);border-left-color:var(--accent)}.sidebar-footer{border-top:1px solid var(--border);color:var(--dim);margin-top:auto;padding:12px 20px;font-size:11px}.main{flex-direction:column;min-width:0;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.topbar-title{color:var(--bright);font-size:16px;font-weight:600}.topbar-right{color:var(--dim);align-items:center;gap:12px;font-size:12px;display:flex}.ws-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.ws-dot.on{background:var(--success)}.ws-dot.off{background:var(--danger)}.content{flex:1;min-height:0;padding:20px;overflow-y:auto}.page{display:none}.page.active{display:block}.grid{gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.card-title{color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:12px}.card-value{color:var(--bright);font-size:28px;font-weight:700}.card-value.green{color:var(--success)}.card-value.red{color:var(--danger)}.relay-card{cursor:pointer;transition:all .15s}.relay-card:hover{border-color:var(--accent);background:var(--surface2)}.relay-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.relay-name{color:var(--bright);font-weight:600}.relay-url{color:var(--dim);margin-top:4px;font-family:monospace;font-size:12px}.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--surface2);padding:12px 16px;font-size:12px}td{border-bottom:1px solid var(--border);padding:10px 16px;font-size:13px}tr:last-child td{border-bottom:none}tr:hover{background:var(--surface2)}.mono{font-family:SF Mono,monospace;font-size:12px}.pill{border-radius:12px;padding:2px 10px;font-size:11px;font-weight:600;display:inline-block}.pill.online{color:var(--success);background:#4caf5026}.pill.offline,.pill.down{color:var(--danger);background:#f4433626}.pill.unknown{color:var(--dim);background:#88888826}.pill.pending{color:var(--warn);background:#ff980026}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;display:flex}.toolbar .spacer{flex:1}.btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);color:var(--text);cursor:pointer;padding:8px 16px;font-size:13px;transition:all .15s}.btn:hover{background:var(--hover);border-color:var(--dim)}.btn.sm{padding:6px 12px;font-size:12px}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.success{background:var(--success);color:#fff;border-color:var(--success)}.btn.danger{color:var(--danger)}.btn-icon{color:#8b949e;cursor:pointer;background:0 0;border:1px solid #30363d;border-radius:6px;justify-content:center;align-items:center;padding:6px 8px;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.btn-icon:hover{color:#c9d1d9;background:#30363d4d;border-color:#484f58}.btn-sm{border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;border-radius:4px;padding:2px 6px;font-size:10px}.input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);width:100%;padding:10px 14px;font-size:14px}.input:focus{border-color:var(--accent);outline:none}select.input{width:auto}.modal-bg{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-bg.show{display:flex}.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:90%;max-width:600px;max-height:85vh;padding:24px;overflow-y:auto;box-shadow:0 8px 32px #00000080}.modal-title{color:var(--bright);margin-bottom:16px;font-size:18px;font-weight:600}.modal-actions{justify-content:flex-end;gap:8px;margin-top:20px;display:flex}.form-row{margin-bottom:14px}.form-row label{color:var(--dim);margin-bottom:6px;font-size:12px;display:block}.login-bg{background:var(--bg);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:340px;box-shadow:var(--shadow);padding:32px}.login-box h1{color:var(--bright);margin-bottom:4px;font-size:20px}.login-box .sub{color:var(--dim);margin-bottom:20px;font-size:12px}.login-error{color:var(--danger);min-height:16px;margin-bottom:12px;font-size:12px}.empty{text-align:center;color:var(--dim);padding:40px;font-size:14px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel-head{background:var(--surface2);border-bottom:1px solid var(--border);text-transform:uppercase;color:var(--dim);letter-spacing:.5px;flex-shrink:0;align-items:center;gap:8px;padding:8px 14px;font-size:11px;display:flex}.panel-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.control-page{flex:1;grid-template-columns:1fr 1.2fr 260px;gap:8px;height:calc(100vh - 100px);min-height:0;display:grid;overflow:hidden}.screen-wrap{touch-action:none;background:#000;flex:1;min-height:0;position:relative;overflow:hidden}#screen-canvas{width:100%;height:100%;image-rendering:pixelated;object-fit:fill;z-index:1;display:block;position:absolute;top:0;left:0}#node-overlay{z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}#screen-placeholder{color:var(--dim);font-size:13px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.actions{background:var(--surface2);border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:5px;padding:6px 10px;display:flex}.actions label{color:var(--dim);font-size:10px}.actions select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 4px;font-size:10px}.btn-overlay{cursor:pointer;border:1px solid var(--border);white-space:nowrap;background:var(--surface2);color:var(--dim);border-radius:4px;padding:3px 10px;font-size:10px}.btn-overlay.on{background:var(--accent);border-color:var(--accent);color:#fff}.btn-overlay.off{background:var(--surface2);color:var(--dim)}.btn-cap{cursor:pointer;border:1px solid var(--border);white-space:nowrap;background:var(--surface2);color:var(--dim);border-radius:4px;padding:3px 10px;font-size:10px}.btn-cap.on{background:var(--success);border-color:var(--success);color:#fff}.btn-cap.off{background:var(--danger);border-color:var(--danger);color:#fff}.console{background:var(--bg);border-top:1px solid var(--border);flex-shrink:0;height:130px;padding:6px 12px;font:11px/1.4 SF Mono,Monaco,monospace;overflow-y:auto}.console .line{word-break:break-all;padding:1px 0}.console .ts{color:var(--dim)}.console .dev{color:var(--accent)}.console .ok{color:var(--success)}.console .err{color:var(--danger)}.console .d{color:#d2a8ff}.right-col{flex-direction:column;gap:8px;display:flex;overflow:hidden}.card .card-head{background:var(--surface2);border-bottom:1px solid var(--border);text-transform:uppercase;color:var(--dim);letter-spacing:.5px;flex-shrink:0;align-items:center;gap:8px;padding:8px 14px;font-size:11px;display:flex}.card-body{flex:1;min-height:0;overflow-y:auto}.badge{color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:2px 8px;font-size:10px}.evt-list{padding:4px 8px;font:11px/1.5 SF Mono,Monaco,monospace}.evt-list .evt{border-bottom:1px solid var(--surface2);color:var(--dim);padding:3px 6px}.evt-list .evt .pkg{color:#d2a8ff}.evt-list .evt .type{color:var(--success);font-weight:600}.lat-good{color:var(--success)}.lat-warn{color:var(--warn)}.lat-bad{color:var(--danger)}.dev-status{border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.dev-status.online{background:var(--success)}.dev-status.offline{background:var(--danger)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--hover)}.cf-layout{background:#0d0d0d;grid-template-columns:35% 1fr;width:100vw;height:100vh;display:grid;overflow:hidden}.cf-node-list{flex:1;padding:4px 0;overflow-y:auto}.cf-node-item{cursor:pointer;transition:background .1s}.cf-node-item:hover{background:#ffffff0d}.cf-node-row{border-bottom:1px solid #242424;align-items:center;gap:6px;padding:6px 12px;font-size:12px;display:flex}.cf-node-type{color:#4f9eff;flex-shrink:0;min-width:70px;font-family:monospace;font-size:11px}.cf-node-flags{flex-shrink:0;font-size:12px}.cf-node-text{color:#e0e0e0;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.cf-node-expand{color:#888;flex-shrink:0;font-size:10px}.cf-node-detail{color:#888;background:#0000004d;padding:8px 12px 12px 24px;font-size:11px;line-height:1.6}.cf-node-detail b{color:#aaa}.cf-node-detail div{word-break:break-all}.node-ov-box{pointer-events:none;z-index:5;box-sizing:border-box;border-radius:2px;position:absolute}.node-ov{background:#4f9eff0d;border:1px solid #4f9eff4d}.node-ov-btn{cursor:pointer;pointer-events:auto;background:#4caf501a;border:1px solid #4caf50b3}.node-ov-input{background:#ffeb3b1a;border:1px solid #ffeb3bb3}.node-ov-check{cursor:pointer;pointer-events:auto;background:#9c27b01a;border:1px solid #9c27b0b3}.node-ov-radio{cursor:pointer;pointer-events:auto;background:#e91e631a;border:1px solid #e91e63b3}.node-ov-switch{cursor:pointer;pointer-events:auto;background:#00bcd41a;border:1px solid #00bcd4b3}.node-ov-select{cursor:pointer;pointer-events:auto;background:#ff98001a;border:1px solid #ff9800b3}.node-ov-image{background:#9e9e9e0d;border:1px solid #9e9e9e66}.node-ov-text{background:#ffffff08;border:1px solid #ffffff40}.node-ov-web{background:#f443360d;border:1px solid #f4433680}.node-ov-scroll{background:#ff57220d;border:1px solid #ff572280}.node-ov-label{color:#fff;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;background:#000c;border-radius:2px;max-width:100%;padding:1px 3px;font-size:7px;position:absolute;top:1px;left:2px;overflow:hidden}@keyframes ripple-tap-anim{0%{opacity:1;width:20px;height:20px;box-shadow:0 0 20px 8px #4f9eff99}50%{opacity:.8}to{opacity:0;width:80px;height:80px;box-shadow:0 0 #4f9eff00}}@keyframes ripple-swipe-anim{0%{opacity:1;width:20px;height:20px;box-shadow:0 0 20px 10px #ff9800b3}to{opacity:0;width:100px;height:100px;box-shadow:0 0 #ff980000}}.ripple-tap{pointer-events:none;z-index:10;background:#4f9eff4d;border:4px solid #4f9eff;border-radius:50%;animation:.5s ease-out forwards ripple-tap-anim;position:absolute;transform:translate(-50%,-50%)}.ripple-swipe{pointer-events:none;z-index:10;background:#ff980040;border:4px solid #ff9800;border-radius:50%;animation:.6s ease-out forwards ripple-swipe-anim;position:absolute;transform:translate(-50%,-50%)}.swipe-tracer-svg{animation:.7s ease-out forwards tracer-fade}.swipe-tracer-line{fill:none;stroke:#ff9800e6;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #ff980099)}.swipe-tracer-dot{fill:#ff9800;filter:drop-shadow(0 0 3px #ff9800cc)}@keyframes tracer-fade{0%{opacity:1}70%{opacity:.8}to{opacity:0}}.cf-vnc{background:#000;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.cf-vnc .screen-wrap{background:#000;width:100%;height:100%}.cf-vnc #screen-canvas{object-fit:fill!important;width:100%!important;height:100%!important}.cf-vnc #screen-placeholder{color:#555;font-size:13px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cf-panel{background:#1a1a1a;border-left:1px solid #333;flex-direction:column;display:flex;overflow:hidden}.cf-header{border-bottom:1px solid #333;flex-shrink:0;align-items:center;padding:10px 16px;font-size:14px;display:flex}.cf-stream-controls{border-bottom:1px solid #333;flex-shrink:0;gap:8px;padding:10px 16px;display:flex}.cf-tabs{border-bottom:1px solid #333;flex-shrink:0;display:flex}.cf-tab{color:#8b949e;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;padding:10px;transition:color .15s,border-color .15s;display:flex}.cf-tab:hover{color:#c9d1d9}.cf-tab.active{color:#58a6ff;border-bottom-color:#58a6ff}.cf-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.cf-scroll{flex:1;padding:16px;overflow-y:auto}.cf-section{margin-bottom:20px}.cf-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:11px}.cf-grid3{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.cf-btn{color:#8b949e;cursor:pointer;background:0 0;border:1px solid #30363d;border-radius:6px;justify-content:center;align-items:center;padding:8px 10px;transition:color .15s,border-color .15s,background .15s;display:flex}.cf-btn:hover{color:#c9d1d9;background:#30363d4d;border-color:#484f58}.cf-btn.on{color:#58a6ff;background:#58a6ff14;border-color:#58a6ff}.cf-btn.sm{padding:5px 8px}.cf-input{color:#e0e0e0;box-sizing:border-box;background:#242424;border:1px solid #333;border-radius:6px;width:100%;padding:8px 12px;font-size:13px}.cf-input:focus{border-color:#4f9eff;outline:none}.cf-input.sm{width:auto;padding:4px 8px;font-size:11px}input[type=checkbox]{appearance:none;cursor:pointer;background:0 0;border:1px solid #30363d;border-radius:4px;flex-shrink:0;width:16px;height:16px;transition:border-color .15s,background .15s;position:relative}input[type=checkbox]:hover{border-color:#484f58}input[type=checkbox]:checked{background:#58a6ff14;border-color:#58a6ff}input[type=checkbox]:checked:after{content:"";border:2px solid #58a6ff;border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}input[type=radio]{appearance:none;cursor:pointer;background:0 0;border:2px solid #30363d;border-radius:50%;flex-shrink:0;width:20px;height:20px;transition:border-color .15s,background .15s;position:relative}input[type=radio]:hover{border-color:#484f58}input[type=radio]:checked{background:#ffc10714;border-color:#ffc107}input[type=radio]:checked:after{content:"";background:#ffc107;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cf-info{border-bottom:1px solid #242424;justify-content:space-between;align-items:center;padding:10px 16px;font-size:13px;display:flex}.cf-info span{color:#888}@media (width<=768px){.cf-layout{grid-template-rows:45% 1fr;grid-template-columns:1fr}.cf-vnc{border-bottom:1px solid #333}}