*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f5f6f8;--surface: #ffffff;--border: rgba(0, 0, 0, .08);--text: #2c3e50;--text-muted: rgba(0, 0, 0, .45);--primary: #3498db;--primary-light: rgba(52, 152, 219, .1);--danger: #e74c3c;--success: #2ecc71;--radius: 8px}html,body,#root{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000001f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#0003}.app{display:flex;flex-direction:column;height:100%}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 1px 3px #0000000a;z-index:10}.logo{font-size:16px;font-weight:700;color:var(--primary);letter-spacing:-.3px}.toolbar-actions{display:flex;gap:6px}.btn{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.btn:hover{background:#f0f1f3;border-color:#00000026}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:#2980b9}.btn-play{background:var(--success);color:#fff;border-color:var(--success)}.btn-play:hover{background:#27ae60}.btn-small{padding:3px 8px;font-size:12px}.btn-large{padding:10px 24px;font-size:15px}.icon-btn{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-muted);transition:all .15s}.icon-btn:hover{background:#0000000f;color:var(--text)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn.danger:hover{background:#e74c3c1a;color:var(--danger)}.workspace{flex:1;display:flex;overflow:visible;position:relative}.canvas-panel{flex:1;display:flex;flex-direction:column;overflow:auto;padding:16px}.canvas-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.playback-controls{display:flex;gap:6px}.mode-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--primary-light);color:var(--primary);border-radius:6px;font-size:13px;font-weight:500;animation:pulse-bg 1.5s infinite}@keyframes pulse-bg{0%,to{background:var(--primary-light)}50%{background:#3498db33}}.svg-container{flex:1;background:var(--surface);border-radius:12px;box-shadow:0 2px 12px #00000014;padding:20px;overflow:auto;display:flex;align-items:flex-start;justify-content:center}.svg-container svg{max-width:100%;height:auto}.svg-container [data-flow-id]{cursor:pointer;transition:opacity .3s ease}.empty-canvas{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted)}.empty-icon{font-size:48px}.empty-canvas h2{font-size:20px;font-weight:600;color:var(--text)}.empty-canvas p{max-width:400px;text-align:center;font-size:14px;line-height:1.5;margin-bottom:8px}.right-panel{width:360px;min-width:360px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:visible;position:relative;z-index:0}.panel-section{display:flex;flex-direction:column;overflow:hidden}.elements-section{max-height:200px;border-bottom:1px solid var(--border);display:flex;flex-direction:column}.selected-element-display{padding:8px 14px;border-bottom:1px solid var(--border);background:var(--primary-light)}.selected-element-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px}.selected-element-item{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#fff;border-radius:6px;border:1px solid var(--primary)}.selected-element-item .element-name{font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.steps-section{flex:1;overflow:hidden;position:relative}.section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:#fafbfc}.section-header h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.badge{font-size:11px;padding:1px 6px;border-radius:10px;background:#0000000f;color:var(--text-muted)}.elements-list{overflow-y:auto;padding:4px}.element-item{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:13px;transition:background .1s}.element-item:hover{background:#00000008}.element-item.active{background:var(--primary-light)}.type-badge{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:11px;font-weight:700;flex-shrink:0}.type-badge.shape{background:#dff0d8;color:#3c763d}.type-badge.arrow{background:#d9edf7;color:#31708f}.type-badge.text{background:#fcf8e3;color:#8a6d3b}.type-badge.group{background:#f2dede;color:#a94442}.element-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding:2px 4px;border-radius:3px}.element-label:hover{background:#3498db1a}.element-rename-input{flex:1;padding:2px 4px;border:1px solid var(--primary);border-radius:3px;font-size:13px;outline:none;background:#fff;box-shadow:0 0 0 2px #3498db1a}.steps-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;position:relative}.empty-steps{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:13px}.step-card{border:1px solid var(--border);border-radius:8px;overflow:visible;cursor:pointer;transition:all .15s;position:relative;z-index:1}.step-card:hover{border-color:#00000026}.step-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.step-card.playing{border-color:var(--success);box-shadow:0 0 0 2px #2ecc714d}.step-header{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 8px;background:#fafbfc}.step-number{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-title{flex:1;border:none;background:none;font-size:13px;font-weight:500;outline:none;padding:2px 4px;border-radius:4px;min-width:0}.step-title:focus{background:#fff;box-shadow:0 0 0 1px var(--primary)}.step-actions{display:flex;gap:0;flex-shrink:0}.step-body{padding:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;background:var(--surface);border-radius:0 0 8px 8px;overflow:hidden}.step-duration{display:flex;align-items:center;gap:6px;font-size:12px}.step-duration label{font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;font-size:11px;min-width:55px}.step-duration input{width:70px;padding:3px 6px;border:1px solid var(--border);border-radius:4px;font-size:13px;outline:none;-moz-appearance:textfield}.step-duration input::-webkit-inner-spin-button{-webkit-appearance:none}.step-duration input:focus{border-color:var(--primary)}.unit{font-size:11px;color:var(--text-muted)}.action-row{display:flex;align-items:center;gap:4px;padding:4px 6px;background:#00000005;border-radius:6px;position:relative}.element-selector{flex:1;position:relative;min-width:0;display:flex;gap:2px;align-items:center}.element-select-button{flex:1;padding:4px 8px;background:#fff;border:1px solid var(--border);border-radius:4px 0 0 4px;font-size:12px;cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:all .15s}.element-select-button:hover{border-color:var(--primary)}.element-select-button:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.canvas-select-btn{flex-shrink:0;width:28px;height:28px;padding:0;background:#fff;border:1px solid var(--border);border-left:none;border-radius:0 4px 4px 0;font-size:14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.canvas-select-btn:hover{border-color:var(--primary);background:var(--primary-light)}.canvas-select-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.element-dropdown{position:fixed;background:#fff;border:1px solid var(--primary);border-radius:6px;box-shadow:0 8px 24px #0003;z-index:10000;display:flex;flex-direction:column;max-height:300px;overflow:hidden;min-width:200px}.element-search-input{padding:6px 8px;border:none;border-bottom:1px solid var(--border);font-size:12px;outline:none}.element-search-input:focus{background:var(--primary-light)}.element-dropdown-list{overflow-y:auto;flex:1}.element-dropdown-item{display:flex;align-items:center;gap:6px;padding:6px 8px;background:none;border:none;font-size:12px;cursor:pointer;text-align:left;color:var(--text);transition:background .1s;width:100%}.element-dropdown-item:hover{background:var(--primary-light)}.element-dropdown-item.active{background:var(--primary-light);color:var(--primary);font-weight:500}.element-dropdown-empty{padding:12px 8px;text-align:center;font-size:12px;color:var(--text-muted)}.action-row select{padding:2px 4px;border:1px solid var(--border);border-radius:4px;font-size:12px;outline:none;background:#fff;cursor:pointer}.action-row select:focus{border-color:var(--primary)}.action-row input[type=color]{width:24px;height:24px;border:1px solid var(--border);border-radius:4px;padding:1px;cursor:pointer;background:none}.action-row input[type=color]::-webkit-color-swatch-wrapper{padding:1px}.action-row input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}