:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#172033;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,textarea{font:inherit}button{color:inherit}.app{height:100%;display:grid;grid-template:58px minmax(0,1fr) / 220px minmax(400px,1fr) 250px}.app.palette-closed{grid-template-columns:0 minmax(400px,1fr) 250px}.app.inspector-closed{grid-template-columns:220px minmax(400px,1fr) 0}.app.palette-closed.inspector-closed{grid-template-columns:0 minmax(400px,1fr) 0}.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:18px;padding:0 18px;background:#fff;border-bottom:1px solid #dfe5ee;z-index:5;box-shadow:0 1px 5px #2538580b}.brand{display:flex;align-items:center;gap:9px;min-width:184px;color:#172033}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:#fff;background:linear-gradient(145deg,#3973e6,#7254d7);font-weight:800}.diagram-name-field{width:min(310px,25vw);display:grid;gap:2px;color:#7b8798;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.diagram-name{width:100%;min-width:0;border:1px solid #d9e1ec;border-radius:6px;padding:5px 8px;color:#172033;font-weight:600;background:#f8fafc}.diagram-name:hover,.diagram-name:focus{border-color:#7f9fe5;outline:none;background:#fff;box-shadow:0 0 0 3px #3973e614}.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px}button{border:1px solid #d9e1ec;background:#fff;border-radius:7px;padding:7px 10px;cursor:pointer;transition:.15s ease}button:hover:not(:disabled){border-color:#8baaf0;background:#f3f7ff}button:disabled{opacity:.4;cursor:default}.save-state{font-size:12px;color:#8b5a18;margin-right:5px}.save-state.saved{color:#278257}.palette,.inspector{min-height:0;overflow-y:auto;background:#fff;z-index:3}.palette{grid-column:1}.workspace{grid-column:2}.inspector{grid-column:3}.palette-closed .palette,.inspector-closed .inspector{display:none}.palette{border-right:1px solid #dfe5ee;padding:15px 13px}.inspector{border-left:1px solid #dfe5ee;padding:18px 16px}.palette h2,.inspector h2{margin:17px 3px 12px;font-size:12px;color:#78869a;text-transform:uppercase;letter-spacing:.09em}.side-panel-heading{min-height:30px;display:flex;align-items:center;justify-content:space-between;color:#78869a;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}.side-panel-heading h2{margin:0}.side-panel-heading button{width:29px;height:29px;padding:0;display:grid;place-items:center;font-size:20px;line-height:1}.tool-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool-switch button{display:flex;align-items:center;justify-content:center;gap:6px}.tool-switch button.active{color:#245fcf;background:#edf3ff;border-color:#8aaaf0}.shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shape-grid button{height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:7px}.shape-grid small{font-size:11px;color:#5c697c}.shape-icon{display:block;width:38px;height:25px;border:2px solid #5d79a4;background:#e7effc}.shape-icon.rounded{border-radius:9px}.shape-icon.ellipse{border-radius:50%}.shape-icon.diamond{width:25px;transform:rotate(45deg)}.shape-icon.database{border-radius:50%/25%}.shape-icon.cloud{border-radius:50%;box-shadow:10px 4px 0 -3px #e7effc,10px 4px 0 -1px #5d79a4}.shape-icon.line{height:2px;border:0;background:#5d79a4}.shape-icon.curved-line{height:18px;border:0;border-top:2px solid #5d79a4;border-radius:50%;background:transparent}.shape-icon.text{background:transparent;border:0;position:relative}.shape-icon.text:after{content:"T";font:700 26px Georgia;color:#5d79a4;position:absolute;top:-5px;right:0;bottom:0;left:9px}.shape-icon.custom{display:grid;place-items:center;border-style:dashed;background:transparent;color:#5d79a4;font-size:22px;line-height:1}.custom-shape-library{display:grid;grid-template-columns:1fr 1fr;gap:8px}.custom-shape-item{position:relative}.custom-shape-add{width:100%;height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:7px}.custom-shape-add img{width:44px;height:36px;object-fit:contain}.custom-shape-add small{width:100%;overflow:hidden;color:#5c697c;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.custom-shape-remove{position:absolute;top:3px;right:3px;width:20px;height:20px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;color:#9b3030;background:#fff;font-size:16px;line-height:1;opacity:0}.custom-shape-item:hover .custom-shape-remove,.custom-shape-remove:focus{opacity:1}.palette-help{margin-top:22px;padding:12px;border-radius:9px;color:#5f6d7f;background:#f5f7fa;font-size:11px;line-height:1.55}.palette-help strong{color:#334155}.palette-help p{margin:5px 0 0}.workspace{position:relative;min-width:0;min-height:0;overflow:hidden;background:#fff}.side-reopen{position:absolute;z-index:6;top:14px;width:32px;height:36px;padding:0;display:grid;place-items:center;font-size:22px;box-shadow:0 3px 10px #1c2c4620}.reopen-left{left:12px}.reopen-right{right:12px}.canvas-shell,.diagram-canvas{width:100%;height:100%;display:block}.diagram-canvas{touch-action:none;-webkit-user-select:none;user-select:none;background:#fff}.tool-connector .diagram-node{cursor:crosshair}.tool-select .diagram-node{cursor:move}.diagram-node{filter:drop-shadow(0 2px 2px rgba(29,42,65,.08))}.diagram-node.selected>:first-child{filter:drop-shadow(0 0 3px #3973e6)}.diagram-node.connector-start>:first-child{stroke:#ef8d32;stroke-width:4}.line-hit-area{fill:none;stroke:transparent;stroke-width:18;cursor:move}.node-line.selected .standalone-line-stroke,.node-curved-line.selected .standalone-line-stroke{filter:drop-shadow(0 0 3px #3973e6)}.curve-control,.line-endpoint{fill:#fff;stroke:#3973e6;stroke-width:2;filter:none;cursor:grab}.curve-control:active,.line-endpoint:active{cursor:grabbing}.diagram-node.node-text.selected:not(.editing)>rect:first-child{stroke:#8baaf0;stroke-width:1;stroke-dasharray:5 4}.inline-text-editor{width:100%;height:100%;margin:0;padding:6px;overflow:hidden;resize:none;border:0;outline:0;color:#172033;background:transparent;font-family:inherit;line-height:1.2;text-align:center}.inline-text-editor.free-text-editor{padding:0;text-align:left}.inline-text-editor::placeholder{color:#9aa7b8}.node-label{pointer-events:none;white-space:pre;font-weight:500}.edge-label{fill:#526174;font-size:13px;paint-order:stroke;stroke:#fff;stroke-width:5px}.resize-handle{fill:#fff;stroke:#3973e6;stroke-width:2;filter:none}.handle-nw,.handle-se{cursor:nwse-resize}.handle-ne,.handle-sw{cursor:nesw-resize}.edge{cursor:pointer}.edge-hit-area{stroke:transparent;stroke-width:16;fill:none}.edge.selected>path:not(.edge-hit-area){stroke:#e05252;filter:drop-shadow(0 0 3px #e0525288)}.checkbox-field{display:flex!important;align-items:center;gap:8px}.checkbox-field input{display:inline-block;width:auto;margin:0}.full-width{width:100%}.canvas-hint{position:absolute;left:14px;bottom:13px;border:1px solid #dce3ec;border-radius:7px;padding:6px 9px;color:#718096;background:#fffffff0;font-size:11px;pointer-events:none}.connect-status{position:absolute;left:50%;top:14px;transform:translate(-50%);padding:8px 12px;border:1px solid #8baaf0;border-radius:7px;color:#245fcf;background:#f3f7ff;font-size:12px;font-weight:600;pointer-events:none;box-shadow:0 3px 10px #1f4f9d1a}.zoom-controls{position:absolute;right:15px;bottom:14px;display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #d9e1ec;border-radius:9px;background:#fffffff2;box-shadow:0 3px 12px #1c2c4620}.zoom-controls button{border:0;padding:5px 8px}.zoom-controls span{min-width:46px;text-align:center;font-size:12px;color:#59677a}.inspector label{display:block;margin-bottom:14px;color:#5b687a;font-size:12px;font-weight:600}.inspector input,.inspector textarea{display:block;width:100%;margin-top:6px;border:1px solid #d7dfeb;border-radius:7px;padding:8px;color:#172033;background:#fff;outline:none}.inspector input:focus,.inspector textarea:focus{border-color:#5c87e6;box-shadow:0 0 0 3px #3973e619}.inspector textarea{min-height:78px;resize:vertical;line-height:1.4}.inspector input[type=color]{height:39px;padding:3px}.color-field{margin-bottom:14px}.color-field>span{display:block;margin-bottom:7px;color:#5b687a;font-size:12px;font-weight:600}.color-presets{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.color-swatch{width:25px;height:25px;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #cbd5e1}.color-swatch:hover{transform:scale(1.08)}.color-swatch.active{box-shadow:0 0 0 2px #3973e6}.custom-color{display:flex!important;align-items:center;gap:5px;margin:0!important;cursor:pointer}.custom-color input[type=color]{width:25px;height:25px;margin:0;padding:2px;border-radius:50%}.custom-color span{color:#6f7d90;font-size:10px;font-weight:500}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}.danger{color:#b42323;border-color:#f0c8c8}.danger:hover{background:#fff1f1!important;border-color:#e39898!important}.style-field{margin-bottom:14px;color:#5b687a;font-size:12px;font-weight:600}.style-field small{display:block;margin-top:6px;color:#8491a3;font-weight:400}.segmented-control{display:grid;grid-template-columns:1fr 1fr;margin-top:6px;padding:3px;border:1px solid #d7dfeb;border-radius:7px;background:#f5f7fa}.segmented-control button{border:0;padding:6px;background:transparent}.segmented-control button.active{color:#245fcf;background:#fff;box-shadow:0 1px 4px #1c2c461c}.empty-inspector{text-align:center;color:#8290a3;font-size:13px;line-height:1.5;padding:48px 10px}.empty-inspector div{font-size:38px;color:#aab6c5}.data-actions{width:calc(100% - 32px);position:absolute;right:16px;bottom:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.data-actions button{padding-inline:6px}.modal-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#17203366;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.contact-dialog{width:min(440px,100%);padding:22px;border:1px solid #d9e1ec;border-radius:8px;background:#fff;box-shadow:0 18px 48px #17203338}.contact-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.contact-heading span{color:#3973e6;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.contact-heading h2{margin:3px 0 0;font-size:22px}.contact-heading button{width:32px;height:32px;padding:0;font-size:22px}.contact-dialog form{display:grid;gap:14px}.contact-dialog label{color:#5b687a;font-size:12px;font-weight:600}.contact-dialog input,.contact-dialog textarea{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #d7dfeb;border-radius:7px;color:#172033;background:#fff;outline:none}.contact-dialog input:focus,.contact-dialog textarea:focus{border-color:#5c87e6;box-shadow:0 0 0 3px #3973e619}.contact-dialog textarea{resize:vertical}.contact-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.contact-actions .primary{border-color:#3973e6;color:#fff;background:#3973e6}.contact-actions .primary:hover{border-color:#245fcf;color:#fff;background:#245fcf}.contact-success,.contact-error{margin:0;padding:9px;border-radius:6px;font-size:12px}.contact-success{color:#236b49;background:#e9f7f0}.contact-error{color:#9b3030;background:#fff0f0}@media (max-width: 950px){.app{grid-template-columns:170px minmax(350px,1fr)}.inspector{position:absolute;right:0;top:58px;bottom:0;width:230px;box-shadow:-5px 0 15px #22324c18}.save-state{display:none}.top-actions button:nth-of-type(3),.top-actions button:nth-of-type(4){display:none}}@media (max-width: 680px){.app{grid-template-columns:1fr}.palette{position:absolute;z-index:7;left:8px;top:68px;width:150px;max-height:calc(100% - 85px);border:1px solid #dfe5ee;border-radius:10px;box-shadow:0 5px 18px #22324c22}.inspector{display:none}.workspace{grid-column:1}.brand strong{display:none}.brand{min-width:auto}.diagram-name-field{width:150px}.shape-grid{grid-template-columns:1fr}.palette-help{display:none}}