#chart-workspace{grid-area:canvas;position:relative;overflow:hidden;background-color:var(--color-bg);background-image:linear-gradient(var(--color-border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--color-border-subtle) 1px,transparent 1px);background-size:40px 40px;display:none}#chart-canvas-area{position:absolute;top:0;left:0;transform-origin:0 0;min-width:3600px;min-height:2400px}.chart-card{position:absolute;display:flex;flex-direction:column;background:#161b22;border:1px solid #21262d;border-radius:4px;overflow:hidden;box-shadow:0 4px 20px #00000073;transition:border-color .12s;cursor:default}.chart-card:hover{border-color:#30363d}.chart-card.selected{border-color:#3fb950;box-shadow:0 0 0 1px #3fb95040,0 4px 24px #00000080}.chart-card-header{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#0d1117;border-bottom:1px solid #21262d;cursor:grab;-webkit-user-select:none;user-select:none;flex-shrink:0}.chart-card-header:active{cursor:grabbing}.chart-card-icon{font-size:11px;opacity:.55;flex-shrink:0}.chart-card-title{flex:1;font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-card-del{background:none;border:none;color:var(--color-text-dim);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;opacity:0;transition:opacity .1s,color .1s;flex-shrink:0}.chart-card:hover .chart-card-del,.chart-card.selected .chart-card-del{opacity:1}.chart-card-del:hover{color:#f85149}.chart-card-body{flex:1;min-height:0;padding:10px;background:#0d1117}.chart-card-body canvas{width:100%!important;height:100%!important;display:block}.chart-resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:se-resize;opacity:0;transition:opacity .12s;background:linear-gradient(135deg,transparent 45%,#3fb950 45%);border-radius:0 0 3px}.chart-card:hover .chart-resize-handle,.chart-card.selected .chart-resize-handle{opacity:.7}.mode-switcher{display:flex;align-items:center;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.mode-btn{padding:3px 14px;background:transparent;border:none;border-right:1px solid var(--color-border);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--font-size-xs);letter-spacing:.08em;cursor:pointer;height:24px;transition:all var(--transition-fast)}.mode-btn:last-child{border-right:none}.mode-btn:hover{color:var(--color-text);background:#ffffff0a}.mode-btn.active{background:var(--color-green-dim);color:var(--color-green)}.chart-left-tools{display:none;flex-direction:column;align-items:center;gap:3px;width:100%;padding:var(--space-1) 0}.chart-type-picker-label{font-family:var(--font-mono);font-size:9px;color:var(--color-text-dim);letter-spacing:1px;padding:4px 0 2px}.chart-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 16px;gap:6px}.chart-panel-empty-icon{font-size:26px;opacity:.25;margin-bottom:4px}.chart-panel-empty-text{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);text-align:center;line-height:1.5}.chart-panel-empty-sub{font-size:10px;color:var(--color-text-dim);text-align:center}.chart-add-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 var(--space-3) var(--space-3)}.chart-add-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-muted);font-family:var(--font-mono);transition:all var(--transition-fast)}.chart-add-tile:hover{border-color:#3fb950;background:var(--color-green-glow);color:var(--color-green)}.chart-add-icon{font-size:15px}.chart-add-name{font-size:8px;letter-spacing:.05em}.chart-type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.chart-type-tile{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-muted);font-family:var(--font-mono);transition:all var(--transition-fast)}.chart-type-tile:hover{border-color:var(--color-green-dim);color:var(--color-text)}.chart-type-tile.active{border-color:var(--color-green);background:var(--color-green-glow);color:var(--color-green)}.chart-type-icon{font-size:13px}.chart-type-name{font-size:8px;letter-spacing:.05em}.chart-data-ta{width:100%;min-height:80px;resize:vertical;font-family:var(--font-mono);font-size:11px;line-height:1.5}.flow-node{position:absolute;cursor:grab;-webkit-user-select:none;user-select:none;z-index:3}.flow-node--container{z-index:1}.flow-node--container .flow-node-text{top:12px;left:14px;transform:none;font-size:11px!important;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:inherit;opacity:.7;max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow-node:active{cursor:grabbing}.flow-node-shape{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}.flow-node-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#e6edf3;font-family:JetBrains Mono,monospace;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%;pointer-events:auto;cursor:text;z-index:3;padding:2px 6px;border-radius:2px}.flow-node-text:focus{outline:1px solid #3fb950;background:#0d1117cc;white-space:pre;overflow:visible}.flow-node--selected .flow-node-shape path,.flow-node--selected .flow-node-shape rect,.flow-node--selected .flow-node-shape circle,.flow-node--selected .flow-node-shape ellipse{filter:drop-shadow(0 0 6px rgba(63,185,80,.5))}.flow-node--selected:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border:2px dashed #3fb950;border-radius:4px;pointer-events:none}.flow-anchor{position:absolute;width:10px;height:10px;border-radius:50%;background:#3fb950;border:1.5px solid #fff;cursor:crosshair;opacity:0;transition:opacity .12s;z-index:5;pointer-events:auto}.flow-node:hover .flow-anchor,.flow-node--selected .flow-anchor{opacity:1}.flow-anchor--N{top:-5px;left:50%;transform:translate(-50%)}.flow-anchor--S{bottom:-5px;left:50%;transform:translate(-50%)}.flow-anchor--E{right:-5px;top:50%;transform:translateY(-50%)}.flow-anchor--W{left:-5px;top:50%;transform:translateY(-50%)}#flow-svg-layer{pointer-events:none}#flow-svg-layer g{pointer-events:stroke;cursor:pointer}.flow-shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 0 var(--space-3)}.flow-shape-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-muted);font-family:var(--font-mono);transition:all var(--transition-fast)}.flow-shape-tile:hover{border-color:#3fb950;background:var(--color-green-glow);color:var(--color-green)}.flow-shape-icon{font-size:15px}.flow-shape-name{font-size:7px;letter-spacing:.05em;text-align:center}.tool-btn--active{background:var(--color-green)!important;color:#000!important}