html[data-theme=dark]{color-scheme:dark;--bg-body: #0c0f14;--bg-app: #10141c;--bg-surface: #161b26;--bg-elevated: #1c2330;--bg-canvas: #121820;--bg-canvas-dot: rgba(148, 163, 184, .14);--border: rgba(148, 163, 184, .18);--border-subtle: rgba(148, 163, 184, .1);--text: #e7e5e4;--text-secondary: #a8a29e;--text-muted: #78716c;--accent: #14b8a6;--accent-strong: #0f766e;--accent-soft: rgba(20, 184, 166, .14);--danger: #f87171;--warning: #fbbf24;--card-bg: #1a2130;--card-border: rgba(148, 163, 184, .16);--card-shadow: 0 10px 28px rgba(0, 0, 0, .35);--field-border: rgba(148, 163, 184, .12);--input-bg: #0f141c;--input-border: rgba(148, 163, 184, .22);--edge-label: #d6d3d1;--edge-type: #94a3b8;--glyph-fill: #1a2130;--bend-fill: #1a2130;--menu-bg: #1c2330;--menu-border: rgba(148, 163, 184, .2);--bar-bg: #141a24;--status-bg: #141a24;--btn-bg: #1c2330;--btn-border: rgba(148, 163, 184, .22);--btn-text: #e7e5e4;--btn-hover: #252d3d;--primary-bg: #0f766e;--primary-border: #0f766e;--primary-text: #ecfdf5;--on-bg: rgba(20, 184, 166, .12);--on-border: rgba(45, 212, 191, .35);--on-text: #5eead4;--start-grid: rgba(148, 163, 184, .08);--start-bg: #0c1018;--start-card: #161b26;--editor-pane-bg: #0f141c;--editor-pane-border: rgba(148, 163, 184, .16);--editor-label: #94a3b8;--zoom-bg: #1c2330;--zoom-border: rgba(148, 163, 184, .2);--zoom-text: #d6d3d1;--enum-header: #44403c;--overlay: rgba(0, 0, 0, .55);--menu-shadow: 0 10px 28px rgba(0, 0, 0, .45);--chip-bg: #141a24;--chip-text: #94a3b8;--del-bg: rgba(248, 113, 113, .16)}html[data-theme=light]{color-scheme:light;--bg-body: #e7ecee;--bg-app: #f7f6f3;--bg-surface: #fffcf8;--bg-elevated: #ffffff;--bg-canvas: #f7f6f3;--bg-canvas-dot: rgba(28, 25, 23, .08);--border: #e7e3dc;--border-subtle: #f2f4f5;--text: #1c1917;--text-secondary: #57534e;--text-muted: #78716c;--accent: #0f766e;--accent-strong: #0d675f;--accent-soft: #f0fdfa;--danger: #b91c1c;--warning: #b45309;--card-bg: #ffffff;--card-border: rgba(28, 25, 23, .08);--card-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 10px 24px rgba(28, 25, 23, .06);--field-border: #f2f4f5;--input-bg: #ffffff;--input-border: #e7e3dc;--edge-label: #44403c;--edge-type: #a8a29e;--glyph-fill: #ffffff;--bend-fill: #ffffff;--menu-bg: #ffffff;--menu-border: #e7e3dc;--bar-bg: #fffcf8;--status-bg: #fffcf8;--btn-bg: #ffffff;--btn-border: #e4e1db;--btn-text: #1c1917;--btn-hover: #f7f6f3;--primary-bg: #0f766e;--primary-border: #0f766e;--primary-text: #ffffff;--on-bg: #f0fdfa;--on-border: #99f6e4;--on-text: #0f766e;--start-grid: rgba(28, 25, 23, .08);--start-bg: #e7ecee;--start-card: #fffcf8;--editor-pane-bg: #fbfcfd;--editor-pane-border: #e4e7eb;--editor-label: #8b9390;--zoom-bg: #ffffff;--zoom-border: #e4e7eb;--zoom-text: #44403c;--enum-header: #44403c;--overlay: rgba(28, 25, 23, .28);--menu-shadow: 0 10px 28px rgba(28, 25, 23, .1);--chip-bg: #f8faf9;--chip-text: #8a847c;--del-bg: #fee2e2}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{color:var(--text);background:var(--bg-body);font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px}button,input,textarea,select{font-family:inherit;color:inherit}.flow-app{height:100%;display:flex;flex-direction:column;background:var(--bg-app);color:var(--text)}.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;background:var(--bar-bg);border-bottom:1px solid var(--border)}.bar strong{font-size:14px}.file{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:13px}.bar button,.bar a.home,.bar select{height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);text-decoration:none;display:inline-flex;align-items:center;font-size:13px;cursor:pointer}.bar button:hover,.bar a.home:hover{background:var(--btn-hover)}.bar button.primary{background:var(--primary-bg);border-color:var(--primary-border);color:var(--primary-text)}.bar button.on{background:var(--on-bg);border-color:var(--on-border);color:var(--on-text)}.bar button:disabled{opacity:.45;cursor:default}.body{flex:1;min-height:0;display:flex}.editor{width:min(380px,38vw);min-width:220px;resize:none;border:none;border-right:1px solid var(--editor-pane-border);background:var(--editor-pane-bg);color:var(--text);font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:13px;line-height:1.55;padding:12px 14px}.viewport{position:relative;flex:1;min-width:0;overflow:hidden;background-color:var(--bg-canvas);background-image:radial-gradient(var(--bg-canvas-dot) 1px,transparent 1px);background-size:22px 22px;touch-action:none}.surface{width:100%;height:100%;display:block}.edge{fill:none;stroke:var(--edge-type);stroke-width:1.6}.edge.dotted{stroke-dasharray:5 4}.edge.selected{stroke:var(--accent);stroke-width:2.4}.edge-hit{fill:none;stroke:transparent;stroke-width:14}.edge-label{fill:var(--edge-label);font-size:12px;text-anchor:middle}#flow-arrow path{fill:var(--edge-type)}.flow-node{cursor:grab}.flow-node rect,.flow-node polygon,.flow-node ellipse{fill:var(--card-bg);stroke:var(--card-border);stroke-width:1.4}.flow-node.diamond polygon{stroke:#d97706}.flow-node.stadium rect{stroke:var(--accent)}.flow-node.io polygon{stroke:#7c6fcd}.flow-node.selected rect,.flow-node.selected polygon,.flow-node.selected ellipse,.flow-node.linking rect,.flow-node.linking polygon,.flow-node.linking ellipse{stroke:var(--accent);stroke-width:2.4}.flow-node.drop rect,.flow-node.drop polygon,.flow-node.drop ellipse{stroke:var(--accent);stroke-width:2.4}.port-wrap{pointer-events:none}.show-ports .port-wrap{pointer-events:all;cursor:crosshair}.port-hit{fill:transparent}.port{fill:var(--bg-elevated);stroke:var(--accent);stroke-width:1.8;opacity:0}.show-ports .port{opacity:1}.port-wrap:hover .port{fill:var(--accent);stroke:#fff;r:6}.draft-edge{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:5 4;pointer-events:none}.flow-node text{fill:var(--text);font-size:13px;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.empty{position:absolute;left:24px;top:20px;margin:0;color:var(--text-muted)}.shape-picker{position:fixed;z-index:40;display:grid;grid-template-columns:repeat(3,76px);gap:6px;padding:8px;background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:10px;box-shadow:var(--menu-shadow)}.shape-picker button{height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);cursor:pointer;font-size:12px}.shape-picker button svg{width:36px;height:28px}.shape-picker button svg rect,.shape-picker button svg polygon,.shape-picker button svg ellipse{fill:var(--card-bg);stroke:var(--text-secondary);stroke-width:1.4}.shape-picker button.active,.shape-picker button:hover{border-color:var(--accent);background:var(--accent-soft)}.zoom{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}.zoom button{width:32px;height:32px;border-radius:8px;border:1px solid var(--zoom-border);background:var(--zoom-bg);color:var(--zoom-text);cursor:pointer}.status{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;min-height:42px;padding:8px 12px;background:var(--status-bg);border-top:1px solid var(--border);font-size:13px}.status label{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary)}.status input,.status select{height:28px;border-radius:6px;border:1px solid var(--input-border);background:var(--input-bg);padding:0 8px}.status .error{color:var(--danger)}.status .note{color:var(--text-muted)}.status button{height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--btn-border);background:var(--btn-bg);cursor:pointer}@media(max-width:720px){.bar{gap:6px;padding:6px 8px}.bar button,.bar a.home,.bar select{height:30px;padding:0 8px}.body{flex-direction:column}.editor{width:100%;min-width:0;height:112px;flex:0 0 112px;border-right:none;border-bottom:1px solid var(--editor-pane-border)}}