:root{--bg:#0b1220;--panel:#111a2e;--panel-2:#16213a;--line:#233252;--text:#e6ecf8;--muted:#8b9bbd;--accent:#38bdf8;--accent-ink:#04202e;--danger:#f87171;--ok:#34d399;--warn:#fbbf24;--canvas:#0d1527;--dot:#1f2d4d;--wire:#5b7099;--card:#15203a;--shadow:0 8px 30px #00000059;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f1f5fb;--panel:#fff;--panel-2:#f4f7fc;--line:#d7e0ee;--text:#0f1b33;--muted:#5d6f93;--accent:#0284c7;--accent-ink:#fff;--canvas:#f7f9fd;--dot:#cfd9ea;--wire:#7d8fb3;--card:#fff;--shadow:0 8px 30px #1428501f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}code,kbd,.mac,.term-out,.term-input,.events-list{font-family:var(--mono)}code{background:var(--panel-2);border-radius:5px;padding:1px 5px;font-size:12px}kbd{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:11px}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit;color:inherit}.muted{color:var(--muted)}.small{font-size:12px}.spacer{flex:1}.app{grid-template-rows:52px minmax(0,1fr);height:100%;display:grid}.main{grid-template-columns:210px minmax(0,1fr) 310px;min-height:0;display:grid}.center{grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;display:grid}@media (width<=980px){.main{grid-template-columns:170px minmax(0,1fr) 250px}}.topbar{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:0 14px;display:flex}.brand{letter-spacing:.2px;align-items:center;gap:9px;font-size:17px;font-weight:700;display:flex}.project{align-items:center;gap:6px;margin-left:10px;display:flex}.project-name{background:0 0;border:1px solid #0000;border-radius:8px;width:220px;padding:5px 9px;font-weight:600}.project-name:hover,.project-name:focus{border-color:var(--line);background:var(--panel-2);outline:none}.save-state{color:var(--muted);min-width:120px;font-size:12px}.save-state.saved{color:var(--ok)}.save-state.error{color:var(--danger)}.group{border-left:1px solid var(--line);align-items:center;gap:6px;padding-left:12px;display:flex}.btn,.icon-btn,.tool,.mini{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;align-items:center;gap:7px;padding:6px 11px;transition:background .12s,border-color .12s;display:inline-flex}.icon-btn{border-radius:8px;justify-content:center;padding:6px}.btn:hover,.icon-btn:hover:not(:disabled),.tool:hover,.mini:hover{border-color:var(--accent)}.icon-btn:disabled{opacity:.35;cursor:default}.danger{color:var(--danger)}.btn.danger:hover,.icon-btn.danger:hover{border-color:var(--danger)}.btn.wide{justify-content:center;width:100%;margin-top:10px}.speed{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:5px 6px}.menu-wrap{position:relative}.menu{z-index:30;background:var(--panel);border:1px solid var(--line);width:320px;box-shadow:var(--shadow);border-radius:12px;max-height:70vh;padding:6px;position:absolute;top:38px;left:0;overflow:auto}.menu-title{color:var(--muted);text-transform:uppercase;letter-spacing:.8px;padding:6px 8px;font-size:11px}.menu-item{border-radius:8px;align-items:center;display:flex}.menu-item.on,.menu-item:hover{background:var(--panel-2)}.menu-open{text-align:left;background:0 0;border:0;flex-direction:column;flex:1;padding:8px;display:flex}.menu-open small{color:var(--muted)}.menu-new{border:0;border-top:1px solid var(--line);width:100%;color:var(--accent);background:0 0;align-items:center;gap:8px;margin-top:4px;padding:10px 8px;display:flex}.palette,.inspector{background:var(--panel);min-height:0;padding:12px;overflow:auto}.palette{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.panel-title{color:var(--muted);text-transform:uppercase;letter-spacing:.9px;justify-content:space-between;align-items:center;margin:16px 0 8px;font-size:11px;display:flex}.panel-title:first-child{margin-top:2px}.tools{gap:6px;display:grid}.tool{width:100%}.tool.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.tool.on kbd{color:var(--accent-ink);background:0 0;border-color:currentColor}.devices{gap:6px;display:grid}.dev-item{background:var(--panel-2);border:1px solid var(--line);cursor:grab;-webkit-user-select:none;user-select:none;color:var(--accent);border-radius:10px;align-items:center;gap:10px;padding:8px 10px;display:flex}.dev-item:hover{border-color:var(--accent)}.dev-item>div{color:var(--text)}.dev-title{font-weight:600}.dev-hint{color:var(--muted);font-size:11px}.palette-help{color:var(--muted);margin-top:18px;font-size:12px}.canvas-wrap{background:var(--canvas);min-height:0;position:relative;overflow:hidden}.canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block}.canvas.tool-link{cursor:crosshair}.grid-dot{fill:var(--dot)}.device{cursor:pointer}.canvas.tool-link .device{cursor:crosshair}.device .card{fill:var(--card);stroke:var(--line);stroke-width:1.5px;filter:drop-shadow(0 4px 10px #00000040);transition:stroke .12s}.device:hover .card{stroke:var(--accent)}.device.sel .card,.device.from .card{stroke:var(--accent);stroke-width:2.5px}.device.from .card{stroke-dasharray:5 4}.dev-icon{color:var(--accent);pointer-events:none}.kind-router .dev-icon{color:#a78bfa}.kind-server .dev-icon{color:#34d399}.kind-switch .dev-icon{color:#38bdf8}.kind-hub .dev-icon{color:#fbbf24}.dev-name{fill:var(--text);pointer-events:none;font-size:12.5px;font-weight:600}.dev-ip{fill:var(--muted);font-size:10.5px;font-family:var(--mono);pointer-events:none}.link .hit{stroke:#0000;stroke-width:16px;cursor:pointer}.link .wire,.wire.preview{stroke:var(--wire);stroke-width:2.5px;stroke-linecap:round;pointer-events:none}.link:hover .wire{stroke:var(--accent)}.link.sel .wire{stroke:var(--accent);stroke-width:3.5px}.link.down .wire{stroke:var(--danger);stroke-dasharray:6 6}.wire.preview{stroke:var(--accent);stroke-dasharray:4 5}.port-label{fill:var(--muted);font-size:9.5px;font-family:var(--mono);paint-order:stroke;stroke:var(--canvas);stroke-width:3px;pointer-events:none}.down-label{fill:var(--danger)}.pkt .dot{stroke:#00000059;stroke-width:1px}.pkt .glow{opacity:.28}.pkt.arp .dot,.pkt.arp .glow{fill:var(--warn)}.pkt.icmp-req .dot,.pkt.icmp-req .glow{fill:var(--accent)}.pkt.icmp-rep .dot,.pkt.icmp-rep .glow{fill:var(--ok)}.pkt.icmp-err .dot,.pkt.icmp-err .glow{fill:var(--danger)}.canvas-controls{background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:8px;padding:4px 8px 4px 4px;display:flex;position:absolute;bottom:12px;right:12px}.zoom-label{color:var(--muted);text-align:right;min-width:40px;font-size:12px}.mode-banner{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;position:absolute;top:12px;left:50%;transform:translate(-50%)}.empty-hint{text-align:center;color:var(--muted);pointer-events:none;place-content:center;gap:4px;display:grid;position:absolute;inset:0}.empty-hint strong{color:var(--text);font-size:16px}.stats{gap:10px;display:flex}.stats>div{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;flex-direction:column;flex:1;padding:10px;display:flex}.stats b{font-size:22px}.stats span{color:var(--muted);font-size:12px}.shortcuts{color:var(--muted);gap:6px;margin:0;padding:0;font-size:12.5px;list-style:none;display:grid}.dev-head{color:var(--accent);align-items:center;gap:10px;display:flex}.dev-head>div{color:var(--text);flex:1}.name-input{background:0 0;border:1px solid #0000;border-radius:7px;width:100%;margin-left:-6px;padding:2px 6px;font-size:16px;font-weight:700}.name-input:hover,.name-input:focus{border-color:var(--line);background:var(--panel-2);outline:none}.iface{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:9px 10px}.iface-head{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;display:flex}.peer{color:var(--ok);text-align:right;font-size:11.5px}.peer.free{color:var(--muted)}.row{grid-template-columns:52px 1fr;align-items:center;gap:6px;margin-top:5px;display:grid}.row label{color:var(--muted);font-size:12px}.mac{color:var(--muted);margin-top:7px;font-size:10.5px}.inspector input:not(.name-input){background:var(--bg);border:1px solid var(--line);width:100%;font-family:var(--mono);border-radius:7px;padding:5px 8px;font-size:12.5px}.inspector input:focus{outline:2px solid color-mix(in srgb, var(--accent) 50%, transparent);border-color:var(--accent)}input.invalid{border-color:var(--danger)!important;background:color-mix(in srgb, var(--danger) 12%, var(--bg))!important}.route{color:var(--muted);grid-template-columns:1fr 12px 40px 22px 1fr auto;align-items:center;gap:4px;margin-bottom:6px;font-size:12px;display:grid}.mini{text-transform:none;letter-spacing:0;color:var(--text);padding:2px 8px;font-size:12px}.link-ends{background:var(--panel-2);border:1px solid var(--line);text-align:center;border-radius:10px;gap:4px;padding:10px;display:grid}.status{margin:10px 0 0;font-weight:600}.status.ok{color:var(--ok)}.status.bad{color:var(--danger)}.dock{background:var(--panel);border-top:1px solid var(--line);flex-direction:column;height:270px;min-height:0;display:flex}.dock.collapsed{height:auto}.dock-tabs{border-bottom:1px solid var(--line);gap:2px;padding:0 8px;display:flex}.dock-tabs button{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;padding:8px 12px}.dock-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}.dock-body{flex-direction:column;flex:1;min-height:0;display:flex}.dock-body.hint{color:var(--muted);padding:16px}.term-out{white-space:pre-wrap;flex:1;padding:10px 14px 0;font-size:12.5px;overflow:auto}.term-out .cmd{color:var(--accent)}.term-line{align-items:center;gap:8px;padding:6px 14px 10px;display:flex}.prompt{color:var(--accent);font-family:var(--mono);font-size:12.5px}.term-input{background:0 0;border:0;outline:none;flex:1;font-size:12.5px}.events-bar{border-bottom:1px solid var(--line);gap:4px;padding:6px 10px;display:flex}.events-bar button{color:var(--muted);background:0 0;border:1px solid #0000;border-radius:7px;padding:2px 10px;font-size:12px}.events-bar button.on{border-color:var(--accent);color:var(--text)}.events-list{flex:1;padding:6px 12px;font-size:12px;overflow:auto}.ev{grid-template-columns:58px 10px 1fr;align-items:center;gap:8px;padding:1px 0;display:grid}.ev .t{color:var(--muted);text-align:right}.ev i{background:var(--muted);border-radius:50%;width:8px;height:8px}.ev.arp i{background:var(--warn)}.ev.icmp-req i{background:var(--accent)}.ev.icmp-rep i{background:var(--ok)}.ev.icmp-err i,.ev.drop i{background:var(--danger)}.ev.drop{color:var(--danger)}.toast{background:var(--panel);border:1px solid var(--accent);box-shadow:var(--shadow);z-index:50;border-radius:12px;padding:10px 18px;position:fixed;bottom:26px;left:50%;transform:translate(-50%)}.splash{text-align:center;place-content:center;justify-items:center;gap:10px;height:100%;display:grid}.splash h1{color:var(--accent);margin:0}.pkt.tcp .dot,.pkt.tcp .glow{fill:#38bdf8}.pkt.udp .dot,.pkt.udp .glow{fill:#94a3b8}.pkt.http .dot,.pkt.http .glow{fill:#34d399}.pkt.dhcp .dot,.pkt.dhcp .glow{fill:#f472b6}.pkt.dns .dot,.pkt.dns .glow{fill:#c084fc}.pkt.rip .dot,.pkt.rip .glow{fill:#fb923c}.pkt.ospf .dot,.pkt.ospf .glow{fill:#facc15}.link.wifi .wire{stroke:var(--accent);stroke-dasharray:2 7;stroke-width:2px;opacity:.8}.link.wifi .hit{pointer-events:none}.kind-laptop .dev-icon{color:var(--accent)}.kind-ap .dev-icon{color:#f472b6}.legend{background:var(--panel);border:1px solid var(--line);max-width:60%;color:var(--muted);pointer-events:none;border-radius:10px;flex-wrap:wrap;gap:4px 10px;padding:5px 10px;font-size:11px;display:flex;position:absolute;bottom:12px;left:12px}.legend .pkt{align-items:center;gap:4px;display:inline-flex}.note-card{fill:color-mix(in srgb, var(--warn) 22%, var(--panel));stroke:color-mix(in srgb, var(--warn) 55%, transparent);stroke-width:1px}.note.sel .note-card{stroke:var(--accent);stroke-width:2px}.note{cursor:grab}.note-text{fill:var(--text);pointer-events:none;font-size:12px}.note-edit,.note-area{resize:none;background:var(--panel);width:100%;height:100%;min-height:100px;color:var(--text);border:2px solid var(--accent);font:inherit;box-sizing:border-box;border-radius:8px;padding:8px;font-size:12px}.note-area{height:160px;margin-bottom:8px}.note-item .dev-title{color:var(--text)}.tool kbd{margin-left:auto}.tabs{border-bottom:1px solid var(--line);gap:2px;margin:12px 0 6px;display:flex}.tabs button{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;padding:6px 10px;font-size:12.5px}.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}.wifi-row{margin:10px 0 0}.iface.shut{opacity:.6}.check{color:var(--text);cursor:pointer;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;display:flex}.check input{width:auto!important}.inspector select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:12.5px}.row select{width:100%}.row.vlan-add{grid-template-columns:56px 1fr auto}.subadd{grid-template-columns:1fr 64px auto;align-items:center;gap:6px;margin:4px 0 10px;display:grid}.subadd>span{grid-column:1/-1}.vlans{flex-wrap:wrap;gap:6px;margin-bottom:6px;display:flex}.chip{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;align-items:center;gap:6px;padding:2px 10px;font-size:12px;display:inline-flex}.chip button{color:var(--muted);background:0 0;border:0;padding:0;font-size:14px;line-height:1}.chip button:hover{color:var(--danger)}.pool{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:8px 10px}.pool .row:first-child{grid-template-columns:1fr 12px 52px auto}.cli-tip{margin:12px 0 8px}.cli-tip code{font-family:var(--mono)}.badge{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;margin-left:6px;padding:0 7px;font-size:11px}.tasks-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.task-form{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:6px;padding:8px 12px;display:flex}.task-form input,.task-form select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px}.task-form input:first-child{flex:1;min-width:220px}.task-list{flex:1;align-content:start;gap:6px;padding:8px 12px;display:grid;overflow:auto}.task{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;align-items:center;gap:10px;padding:7px 10px;display:flex}.task .mark{text-align:center;width:18px;color:var(--muted);font-weight:800}.task.ok{border-color:color-mix(in srgb, var(--ok) 55%, transparent)}.task.ok .mark{color:var(--ok)}.task.bad{border-color:color-mix(in srgb, var(--danger) 55%, transparent)}.task.bad .mark{color:var(--danger)}.task-text{flex:1;display:grid}.task-text small{color:var(--muted)}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.btn.primary:disabled{opacity:.5}.ev.tcp i{background:#38bdf8}.ev.http i{background:#34d399}.ev.dhcp i{background:#f472b6}.ev.dns i{background:#c084fc}.ev.rip i{background:#fb923c}.ev.ospf i{background:#facc15}.ev.udp i{background:#94a3b8}.labs-menu{width:360px;left:auto;right:0}.menu-open.lab{text-align:left;gap:2px;width:100%;display:grid}.menu-open.lab small{color:var(--muted)}.dock-body.hint code{background:var(--panel-2);font-family:var(--mono);border-radius:5px;padding:1px 6px;display:inline}