:root{--bg:#0b1220;--p:#0e1a2b;--bd:#223247;--tx:#e6edf3;--mu:#92a6ba;--ok:#2dd4bf;--rx:#7dd3fc}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}.app{display:grid;grid-template-columns:230px 1fr 290px;grid-template-rows:48px 1fr;height:100vh}.top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:var(--p);border-bottom:1px solid var(--bd)}.palette,.inspector{background:var(--p);padding:12px;overflow-y:auto}.palette{border-right:1px solid var(--bd)}.inspector{border-left:1px solid var(--bd)}h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--rx);margin:14px 0 8px}.muted{color:var(--mu);font-size:12px}.mono{font-family:Courier New,monospace}.pitem{display:flex;gap:10px;align-items:center;background:#111c2e;border:1px solid var(--bd);border-radius:10px;padding:8px;margin-bottom:8px;cursor:grab}.pitem:hover{border-color:var(--ok)}.pitem img{width:60px;height:44px;object-fit:contain}.pitem b{font-size:13px}.legend{margin-top:18px;font-size:12px;line-height:1.7}.dot{display:inline-block;width:10px;height:10px;border-radius:50%}.dot.tx{background:var(--ok)}.dot.rx{background:var(--rx)}.stage{display:flex;flex-direction:column;min-width:0;min-height:0}.canvas{flex:1;overflow:auto;position:relative;background-color:#0a111d;background-image:radial-gradient(#1b2a3d 1px,transparent 1px);background-size:20px 20px}.world{position:relative}.node{position:absolute;-webkit-user-select:none;user-select:none;touch-action:none;cursor:move;border-radius:12px;padding:6px}.node.sel{outline:2px solid var(--ok);outline-offset:2px}.devimg{filter:drop-shadow(0 8px 10px #000a);pointer-events:none}.devcard{background:#111c2eee;border:1px solid var(--bd);border-radius:10px;padding:8px;margin-top:6px;font-size:11px}.devcard.small{text-align:center}.devhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:6px}.st{font-size:10px;border:1px solid;border-radius:20px;padding:1px 7px;white-space:nowrap}.prow{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid #1a2a3d}.prow span{color:var(--mu)}.prow b{font-family:Courier New,monospace;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.devbtns{margin-top:8px}.tag{position:absolute;top:4px;left:50%;transform:translate(-50%);font-size:9px;padding:1px 6px;border-radius:10px;color:#fff;white-space:nowrap}.port{position:absolute;width:12px;height:12px;border-radius:50%;background:#0b1220;border:2px solid #f5b23a;pointer-events:none}.portlbl{position:absolute;font-size:9px;color:var(--mu);width:64px;pointer-events:none}.portlbl.l{text-align:right}.handle{position:absolute;right:-4px;top:-10px;width:22px;height:22px;border-radius:50%;background:#17283a;border:1px solid #2f4a63;text-align:center;line-height:20px;font-size:13px;cursor:crosshair;opacity:0}.node:hover .handle,.node.sel .handle{opacity:1}.hint{position:absolute;left:60px;top:60px;color:var(--mu);font-size:14px;line-height:1.8}.edge-badge{display:flex;flex-direction:column;align-items:center;gap:3px}.edge-iface{background:#0b1220;border:1.5px solid;border-radius:6px;padding:1px 7px;font-size:10px;font-weight:700;white-space:nowrap}.flowpill{background:#0b1220cc;border:1px solid #2a3b50;border-radius:12px;padding:1px 8px;font-size:10px;color:var(--mu);white-space:nowrap}.flowpill.fwd.on{color:#06201c;background:var(--ok);border-color:var(--ok)}.flowpill.rev.on{color:#06222e;background:var(--rx);border-color:var(--rx)}.flowpill.hb.on{color:#fff;background:#7a3a8a}.logbar{height:170px;border-top:1px solid var(--bd);background:var(--p);padding:6px 12px;display:flex;flex-direction:column}.log{font-family:Courier New,monospace;font-size:11px;overflow-y:auto;flex:1}.log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0}.tx{color:var(--ok)}.rx{color:var(--rx)}.err{color:#f9736b}.card{background:#111c2e;border:1px solid var(--bd);border-radius:12px;padding:16px}.row{display:flex;gap:8px;align-items:center}.row>div{flex:1}fieldset{border:0;padding:0;margin:0}input,select{background:#0b1420;border:1px solid #243a52;color:var(--tx);border-radius:7px;padding:6px 8px;font-size:12px;width:100%}label{font-size:11px;color:var(--mu);display:block;margin:7px 0 2px}button{background:#17283a;color:var(--tx);border:1px solid #2f4a63;border-radius:7px;padding:6px 12px;font-size:12px;cursor:pointer}button.primary{background:var(--ok);color:#06201c;border-color:var(--ok);font-weight:600}button.danger{background:#2a1010;color:#f9736b;border-color:#5a2626}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:10}.toast{position:fixed;bottom:190px;left:50%;transform:translate(-50%);background:#2a1010;border:1px solid #5a2626;color:#f9a49e;padding:8px 14px;border-radius:8px;z-index:11;font-size:13px}@media (max-width:900px){.app{grid-template-columns:150px 1fr}.inspector{display:none}}*{scrollbar-width:thin;scrollbar-color:#2f4a63 transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#243a52;border-radius:10px;border:2px solid transparent;background-clip:padding-box;transition:background .2s}*::-webkit-scrollbar-thumb:hover{background:#2dd4bf;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-corner{background:transparent}.canvas{scrollbar-color:#2f4a63 #0a111d;scroll-behavior:smooth}.canvas::-webkit-scrollbar{width:12px;height:12px}.canvas::-webkit-scrollbar-track{background:#0a111d;border-left:1px solid #1b2a3d;border-top:1px solid #1b2a3d}.log::-webkit-scrollbar,.palette::-webkit-scrollbar,.inspector::-webkit-scrollbar{width:8px}