@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap";:root{--bg:#f9fafb;--bg-2:#f1f5f9;--surface:#fff;--surface-2:#f4f6fa;--border:#e2e8f0;--border-2:#cbd5e1;--text:#0f172a;--text-dim:#475569;--accent:#4f46e5;--accent-light:#6366f1;--accent-glow:#4f46e51f;--shadow:0 1px 4px #0f172a14;--shadow-md:0 4px 16px #0f172a1a;--radius:8px;--toolbar-height:52px}:root[data-theme=dark]{--bg:#141520;--bg-2:#1a1b2e;--surface:#1e1f35;--surface-2:#252640;--border:#2e3058;--border-2:#3a3c6a;--text:#e2e8f0;--text-dim:#a1aab8;--accent:#6366f1;--accent-light:#818cf8;--accent-glow:#6366f126;--shadow:0 1px 4px #0000004d;--shadow-md:0 4px 16px #0006}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Be Vietnam Pro,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:background .25s,color .2s}.app-shell{flex-direction:column;height:100%;display:flex}.toolbar{height:var(--toolbar-height);background:var(--surface);border-bottom:1px solid var(--border);z-index:10;box-shadow:var(--shadow);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;transition:background .25s,border-color .25s,box-shadow .25s;display:flex}.toolbar-left{align-items:center;gap:10px;display:flex}.toolbar-logo{flex-shrink:0;justify-content:center;align-items:center;display:flex}.toolbar-title{letter-spacing:-.01em;background:linear-gradient(130deg, var(--accent-light) 0%, #a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:700}.toolbar-sep{background:var(--border);flex-shrink:0;width:1px;height:20px}.toolbar-doc{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;max-width:200px;font-size:.85rem;font-weight:500;overflow:hidden}.toolbar-right{align-items:center;gap:6px;display:flex}.tb-btn{border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;gap:5px;padding:5px 11px;font-family:inherit;font-size:.8rem;font-weight:500;transition:border-color .15s,color .15s,background .15s,box-shadow .15s;display:inline-flex}.tb-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.tb-btn.tb-icon{padding:5px 8px;font-size:.9rem}.tb-btn-theme{padding:5px 9px;font-size:1rem;line-height:1}.add-palette{position:relative}.add-palette-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);z-index:100;min-width:140px;padding:4px;display:none;position:absolute;top:calc(100% + 6px);left:0}.add-palette-menu.open{flex-direction:column;gap:2px;display:flex}.add-palette-item{color:var(--text);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:.82rem;transition:background .12s;display:flex}.add-palette-item:hover{background:var(--accent-glow);color:var(--accent)}.toolbar-info{color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);white-space:nowrap;border-radius:20px;margin-left:4px;padding:3px 10px;font-size:.72rem;font-weight:500;transition:background .25s,border-color .25s}#canvas-container{flex:1;transition:background .3s;position:relative;overflow:hidden}:root #canvas-container{background-color:var(--bg);background-image:radial-gradient(circle, var(--border) 1px, transparent 1px);background-position:0 0;background-size:24px 24px}:root[data-theme=dark] #canvas-container{background-color:var(--bg);background-image:radial-gradient(circle at 50% 0%, #6366f112 0%, transparent 55%), radial-gradient(circle, var(--border) 1px, transparent 1px);background-position:0 0,0 0;background-size:100% 100%,24px 24px}#canvas-container svg{background:0 0!important}.mxRubberband{border:2px dashed var(--accent);background:var(--accent-glow);pointer-events:none;z-index:50;border-radius:4px;position:absolute}.style-panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:200;border-radius:12px;align-items:center;gap:16px;padding:8px 16px;display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.style-panel.open{display:flex}.sp-group{align-items:center;gap:6px;display:flex}.sp-label{color:var(--text-muted);letter-spacing:.02em;text-transform:uppercase;min-width:32px;font-family:inherit;font-size:.72rem}.sp-divider{background:var(--border);opacity:.5;width:1px;height:20px}.sp-color{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;width:26px;height:26px;padding:0}.sp-color::-webkit-color-swatch-wrapper{padding:2px}.sp-color::-webkit-color-swatch{border:none;border-radius:4px}.sp-select{background:var(--surface);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:4px 8px;font-family:inherit;font-size:.78rem}.sp-toggle{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;letter-spacing:.02em;background:0 0;border-radius:999px;padding:3px 8px;font-family:inherit;font-size:.68rem;transition:all .15s}.sp-toggle:hover{background:var(--accent-glow);color:var(--accent);border-color:var(--accent)}.sp-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}@keyframes edge-march{to{stroke-dashoffset:-20px}}.edge-animated{stroke-dasharray:8 4;animation:.6s linear infinite edge-march}