/* Diagram editor */
.diag-main{flex:1;display:flex;overflow:hidden;background:#f3f2f1}

.shape-panel{width:200px;background:#fafafa;border-right:1px solid #e1dfdd;overflow-y:auto;padding:10px}
.shape-panel h4{margin:10px 0 6px;color:#0f766e;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.shape-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:8px}
.shape-thumb{background:#fff;border:1px solid #e1dfdd;border-radius:4px;cursor:grab;padding:6px;height:44px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.shape-thumb:hover{border-color:#0f766e;box-shadow:0 2px 6px rgba(0,0,0,.1);background:#fff5f5}
.shape-thumb:active{cursor:grabbing}
.shape-thumb svg{width:100%;height:100%}

.canvas-wrap{flex:1;overflow:auto;background:#e7e6e6;position:relative}
.canvas-wrap svg{display:block;background:#fff;margin:20px;box-shadow:0 4px 16px rgba(0,0,0,.1);cursor:default}
.canvas-wrap.pan-mode svg{cursor:grab}
.canvas-wrap.connect-mode svg{cursor:crosshair}
.canvas-wrap.text-mode svg{cursor:text}

#gridLayer{pointer-events:none}
#gridLayer.hidden{display:none}

.props-panel{width:240px;background:#fafafa;border-left:1px solid #e1dfdd;overflow-y:auto;padding:12px}
.props-panel h4{margin:0 0 10px;color:#0f766e;font-size:13px}
.props-panel .prop-row{margin-bottom:8px;display:flex;flex-direction:column;gap:4px}
.props-panel label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.3px}
.props-panel input,.props-panel select,.props-panel textarea{width:100%;font-size:13px;padding:4px 6px;border:1px solid #c7c6c4;border-radius:2px;font-family:inherit}
.props-panel textarea{resize:vertical;min-height:50px}

/* Shapes on canvas */
.shape{cursor:move}
.shape.selected{filter:drop-shadow(0 0 3px rgba(164,55,58,.6))}
.shape-text{font-family:'Segoe UI',Arial;font-size:14px;fill:#222;text-anchor:middle;dominant-baseline:middle;pointer-events:none;user-select:none}
.connector{stroke:#444;stroke-width:2;fill:none;cursor:pointer}
.connector.selected{stroke:#0f766e;stroke-width:3}

.handle{fill:#0f766e;stroke:#fff;stroke-width:1;cursor:nwse-resize}
.handle.n,.handle.s{cursor:ns-resize}
.handle.e,.handle.w{cursor:ew-resize}
.handle.nw,.handle.se{cursor:nwse-resize}
.handle.ne,.handle.sw{cursor:nesw-resize}

/* connect dot */
.connect-dot{fill:#0078d4;stroke:#fff;stroke-width:1.5;cursor:crosshair}
.shape:hover .connect-dot{opacity:1}
.connect-dot{opacity:0;transition:opacity .15s}
.connect-mode .connect-dot{opacity:1}

/* Active tool */
.btn.tool-active{background:#fce5cd;border-color:#0f766e}