.flow-body{height:100vh;overflow:hidden;background:#eef1ed}.flow-name{text-align:center}.flow-name input{border:0;background:transparent;text-align:center;font:700 14px Manrope;outline:none}.flow-name span{display:block;font-size:8px;color:#8b958f}.secondary-button{border:1px solid var(--line);border-radius:8px;background:white;padding:9px 14px;font-weight:700;font-size:11px;cursor:pointer}.flow-layout{height:calc(100vh - 78px);display:grid;grid-template-columns:255px minmax(500px,1fr) 290px}.tool-palette,.step-settings{background:white;overflow-y:auto}.tool-palette{border-right:1px solid var(--line);padding:25px 16px}.palette-title{padding:0 7px}.palette-title h2{font:700 21px Manrope;margin:7px 0 3px}.palette-title p{font-size:10px;color:#7d8782;line-height:1.5}.palette-search{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:18px 5px}.palette-search input{border:0;outline:0;min-width:0;width:100%;font-size:11px}.palette-categories{display:flex;gap:4px;overflow-x:auto;margin:0 5px 13px}.palette-categories button{border:0;background:#eff2ee;padding:6px 8px;border-radius:5px;font-size:8px;white-space:nowrap;cursor:pointer}.palette-categories button.active{background:var(--ink);color:white}.palette-tools{display:grid;gap:6px}.palette-tool{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;border:1px solid transparent;background:white;border-radius:8px;padding:8px;text-align:left;cursor:pointer}.palette-tool:hover{border-color:#b9ccc1;background:#f5f9f6}.palette-tool i,.selected-tool-head i{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:11px}.palette-tool strong{display:block;font-size:10px}.palette-tool small{font-size:8px;color:#8d9691}.palette-tool>span{color:#8da097}.flow-main{min-width:0;overflow:auto;position:relative}.flow-toolbar{position:sticky;top:0;z-index:4;background:rgba(238,241,237,.9);backdrop-filter:blur(10px);height:60px;padding:10px 25px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce2dd}.view-switch{background:#dfe5df;border-radius:8px;padding:3px}.view-switch button,.icon-tool{border:0;background:transparent;border-radius:6px;padding:8px 13px;font-size:10px;font-weight:700;cursor:pointer}.view-switch button.active{background:white;box-shadow:0 2px 7px rgba(25,40,32,.1)}.icon-tool{border:1px solid #d3dbd5;background:#f8faf7;margin-left:5px}.flow-view{display:none}.flow-view.active{display:block}.canvas-help{text-align:center;padding:25px 10px 5px}.canvas-help span{font-size:11px;font-weight:800}.canvas-help small{display:block;color:#87928c;font-size:9px;margin-top:4px}.pipeline{max-width:520px;margin:18px auto}.empty-pipeline{border:2px dashed #c4cec7;border-radius:14px;text-align:center;padding:75px 20px;color:#7f8b84}.empty-pipeline i{display:grid;place-items:center;margin:auto;width:55px;height:55px;border-radius:50%;background:#dde8e1;color:var(--green);font-style:normal;font-size:22px}.empty-pipeline h3{margin-bottom:5px}.empty-pipeline p{font-size:10px}.flow-step{position:relative;background:white;border:1px solid #d9e0da;border-radius:12px;padding:14px;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;box-shadow:0 5px 15px rgba(28,47,38,.05);cursor:pointer}.flow-step.selected{border-color:var(--green);box-shadow:0 0 0 2px #d4e8dd}.flow-step .step-icon{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:12px}.flow-step h3{font:700 12px Manrope;margin:0}.flow-step p{font-size:8px;color:#87918c;margin:3px 0 0}.flow-step .step-buttons button{border:0;background:#eff2ef;border-radius:5px;width:24px;height:24px;cursor:pointer}.flow-connector{height:42px;width:2px;background:#a9c0b4;margin:auto;position:relative}.flow-connector:after{content:"↓";position:absolute;bottom:-6px;left:-7px;color:var(--green);background:#eef1ed}.add-step-main{display:block;margin:15px auto 70px;border:1px dashed #9fb5a9;color:var(--green);background:#f8faf7;border-radius:9px;padding:11px 20px;font-weight:700;cursor:pointer}.step-settings{border-left:1px solid var(--line);padding:25px 20px}.settings-empty-icon{width:48px;height:48px;border-radius:50%;background:#edf2ee;display:grid;place-items:center;margin:55px auto 15px}.step-settings #settingsEmpty{text-align:center;color:#87918c}.step-settings #settingsEmpty h3{color:var(--ink);margin-bottom:5px}.step-settings #settingsEmpty p{font-size:10px;line-height:1.5}.selected-tool-head{display:flex;gap:10px;align-items:center;margin:12px 0 25px}.selected-tool-head h2{font:700 15px Manrope;margin:0}.selected-tool-head p{font-size:9px;color:#89938e;margin:2px 0}.setting-field{margin-bottom:16px}.setting-field label{display:block;font-size:9px;font-weight:800;margin-bottom:6px}.setting-field input,.setting-field select{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px;font-size:10px;background:white}.setting-check{display:flex!important;align-items:center;gap:7px}.setting-check input{width:auto}.step-actions{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:15px}.step-actions button{flex:1;border:1px solid var(--line);background:white;border-radius:7px;padding:8px;font-size:9px;cursor:pointer}.step-actions .danger{color:#a34d3d}.saved-section{margin-top:35px;border-top:1px solid var(--line);padding-top:18px}.saved-section>div:first-child{display:flex;justify-content:space-between}.saved-section h3{font-size:11px}.saved-section button{border:0;background:none;cursor:pointer}.saved-flow{padding:9px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;cursor:pointer}.saved-flow strong{display:block;font-size:9px}.saved-flow small{font-size:8px;color:#909a94}.mermaid-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:22px;height:calc(100vh - 138px)}.code-panel,.diagram-panel{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.panel-head{height:58px;padding:12px 15px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.panel-head strong{display:block;font-size:11px}.panel-head small{font-size:8px;color:#89938f}.panel-head button{border:1px solid var(--line);background:white;border-radius:6px;font-size:9px;padding:5px 9px;cursor:pointer}.code-panel textarea{flex:1;border:0;resize:none;outline:0;padding:18px;background:#17231e;color:#cce8d9;font:11px/1.8 "Roboto Mono",monospace}.code-help{padding:10px 15px;font-size:8px;background:#f5f7f4}.mermaid-output{flex:1;display:grid;place-items:center;padding:20px;overflow:auto}.mermaid-output svg{max-width:100%;height:auto}.diagram-error{margin:10px;padding:10px;background:#fae5e0;color:#943e30;font-size:9px}.template-modal,.run-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center}.template-modal[hidden],.run-modal[hidden]{display:none}.template-backdrop{position:absolute;inset:0;background:rgba(14,29,23,.65);backdrop-filter:blur(5px)}.template-modal>section,.run-modal>section{position:relative;background:white;border-radius:16px;width:min(700px,92vw);padding:30px;max-height:88vh;overflow:auto}.modal-x{position:absolute;right:15px;top:12px;border:0;background:#edf1ed;width:30px;height:30px;border-radius:50%;cursor:pointer}.template-modal h2,.run-modal h2{font:700 25px Manrope;margin:8px 0}.template-modal section>p{color:#79847e;font-size:11px}.flow-templates{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}.flow-template{border:1px solid var(--line);background:#fafbf9;border-radius:10px;padding:16px;text-align:left;cursor:pointer}.flow-template:hover{border-color:var(--green)}.flow-template h3{font-size:12px;margin:0 0 5px}.flow-template p{font-size:9px;color:#7f8984}.flow-template span{font-size:8px;color:var(--green)}.run-drop{border:2px dashed #b9c9c0;background:#f6f9f6;border-radius:12px;text-align:center;padding:45px}.run-drop>span{font-size:28px;color:var(--green)}.run-drop h3{margin-bottom:3px}.run-drop p{font-size:10px;color:#7f8984;margin-bottom:18px}.run-step{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:12px}.run-step i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e5ebe7;font-style:normal;font-size:9px}.run-step.active i{background:var(--green);color:white}.run-step.done i{background:#d9ecdf;color:var(--green)}.run-step strong{font-size:10px}.run-step small{margin-left:auto;font-size:8px;color:#86918b}
@media(max-width:1050px){.flow-layout{grid-template-columns:220px 1fr}.step-settings{position:fixed;right:0;top:78px;bottom:0;width:290px;z-index:10;box-shadow:-10px 0 30px rgba(0,0,0,.1);display:none}.step-settings.open{display:block}.mermaid-grid{grid-template-columns:1fr;height:auto}.code-panel,.diagram-panel{min-height:500px}}
@media(max-width:700px){.flow-body{height:auto;overflow:auto}.site-header .secondary-button,.flow-name{display:none}.flow-layout{height:auto;display:block}.tool-palette{height:auto}.palette-tools{grid-template-columns:repeat(2,1fr)}.flow-main{min-height:700px}.mermaid-grid{padding:10px}.flow-templates{grid-template-columns:1fr}}
.flow-health{display:flex;align-items:center;gap:6px;background:#e5e9e6;border-radius:20px;padding:6px 10px;font-size:8px;font-weight:700;color:#637068}.flow-health i{width:7px;height:7px;border-radius:50%;background:#99a49e}.flow-health.valid{background:#dceee5;color:var(--green)}.flow-health.valid i{background:#2a9168}.flow-health.warning{background:#f7ead2;color:#8d6722}.flow-health.warning i{background:#d39a32}.flow-step{transition:.18s transform,.18s opacity,.18s border}.flow-step[draggable=true]{cursor:grab}.flow-step.dragging{opacity:.35;transform:scale(.98)}.flow-step.drag-over{border-color:#2a9168;transform:translateY(4px)}.flow-step:before{content:'⠿';color:#a3aea8;position:absolute;left:-21px;font-size:14px}.compatibility{font-size:7px!important;font-weight:700!important}.compatibility.local{color:#26835f!important}.compatibility.external{color:#a66c27!important}.run-validation{font-size:9px;border-radius:8px;padding:9px 11px;margin:10px 0 14px;background:#e9f3ed;color:#35634f}.run-validation.warning{background:#f9ebd4;color:#835b1d}.run-download{display:block;margin:20px auto 0}.run-drop.drag-over{background:#e4f1e9;border-color:var(--green)}.setting-help{font-size:8px;color:#8a948f;line-height:1.5;margin:-8px 0 15px}.saved-flow{position:relative}.saved-flow button{position:absolute;right:5px;top:7px;color:#a55142}.workflow-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 18px}.workflow-meta div{background:#f3f6f3;border-radius:7px;padding:8px}.workflow-meta b{display:block;font:800 15px Manrope;color:var(--green)}.workflow-meta span{font-size:7px;color:#7c8881}