*{box-sizing:border-box;font-family:Inter,Arial,Helvetica,sans-serif}
body{margin:0;color:#111}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#f6f6f8;border-bottom:1px solid #e3e3e8}
.controls{display:flex;gap:8px;align-items:center}
main{display:flex;height:calc(100vh - 64px)}
#sidebar{width:240px;padding:12px;border-right:1px solid #eee;overflow-y:auto;flex-shrink:0}
#sidebarHandle{width:4px;background:#ddd;cursor:col-resize;transition:background 0.2s;flex-shrink:0}
#sidebarHandle:hover{background:#999}
#canvasWrap{flex:1;display:flex;align-items:stretch}
#cyContainer{flex:1;background:#fff}
#svgCanvas{flex:1;background:#fff}
.node-io{fill:#e8f5ff;stroke:#5aa0ff;stroke-width:1}
.node-cell{fill:#fff8e1;stroke:#e6b800;stroke-width:1}
.node-net{fill:#cccccc;stroke:#999}
.net-label{font-size:12px;fill:#444}
.plug{fill:#fff;stroke:#222;stroke-width:1.5}
.wire-highlight{stroke:orange !important; stroke-width:2.2 !important}
.node-highlight rect{filter:drop-shadow(0 2px 6px rgba(255,165,0,0.3));}
.plug-highlight{fill:orange !important}
.net-label-highlight{fill:orange !important; font-weight:700}
text{font-family:Inter,Arial,Helvetica,sans-serif;font-size:13px}
.edges path{stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.node:hover rect{filter:drop-shadow(0 2px 4px rgba(0,0,0,0.08))}
#status{margin-left:8px;color:#666}
button{padding:6px 12px;border:1px solid #ccc;background:#fff;cursor:pointer;border-radius:4px}
button:hover{background:#f5f5f5;border-color:#999}
input[type="file"]{display:none}
.net-cell-link{transition:all 0.15s ease !important}
.net-cell-link:hover{background:#f0f8ff !important;color:#004499 !important;border-radius:2px;font-weight:500}
.color-rule-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.color-rule-row .rule-patterns{flex:1;min-width:0;padding:6px;border:1px solid #ccc;border-radius:3px;font-size:12px}
.color-rule-row .rule-color{width:34px;height:30px;padding:2px;border:1px solid #ccc;border-radius:3px;background:#fff;cursor:pointer}
.color-rule-row .rule-remove{width:28px;height:30px;border:1px solid #ccc;border-radius:3px;background:#fff;cursor:pointer;font-size:12px;line-height:1}
.color-rule-row .rule-remove:hover{background:#f5f5f5;border-color:#999}