* {box-sizing:border-box;margin:0;padding:0;user-select:none;}
body,html {width:100%;height:100%;overflow:hidden;font-family:sans-serif;background:#1e1e1e;color:#e0e0e0;}
.toolbar {position:absolute;top:10px;left:10px;right:10px;height:50px;background:#2d2d2d;border:1px solid #3d3d3d;border-radius:6px;display:flex;align-items:center;padding:0 15px;gap:10px;z-index:100;}
button {background:#4a4a4a;color:#fff;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:13px;}
button:hover {background:#5a5a5a;}
#canvas-container {width:100%;height:100%;position:relative;cursor:grab;}
#canvas-container:active {cursor:grabbing;}
#canvas {position:absolute;width:5000px;height:5000px;top:0;left:0;transform-origin:0 0;background-image:radial-gradient(#3a3a3a 1px,transparent 1px);background-size:20px 20px;}
#svg-layer {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.node {position:absolute;min-width:auto;display:flex;flex-direction:column;width:auto;background:#252526;border:2px solid var(--node-color, #3e3e42);border-radius:6px;z-index:2;cursor:move;box-shadow:0 4px 8px rgba(0,0,0,0.3);overflow:visible;}
.node.selected {border-color:#007acc;}
.node-header-input {display:block;width:100%;background:var(--node-bg, #2d2d2d);border:none;color:var(--node-text, #aaa);padding:8px 12px;font-size:11px;font-weight:bold;text-transform:uppercase;outline:none;border-bottom:1px solid var(--node-color, #3e3e42);border-top-left-radius:4px;border-top-right-radius:4px;min-height:28px;}
.node-header-input[contenteditable="true"] {background:#323233;color:#fff;outline:1px solid #007acc;cursor:text;user-select:text;}
.node-input {display:block;width:100%;background:transparent;border:none;color:#fff;padding:12px 12px 14px 12px;font-size:14px;outline:none;min-height:40px;word-break:break-all;}
.node-input[contenteditable="true"] {background:#1e1e1e;outline:1px solid #007acc;cursor:text;user-select:text;}
.ports {display:flex;justify-content:space-between;position:absolute;width:100%;top:50%;transform:translateY(-50%);left:0;pointer-events:none;height:0;overflow:visible;}
.port {width:12px;height:12px;background:#515151;border:2px solid #252526;border-radius:50%;cursor:pointer;pointer-events:auto;position:absolute;top:-6px;}
.port:hover {background:#007acc;}
.port-in {left:-7px;}
.port-out {right:-7px;}
.edge-path {fill:none;stroke:#888;stroke-width:3;pointer-events:visibleStroke;cursor:pointer;}
.edge-path:hover {stroke:#007acc;}
.edge-text {font-size:11px;fill:#aaa;background:#1e1e1e;cursor:pointer;pointer-events:all;}
.context-menu {position:absolute;display:none;background:#2d2d2d;border:1px solid #3d3d3d;box-shadow:0 4px 10px rgba(0,0,0,0.5);z-index:200;border-radius:4px;padding:5px 0;}
.context-menu div {padding:8px 20px;font-size:13px;cursor:pointer;}
.context-menu div:hover {background:#007acc;}
.node-type-front {--node-color:#229954;--node-bg:#1e8449;--node-text:#e8f8f5;}
.node-type-cns {--node-color:#9b59b6;--node-bg:#8e44ad;--node-text:#f5eef8;}
.node-type-worker {--node-color:#f39c12;--node-bg:#d35400;--node-text:#fef9e7;}
.node-type-backend {--node-color:#e74c3c;--node-bg:#c0392b;--node-text:#fdedec;}
.node-type-cache {--node-color:#2980b9;--node-bg:#2471a3;--node-text:#ebf5fb;}