:root{--bg:#0b0d10;--panel:#17191d;--card:#24272c;--border:#353941;--muted:#9198a5;--text:#f4f6f8;--green:#24d16f;--purple:#7d70ff;--orange:#ff6b22}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}.app-shell{height:100%;position:relative;background:radial-gradient(circle at 55% 42%,rgba(43,48,58,.14),transparent 38%)}
.topbar{height:62px;background:#202124;border-bottom:1px solid #303237;display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;z-index:20}.brand-row,.header-actions{display:flex;align-items:center;gap:12px;font-size:13px}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#845cff,#5d49df);font-weight:800}.workspace,.slash{color:#a6abb3}.tag{font-size:9px;letter-spacing:.08em;color:#78dea6;background:#153524;border:1px solid #275e3e;border-radius:5px;padding:5px 7px}.saved{color:#9298a2;display:flex;align-items:center;gap:7px}.saved span,.live>span,.status-line span{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(36,209,111,.6)}button{font:inherit;color:inherit}.icon-button,.more-button{border:0;background:transparent;color:#abb0b8;cursor:pointer}.primary-small{background:#33363c;border:1px solid #464a52;padding:8px 14px;border-radius:7px;cursor:pointer}.primary-small span{color:var(--green)}
.tabs{height:49px;position:absolute;z-index:18;top:62px;left:0;right:0;background:#15171a;border-bottom:1px solid #2b2e33;display:flex;justify-content:center;gap:5px}.tab{position:relative;border:0;background:transparent;color:#969ca6;padding:0 18px;font-size:12px;font-weight:600;cursor:pointer}.tab.active{color:#fff}.tab.active:after{content:"";position:absolute;bottom:0;left:14px;right:14px;height:2px;background:var(--purple)}.count{background:#2c3036;border-radius:10px;padding:2px 6px;margin-left:4px}
.workspace-canvas{position:absolute;inset:111px 0 0;overflow:auto;background-color:#0c0e11;background-image:radial-gradient(#2b2f36 1px,transparent 1px);background-size:18px 18px}.canvas-world{width:1660px;height:760px;position:relative;transform-origin:0 0;transition:transform .2s}.connections{position:absolute;inset:0;width:1600px;height:760px;overflow:visible}.connections path{fill:none;stroke:#555b64;stroke-width:1.5;marker-end:url(#arrow)}.dashed-lines path{stroke-dasharray:5 5;opacity:.8}.flow-label h1{font-size:19px;margin:6px 0}.flow-label p{font-size:11px;color:var(--muted);margin:0}.eyebrow{font-size:9px;font-weight:700;color:#777f8b;letter-spacing:.13em}
.node{position:absolute;width:126px;text-align:center;z-index:3}.node-card{height:78px;border:1px solid var(--border);background:linear-gradient(145deg,#282b30,#22252a);border-radius:9px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 7px 18px rgba(0,0,0,.22);transition:.2s}.node:hover .node-card,.node:hover .round-card{border-color:#6f65d5;transform:translateY(-2px);box-shadow:0 8px 26px rgba(91,76,204,.18)}.node strong{display:block;font-size:11px;margin-top:9px;white-space:normal}.node small{display:block;color:#8b929d;font-size:9px;margin-top:4px}.icon{font-weight:700;font-size:28px}.icon.whatsapp{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2cc66d;color:#fff;font-size:25px}.icon.code{color:#f7ac53;font-size:24px}.icon.branch{color:#25d26f;font-size:35px}.icon.web,.icon.edit{color:#8176ff}.icon.ai{color:#bbb9ff}.icon.bot{font-size:36px}.icon.memory{font-size:27px}.icon.calendar{width:29px;height:29px;background:linear-gradient(#4285f4 0 30%,#fff 30%);color:#4285f4;font-size:12px;display:grid;place-items:center;border-radius:3px}.icon.clock{color:#e5e8ed}.port{position:absolute;width:11px;height:11px;background:#2b2e33;border:1px solid #555a62;border-radius:50%;top:50%;transform:translateY(-50%)}.port.in{left:-6px}.port.out{right:-6px}.port.two.top{top:38%}.port.two.bottom{top:64%}.pulse{position:absolute;left:-13px;top:33px;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(255,107,34,.08)}
.agent{width:170px}.agent .node-card{height:92px;justify-content:flex-start;padding:0 18px;gap:14px;text-align:left}.agent .node-card b{font-size:12px;display:block}.agent .node-card em{font-style:normal;color:var(--muted);font-size:9px}.agent-ports{display:flex;justify-content:space-around;font-size:8px;color:#8b929d;margin-top:7px}.mini{width:86px}.round-card{width:60px;height:60px;border-radius:50%;background:#292c31;border:1px solid var(--border);display:grid;place-items:center;margin:auto;transition:.2s}.mini strong{font-size:10px}.mini small{font-size:8px}.reminder-label{position:absolute;width:260px;border-top:1px solid #2f3339;padding-top:8px}
.toolbar{position:fixed;z-index:20;left:18px;bottom:19px;display:flex;align-items:center;background:#1c1f23;border:1px solid #333740;border-radius:8px;overflow:hidden;box-shadow:0 8px 22px #0008}.toolbar button{width:36px;height:35px;border:0;background:transparent;cursor:pointer;color:#c7cbd1}.toolbar button:hover{background:#2b2e34}.toolbar span{font-size:10px;color:#9198a2;width:45px;text-align:center}.run-panel{position:fixed;z-index:20;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;background:#1b1e22;border:1px solid #343840;border-radius:10px;padding:7px 8px 7px 14px;box-shadow:0 12px 30px #0009}.live{display:flex;align-items:center;gap:9px;min-width:195px}.live>span{width:9px;height:9px}.live b,.live small{display:block}.live b{font-size:10px}.live small{font-size:8px;color:#8e959f;margin-top:3px}.run-panel button{border:0;border-radius:7px;background:linear-gradient(135deg,#ff7229,#f25313);padding:11px 16px;font-weight:700;font-size:11px;cursor:pointer;box-shadow:0 4px 18px rgba(255,91,23,.25)}
.details{position:fixed;right:-340px;top:111px;bottom:0;width:320px;background:#191b1f;border-left:1px solid #34373e;padding:26px;z-index:25;box-shadow:-10px 0 35px #0008;transition:right .25s}.details.open{right:0}.details .close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:23px;color:#9299a4;cursor:pointer}.details h2{font-size:18px;margin:10px 0 18px}.status-line{display:flex;align-items:center;gap:9px;background:#192a20;border:1px solid #265036;color:#83dba6;border-radius:7px;padding:10px;font-size:10px}.detail-block{padding:17px 0;border-bottom:1px solid #30333a}.detail-block label,.detail-block strong{display:block}.detail-block label{font-size:9px;color:#858d98;margin-bottom:6px}.detail-block strong{font-size:11px}.details p{font-size:10px;line-height:1.6;color:#9299a4}.toast{position:fixed;z-index:40;top:128px;left:50%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:12px;padding:13px 17px;background:#24272c;border:1px solid #3b4048;border-radius:9px;box-shadow:0 15px 40px #000a;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast b,.toast small{display:block;font-size:10px}.toast small{color:#979da7;margin-top:4px}.spinner{width:20px;height:20px;border:2px solid #555;border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.node.running .node-card,.node.running .round-card{border-color:var(--purple);box-shadow:0 0 0 3px rgba(125,112,255,.12),0 0 25px rgba(125,112,255,.3)}.node.success .node-card:after,.node.success .round-card:after{content:"✓";position:absolute;right:-5px;top:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#08140d;font-size:10px;font-weight:900}.round-card{position:relative}
@media(max-width:760px){.workspace,.slash,.tag,.saved,.tabs{display:none}.topbar{height:58px}.workspace-canvas{top:58px}.brand-row strong{font-size:11px}.header-actions{gap:5px}.run-panel{left:auto;right:12px;transform:none}.run-panel .live{display:none}.details{top:58px;width:min(320px,90vw)}.toolbar{bottom:18px}.canvas-world{transform:scale(.82);transform-origin:0 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.spinner{animation:none}}