:root{--bg:#fafafa;--surface:#fff;--soft:#f5f5f5;--text:#111;--muted:#6b6b6b;--border:#e5e5e5;--strong:#cfcfcf;--danger:#b42318;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC",Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select,summary{font:inherit;color:inherit}button,summary,input:not([type=checkbox]),select{min-height:44px}button,summary{border:1px solid var(--strong);background:var(--surface);padding:8px 14px;border-radius:0;cursor:pointer;font-size:.88rem;font-weight:550}button:hover,summary:hover{background:var(--soft);border-color:#111}button:disabled{opacity:.35;cursor:default}button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,svg:focus-visible{outline:2px solid #111;outline-offset:2px}input,textarea,select{border:1px solid var(--strong);border-radius:0;padding:8px;background:#fff;min-width:0;width:100%}input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:#111;flex-shrink:0}.primary{background:#111;color:#fff;border-color:#111}.primary:hover{background:#333;color:#fff}.danger{color:var(--danger)}[hidden]{display:none!important}h1,h2,p{margin:0}h1{font-size:1.6rem;line-height:1.12;letter-spacing:-.03em}h2{font-size:1.05rem;letter-spacing:-.01em}kbd{font:11px ui-monospace,SFMono-Regular,monospace;border:1px solid var(--border);padding:1px 4px;color:var(--muted);font-weight:400}
.header{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:flex-start;gap:12px;min-width:0}.brand img{margin-top:2px}.brand #title{border:0;padding:4px 0 0;min-height:26px;font-size:.88rem;color:var(--muted);background:transparent;max-width:300px}.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-actions #undo,.header-actions #redo,.header-actions #help{width:44px;font-size:22px;padding:0}.divider{height:24px;width:1px;background:var(--border);margin:0 4px}.export-menu{position:relative}.export-menu summary{list-style:none;display:flex;align-items:center;gap:24px}.export-menu summary::-webkit-details-marker{display:none}.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:220px;background:white;border:1px solid var(--strong);padding:6px;box-shadow:0 6px 18px #00000014}.menu button{width:100%;display:flex;justify-content:space-between;gap:12px;border:0;text-align:left}.menu span{font-weight:400;color:var(--muted);font-size:.8rem}
.workspace{display:flex;height:calc(100dvh - 99px);min-height:560px}.toolbar{width:172px;flex-shrink:0;background:white;border-right:1px solid var(--border);padding:16px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.toolbar-section{padding-bottom:16px;border-bottom:1px solid var(--border)}.toolbar-section:last-child{border:0;padding:0}.toolbar h2{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}.tool-list{display:grid;gap:6px}.tool{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:9px 8px;font-size:.8rem;min-height:48px;line-height:1.25}.tool svg{width:26px;height:26px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5}.tool span{flex:1}.tool.active{background:#111;color:white;border-color:#111}.tool.active kbd{color:#aaa;border-color:#555}.tool kbd{border:0;padding:0}.settings{display:grid;gap:8px}.check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:.82rem;cursor:pointer}.font-label{font-size:.8rem;margin-top:4px}.settings input[type=number]{width:100%}.settings button{font-size:.8rem;padding:8px}.settings #clear{margin-top:8px}
.drawing-area{min-width:0;flex:1;display:flex;flex-direction:column}.canvas-wrap{position:relative;min-height:0;flex:1;overflow:hidden;background:var(--bg)}#canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}.node{cursor:move}.node text{pointer-events:none}.edge{cursor:pointer}.edge-hit{stroke:transparent;stroke-width:18;fill:none;pointer-events:stroke}.selection-box{fill:none;stroke:#777;stroke-width:1;stroke-dasharray:5 4;pointer-events:none}.port{fill:#fff;stroke:#111;stroke-width:1.5;cursor:crosshair}.port-target{fill:transparent;stroke:none;cursor:crosshair}.port:hover{fill:#111}.resize{fill:#fff;stroke:#111;stroke-width:1.5;cursor:nwse-resize}.edge-selected{stroke:#888;stroke-width:6;opacity:.3;fill:none;pointer-events:none}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;pointer-events:none;padding:40px;text-align:center}.empty-state svg{fill:white;stroke:#aaa;stroke-width:1.4;margin-bottom:8px}.empty-state h2{font-size:1.05rem}.empty-state p{font-size:.88rem;color:var(--muted)}.canvas-top{position:absolute;top:0;left:0;right:0;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}.canvas-top span{color:var(--muted);font-size:.78rem;background:#fafafae8;padding:3px 6px;max-width:100%}.canvas-top button{pointer-events:auto}.zoom-bar{position:absolute;bottom:18px;left:18px;display:flex;align-items:center;background:#fff;border:1px solid var(--strong);max-width:calc(100% - 36px)}.zoom-bar button{border:0;border-right:1px solid var(--border);min-width:44px;white-space:nowrap;font-size:.82rem;padding:8px 12px}.zoom-bar button:last-child{border:0}.zoom-bar #reset-zoom{min-width:66px;font-variant-numeric:tabular-nums}.zoom-bar #zoom-out,.zoom-bar #zoom-in{font-size:22px;padding:0}.zoom-divider{display:none}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;background:#fff;border-top:1px solid var(--border);font-size:.74rem;color:var(--muted)}
.inspector{position:absolute;right:16px;top:56px;width:252px;background:white;border:1px solid var(--strong);box-shadow:0 6px 20px #0000000c;padding:14px;max-height:calc(100% - 134px);overflow:auto}.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:12px}.inspector-heading h2{font-size:.9rem}.inspector-heading button{padding:0;width:44px;font-size:20px}.inspector label:not(.check){display:block;font-size:.8rem;font-weight:600;margin:10px 0 4px}.inspector textarea{resize:vertical;min-height:76px;font-size:.88rem}.inspector select,.inspector input{font-size:.88rem}.inspector-actions{display:flex;gap:8px;margin-top:14px}.inspector-actions button{flex:1;padding:8px;font-size:.8rem}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inspector .check{margin-top:8px}.inspector-note{font-size:.8rem;color:var(--muted);margin-top:4px}
.toast{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);max-width:calc(100% - 28px);border:1px solid var(--strong);background:#111;color:white;padding:12px 18px;z-index:40;font-size:.88rem;box-shadow:0 4px 20px #0001}.toast.error{background:white;color:var(--danger);border-color:var(--danger)}dialog{color:#111;border:1px solid var(--strong);padding:24px;width:min(480px,calc(100% - 28px));max-height:85dvh;overflow:auto}dialog::backdrop{background:#0006}dialog p{font-size:.88rem;color:var(--muted);margin:14px 0}dialog h2{font-size:1.05rem}.dialog-actions,.dialog-heading{display:flex;gap:8px;justify-content:flex-end;align-items:center}.dialog-heading{justify-content:space-between}.dialog-heading button{width:44px;padding:0;font-size:22px}.shortcuts{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:.8rem}.shortcuts dd{margin:0;text-align:right;color:var(--muted)}.local-note{border-top:1px solid var(--border);padding-top:14px}
@media(min-width:1600px){.toolbar{width:188px;padding:18px 16px}.inspector{width:270px}}
@media(max-width:840px){.header{padding:14px;flex-wrap:wrap;gap:12px}.header-actions{width:100%;gap:6px}.header-actions #help{margin-left:auto}.header-actions button{padding:8px 10px}.header-actions .divider{margin:0 2px}.workspace{height:calc(100dvh - 143px);min-height:640px}.toolbar{width:118px;padding:12px 6px}.tool{flex-direction:column;gap:4px;padding:6px 3px;font-size:.73rem;min-height:62px;text-align:center}.tool kbd{display:none}.toolbar h2{text-align:center}.settings button{font-size:.74rem;padding:6px}.settings .check{font-size:.72rem;gap:5px}.canvas-top{padding:10px 8px;align-items:flex-start}.canvas-top span{font-size:.7rem;max-width:calc(100% - 48px)}.inspector{top:56px;right:8px;width:min(240px,calc(100% - 16px));padding:10px;max-height:calc(100% - 135px)}.zoom-bar{left:8px;bottom:12px;max-width:calc(100% - 16px)}.zoom-bar button{padding:8px;font-size:.73rem}.zoom-bar #reset-zoom{min-width:54px}.status-bar{padding:8px;font-size:.65rem;flex-wrap:wrap;gap:4px}.empty-state{padding:28px 16px}.empty-state p{font-size:.78rem}.empty-state h2{font-size:.95rem}}
@media(max-width:480px){h1{font-size:1.45rem}.brand{gap:8px}.toolbar{width:92px}.header-actions #help{display:none}.header-actions button{font-size:.76rem}.header-actions summary{font-size:.76rem;gap:12px;padding:8px 10px}.header-actions #undo,.header-actions #redo{width:40px;min-width:40px}.header-actions .divider{display:none}.zoom-bar #fit{font-size:.7rem;white-space:normal;line-height:1.2;width:90px}.zoom-bar button{min-width:38px}.canvas-top span{max-width:100%}.canvas-top #deselect{padding:4px;font-size:.7rem;min-height:32px}.shortcuts{grid-template-columns:1fr}.shortcuts dd{text-align:left}.workspace{min-height:620px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
body{height:100dvh;min-height:560px;display:flex;flex-direction:column}.header{flex-shrink:0;position:relative}.workspace{height:auto;flex:1;min-height:0}.resize[fill-opacity="0"]{fill:transparent;stroke:none}
@media(max-width:480px){body{min-height:560px}.header-actions #help{display:block;position:absolute;right:14px;top:18px;margin:0}.header-actions #undo,.header-actions #redo{width:44px;min-width:44px}.brand{max-width:calc(100% - 48px)}.brand #title{max-width:250px}}