.spx-diagram-editor-layout{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:720px}.spx-diagram-node-editor{padding:14px;border-right:1px solid #334252;background:#1b2530;color:#eaf3f7}.spx-diagram-node-editor p{color:#9eafba;font-size:12px;line-height:1.7}.spx-diagram-node-editor label{display:grid;gap:4px;margin-bottom:10px;color:#bac8d0;font-size:11px;font-weight:800}.spx-diagram-node-editor input{min-width:0;width:100%;padding:7px;border:1px solid #485866;border-radius:5px;background:#10171d;color:#fff}.spx-diagram-editor-counts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.spx-diagram-port-editor{margin-top:12px;border:1px solid #40515e;border-radius:6px}.spx-diagram-port-editor summary{padding:8px;color:#c8d6de;font-size:11px;font-weight:800;cursor:pointer}.spx-diagram-port-fields{display:grid;gap:6px;max-height:360px;overflow:auto;padding:8px}.spx-diagram-port-fields label{grid-template-columns:58px minmax(0,1fr);align-items:center;margin:0}.spx-test-node{cursor:grab;touch-action:none}.spx-test-node:active{cursor:grabbing}.spx-test-node.is-selected .spx-test-node-box{stroke:#34c7e8;stroke-width:4}.spx-test-port{stroke:#0e171d;stroke-width:2;cursor:pointer}.spx-test-port.is-input{fill:#4da6ff}.spx-test-port.is-output{fill:#ffb547}.spx-test-port.is-pending{fill:#fff;stroke:#34c7e8;stroke-width:4}.spx-test-port-label{fill:#b9cad3;font-size:9px;pointer-events:none}.spx-test-wire{cursor:pointer}.spx-test-wire:hover{stroke:#fff;stroke-width:4}.spx-diagram-test-scroll{min-width:0}@media(max-width:820px){.spx-diagram-editor-layout{grid-template-columns:1fr}.spx-diagram-node-editor{border-right:0;border-bottom:1px solid #334252}.spx-diagram-port-fields{max-height:240px}}
.spx-test-wire-hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke}.spx-test-wire{pointer-events:none}.spx-test-wire-hit:hover+.spx-test-wire{stroke:#fff;stroke-width:4}
.spx-diagram-generic-form{margin-bottom:16px;padding:12px;border:1px solid #496171;border-radius:7px;background:#111a22}.spx-diagram-generic-form>strong{display:block;margin-bottom:10px;font-size:13px}.spx-diagram-generic-form select{width:100%;padding:7px;border:1px solid #485866;border-radius:5px;background:#10171d;color:#fff}.spx-diagram-generic-actions{display:flex;gap:7px}.spx-diagram-generic-actions button{flex:1}.spx-diagram-delete-node{width:100%;margin-top:12px;border-color:#9c4c4c!important;color:#ffd7d7!important}
