/* Diagram Editor Styles */
.de-wrap { display:flex; flex-direction:column; height:100%; font-family:Heebo,sans-serif; color:#fff; background:#0a0f1c; overflow:hidden; }

/* Action bar */
.de-actions { display:flex; gap:3px; padding:2px 8px; background:rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.08); align-items:center; flex-shrink:0; }
.de-actions button { padding:1px 8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:#fff; cursor:pointer; font-size:0.8rem; font-family:inherit; }
.de-actions button:hover { background:rgba(255,255,255,0.2); }
.de-actions .de-sep { width:1px; height:18px; background:rgba(255,255,255,0.15); margin:0 3px; }
.de-grid-btn { font-size:0.75rem !important; padding:1px 6px !important; }
.de-grid-btn.active { background:#667eea !important; border-color:#667eea !important; }

/* Tools grid */
.de-tools-grid { display:flex; flex-wrap:wrap; padding:2px 4px; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; gap:0; }
.de-cat-group { display:inline-flex; flex-direction:column; margin:0 3px; }
.de-cat-label { font-size:0.6rem; color:rgba(255,255,255,0.5); padding:0 2px; font-weight:600; white-space:nowrap; line-height:1.3; }
.de-cat-tools { display:flex; flex-wrap:wrap; gap:1px; }
.de-tool-btn { display:flex; align-items:center; justify-content:center; padding:0; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:3px; color:#fff; cursor:pointer; font-family:inherit; width:28px; height:28px; flex-shrink:0; }
.de-tool-btn:hover { background:rgba(255,255,255,0.18); }
.de-tool-btn.active { background:#667eea; border-color:#667eea; }
.de-tool-icon { font-size:1.1rem; line-height:1; }

/* Presets row */
.de-presets-row { display:flex; gap:4px; padding:2px 6px; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; align-items:center; flex-wrap:wrap; }
.de-preset-btn { padding:2px 10px; background:rgba(150,150,170,0.2); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:#fff; cursor:pointer; font-family:inherit; font-size:0.75rem; white-space:nowrap; }
.de-preset-btn:hover { background:rgba(150,150,170,0.4); }

/* Preset popup */
.de-preset-popup { position:absolute; bottom:100%; left:0; background:#1a1f35; border:1px solid rgba(255,255,255,0.2); border-radius:6px; box-shadow:0 -4px 20px rgba(0,0,0,0.5); z-index:1000; min-width:140px; padding:4px 0; margin-bottom:4px; }
.de-preset-item { display:block; width:100%; padding:6px 14px; background:none; border:none; color:#fff; font-family:inherit; font-size:0.8rem; text-align:right; cursor:pointer; white-space:nowrap; }
.de-preset-item:hover { background:rgba(102,126,234,0.3); }

/* Canvas area — MUST not overflow */
.de-canvas-wrap { flex:1; overflow:hidden; position:relative; background:#fff; min-height:0; }
.de-canvas-wrap svg { position:absolute; top:0; left:0; width:100%; height:100%; cursor:crosshair; display:block; }

/* Properties bar — enlarged */
.de-props { display:flex; gap:8px; padding:5px 10px; background:rgba(255,255,255,0.07); border-top:1px solid rgba(255,255,255,0.15); font-size:0.9rem; align-items:center; flex-wrap:wrap; flex-shrink:0; }
.de-props label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.de-props input, .de-props select { padding:3px 5px; background:#1a1f35; border:1px solid rgba(255,255,255,0.2); border-radius:4px; color:#fff; font-size:0.9rem; }
.de-props input[type="number"] { width:50px; }
.de-props input[type="color"] { width:32px; height:28px; padding:2px; cursor:pointer; border-radius:4px; }
.de-props .de-sep { width:1px; height:22px; background:rgba(255,255,255,0.2); margin:0 4px; }
.de-chars { display:flex; gap:2px; flex-wrap:wrap; }
.de-chars button { padding:2px 6px; font-size:0.95rem; min-width:28px; height:28px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:4px; color:#fff; cursor:pointer; line-height:1; }
.de-chars button:hover { background:rgba(255,255,255,0.25); }