@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&family=Share+Tech+Mono&display=swap";:root{--bg:#050a0e;--bg-surface:#0a1018;--bg-panel:#080d14;--bg-card:#0c1420;--border:#00ff8814;--border-bright:#0f83;--text:#c8d6e5;--text-dim:#4a6a7a;--text-bright:#e0f0ff;--accent:#0f8;--accent-dim:#00ff8826;--cyan:#00d4ff;--green:#0f8;--amber:#fa0;--red:#f34;--gray:#3a4a5a;--blue:#08f;--orange:#f60;--scanline:#00ff8804;--glow-green:0 0 12px #00ff884d;--glow-red:0 0 12px #ff33444d;--glow-amber:0 0 12px #ffaa004d;--glow-cyan:0 0 12px #00d4ff4d}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100vh;font-family:JetBrains Mono,monospace;overflow:hidden}body:after{content:"";background:repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scanline) 2px, var(--scanline) 4px);pointer-events:none;z-index:9999;position:fixed;inset:0}#root,.app{flex-direction:column;height:100vh;display:flex}.header{background:var(--bg-surface);border-bottom:1px solid var(--border-bright);flex-shrink:0;justify-content:space-between;align-items:center;height:52px;padding:0 20px;display:flex;position:relative}.header:after{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);opacity:.4;height:1px;position:absolute;bottom:-1px;left:0;right:0}.header-left{align-items:center;gap:20px;display:flex}.header-title{letter-spacing:3px;color:var(--accent);text-shadow:var(--glow-green);font-family:Share Tech Mono,monospace;font-size:13px}.comms{border:1px solid var(--border);background:#00ff8808;border-radius:3px;align-items:center;gap:8px;padding:4px 12px;display:flex}.comms-dot{border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite pulse}.comms-ok{background:var(--green);box-shadow:var(--glow-green)}.comms-fail{background:var(--red);box-shadow:var(--glow-red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.2}}.comms-label{color:var(--green);letter-spacing:2px;font-size:9px;font-weight:600}.comms-count{color:var(--text-bright);font-size:11px;font-weight:600}.header-center{align-items:center;gap:16px;display:flex}.clock{letter-spacing:4px;color:var(--cyan);text-shadow:var(--glow-cyan);font-family:Share Tech Mono,monospace;font-size:28px;font-weight:400}.tz-picker{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;letter-spacing:1px;border-radius:2px;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:9px}.tz-picker:hover{border-color:var(--accent);color:var(--accent)}.tz-picker option{background:var(--bg-surface);color:var(--text)}.header-right{border-left:1px solid var(--border-bright);align-items:center;height:100%;padding-left:20px;display:flex}.date-display{flex-direction:column;align-items:flex-end;gap:1px;display:flex}.date-line{color:var(--text-dim);letter-spacing:2px;font-size:9px;font-weight:600}.date-year{color:var(--text-bright);letter-spacing:3px;font-size:18px;font-weight:700}.bookmarks-bar{border-bottom:1px solid var(--border);background:#00ff8805;flex-shrink:0;align-items:center;gap:2px;height:34px;padding:0 12px;display:flex;overflow-x:auto}.bookmarks-bar::-webkit-scrollbar{height:2px}.bookmarks-bar::-webkit-scrollbar-thumb{background:var(--border-bright)}.bookmark-link{color:var(--text-dim);white-space:nowrap;letter-spacing:1px;text-transform:uppercase;border:1px solid #0000;border-radius:2px;align-items:center;gap:5px;padding:4px 10px;font-size:8px;text-decoration:none;transition:all .2s;display:flex}.bookmark-link:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--border)}.bookmark-icon{opacity:.5;width:14px;height:14px}.bookmark-link:hover .bookmark-icon{opacity:1;filter:drop-shadow(0 0 4px var(--accent))}.bm-add-btn{box-shadow:0 0 8px #00ff881a,inset 0 0 6px #00ff8808;color:var(--accent)!important;background:#00ff880a!important;border:1px solid #00ff8840!important;transition:all .2s!important}.bm-add-btn:hover{box-shadow:0 0 14px #00ff8840,inset 0 0 8px #00ff880d;border-color:var(--accent)!important;background:#00ff881a!important}.bookmark-wrapper{align-items:center;display:flex;position:relative}.bm-delete{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;z-index:2;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:8px;line-height:1;display:none;position:absolute;top:-4px;right:-4px}.bm-edit{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;z-index:2;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:8px;line-height:1;display:none;position:absolute;top:-4px;left:-4px}.bookmark-wrapper:hover .bm-delete,.bookmark-wrapper:hover .bm-edit{display:flex}.bm-delete:hover{border-color:var(--red);color:var(--red)}.bm-edit:hover{border-color:var(--accent);color:var(--accent)}.bookmark-add-form{align-items:center;gap:4px;display:flex}.bm-input{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:2px;outline:none;width:70px;padding:3px 6px;font-family:JetBrains Mono,monospace;font-size:8px}.bm-input-url{width:120px}.bm-input:focus{border-color:var(--accent)}.bm-input::placeholder{color:var(--text-dim)}.bm-preview{opacity:.7;width:14px;height:14px}.bm-btn{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:2px;padding:2px 6px;font-size:10px}.bm-btn:hover{border-color:var(--accent);color:var(--accent)}.bm-confirm{color:var(--green)}.bm-confirm:hover{border-color:var(--green)}.main{flex:1;display:flex;position:relative;overflow:hidden}.graph-container{flex:1;position:relative;overflow:hidden}.network-graph{background:var(--bg);background-image:linear-gradient(#00ff8808 1px,#0000 1px),linear-gradient(90deg,#00ff8808 1px,#0000 1px);background-size:40px 40px;width:100%;height:100%}.graph-toolbar{z-index:10;gap:6px;display:flex;position:absolute;top:12px;left:12px}.graph-toolbar button{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;letter-spacing:1px;border-radius:2px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:9px;transition:all .15s}.graph-toolbar button:hover,.graph-toolbar button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.graph-search{z-index:10;align-items:center;display:flex;position:absolute;top:12px;right:12px}.search-input{background:var(--bg-card);border:1px solid var(--border);color:var(--text);letter-spacing:1px;border-radius:2px;outline:none;width:180px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:10px;transition:border-color .15s}.search-input::placeholder{color:var(--text-dim);letter-spacing:2px}.search-input:focus{border-color:var(--accent)}.search-clear{color:var(--text-dim);cursor:pointer;background:0 0;border:none;margin-left:-28px;padding:4px;font-size:11px}.search-clear:hover{color:var(--red)}.particle-canvas{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;inset:0}.context-menu{z-index:50;background:var(--bg-surface);border:1px solid var(--border-bright);border-radius:3px;min-width:160px;padding:4px 0;position:absolute;box-shadow:0 4px 24px #0009}.context-menu button{width:100%;color:var(--text-dim);text-align:left;cursor:pointer;letter-spacing:1px;background:0 0;border:none;padding:8px 16px;font-family:JetBrains Mono,monospace;font-size:10px;transition:all .1s;display:block}.context-menu button:hover{background:var(--accent-dim);color:var(--accent)}.context-danger:hover{color:var(--red)!important;background:#ff33441a!important}.context-divider{background:var(--border);height:1px;margin:4px 0}.node-panel{background:var(--bg-panel);border-left:1px solid var(--border-bright);flex-direction:column;flex-shrink:0;width:320px;display:flex;position:relative;overflow-y:auto}.node-panel:before{content:"";background:linear-gradient(180deg, var(--accent), transparent);opacity:.3;width:1px;height:100%;position:absolute;top:0;left:-1px}.node-panel::-webkit-scrollbar{width:4px}.node-panel::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:2px}.panel-header{letter-spacing:2px;color:var(--accent);border-bottom:1px solid var(--border);text-shadow:var(--glow-green);background:#00ff8805;justify-content:space-between;align-items:center;padding:14px 16px;font-size:11px;display:flex}.panel-close{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:2px;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;transition:all .15s;display:flex}.panel-close:hover{border-color:var(--red);color:var(--red)}.panel-empty{color:var(--text-dim);letter-spacing:2px;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:24px;font-size:10px;display:flex}.panel-empty-icon{border:2px dashed var(--border);width:48px;height:48px;color:var(--text-dim);opacity:.3;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex}.quick-actions{border-bottom:1px solid var(--border);grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 16px;display:grid}.qa-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;letter-spacing:1px;border-radius:3px;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 8px;font-family:JetBrains Mono,monospace;font-size:8px;transition:all .15s;display:flex}.qa-btn:disabled{opacity:.3;cursor:not-allowed}.qa-btn:not(:disabled):hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.qa-danger:not(:disabled):hover{border-color:var(--red);color:var(--red);background:#ff33441a}.qa-icon{font-size:16px;line-height:1}.panel-body{flex-direction:column;gap:10px;padding:16px;display:flex}.node-hostname{color:var(--cyan);text-shadow:var(--glow-cyan);letter-spacing:2px;font-family:Share Tech Mono,monospace;font-size:18px;font-weight:400}.status-badge{letter-spacing:2px;text-transform:uppercase;border-radius:2px;width:fit-content;padding:3px 12px;font-size:9px;font-weight:700;display:inline-block}.badge-online{color:var(--green);background:#00ff8826;border:1px solid #00ff884d}.badge-degraded{color:var(--amber);background:#ffaa0026;border:1px solid #ffaa004d}.badge-offline{color:var(--red);background:#ff334426;border:1px solid #ff33444d}.badge-unknown{color:var(--gray);background:#3a4a5a4d;border:1px solid #3a4a5a80}.stat-row{border-bottom:1px solid #00ff880a;flex-direction:column;gap:3px;padding:8px 0;display:flex}.stat-top{justify-content:space-between;align-items:center;display:flex}.stat-label{color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;font-size:8px}.stat-value{color:var(--text-bright);font-variant-numeric:tabular-nums;font-size:11px}.mini-bar{gap:3px;height:4px;display:flex}.mini-bar-seg{border-radius:1px;flex:1;transition:background .3s}.panel-actions{gap:8px;margin-top:12px;display:flex}.btn-action{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);letter-spacing:2px;cursor:pointer;text-align:center;border-radius:2px;flex:1;padding:10px;font-family:JetBrains Mono,monospace;font-size:9px;transition:all .15s}.btn-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.btn-playbook:hover{border-color:var(--green);color:var(--green);background:#00ff8814}.connection-legend{border-top:1px solid var(--border);flex-direction:column;gap:8px;margin-top:16px;padding-top:12px;display:flex}.legend-title{color:var(--text-dim);letter-spacing:2px;margin-bottom:4px;font-size:8px}.legend-item{color:var(--text-dim);align-items:center;gap:10px;font-size:9px;display:flex}.legend-line{border-top-style:solid;border-top-width:2px;width:28px;height:0}.legend-line.netbird{border-color:var(--cyan);border-top-style:dashed}.legend-line.cluster{border-color:var(--blue);border-top-style:solid}.legend-line.npm{border-color:var(--orange);border-top-style:dashed}.footer{background:var(--bg-surface);border-top:1px solid var(--border-bright);z-index:20;flex-shrink:0;justify-content:space-between;align-items:center;height:32px;padding:0 16px;font-size:9px;display:flex;position:relative}.footer:before{content:"";background:linear-gradient(90deg, transparent, var(--accent), transparent);opacity:.3;height:1px;position:absolute;top:-1px;left:0;right:0}.footer-left{align-items:center;gap:16px;display:flex}.footer-counts{gap:14px;display:flex}.fc{letter-spacing:1px;font-weight:600}.fc.healthy{color:var(--green);text-shadow:var(--glow-green)}.fc.degraded{color:var(--amber)}.fc.down{color:var(--red)}.fc.unknown{color:var(--gray)}.footer-center{align-items:center;gap:16px;display:flex}.footer-ticker{text-align:center;letter-spacing:1px;min-width:200px}.ticker-item{transition:opacity .4s}.ticker-item.degraded{color:var(--amber);text-shadow:var(--glow-amber)}.ticker-item.offline{color:var(--red);text-shadow:var(--glow-red)}.ticker-item.unknown{color:var(--gray)}.ticker-clear{color:var(--green);text-shadow:var(--glow-green);letter-spacing:2px}.footer-right{align-items:center;gap:16px;display:flex}.footer-selected{color:var(--cyan);letter-spacing:1px}.footer-version{color:var(--text-dim);letter-spacing:1px}.terminal-toggle{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;letter-spacing:1px;border-radius:2px;padding:3px 12px;font-family:JetBrains Mono,monospace;font-size:9px;transition:all .15s}.terminal-toggle:hover,.terminal-toggle.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.terminal-drawer{border-top:1px solid var(--border-bright);background:#000;flex-shrink:0;height:0;transition:height .25s;position:relative;overflow:hidden}.terminal-drawer.open{height:240px}.terminal-header{background:var(--bg-surface);border-bottom:1px solid var(--border);color:var(--accent);letter-spacing:2px;justify-content:space-between;align-items:center;padding:6px 16px;font-size:9px;display:flex}.terminal-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:12px}.terminal-close:hover{color:var(--red)}.terminal-body{color:var(--green);height:calc(100% - 32px);padding:0;font-family:JetBrains Mono,monospace;font-size:12px;overflow-y:auto}.terminal-body .prompt{color:var(--cyan)}.terminal-body .output{color:var(--text-dim)}.form-row{flex-direction:column;gap:4px;display:flex}.form-label{color:var(--text-dim);letter-spacing:2px;font-size:8px}.form-input{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:2px;outline:none;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:11px;transition:border-color .15s}.form-input:focus{border-color:var(--accent)}.form-input::placeholder{color:var(--text-dim)}select.form-input{cursor:pointer}select.form-input option{background:var(--bg-surface)}.conn-type-option{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;letter-spacing:1px;border-radius:3px;align-items:center;gap:8px;margin-top:4px;padding:8px 12px;font-size:10px;transition:border-color .15s;display:flex}.conn-type-option:hover{border-color:var(--accent)}.conn-type-option input{display:none}.conn-type-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.form-icon-row{align-items:center;gap:10px;display:flex}.form-icon-row .form-input{flex:1}.icon-preview{border:1px solid var(--border);background:var(--bg-card);border-radius:4px;width:36px;height:36px;padding:4px}.icon-preview-empty{border:1px dashed var(--border);background:var(--bg-card);width:36px;height:36px;color:var(--text-dim);border-radius:4px;justify-content:center;align-items:center;font-size:14px;display:flex}.modal-overlay{z-index:100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-surface);border:1px solid var(--border-bright);border-radius:4px;flex-direction:column;width:420px;max-height:80vh;display:flex;box-shadow:0 8px 48px #000c}.modal-header{letter-spacing:2px;color:var(--accent);border-bottom:1px solid var(--border);text-shadow:var(--glow-green);justify-content:space-between;align-items:center;padding:14px 16px;font-size:11px;display:flex}.modal-close{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:2px;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;display:flex}.modal-close:hover{border-color:var(--red);color:var(--red)}.modal-body{flex-direction:column;gap:6px;padding:12px;display:flex;overflow-y:auto}.playbook-item{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;text-align:left;border-radius:3px;flex-direction:column;gap:4px;padding:12px;transition:all .15s;display:flex}.playbook-item:hover{border-color:var(--accent)}.playbook-item.selected{border-color:var(--accent);background:var(--accent-dim)}.pb-name{color:var(--cyan);letter-spacing:1px;font-family:JetBrains Mono,monospace;font-size:11px}.pb-desc{color:var(--text-dim);font-size:9px;line-height:1.4}.modal-footer{border-top:1px solid var(--border);gap:8px;padding:12px 16px;display:flex}@keyframes glow-pulse{0%,to{box-shadow:0 0 8px #0f86}50%{box-shadow:0 0 20px #0f8c}}@keyframes amber-throb{0%,to{box-shadow:0 0 8px #fa06}50%{box-shadow:0 0 20px #fa0c}}@keyframes red-flash{0%,to{box-shadow:0 0 8px #f346}50%{box-shadow:0 0 24px #f34}}