:root{--bg:#eef1f5;--panel:#f8fafc;--surface:#fff;--ink:#1c2430;--muted:#667085;--line:#d5dbe5;--accent:#1f6feb;--accent-soft:#e8f1ff;--shadow:0 10px 30px #1c243014;--font-ui:"Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;--font-display:"Trebuchet MS", "Segoe UI", "PingFang SC", sans-serif;color:var(--ink);font-family:var(--font-ui);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{background:radial-gradient(circle at 12% 10%, #1f6feb14, transparent 34%), radial-gradient(circle at 88% 0%, #14a08514, transparent 28%), linear-gradient(180deg, #f4f6f9 0%, var(--bg) 100%);width:100%;height:100%;margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.app-shell{grid-template-rows:auto 1fr auto;height:100%;min-height:0;display:grid}.toolbar{backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#ffffffdb;align-items:center;gap:12px;padding:10px 14px;display:flex}.brand{align-items:center;gap:10px;min-width:150px;display:flex}.brand-mark{background:linear-gradient(135deg,#1f6feb 0%,#14a085 100%);border-radius:8px;width:28px;height:28px;box-shadow:inset 0 0 0 2px #ffffff59}.brand-text{flex-direction:column;line-height:1.1;display:flex}.brand-text strong{font-family:var(--font-display);letter-spacing:.02em;font-size:15px}.brand-text span{color:var(--muted);font-size:11px}.doc-name{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:min(220px,24vw);padding:7px 10px}.toolbar-group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.toolbar button,.template-select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:6px 10px;transition:background .15s,border-color .15s}.toolbar button:hover:not(:disabled),.template-select:hover{background:var(--accent-soft);border-color:#b7d0ff}.toolbar button:disabled{opacity:.45;cursor:not-allowed}.desktop-badge{color:#0f6a57;background:#e7f8f3;border:1px solid #b7ebe0;border-radius:999px;margin-left:auto;padding:4px 10px;font-size:12px}.workspace{grid-template-columns:220px 1fr 240px;height:100%;min-height:0;display:grid}.panel{border-right:1px solid var(--line);background:#f8fafceb;padding:14px 12px;overflow:auto}.inspector{border-right:none;border-left:1px solid var(--line)}.panel-title{font-family:var(--font-display);margin-bottom:6px;font-weight:700}.panel-hint{color:var(--muted);margin:0 0 12px;font-size:12px;line-height:1.4}.shape-list{flex-direction:column;gap:8px;display:flex}.shape-item{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;grid-template-columns:42px 1fr;align-items:center;gap:10px;padding:8px;transition:border-color .15s,box-shadow .15s;display:grid}.shape-item:hover,.shape-item.active{border-color:var(--accent);box-shadow:0 0 0 3px #1f6feb1f}.shape-meta{flex-direction:column;gap:2px;display:flex}.shape-meta strong{font-size:13px}.shape-meta small{color:var(--muted);font-size:11px}.shape-preview{background:#fff;border:1.5px solid #4b5565;justify-self:center;width:36px;height:24px}.shape-preview.startEnd{border-radius:999px}.shape-preview.process{border-radius:4px}.shape-preview.decision{border-radius:2px;width:22px;height:22px;transform:rotate(45deg)}.shape-preview.io{border-radius:2px;transform:skew(-18deg)}.shape-preview.comment{background:#f5f0e6;border-style:dashed;border-radius:4px}.canvas-host{background:#f7f8fa;min-width:0;min-height:0;position:relative}.canvas-shell,.canvas-shell .react-flow{width:100%;height:100%}.canvas-shell.placing .react-flow__pane{cursor:crosshair}.canvas-shell.panning .react-flow__pane{cursor:grab}.loading{height:100%;color:var(--muted);place-items:center;display:grid}.inspector-form{flex-direction:column;gap:12px;display:flex}.inspector-form label{color:var(--muted);flex-direction:column;gap:6px;font-size:12px;display:flex}.inspector-form input,.inspector-form select{border:1px solid var(--line);color:var(--ink);background:var(--surface);border-radius:8px;padding:7px 9px}.inspector-form input[type=color]{height:36px;padding:2px}.inspector-form input[type=range]{accent-color:var(--accent);padding:0}.inspector-range-value{color:var(--ink);font-size:12px}.inspector-checkbox{align-items:center;color:var(--ink)!important;flex-direction:row!important;gap:8px!important}.inspector-checkbox input{width:auto;margin:0}.inspector-section-title{color:var(--ink);margin:4px 0 8px;font-size:12px;font-weight:700}.edge-presets{margin-bottom:12px}.edge-preset-list{flex-direction:column;gap:6px;display:flex}.edge-preset-btn{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;flex-direction:column;gap:2px;padding:8px 10px;transition:border-color .15s,background .15s;display:flex}.edge-preset-btn:hover{border-color:var(--accent);background:var(--accent-soft)}.edge-preset-btn strong{color:var(--ink);font-size:12px}.edge-preset-btn small{color:var(--muted);font-size:11px}.edge-marker-defs{pointer-events:none;width:0;height:0;position:absolute;overflow:hidden}.inspector-meta{color:var(--muted);font-size:12px}.status-bar{color:var(--muted);border-top:1px solid var(--line);background:#fffc;justify-content:space-between;gap:12px;padding:6px 14px;font-size:12px;display:flex}.flow-node{width:100%;height:100%;color:var(--ink);box-shadow:var(--shadow);user-select:none;background:#fff;border:1.75px solid #3d4856;place-items:center;padding:8px;display:grid}.flow-node.selected{border-color:var(--accent);box-shadow:0 0 0 3px #1f6feb2e, var(--shadow)}.flow-node.start-end{border-radius:999px}.flow-node.process{border-radius:6px}.flow-node.io{border-radius:4px;transform:skew(-16deg)}.flow-node.io .node-label,.flow-node.io .node-label-input{transform:skew(16deg)}.flow-node.comment{background:#f5f0e6;border-style:dashed;border-radius:8px}.flow-node.decision-wrap{box-shadow:none;background:0 0;border:none;padding:0;position:relative}.flow-node.decision-wrap.selected .decision-diamond{border-color:var(--accent);box-shadow:0 0 0 3px #1f6feb2e, var(--shadow)}.decision-diamond{width:72%;height:72%;box-shadow:var(--shadow);background:#fff;border:1.75px solid #3d4856;place-items:center;display:grid;transform:rotate(45deg)}.decision-diamond .node-label,.decision-diamond .node-label-input{text-align:center;width:90px;transform:rotate(-45deg)}.node-label{text-align:center;word-break:break-word;max-width:100%;line-height:1.25}.node-label-input{border:1px solid var(--accent);text-align:center;border-radius:4px;outline:none;width:90%;padding:2px 4px}.flow-handle{border:1.5px solid var(--accent)!important;background:#fff!important;width:8px!important;height:8px!important}.edge-label{pointer-events:all;z-index:1;align-items:center;gap:2px;display:flex;position:absolute}.edge-label input{border:1px solid var(--line);text-align:center;background:#fffffff2;border-radius:6px;width:56px;padding:2px 4px;font-size:11px}.edge-label.selected input{border-color:var(--accent)}.edge-label-remove{border:1px solid var(--line);width:18px;height:18px;color:var(--muted);cursor:pointer;background:#fff;border-radius:50%;padding:0;font-size:12px;line-height:1}.edge-label-remove:hover{color:#c62828;border-color:#c62828}.edge-label-add{pointer-events:all;z-index:1;position:absolute}.edge-label-add button{border:1px dashed var(--line);color:var(--muted);cursor:pointer;background:#ffffffeb;border-radius:999px;padding:2px 8px;font-size:11px}.edge-label-add button:hover{border-color:var(--accent);color:var(--accent)}.edge-interaction.placing{stroke:#1f6feb2e!important}.mid-arrow{outline:none}.mid-arrow.selected .mid-arrow-handle{stroke:var(--accent)}.inspector-actions{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.inspector-inline-label{color:var(--muted);flex-direction:column;gap:6px;font-size:12px;display:flex}.inspector-inline-label input,.mid-arrow-item input,.mid-arrow-item select{border:1px solid var(--line);color:var(--ink);background:var(--surface);border-radius:8px;padding:7px 9px}.mid-arrow-item input[type=range]{accent-color:var(--accent);padding:0}.inspector-btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;border-radius:8px;padding:8px 10px;font-size:12px;transition:border-color .15s,background .15s}.inspector-btn:hover{border-color:var(--accent);background:var(--accent-soft)}.inspector-btn.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.inspector-btn.danger{color:#b42318}.inspector-btn.danger:hover{background:#fef3f2;border-color:#b42318}.inspector-btn.small{padding:6px 8px;font-size:11px}.panel-hint.compact{margin:0;font-size:11px}.mid-arrow-list{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.mid-arrow-item{border:1px solid var(--line);background:var(--surface);cursor:pointer;border-radius:8px;flex-direction:column;gap:8px;padding:8px 10px;display:flex}.mid-arrow-item.selected{border-color:var(--accent);background:var(--accent-soft)}.mid-arrow-item-title{color:var(--ink);font-size:12px;font-weight:700}.mid-arrow-item label{color:var(--muted);flex-direction:column;gap:4px;font-size:11px;display:flex}@media (width<=960px){.workspace{grid-template-columns:64px 1fr}.inspector,.palette .panel-hint,.shape-meta{display:none}.shape-item{grid-template-columns:1fr;justify-items:center;padding:10px 4px}.doc-name{width:120px}}