:root{--bg:#f8fafc;--card:#ffffff;--accent:#1e40af;--muted:#6b7280}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}body{background:var(--bg);padding:18px}.app{height:calc(100vh - 36px);display:flex;flex-direction:column;gap:12px}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.title{font-size:20px;font-weight:700;color:var(--accent)}.controls{display:flex;gap:8px}.button{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;box-shadow:0 2px 6px #0000001a}.button.secondary{background:#e6eefc;color:var(--accent)}.canvas-wrap{background:var(--card);border-radius:10px;box-shadow:0 6px 20px #02061714;padding:12px;flex:1;overflow:hidden;display:flex;flex-direction:column}.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}.view{flex:1;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#3b82f60a,#0ea5e903);position:relative}.svgroot{width:100%;height:100%;touch-action:none;cursor:grab}.node{font-family:Inter,Arial,sans-serif;font-size:13px;pointer-events:all}.node-rect{rx:8;ry:8;stroke-width:1}.legend{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}.footer{margin-top:8px;font-size:13px;color:var(--muted)}