:root{--bg-0:oklch(0.155 0.006 255);--bg-1:oklch(0.135 0.006 255);--panel:oklch(0.192 0.006 255);--panel-2:oklch(0.224 0.006 255);--panel-3:oklch(0.262 0.007 255);--line:oklch(0.30 0.008 255/0.9);--line-soft:oklch(0.30 0.008 255/0.5);--tx-hi:oklch(0.97 0.004 255);--tx:oklch(0.80 0.010 255);--tx-mid:oklch(0.66 0.012 255);--tx-dim:oklch(0.53 0.012 255);--accent:oklch(0.70 0.14 245);--accent-soft:oklch(0.70 0.14 245/0.14);--accent-line:oklch(0.70 0.14 245/0.40);--ok:oklch(0.76 0.15 158);--ok-soft:oklch(0.76 0.15 158/0.14);--down:oklch(0.68 0.17 25);--down-soft:oklch(0.68 0.17 25/0.14);--warn:oklch(0.82 0.13 80);--warn-soft:oklch(0.82 0.13 80/0.14);--violet:oklch(0.70 0.14 300);--r-card:12px;--r-ctl:9px;--r-pill:999px;--pad:22px;--row-h:46px;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif}[data-density=compact]{--pad:15px;--row-h:40px}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:var(--sans);background:var(--bg-0);color:var(--tx);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}#root,.app-root{height:100vh}::selection{background:var(--accent-soft);color:var(--tx-hi)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--panel-3);border-radius:999px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:oklch(.34 .008 255);background-clip:content-box}.app{display:grid;grid-template-columns:232px 1fr;height:100vh}.sidebar{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px}.brand-mark{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,var(--accent-soft),transparent 70%);border:1px solid var(--accent-line)}.brand-mark svg{display:block}.brand-name{font-size:15px;font-weight:700;letter-spacing:.16em;color:var(--tx-hi)}.brand-sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dim);font-family:var(--mono);margin-top:1px}.nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px}.nav-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-dim);padding:14px 10px 6px}.nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-ctl);color:var(--tx-mid);cursor:pointer;font-size:13.5px;font-weight:500;border:1px solid transparent;transition:background .12s,color .12s;-webkit-user-select:none;-moz-user-select:none;user-select:none;background:none;width:100%;text-align:left;font-family:var(--sans)}.nav-item svg{width:17px;height:17px;flex:none;opacity:.85}.nav-item:hover{background:var(--panel);color:var(--tx)}.nav-item.active{background:var(--accent-soft);color:var(--tx-hi);border-color:var(--accent-line)}.nav-item.active svg{color:var(--accent);opacity:1}.nav-badge{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx-dim);background:var(--panel-2);padding:1px 7px;border-radius:var(--r-pill)}.nav-item.active .nav-badge{color:var(--accent);background:oklch(.7 .14 245/.2)}.sidebar-foot{margin-top:auto;padding:14px 18px 18px;border-top:1px solid var(--line)}.server-row{display:flex;align-items:center;gap:9px;font-size:12px}.server-row .label{color:var(--tx-mid)}.server-meta{font-family:var(--mono);font-size:10.5px;color:var(--tx-dim);margin-top:8px;line-height:1.7}.server-meta b{color:var(--tx-mid);font-weight:500}.main{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-0)}.topbar{height:60px;flex:none;display:flex;align-items:center;gap:16px;padding:0 26px;border-bottom:1px solid var(--line);background:oklch(.155 .006 255/.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.page-title{font-size:19px;font-weight:650;color:var(--tx-hi);letter-spacing:-.01em}.page-sub{font-size:12.5px;color:var(--tx-dim);margin-top:1px}.topbar-spacer{flex:1 1}.clock{font-family:var(--mono);font-size:12px;color:var(--tx-mid);text-align:right}.clock .date{color:var(--tx-dim);font-size:10.5px}.content{flex:1 1;min-height:0;overflow-y:auto;padding:26px}.content-inner{max-width:1180px;margin:0 auto}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card)}.card-pad{padding:var(--pad)}.card-head{display:flex;align-items:center;gap:12px;padding:15px var(--pad);border-bottom:1px solid var(--line-soft)}.card-head h3{font-size:14px;font-weight:600;color:var(--tx-hi)}.card-head .sub{font-size:12px;color:var(--tx-dim)}.card-head-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.section-label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-dim);font-weight:600}.grid{display:grid;grid-gap:16px;gap:16px}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}.mono{font-family:var(--mono)}.dim{color:var(--tx-dim)}.mid{color:var(--tx-mid)}.hi{color:var(--tx-hi)}.dot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;display:inline-block}.dot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}.dot.down{background:var(--down);box-shadow:0 0 0 3px var(--down-soft)}.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}.dot.idle{background:var(--tx-dim);box-shadow:0 0 0 3px oklch(.5 0 0/.12)}.dot.pulse.ok:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--ok);opacity:0;animation:ping 2.4s ease-out infinite}@keyframes ping{0%{transform:scale(.7);opacity:.7}to{transform:scale(2.4);opacity:0}}.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;line-height:1;padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--tx-mid);white-space:nowrap}.badge.ok{color:var(--ok);background:var(--ok-soft);border-color:oklch(.76 .15 158/.3)}.badge.down{color:var(--down);background:var(--down-soft);border-color:oklch(.68 .17 25/.3)}.badge.warn{color:var(--warn);background:var(--warn-soft);border-color:oklch(.82 .13 80/.3)}.badge.accent{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}.badge.mono{font-family:var(--mono);font-weight:500}.btn{display:inline-flex;align-items:center;vertical-align:middle;gap:7px;font-family:var(--sans);font-size:13px;font-weight:550;padding:8px 13px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--panel-2);color:var(--tx);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}.btn svg{width:15px;height:15px}.btn:hover{background:var(--panel-3);color:var(--tx-hi)}.btn.primary{background:var(--accent);border-color:var(--accent);color:oklch(.18 .02 255);font-weight:650}.btn.primary:hover{background:oklch(.75 .14 245)}.btn.danger{color:var(--down);border-color:oklch(.68 .17 25/.4);background:var(--down-soft)}.btn.danger:hover{background:oklch(.68 .17 25/.22)}.btn.ghost{background:transparent}.btn.ghost:hover{background:var(--panel-2)}.btn.sm{padding:5px 10px;font-size:12px}.btn:disabled{opacity:.4;cursor:not-allowed}.icon-btn{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--panel-2);color:var(--tx-mid);cursor:pointer}.icon-btn:hover{background:var(--panel-3);color:var(--tx-hi)}.icon-btn svg{width:16px;height:16px}.input{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--bg-1);color:var(--tx)}.input svg{width:15px;height:15px;color:var(--tx-dim);flex:none}.input input{background:none;border:none;outline:none;color:var(--tx-hi);font-family:var(--sans);font-size:13px;width:100%}.input input::placeholder{color:var(--tx-dim)}.input:focus-within{border-color:var(--accent-line)}.seg{display:inline-flex;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-ctl);padding:3px;gap:2px}.seg button{font-family:var(--sans);font-size:12.5px;font-weight:550;padding:5px 12px;border-radius:6px;border:none;cursor:pointer;background:transparent;color:var(--tx-mid)}.seg button.on{background:var(--panel-3);color:var(--tx-hi)}select.btn{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:28px}.field{padding:8px 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--bg-1);color:var(--tx-hi);font-family:var(--sans);font-size:13px;outline:none}.field::placeholder{color:var(--tx-dim)}.field:focus{border-color:var(--accent-line)}.field.mono{font-family:var(--mono)}.stat{padding:18px var(--pad);display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}.stat .k{font-size:12px;color:var(--tx-mid);display:flex;align-items:center;gap:7px}.stat .k svg{width:14px;height:14px;color:var(--tx-dim)}.stat .v{font-size:28px;font-weight:680;color:var(--tx-hi);font-family:var(--mono);letter-spacing:-.02em;line-height:1.1}.stat .v .unit{font-size:15px;color:var(--tx-dim);font-weight:500}.stat .delta{font-size:11.5px;font-family:var(--mono);display:inline-flex;align-items:center;gap:4px}.stat .delta.up{color:var(--ok)}.stat .delta.dn{color:var(--down)}.stat-spark{position:absolute;right:0;bottom:0;opacity:.9;pointer-events:none}.table{width:100%;border-collapse:collapse}.table th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-dim);font-weight:600;padding:10px var(--pad);position:-webkit-sticky;position:sticky;top:0;background:var(--panel);z-index:1}.table td,.table th{border-bottom:1px solid var(--line-soft)}.table td{padding:11px var(--pad);font-size:13px;vertical-align:middle}.table tr:last-child td{border-bottom:none}.table tbody tr{cursor:pointer;transition:background .1s}.table tbody tr:hover{background:var(--panel-2)}.table tbody tr.sel{background:var(--accent-soft)}.t-num{text-align:right}.t-id,.t-num{font-family:var(--mono)}.t-id{font-size:12px;color:var(--tx-mid)}.dev-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--pad);display:flex;flex-direction:column;gap:14px;transition:border-color .12s,transform .12s}.dev-card.clickable{cursor:pointer}.dev-card.clickable:hover{border-color:var(--line);transform:translateY(-1px)}.dev-top{display:flex;align-items:flex-start;gap:12px}.dev-ico{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel-2);color:var(--tx-mid)}.dev-ico svg{width:21px;height:21px}.dev-ico.kiosk{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}.dev-name{font-size:14.5px;font-weight:600;color:var(--tx-hi)}.dev-sub{font-size:11.5px;color:var(--tx-dim);font-family:var(--mono);margin-top:2px}.dev-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px}.dev-meta .m{display:flex;flex-direction:column;gap:2px}.dev-meta .m .ml{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim)}.dev-meta .m .mv{font-family:var(--mono);color:var(--tx);font-size:12.5px}.link-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill);background:var(--bg-1);border:1px solid var(--line);font-size:12px}.link-pill.empty{border-style:dashed;color:var(--tx-dim)}.fleet-row{border-radius:0;transition:background .1s}.fleet-row:hover{background:var(--panel-2)}.board{display:grid;grid-template-columns:1fr 64px 1fr;grid-gap:0;gap:0;align-items:stretch;position:relative}.board-col{display:flex;flex-direction:column;gap:12px}.board-col .col-h{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-dim);font-weight:600;margin-bottom:2px;padding-left:4px}.board-mid{position:relative}.node{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;display:flex;align-items:center;gap:12px;transition:border-color .12s,background .12s}.node.active-target{border-color:var(--accent-line);background:var(--accent-soft)}.node.dragging{opacity:.5}.node .n-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel-2);flex:none}.node .n-ico svg{width:18px;height:18px;color:var(--tx-mid)}.node .n-body{min-width:0;flex:1 1}.node .n-name{font-size:13.5px;font-weight:600;color:var(--tx-hi)}.node .n-ip{font-family:var(--mono);font-size:11.5px;color:var(--tx-dim)}.node .n-state{margin-left:auto}.wire-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0}.wire{fill:none;stroke:var(--accent-line);stroke-width:1.5}.wire.flow{stroke:var(--accent);stroke-dasharray:4 5;animation:dash 1s linear infinite}@keyframes dash{to{stroke-dashoffset:-18}}.drawer-scrim{position:fixed;inset:0;background:oklch(.1 0 0/.55);z-index:40;animation:fade .15s}@keyframes fade{0%{opacity:0}}.drawer{position:fixed;top:0;right:0;bottom:0;width:460px;max-width:92vw;background:var(--bg-0);border-left:1px solid var(--line);z-index:41;display:flex;flex-direction:column;animation:slideIn .2s cubic-bezier(.3,.7,.3,1);box-shadow:-24px 0 60px oklch(.1 0 0/.4)}@keyframes slideIn{0%{transform:translateX(40px)}}.drawer-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}.drawer-body{flex:1 1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:20px}.kv{display:grid;grid-template-columns:130px 1fr;grid-gap:9px 14px;gap:9px 14px;font-size:13px}.kv dt{color:var(--tx-dim)}.kv dd{color:var(--tx);font-family:var(--mono);font-size:12.5px;text-align:right}.chart-wrap{padding:var(--pad)}.axis-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--tx-dim);margin-top:8px}.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px}.legend .li{display:flex;align-items:center;gap:7px;color:var(--tx-mid)}.legend .sw{width:10px;height:10px;border-radius:3px}.bar-row{display:grid;grid-template-columns:120px 1fr 64px;grid-gap:12px;gap:12px;align-items:center;padding:7px 0}.bar-row .bl{font-size:12.5px;color:var(--tx);display:flex;align-items:center;gap:8px}.bar-track{height:9px;background:var(--bg-1);border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:var(--accent)}.bar-row .bv{font-family:var(--mono);font-size:12px;color:var(--tx-mid);text-align:right}.donut-wrap{display:flex;align-items:center;gap:22px}.donut{width:120px;height:120px;border-radius:50%;flex:none;position:relative}.donut-hole{position:absolute;inset:22px;border-radius:50%;background:var(--panel);z-index:1}.donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:2;text-align:center}.donut-c .dv{font-family:var(--mono);font-size:21px;font-weight:680;color:var(--tx-hi)}.donut-c .dl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--tx-dim)}.endpoint{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}.endpoint+.endpoint{margin-top:14px}.ep-head{display:flex;align-items:center;gap:12px;padding:13px 18px;background:var(--panel);cursor:pointer}.ep-method{font-family:var(--mono);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;letter-spacing:.04em}.ep-method.get{color:var(--ok);background:var(--ok-soft)}.ep-method.post{color:var(--accent);background:var(--accent-soft)}.ep-path{font-family:var(--mono);font-size:13px;color:var(--tx-hi)}.ep-desc{font-size:12.5px;color:var(--tx-dim);margin-left:auto}.ep-body{border-top:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:14px}.code,.ep-body{background:var(--bg-1)}.code{font-family:var(--mono);font-size:12px;line-height:1.65;border:1px solid var(--line);border-radius:9px;padding:13px 15px;color:var(--tx);overflow-x:auto;white-space:pre}.code .c-key{color:var(--accent)}.code .c-str{color:var(--ok)}.code .c-num{color:var(--warn)}.code .c-cm,.code-label{color:var(--tx-dim)}.code-label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:7px}.empty-state{padding:40px;text-align:center;color:var(--tx-dim)}.empty-state svg{width:34px;height:34px;margin-bottom:12px;opacity:.5}.flow-feed{display:flex;flex-direction:column}.feed-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13px;align-items:flex-start}.feed-item:last-child{border-bottom:none}.feed-ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--panel-2);border:1px solid var(--line)}.feed-ico svg{width:14px;height:14px}.feed-t{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tx-dim);white-space:nowrap}.divider{height:1px;background:var(--line-soft);margin:4px 0}.fade-in{opacity:1}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}}.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;flex-direction:column;gap:8px}.toast,.toast-wrap{display:flex;align-items:center}.toast{gap:9px;font-size:13px;background:var(--panel-2);border:1px solid var(--line);color:var(--tx-hi);padding:9px 14px;border-radius:var(--r-ctl);box-shadow:0 12px 32px oklch(.1 0 0/.5);animation:slideIn .18s ease}.toast.err{border-color:oklch(.68 .17 25/.4)}.toast.err svg{color:var(--down)}.toast.ok svg{color:var(--ok)}@media (max-width:920px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-2,.cols-3{grid-template-columns:1fr}.app{grid-template-columns:64px 1fr}.brand-name,.brand-sub,.nav-badge,.nav-item span,.nav-label,.sidebar-foot{display:none}.nav-item{justify-content:center}}