:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18263d;background:#f5f7fc;font-size:14px;--blue:#2456d8;--border:#dfe5ef}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:white;color:#253750;border-radius:7px;padding:9px 12px;font-weight:550;transition:background .12s}button:hover{background:#edf2ff;border-color:#abbde9}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7ba8ff;outline-offset:2px}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.primary:hover{background:#1943b4;color:white}header{height:79px;padding:0 24px;display:flex;align-items:center;gap:30px;background:white;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:-.7px}.mark{display:grid;place-items:center;background:var(--blue);color:white;border-radius:10px;width:40px;height:40px;font-size:24px}.brand small{display:block;font-size:10px;letter-spacing:1.8px;color:#657591;margin-top:3px;font-weight:600}.mode-badge{background:#eaf0ff;color:#234eb7;padding:7px 11px;border-radius:5px;font-size:13px;font-weight:650}nav{display:flex;gap:8px;margin-left:auto}.workspace{display:grid;grid-template-columns:218px minmax(300px,1fr) 290px;height:calc(100dvh - 79px);min-height:520px}aside{background:#fff;padding:23px 18px;overflow:auto}.palette{border-right:1px solid var(--border);display:flex;flex-direction:column}h2{font-size:14px;margin:0 0 8px;font-weight:750}p{line-height:1.6}p.muted{font-size:13px;margin:0 0 20px;color:#6c7890}.device{display:flex;align-items:center;gap:14px;width:100%;padding:12px 10px;margin-bottom:8px;text-align:left;border:1px solid transparent;background:#f4f7fc}.device svg{width:34px;height:34px;color:var(--blue)}.device small{display:block;font-size:12px;color:#78849a;margin-top:2px;font-weight:400}.device.active,.tool.active{background:#e9efff;border-color:#b3c5f5;color:#1949c4}.section{margin-top:24px}.tool{display:flex;align-items:center;gap:10px;border:1px solid transparent;text-align:left;width:100%;margin:3px 0}.tool span{flex:1}kbd{font-size:11px;color:#657591;background:#f3f5f9;padding:2px 4px;border-radius:3px}.palette-bottom{margin-top:auto;padding-top:40px}.version{font-size:10px;letter-spacing:1.5px;color:#8190a6}.palette-bottom p{font-size:13px;margin:9px 0}.palette-bottom small{font-size:12px;line-height:1.5;color:#7a879b}main{min-width:0;display:flex;flex-direction:column}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#fff;border-bottom:1px solid var(--border);gap:8px}#projectTitle{font-weight:650;border:0;padding:8px 0;background:transparent;width:50%;min-width:90px}.actions{display:flex;gap:6px;align-items:center}.actions button{padding:7px 10px}.separator{height:22px;width:1px;background:var(--border);margin:0 5px}#board{position:relative;flex:1;min-height:300px;overflow:hidden;background:#f7f9fd}#canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}#canvas.placing{cursor:crosshair}#hint{position:absolute;top:18px;left:20px;pointer-events:none;color:#687a95;font-size:12px;background:#f7f9fddd;padding:5px 8px;border-radius:5px}.zoom{display:flex;align-items:center;gap:5px;position:absolute;bottom:20px;left:20px;background:white;padding:5px;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 15px #10254a08}.zoom button{border:0;padding:6px 9px}.zoom span{font-size:12px;min-width:45px;text-align:center}.inspector{border-left:1px solid var(--border)}.eyebrow{text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:#71819b;font-weight:700;margin-bottom:10px}.inspector h1{font-size:21px;letter-spacing:-.4px;margin:0 0 6px}.inspector .subtitle{font-size:13px;color:#6d7e95;line-height:1.5;margin-bottom:24px}.inspector label{display:block;font-size:13px;font-weight:550;margin:15px 0 6px}.inspector input:not([type=checkbox]),.inspector select,.inspector textarea{display:block;width:100%;border:1px solid #cfd8e6;background:white;border-radius:6px;padding:9px 10px;color:#27374e;min-width:0}.inspector input.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.inspector .row{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}.danger{color:#b33b46}.port{border-top:1px solid var(--border);margin-top:20px;padding-top:15px}.port h3{font-size:13px;margin:0;display:flex;justify-content:space-between}.port h3 small{font-size:11px;color:#6a7d97;font-weight:400}.checklabel{display:flex!important;gap:9px;align-items:center;line-height:1.5}.checklabel input{accent-color:var(--blue)}.connection{margin-top:10px;padding:9px;background:#f3f6fc;border-radius:5px;font-size:12px;line-height:1.5;overflow-wrap:anywhere}footer{padding:10px 17px;background:white;border-top:1px solid var(--border);font-size:11px;color:#6d7d95;display:flex;gap:12px;justify-content:space-between}.node{cursor:grab;outline:none}.node:active{cursor:grabbing}.node .card{fill:white;stroke:#c8d5e7;stroke-width:1.5;filter:drop-shadow(0 3px 4px #132f5810)}.node.selected .card,.node:focus-visible .card{stroke:var(--blue);stroke-width:2.5}.node.pending .card{stroke:#e9a32b;stroke-width:3}.node text{user-select:none;pointer-events:none}.node .name{font-size:13px;font-weight:650;fill:#213651}.node .ip{font-size:11px;fill:#71829a;font-family:ui-monospace,monospace}.edge{cursor:pointer}.edge .wire{stroke:#8297b7;stroke-width:2.5;fill:none}.edge.selected .wire{stroke:var(--blue);stroke-width:4}.edge .hit{stroke:transparent;stroke-width:18;fill:none}.edge text{font-size:10px;fill:#657a98;paint-order:stroke;stroke:#f7f9fd;stroke-width:4;stroke-linejoin:round}.edge:focus-visible .wire{stroke:var(--blue);stroke-width:4}#empty{position:absolute;inset:30% 15%;text-align:center;pointer-events:none;color:#657591}#empty h1{font-size:23px;color:#253d63}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1c304e;color:white;padding:12px 20px;box-shadow:0 5px 22px #122f4530;border-radius:9px;z-index:10;max-width:90%;display:none;line-height:1.5}dialog{border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 70px #0c24463b;padding:26px;max-width:620px;width:calc(100% - 32px);color:#243a59}dialog::backdrop{background:#11274566}dialog h2{font-size:21px}dialog p,dialog li{line-height:1.7}dialog select{padding:10px;width:100%;margin:8px 0 18px;border:1px solid var(--border);border-radius:6px}dialog button{margin-right:7px;margin-top:12px}.issue{border-left:3px solid #e5a42a;padding:9px 13px;background:#fff9ef;margin:9px 0;font-size:14px}.good{background:#edf7f4;padding:14px;border-radius:6px}.form-error{color:#b22c43;font-size:12px;margin-top:12px;line-height:1.5}#saveProperties{margin-top:20px;width:100%}.note-card{fill:#fff7cf!important;stroke:#e0cd79!important}.hintbox{font-size:13px;line-height:1.7;color:#6c7f98;background:#f4f7fc;padding:14px;border-radius:8px;margin-top:22px}
@media(max-width:1050px){header{gap:14px;padding:0 14px}.workspace{grid-template-columns:170px minmax(250px,1fr) 255px}.palette,.inspector{padding:18px 12px}.mode-badge{display:none}.brand{font-size:18px}.device{gap:9px}nav{gap:5px}nav button{padding:9px}}
@media(max-width:760px){header{height:auto;min-height:110px;flex-wrap:wrap;padding:12px;gap:10px}.brand{width:100%;font-size:18px}.brand small{display:none}.mark{height:30px;width:30px;font-size:20px}nav{margin:0;width:100%;justify-content:space-between}nav button{font-size:12px}.workspace{height:auto;min-height:calc(100dvh - 110px);grid-template-columns:1fr}.palette{padding:10px;border:0;border-bottom:1px solid var(--border);display:flex;flex-direction:row;flex-wrap:wrap;gap:5px}.palette h2,.palette p,.palette-bottom,.device small,.section,.tool kbd{display:none}#devices{display:flex;gap:4px}.device{padding:7px;margin:0;gap:5px;width:auto;font-size:12px}.device svg{width:23px;height:23px}.tool{width:auto;font-size:12px;padding:7px;margin:0}.tool span{flex:none}main{height:60dvh;min-height:410px}.inspector{border:0;border-top:1px solid var(--border);padding:22px}.inspector form{max-width:560px}.canvas-toolbar{padding:9px 12px}#hint{left:7px;top:8px;font-size:10px}footer{font-size:10px}.zoom{bottom:12px;left:12px}}
.mode-switch{display:flex;gap:2px;background:#eef2fa;border-radius:8px;padding:3px}.mode-switch button{border:0;background:transparent;padding:8px 11px}.mode-switch button.active{background:#2456d8;color:#fff}.speed-control{font-size:13px;white-space:nowrap}.speed-control select{font:inherit;padding:7px;border:1px solid var(--border);border-radius:5px;background:white}.action-mode .node{cursor:pointer}.action-mode .palette{background:#f8faff}.edge.traffic-arp .wire{stroke:#ed9c16;stroke-width:6;filter:drop-shadow(0 0 5px #ed9c16)}.edge.traffic-request .wire{stroke:#2075ee;stroke-width:6;filter:drop-shadow(0 0 5px #2075ee)}.edge.traffic-reply .wire{stroke:#119e69;stroke-width:6;filter:drop-shadow(0 0 5px #119e69)}.key{display:inline-block;width:12px;height:4px;vertical-align:middle;margin-right:3px}.arp-key{background:#ed9c16}.request-key{background:#2075ee}.reply-key{background:#119e69}
#desktop{position:fixed;left:240px;bottom:48px;width:min(600px,calc(100vw - 270px));z-index:5;background:#fff;border:1px solid #a9bad9;border-radius:10px;box-shadow:0 12px 40px #11284a40;overflow:hidden}.desktop-bar{display:flex;align-items:center;justify-content:space-between;background:#eaf0ff;padding:9px 14px}.desktop-bar button{padding:3px 10px;font-size:22px}.desktop-content{padding:15px}.desktop-content p{margin:0 0 14px}.program-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:15px 22px}.program-tile b{background:#182b47;color:white;border-radius:6px;padding:8px 15px;font-family:monospace;font-size:25px}.install-box{border-top:1px solid var(--border);margin-top:25px;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:16px}.install-box small{display:block;color:#687b97;margin-top:5px}.terminal-toolbar{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:8px}.terminal-toolbar span{margin-left:auto;color:#526987}#terminalOutput{height:170px;overflow:auto;margin:0;background:#14233b;color:#d5e7ff;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace;border-radius:6px}#terminalForm{display:flex;align-items:center;gap:8px;margin-top:10px}#command{min-width:0;flex:1;padding:9px;border:1px solid var(--border);border-radius:6px;font:14px ui-monospace,monospace}
@media(max-width:1050px){header{gap:10px}.mode-switch button{padding:7px;font-size:12px}#desktop{left:185px;width:calc(100vw - 210px)}}@media(max-width:760px){#desktop{left:8px;bottom:8px;width:calc(100vw - 16px)}.brand{width:auto;flex:1}.terminal-toolbar span{display:none}.speed-control{font-size:12px}.actions{gap:3px}.canvas-toolbar{flex-wrap:wrap}.mode-switch{margin-left:auto}#terminalOutput{height:150px}}