:root{font-family:'Segoe UI','Malgun Gothic',sans-serif;color:#243647;background:#f4f7f9;font-size:14px;--accent:#087d6d;--border:#dce5eb;--muted:#687e8e}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,summary{cursor:pointer}button{border:1px solid var(--border);background:#fff;color:#364f60;border-radius:6px;padding:7px 10px;line-height:1.3}button:hover{background:#edf5f5;border-color:#adc8c4}button:focus-visible,summary:focus-visible{outline:3px solid #63b8b0;outline-offset:2px}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover{background:#096858;color:#fff}.danger{color:#b93e50}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}
.app-header{height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#172d3d;color:#fff;border-bottom:3px solid #1da895}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:32px;height:32px;background:#0d9a80;border-radius:7px;display:grid;place-items:center;font-size:20px;font-weight:600}.brand h1{font-size:16px;letter-spacing:1.2px;margin:0}.brand span:not(.brand-mark){font-size:11px;color:#aec4d2}.header-actions{display:flex;align-items:center;gap:8px}.header-actions button{background:#243e50;color:#e7f1f7;border-color:#3a5365}.header-actions #saveStatus{font-size:12px;color:#adc5d3;margin-right:10px}
.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);height:calc(100dvh - 68px)}aside{overflow:auto;background:#fff;border-right:1px solid var(--border);padding:16px 14px 20px;scrollbar-width:thin}.sidebar-top,.section-title{display:flex;align-items:center;justify-content:space-between}.sidebar-top{margin-bottom:14px}.sidebar-top h2{font-size:15px;margin:0}.sidebar-top span,.section-title span{color:var(--muted);font-size:12px}.section-title{margin:16px 0 6px}.section-title h2{font-size:13px;margin:0}.add-panel{border:1px solid var(--border);border-radius:7px;margin-bottom:7px;background:#fbfcfd}.add-panel summary{padding:9px 10px;list-style:none;font-weight:600;font-size:13px}.add-panel[open] summary{border-bottom:1px solid var(--border)}.add-panel>.fields{padding:10px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:9px}.wide{grid-column:1/-1}.fields label{font-size:12px;font-weight:600;color:#526b7c;min-width:0}.fields input,.fields select,.fields textarea{width:100%;min-width:0;padding:7px 8px;border:1px solid #cbd8e1;border-radius:5px;margin-top:4px;background:white;color:#233e51;font-weight:400}.fields textarea{min-height:64px;resize:vertical}.fields input:focus,.fields select:focus,.fields textarea:focus{outline:2px solid #9bcfc5;outline-offset:0}.fields .actions{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}.fields .actions .primary{margin-left:auto}.form-note{grid-column:1/-1;font-size:11px;line-height:1.6;color:#708492;margin:0}.form-error{color:#b73548;grid-column:1/-1;font-size:12px;margin:0;white-space:pre-line}
.item{margin-bottom:3px;border:1px solid transparent;border-radius:7px;content-visibility:auto;contain-intrinsic-size:auto 52px}.item.selected{border-color:#9dccbf;background:#f0f8f5}.item-button{display:flex;align-items:center;gap:9px;padding:8px 7px;border:0;background:transparent;width:100%;text-align:left;min-height:44px}.item-button:hover{background:#eef5f7}.item.selected .item-button{background:#e5f3ef;border-radius:6px 6px 0 0}.swatch{height:26px;width:4px;border-radius:3px;flex:none}.item-copy{min-width:0;flex:1}.item-copy strong{display:block;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-copy small{display:block;font-size:11px;color:#7a8c99;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.item-chevron{font-size:14px;color:#88a0ae}.item.selected .item-chevron{transform:rotate(90deg)}.inline-editor{padding:11px 9px;border-top:1px solid #cfe3dc}.inline-editor h3{font-size:12px;margin:0 0 10px;color:#18705d}.list-empty{font-size:12px;color:#8a9aa5;padding:12px 4px}.draft-item{border:1px dashed #22a08b;background:#f2fbf8;padding:10px;border-radius:6px}.draft-item h3{font-size:13px;margin:0 0 10px}.references{border-top:1px solid var(--border);margin-top:20px;padding-top:12px;font-size:12px}.references summary{color:#647b8b;font-weight:600}.references p{font-size:11px;color:#7c8e9b;line-height:1.5}.alert-record{padding:8px;margin-top:7px;border-left:2px solid #c15f62;background:#fcf6f6;font-size:11px;line-height:1.6}.sidebar-footer{display:flex;gap:7px;margin-top:16px}.sidebar-footer button{font-size:12px}
main{min-width:0;display:flex;flex-direction:column}.canvas-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:#fff;padding:12px 16px;border-bottom:1px solid var(--border)}.speed-filters{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.toolbar-label{font-size:12px;color:#7a8e9d;margin-right:8px}.speed-filters button{font-size:12px;border-color:transparent;background:#f0f4f7;padding:7px 10px}.speed-filters button[aria-pressed=true]{background:#233f52;color:white}.speed-filters i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.style-legend{margin-left:auto;color:#708493;font-size:11px;display:flex;gap:6px;align-items:center}.style-legend i{width:20px;border-top:2px solid #768d9c;margin-left:6px}.style-legend i.dashed{border-top-style:dashed}#stage{position:relative;flex:1;min-height:300px;overflow:hidden;background:#f5f8fa;contain:strict}#canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;cursor:grab}#canvas.dragging{cursor:grabbing}#world{isolation:isolate}.canvas-bottom{position:absolute;bottom:13px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.canvas-bottom>span{font-size:11px;color:#7e94a3;background:#f5f8fadd;padding:5px;border-radius:4px}.zoom-controls{display:flex;gap:3px;pointer-events:auto;padding:4px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 3px 10px #12324a0a}.zoom-controls button{border:0;font-size:12px}footer{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#7b8f9b;background:#fff;border-top:1px solid var(--border);padding:7px 16px}#routeStatus{position:absolute;left:16px;top:12px;background:#fff8e7;color:#865a14;border:1px solid #ead4a1;padding:8px 10px;font-size:12px;border-radius:6px;max-width:80%;pointer-events:none}.empty-canvas{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);text-align:center;max-width:90%;width:350px}.empty-canvas strong{font-size:20px;font-weight:500;color:#49697d}.empty-canvas p{color:#8496a3;line-height:1.7}.empty-canvas button{color:#087d6d}
.node{cursor:pointer}.node .device-art{filter:drop-shadow(0 2px 2px #24394a1b)}.selection-ring{display:none;fill:none;stroke:#0d9582;stroke-width:2;stroke-dasharray:5 3;pointer-events:none}.node.selected .selection-ring,.node.related .selection-ring{display:block}.edge.off{display:none}.node-name{font-size:11px;fill:#334e60;font-weight:600}.node-model{font-size:9px;fill:#7c919f}.port{cursor:crosshair}.port rect.socket{fill:#e5edf2;stroke:#8d9eaa;stroke-width:.7}.port.used rect.socket{fill:#d9eee8;stroke:#4b9c82}.port.hot rect.socket{fill:#ffe4d8;stroke:#c57037;stroke-width:1.4}.port text{font-size:9px;font-weight:600;fill:#364e60;pointer-events:none}#world.zoomed-out .port text{display:none}#world.zoomed-out .node-model{display:none}.port:hover rect.socket,.port.target rect.socket{stroke:#006b58;stroke-width:2;fill:#7bd9b3}.port.endpoint rect.socket{stroke:#087d6d;stroke-width:1.8}.wire{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}.wire.plan{stroke-dasharray:7 5}.edge .wire-back{stroke:#f5f8fa;stroke-width:6;fill:none;stroke-linejoin:round;pointer-events:none}.edge .wire-hit{stroke:transparent;stroke-width:10;fill:none;cursor:pointer;pointer-events:stroke}.edge.selected .wire{stroke-width:3.8}.edge:hover .wire{stroke-width:3.8}.edge.selected .wire-back{stroke:#d4eae4;stroke-width:9}.node.related .selection-ring{stroke:#89beb1;stroke-dasharray:none}.draft-wire{fill:none;stroke:#168977;stroke-width:2;stroke-dasharray:5 4;pointer-events:none}
#tooltip{position:fixed;z-index:20;max-width:310px;padding:12px 14px;border-radius:9px;background:#183344;color:#ecf3f8;box-shadow:0 8px 28px #17314230;pointer-events:none;font-size:12px;line-height:1.6;overflow-wrap:anywhere}#tooltip strong{display:block;font-size:13px;color:white;margin-bottom:5px}#tooltip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0}#tooltip dt{color:#adc3d0}#tooltip dd{margin:0}#tooltip p{margin:6px 0 0;color:#d1dfe8;white-space:pre-line}#tooltip .tip-footer{border-top:1px solid #496273;padding-top:7px;margin-top:7px;color:#97b6c7;font-size:11px}#toast{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:7px;background:#193b4b;color:white;z-index:30;max-width:85vw;box-shadow:0 4px 16px #132f4930;font-size:13px}
@media(max-width:1050px){.workspace{grid-template-columns:290px minmax(0,1fr)}aside{padding:12px 10px}.style-legend{margin-left:0}.canvas-bottom>span{display:none}.canvas-bottom{justify-content:flex-end}footer>span:last-child{display:none}}@media(max-width:680px){.app-header{padding:0 10px}.header-actions #saveStatus{display:none}.workspace{grid-template-columns:240px minmax(260px,1fr);overflow:auto}.canvas-toolbar{padding:8px}.speed-filters button{padding:6px}.brand h1{font-size:13px}.brand span:not(.brand-mark){font-size:10px}.header-actions button{font-size:12px}}