:root{--color-bg: #1e1e1e;--color-surface: #252526;--color-surface-2: #2d2d2d;--color-surface-3: #333333;--color-border: #3e3e42;--color-text: #d4d4d4;--color-text-muted: #808080;--color-accent: #569cd6;--color-accent-dim: #264f78;--color-danger: #d16969;--color-success: #4ec9b0;--radius: 4px;--radius-lg: 6px;--transition: .15s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.5;color:var(--color-text);background:var(--color-bg);overflow:hidden}.app{display:grid;grid-template-rows:40px 1fr auto;grid-template-columns:220px 1fr 320px;height:100vh;width:100vw}.toolbar{grid-column:1 / -1;grid-row:1}.palette{grid-column:1;grid-row:2}.canvas{grid-column:2;grid-row:2}.yaml-preview{grid-column:3;grid-row:2}.drawer{grid-column:1 / -1;grid-row:3}.toolbar{display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--color-surface);border-bottom:1px solid var(--color-border)}.toolbar__title{font-weight:600;font-size:13px;color:var(--color-accent);margin-right:12px;white-space:nowrap}.toolbar__sep{width:1px;height:20px;background:var(--color-border);margin:0 4px}button{font-family:inherit;font-size:12px;padding:4px 10px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);color:var(--color-text);cursor:pointer;transition:background var(--transition);white-space:nowrap}button:hover{background:var(--color-surface-3)}button:active{background:var(--color-accent-dim)}button.btn-accent{background:var(--color-accent-dim);border-color:var(--color-accent);color:#fff}button.btn-accent:hover{background:var(--color-accent)}button.btn-danger{color:var(--color-danger)}button.btn-danger:hover{background:#d1696926}button.btn-sm{font-size:11px;padding:2px 6px}button.btn-icon{padding:2px 6px;font-size:14px;line-height:1;border:none;background:transparent}button.btn-icon:hover{background:var(--color-surface-3)}input[type=text],textarea,select{font-family:inherit;font-size:12px;padding:4px 8px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);outline:none;transition:border-color var(--transition)}input[type=text]:focus,textarea:focus,select:focus{border-color:var(--color-accent)}select{cursor:pointer}textarea{resize:vertical;font-family:Cascadia Code,Fira Code,Consolas,monospace}label{font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.panel{background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden}.panel:last-child{border-right:none;border-left:1px solid var(--color-border)}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--color-border);flex-shrink:0}.panel__header h3{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--color-text-muted);font-weight:600}.panel__body{flex:1;overflow-y:auto;padding:8px}.panel__body::-webkit-scrollbar{width:8px}.panel__body::-webkit-scrollbar-track{background:transparent}.panel__body::-webkit-scrollbar-thumb{background:var(--color-surface-3);border-radius:4px}.panel__body::-webkit-scrollbar-thumb:hover{background:var(--color-border)}.palette-section{margin-bottom:12px}.palette-section__title{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);padding:4px 8px;margin-bottom:4px}.palette-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius);cursor:pointer;transition:background var(--transition);border:none;background:transparent;width:100%;text-align:left;color:var(--color-text);font-size:13px}.palette-item:hover{background:var(--color-surface-2)}.palette-item__icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);font-size:12px;font-weight:700;flex-shrink:0}.canvas{background:var(--color-bg);overflow-y:auto;padding:16px}.canvas::-webkit-scrollbar{width:8px}.canvas::-webkit-scrollbar-track{background:transparent}.canvas::-webkit-scrollbar-thumb{background:var(--color-surface-3);border-radius:4px}.canvas-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 16px;color:var(--color-text-muted);text-align:center}.canvas-empty__hint{font-size:12px}.step-list{display:flex;flex-direction:column;gap:4px}.step-list__add{display:flex;align-items:center;justify-content:center;padding:6px;border:1px dashed var(--color-border);border-radius:var(--radius);color:var(--color-text-muted);cursor:pointer;font-size:12px;background:transparent;transition:all var(--transition);width:100%}.step-list__add:hover{border-color:var(--color-accent);color:var(--color-accent);background:#569cd614}.block-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);border-left:3px solid var(--color-border);transition:all var(--transition);cursor:pointer}.block-card:hover{border-color:var(--color-surface-3);background:var(--color-surface-2)}.block-card--selected{border-color:var(--color-accent);background:#569cd614}.block-card__header{display:flex;align-items:center;gap:6px;padding:6px 8px;min-height:32px}.block-card__type-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.block-card__id{font-size:12px;font-weight:600;color:var(--color-text);flex-shrink:0}.block-card__summary{font-size:11px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-family:Cascadia Code,Fira Code,Consolas,monospace}.block-card__actions{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity var(--transition)}.block-card:hover .block-card__actions{opacity:1}.block-card__slots{padding:0 8px 8px 16px}.block-card__slot{margin-top:4px}.block-card__slot-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--color-text-muted);padding:4px 0 2px;display:flex;align-items:center;gap:4px}.block-card__collapse-btn{font-size:10px;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;padding:0 4px;line-height:1}.block-card__collapse-btn:hover{color:var(--color-text)}.block-card__child-count{font-size:10px;color:var(--color-text-muted);padding:2px 8px 6px;font-style:italic}.yaml-preview pre{margin:0;padding:8px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:11px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--color-text)}.yaml-preview .import-area{display:flex;flex-direction:column;gap:6px;padding:8px}.yaml-preview .import-area textarea{width:100%;min-height:200px;flex:1}.workflow-meta{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:12px}.workflow-meta__field{display:flex;flex-direction:column;gap:3px}.workflow-meta__field input[type=text],.workflow-meta__field textarea{width:100%}.workflow-meta__field textarea{min-height:48px}.workflow-meta__section{border-top:1px solid var(--color-border);padding-top:8px}.workflow-meta__section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.workflow-meta__section-header h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);font-weight:600}.input-row,.output-row{display:flex;gap:4px;align-items:center;margin-bottom:4px}.input-row input[type=text],.output-row input[type=text]{flex:1;min-width:0}.input-row select{width:80px}.drawer{background:var(--color-surface);border-top:1px solid var(--color-border);max-height:0;overflow:hidden;transition:max-height .2s ease}.drawer--open{max-height:300px;overflow-y:auto}.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--color-border);position:sticky;top:0;background:var(--color-surface);z-index:1}.drawer__header h3{font-size:12px;font-weight:600}.drawer__body{padding:12px}.drag-handle{display:flex;align-items:center;padding:0 4px;margin-right:2px;font-size:13px;letter-spacing:-2px;color:var(--color-text-muted);cursor:grab;border:none;background:transparent;opacity:0;transition:opacity var(--transition),color var(--transition);flex-shrink:0;line-height:1}.drag-handle:active{cursor:grabbing}.block-card:hover .drag-handle{opacity:1}.block-card--is-dragging{opacity:.35;pointer-events:none}.step-list--empty{min-height:32px;border-radius:var(--radius);transition:background var(--transition),outline-color var(--transition)}.step-list--drop-target{background:#569cd614;outline:1px dashed var(--color-accent)}.step-list__empty-hint{font-size:11px;color:var(--color-text-muted);text-align:center;padding:6px 0;pointer-events:none}.canvas-empty--drop-target{background:#569cd60f;outline:1px dashed var(--color-accent);border-radius:var(--radius-lg)}.block-card--dragging-overlay{box-shadow:0 8px 24px #00000080;pointer-events:none}