.flow-canvas-container{display:flex;flex-direction:column;height:100%;background:#f5f5f5;overflow:hidden}.canvas-toolbar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0;z-index:100}.toolbar-section{display:flex;align-items:center;gap:8px}.toolbar-divider{width:1px;height:24px;background:#e0e0e0;margin:0 4px}.toolbar-label{font-size:12px;color:#666;font-weight:500;text-transform:uppercase}.shape-palette{display:flex;gap:8px}.shape-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 8px;background:#f5f5f5;border:2px dashed #ccc;border-radius:6px;cursor:grab;transition:all .2s;width:64px;height:44px;box-sizing:border-box}.shape-item:hover{border-color:#0cc;background:#e6fafa}.shape-item:active{cursor:grabbing;transform:scale(.95)}.shape-icon{width:24px;height:16px;border-radius:3px;border:2px solid}.shape-icon.building{background:#007a7a;border-color:#005252}.shape-icon.zone{background:#005252;border-color:#033;border-style:dashed}.shape-icon.unit{background:#00a3a3;border-color:#007a7a;border-style:dashed}.shape-item span{font-size:10px;color:#666}.mode-btn{display:flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;font-size:12px;color:#333;transition:all .2s}.mode-btn:hover{background:#f5f5f5}.mode-btn.active{background:#0cc;color:#fff;border-color:#007a7a}.mode-btn.primary{background:#00a3a3;color:#fff;border-color:#007a7a}.mode-btn.primary:hover{background:#007a7a}.mode-btn.danger{color:#f44336;border-color:#f44336}.mode-btn.danger:hover{background:#ffebee}.zoom-controls{display:flex;align-items:center;gap:8px}.zoom-btn{width:26px;height:26px;border:1px solid #ddd;border-radius:5px;background:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.zoom-btn:hover{background:#f5f5f5}.zoom-value{font-size:12px;color:#666;min-width:44px;text-align:center}.flow-canvas-main{display:flex;flex:1;overflow:hidden}.flow-canvas{flex:1;position:relative;overflow:hidden;background:#fafafa;cursor:default}.flow-canvas.drawing-mode{cursor:crosshair}.flow-canvas.dragging{cursor:grabbing}.flow-canvas.pan-ready{cursor:grab}.flow-canvas.panning{cursor:grabbing}.flow-canvas.panning .canvas-shape{transition:box-shadow .2s,transform .1s}.canvas-grid{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:linear-gradient(to right,#e0e0e0 1px,transparent 1px),linear-gradient(to bottom,#e0e0e0 1px,transparent 1px),linear-gradient(to right,#bdbdbd 1px,transparent 1px),linear-gradient(to bottom,#bdbdbd 1px,transparent 1px);background-repeat:repeat}.canvas-shapes{position:absolute;top:0;left:0;transform-origin:0 0}.flow-lines-svg{position:absolute;top:0;left:0;width:20000px;height:20000px;pointer-events:none}.flow-lines-svg path,.flow-lines-svg line{pointer-events:stroke}.mode-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);padding:8px 16px;background:#000000b3;color:#fff;border-radius:20px;font-size:13px;pointer-events:none}.canvas-shape{position:absolute;border-radius:8px;border:1px solid #e0e0e0;cursor:pointer;transition:box-shadow .2s,transform .1s,left .35s ease,top .35s ease,width .35s ease,height .35s ease;display:flex;flex-direction:column;overflow:visible;background:#fff}.canvas-shape .shape-header{border-radius:8px 8px 0 0;overflow:hidden}.canvas-shape .shape-body{border-radius:0 0 8px 8px;overflow:hidden}.flow-canvas.dragging .canvas-shape,.flow-canvas.resizing .canvas-shape{transition:box-shadow .2s,transform .1s}.canvas-shape:hover{box-shadow:0 4px 12px #00000026}.canvas-shape.selected{box-shadow:0 0 0 3px #0cc,0 4px 12px #0003}.shape-header{padding:8px 12px;font-weight:600;font-size:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);min-height:32px;display:flex;align-items:center;justify-content:space-between}.shape-type-badge{font-size:10px;padding:2px 6px;background:#fff3;border-radius:4px;text-transform:uppercase}.shape-body{flex:1;padding:8px 12px;background:#fff;display:flex;flex-direction:column;gap:6px}.shape-template{display:flex;align-items:center;gap:6px;font-size:11px;color:#666}.shape-template .dot{width:8px;height:8px;border-radius:50%}.shape-no-template{font-size:11px;color:#999;font-style:italic}.shape-stats{display:flex;gap:12px;font-size:11px;color:#888}.canvas-shape.building{border:2px solid #007a7a}.canvas-shape.zone{background:#0052520a;border:2px dashed #005252}.canvas-shape.zone .shape-body{background:transparent;flex:1;min-height:0}.canvas-shape.zone .shape-no-template{display:none}.canvas-shape.unit{border:2px dashed #00a3a3}.shape-anchors{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.shape-anchor{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #00CCCC;border-radius:50%;pointer-events:none;cursor:crosshair;opacity:0;transition:opacity .2s,width .2s,height .2s,background .2s,box-shadow .2s}.canvas-shape:hover .shape-anchors:not(.link-mode) .shape-anchor{opacity:.35}.shape-anchors.link-mode{pointer-events:auto;z-index:20}.shape-anchors.link-mode .shape-anchor{opacity:1;width:14px;height:14px;background:#0cc;border:2px solid white;box-shadow:0 0 0 2px #0cc,0 2px 6px #2196f366;cursor:grab;pointer-events:all}.shape-anchors.link-mode .shape-anchor:hover{width:18px;height:18px;background:#007a7a;box-shadow:0 0 0 3px #007a7a,0 2px 10px #1976d280}.shape-anchors.link-mode .shape-anchor:active{cursor:grabbing}.shape-anchor.top{top:0;left:50%;transform:translate(-50%,-50%)}.shape-anchor.bottom{bottom:0;top:auto;left:50%;transform:translate(-50%,50%)}.shape-anchor.left{top:50%;left:0;transform:translate(-50%,-50%)}.shape-anchor.right{top:50%;left:auto;right:0;transform:translate(50%,-50%)}.flow-canvas.drawing-mode .shape-resize-handles{display:none}.shape-resize-handles{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;pointer-events:none;z-index:10}.resize-handle{position:absolute;pointer-events:all;background:#fff;border:2px solid #00CCCC;border-radius:2px;z-index:11;opacity:.9;transition:background .15s,transform .1s}.resize-handle:hover{background:#0cc;transform:scale(1.25)}.resize-handle.nw,.resize-handle.ne,.resize-handle.sw,.resize-handle.se{width:10px;height:10px}.resize-handle.n,.resize-handle.s{width:20px;height:8px}.resize-handle.e,.resize-handle.w{width:8px;height:20px}.resize-handle.nw{top:0;left:0;cursor:nw-resize}.resize-handle.ne{top:0;right:0;cursor:ne-resize}.resize-handle.sw{bottom:0;left:0;cursor:sw-resize}.resize-handle.se{bottom:0;right:0;cursor:se-resize}.resize-handle.n{top:0;left:50%;transform:translate(-50%);cursor:n-resize}.resize-handle.s{bottom:0;left:50%;transform:translate(-50%);cursor:s-resize}.resize-handle.e{top:50%;right:0;transform:translateY(-50%);cursor:e-resize}.resize-handle.w{top:50%;left:0;transform:translateY(-50%);cursor:w-resize}.resize-handle.n:hover,.resize-handle.s:hover{transform:translate(-50%) scale(1.25)}.resize-handle.e:hover,.resize-handle.w:hover{transform:translateY(-50%) scale(1.25)}.flow-canvas.resizing{cursor:nwse-resize}.canvas-shape.drop-target{box-shadow:0 0 0 3px #22c55e,0 0 16px #22c55e4d!important;transition:box-shadow .15s ease}.drop-target-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#22c55e14;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#15803d;font-weight:600;pointer-events:none;z-index:5}.canvas-shape.nested-child{border-left:4px solid #22c55e!important}.nested-parent-badge{position:absolute;top:-18px;left:4px;font-size:9px;color:#15803d;background:#f0fdf4;border:1px solid #86efac;border-radius:4px;padding:1px 6px;white-space:nowrap;pointer-events:none;z-index:3}.children-count-badge{position:absolute;bottom:4px;right:6px;font-size:9px;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:1px 6px;pointer-events:none}.canvas-shape.building.expanded{border:2px solid #00CCCC;box-shadow:0 4px 20px #2563eb26;z-index:5}.expand-toggle-bar{display:flex;align-items:center;gap:4px;padding:4px 10px;background:#f8fafc;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;font-size:10px;color:#64748b;cursor:pointer;transition:background .15s,color .15s;-webkit-user-select:none;user-select:none;flex-shrink:0}.expand-toggle-bar:hover{background:#e6fafa;color:#007a7a}.expand-toggle-bar.expanded{background:#e6fafa;color:#007a7a;border-bottom-color:#99ebeb}.expand-chevron{transition:transform .2s ease;flex-shrink:0}.expand-chevron.rotated{transform:rotate(180deg)}.shape-body.expanded-body{padding:8px;overflow-y:auto;overflow-x:hidden}.expanded-building-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;width:100%}.expanded-building-empty{display:flex;align-items:center;justify-content:center;padding:16px;font-size:11px;color:#94a3b8;font-style:italic}.expanded-unit-card{border-radius:6px;border:1px solid #e2e8f0;padding:6px 8px;display:flex;flex-direction:column;gap:4px;transition:box-shadow .15s,border-color .15s;cursor:default;min-width:0}.expanded-unit-card:hover{box-shadow:0 2px 8px #00000014;border-color:#cbd5e1}.expanded-unit-header{display:flex;align-items:center;justify-content:space-between;gap:4px}.expanded-unit-name{font-size:11px;font-weight:600;color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.expanded-unit-type-badge{font-size:8px;padding:1px 4px;border:1px solid #cbd5e1;border-radius:3px;color:#64748b;text-transform:uppercase;flex-shrink:0}.expanded-unit-stats{display:flex;gap:8px;font-size:9px;color:#94a3b8}.expanded-unit-tasks{display:flex;flex-direction:column;gap:2px;margin-top:2px}.expanded-unit-task-row{display:flex;align-items:center;gap:4px;font-size:9px;color:#475569}.expanded-task-dot{width:4px;height:4px;border-radius:50%;background:#94a3b8;flex-shrink:0}.expanded-task-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.expanded-task-dur{color:#94a3b8;flex-shrink:0;font-size:8px}.expanded-unit-task-more{font-size:8px;color:#94a3b8;font-style:italic;padding-left:8px}.flow-line{stroke:#0cc;stroke-width:2;fill:none;cursor:pointer}.flow-line:hover{stroke-width:4}.flow-line.selected{stroke:#007a7a;stroke-width:3}.flow-line.preview{stroke-dasharray:8,4;opacity:.7}.flow-line-arrow{fill:#0cc}.flow-line-label{font-size:11px;fill:#666}.flow-line-delete-btn circle{transition:fill .15s}.flow-line-delete-btn:hover circle{fill:#dc2626}.flow-canvas-sidebar{width:320px;background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.properties-panel{padding:16px}.properties-header{font-size:14px;font-weight:600;color:#333;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}.properties-empty{text-align:center;padding:40px 20px;color:#999}.properties-empty p{margin:8px 0;font-size:13px}.property-group{margin-bottom:20px}.property-label{display:block;font-size:11px;font-weight:600;color:#666;text-transform:uppercase;margin-bottom:6px}.property-input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px}.property-input:focus{outline:none;border-color:#0cc;box-shadow:0 0 0 3px #00cccc26}.template-list{display:flex;flex-direction:column;gap:8px}.template-option{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.template-option:hover{border-color:#bdbdbd;background:#f5f5f5}.template-option.selected{border-color:#0cc;background:#e6fafa}.template-color{width:16px;height:16px;border-radius:4px;flex-shrink:0}.template-info{flex:1}.template-name{font-size:13px;font-weight:500;color:#333}.template-meta{font-size:11px;color:#666}.template-check{color:#0cc}.action-buttons{display:flex;gap:8px;margin-top:20px}.action-btn{flex:1;padding:10px;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s}.action-btn.delete{background:#ffebee;color:#f44336}.action-btn.delete:hover{background:#ffcdd2}.takt-preview{height:100%;display:flex;flex-direction:column}.preview-header{padding:16px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between}.preview-header h3{margin:0;font-size:14px;font-weight:600}.preview-close{background:none;border:none;cursor:pointer;font-size:20px;color:#666}.preview-content{flex:1;padding:16px;overflow-y:auto}.preview-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.summary-card{padding:12px;background:#f5f5f5;border-radius:8px;text-align:center}.summary-value{font-size:24px;font-weight:700;color:#333}.summary-label{font-size:11px;color:#666;text-transform:uppercase}.mini-takt{margin-top:16px}.mini-takt-header{display:flex;font-size:11px;color:#666;padding:8px 0;border-bottom:1px solid #e0e0e0}.mini-takt-zone{flex:1;text-align:center}.mini-takt-row{display:flex;align-items:center;padding:4px 0;border-bottom:1px solid #f0f0f0}.mini-takt-label{width:60px;font-size:10px;font-weight:500;color:#666}.mini-takt-cells{flex:1;display:flex}.mini-takt-cell{flex:1;height:20px;margin:1px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff}.mini-takt-cell.empty{background:#f5f5f5}.preview-actions{padding:16px;border-top:1px solid #e0e0e0;display:flex;gap:8px}.preview-btn{flex:1;padding:12px;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500}.preview-btn.primary{background:#00a3a3;color:#fff}.preview-btn.primary:hover{background:#007a7a}.preview-btn.secondary{background:#f5f5f5;color:#333}@media (max-width: 1024px){.flow-canvas-sidebar{width:280px}.shape-palette{flex-wrap:wrap}.shape-item{min-width:60px;padding:6px 8px}}@media (prefers-color-scheme: dark){.flow-canvas-container{background:#1e1e1e}.canvas-toolbar{background:#2d2d2d;border-color:#404040}.flow-canvas{background:#252525}.flow-canvas-sidebar{background:#2d2d2d;border-color:#404040}}