*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#f5f8fc;color:#172235}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;position:sticky;top:0;height:100vh;overflow:auto;background:linear-gradient(180deg,#0b1727,#10233a 60%,#0b1829);color:#dce8f6;padding:18px 14px;box-shadow:10px 0 35px #09152520}.brand-wrap{display:flex;gap:11px;align-items:center;padding:8px 10px 22px}.brand-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#25d366,#075e54);display:grid;place-items:center;font-weight:950;color:#fff;box-shadow:0 9px 20px #0004}.brand{font-size:20px;font-weight:900;color:#fff}.brand-wrap small{color:#8ea8c2}.nav-label{font-size:10px;letter-spacing:1.3px;color:#6e8ba9;font-weight:800;padding:14px 11px 6px}.sidebar a{display:flex;align-items:center;gap:10px;color:#c9d8e8;text-decoration:none;padding:10px 11px;border-radius:11px;margin:3px 0;font-size:14px}.sidebar a:hover{background:#ffffff10;color:#fff;transform:translateX(2px)}.sidebar a em{margin-left:auto;font-style:normal;font-size:9px;color:#72e2a5}.main{flex:1;min-width:0;padding:20px 25px;max-width:1800px}.topbar{height:58px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.page-kicker{font-size:10px;letter-spacing:1.4px;color:#8293a7;font-weight:900;margin-bottom:3px}.top-actions{display:flex;align-items:center;gap:8px;font-size:13px;color:#4e6075}.status-dot{width:8px;height:8px;border-radius:50%;background:#20b76a;box-shadow:0 0 0 4px #20b76a18}.profile{padding:8px 12px;border-radius:10px;background:#fff;border:1px solid #e2e9f2;color:#2c3d50;text-decoration:none}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 12px 35px #16243a10;border:1px solid #e8eef5}.card:hover{box-shadow:0 16px 42px #16243a15}.stat{font-size:31px;font-weight:950;margin-top:7px}.stat-title{font-size:13px;color:#74859a}.metric-icon{float:right;font-size:23px}.btn{display:inline-block;border:0;background:linear-gradient(135deg,#168f5a,#075e54);color:#fff;padding:10px 15px;border-radius:11px;text-decoration:none;cursor:pointer;font-weight:800;box-shadow:0 7px 16px #075e5422}.btn:hover{transform:translateY(-1px)}.btn.secondary{background:#eef3f8;color:#263548;box-shadow:none}.btn.danger{background:#b9382c}.btn.small{padding:7px 10px;font-size:12px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid .full{grid-column:1/-1}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d9e2ec;border-radius:10px;background:#fff;color:#182230;outline:none}input:focus,select:focus,textarea:focus{border-color:#0c8b59;box-shadow:0 0 0 3px #0c8b5915}textarea{min-height:105px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px;border-bottom:1px solid #edf1f5;text-align:left;font-size:13px;white-space:nowrap}.table th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#77899c}.alert{background:#fff4d6;color:#765c00;padding:12px;border-radius:11px;margin-bottom:15px;border:1px solid #f5df9e}.alert.success{background:#eaf9f0;color:#176a3b;border-color:#bfe8ce}.tag{display:inline-block;padding:4px 8px;background:#edf2f7;border-radius:999px;margin:2px}.badge{display:inline-block;padding:5px 8px;border-radius:999px;background:#edf3f9;font-size:11px;font-weight:800}.badge.ok{background:#e9f8ef;color:#167043}.badge.warn{background:#fff4d6;color:#785c00}.badge.bad{background:#fdeceb;color:#9c3029}.hero{padding:26px;background:linear-gradient(135deg,#082d2b,#0a604b);color:#fff;border-radius:22px;box-shadow:0 18px 45px #075e5430}.hero h1{margin:0 0 7px;font-size:28px}.hero p{margin:0;color:#d4eee4}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.step{padding:14px;border:1px solid #e3eaf2;border-radius:13px;background:#fff}.step .n{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#e9f8ef;color:#137044;font-weight:900;margin-bottom:8px}.code{background:#101a27;color:#d8f5e8;padding:15px;border-radius:12px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;white-space:pre-wrap}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#dff8eb,#eef3f9 55%,#dfe7f1)}.login-card{width:min(460px,92vw);background:#fff;padding:34px;border-radius:26px;box-shadow:0 25px 70px #16243a25}.login-card input{margin:7px 0}.logo3d{width:65px;height:65px;border-radius:20px;background:linear-gradient(145deg,#21a366,#075e54);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900;box-shadow:7px 7px 15px #0002}.login-card .brand{font-weight:900;font-size:22px;margin:10px 0;color:#172235}.muted{color:#718096}.chart{height:180px;display:flex;align-items:end;gap:7px}.bar{flex:1;background:linear-gradient(#1aa66a,#075e54);border-radius:7px 7px 0 0;min-height:4px}.guide{border-left:4px solid #16a267;padding:10px 13px;background:#f2fbf6;border-radius:8px}.checklist{list-style:none;padding:0;margin:0}.checklist li{padding:10px 0;border-bottom:1px solid #edf1f5}.checklist li:last-child{border:0}.check{color:#15945b;font-weight:900;margin-right:7px}@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}.sidebar{width:235px}}@media(max-width:720px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto}.main{padding:14px}.grid,.grid-3,.form-grid,.steps{grid-template-columns:1fr}.sidebar a{display:inline-flex;width:48%}.topbar{height:auto;gap:12px}.top-actions{display:none}}

.perm-group{border:1px solid #e3eaf2;border-radius:13px;padding:12px;margin:9px 0;background:#fbfcfe}.perm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.perm-grid label{font-size:12px;color:#4d6075}.perm-grid input{width:auto}@media(max-width:900px){.perm-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.perm-grid{grid-template-columns:1fr}}

.builder-layout,.chat-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}.builder-canvas,.chatbot-canvas{min-height:620px}.palette,.chatbot-palette{position:sticky;top:15px;height:max-content}.drop-canvas{min-height:510px;border:2px dashed #d6e2ee;border-radius:16px;padding:15px;background:#fbfdff}.drop-hint{display:grid;place-items:center;min-height:450px;color:#8aa0b5}.canvas-block{background:#fff;border:1px solid #dce6ef;border-radius:12px;padding:12px;margin:9px 0;box-shadow:0 7px 18px #10233a10}.canvas-block textarea,.canvas-block input{margin-top:8px}.remove,.node-del{float:right;border:0;background:#fdeceb;color:#9c3029;border-radius:7px;cursor:pointer}.drag-block,.node-palette{padding:12px;margin:8px 0;border:1px solid #dce6ef;border-radius:10px;background:#fff;cursor:grab}.studio-tabs{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:#f3f7fb;margin-bottom:15px}.chatbot-canvas{position:relative;overflow:auto;min-height:650px;background-color:#fbfdff;background-image:radial-gradient(#d9e4ef 1px,transparent 1px);background-size:20px 20px}.canvas-title{position:sticky;top:0;z-index:3;background:#ffffffea;padding:10px;border-bottom:1px solid #e5edf5}.flow-node{position:absolute;width:180px;min-height:80px;background:#fff;border:1px solid #d6e3ee;border-radius:14px;padding:10px;box-shadow:0 10px 24px #10233a15;cursor:move}.flow-node .node-type{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:#0b8b58;font-weight:900;margin-bottom:4px}.flow-node b{text-transform:capitalize}.flow-node .handle{width:11px;height:11px;border-radius:50%;background:#168f5a;position:absolute;right:-6px;top:50%;box-shadow:0 0 0 3px #fff}.flow-node .node-del{position:absolute;right:7px;top:7px}.profile{color:#2c3d50}.guide{border-left:4px solid #16a267;padding:10px 13px;background:#f2fbf6;border-radius:8px}
@media(max-width:900px){.builder-layout,.chat-layout{grid-template-columns:1fr}.palette,.chatbot-palette{position:relative}}
.flow-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:15px}.flow-head h1{margin:0 0 5px;font-size:27px}.flow-meta{margin-bottom:15px}.builder-v6{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:15px}.flow-workspace{padding:10px;overflow:hidden}.workspace-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:4px 4px 10px}.connect-help{margin-left:auto;font-size:12px;color:#73869a;background:#f3f7fb;padding:8px 10px;border-radius:9px}.flow-canvas-v6{position:relative;height:720px;min-width:1150px;overflow:auto;background-color:#fbfdff;background-image:radial-gradient(#d5e2ef 1px,transparent 1px);background-size:20px 20px;border:1px solid #dfe8f1;border-radius:14px}.flow-canvas-v6 svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.edge-path{fill:none;stroke:#159b59;stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 2px 2px #0b7a4218)}.edge-label{font:700 11px system-ui;fill:#527086;background:#fff}.canvas-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8ca0b3;font-weight:700}.flow-node-v6{position:absolute;width:205px;background:#fff;border:1px solid #d9e4ee;border-radius:13px;box-shadow:0 12px 28px #10233a18;cursor:move;z-index:2;overflow:visible}.flow-node-v6.selected{box-shadow:0 0 0 3px #0d8f5b25,0 14px 32px #10233a20}.flow-node-v6 .node-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid #edf1f5;background:#f8fbfd;border-radius:13px 13px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#0b8b58;font-weight:900}.node-menu{border:0;background:transparent;font-size:18px;color:#7b8da0;cursor:pointer}.flow-node-v6 .node-title{font-size:15px;font-weight:900;padding:9px 10px 3px;color:#17263b}.flow-node-v6 .node-body{font-size:12px;color:#53677b;padding:5px 10px 10px;min-height:36px}.flow-node-v6 .node-option{border:1px solid #d8e5ef;padding:6px 8px;border-radius:7px;margin:5px 0;color:#1766c0;background:#fbfdff;text-align:center;font-weight:700}.flow-node-v6.start{border-color:#8ddab1}.flow-node-v6.start .node-head{color:#13834e;background:#ecfbf3}.flow-node-v6.message{border-color:#e4cf7e}.flow-node-v6.message .node-head{background:#fff9e8;color:#9a6a00}.flow-node-v6.buttons{border-color:#c4b2f5}.flow-node-v6.buttons .node-head{background:#f6f0ff;color:#6d3dd0}.flow-node-v6.question{border-color:#9ec9f6}.flow-node-v6.question .node-head{background:#edf7ff;color:#1d68b8}.flow-node-v6.condition{border-color:#f2a6bd}.flow-node-v6.condition .node-head{background:#fff0f4;color:#b53061}.flow-node-v6.delay{border-color:#cbb2f3}.flow-node-v6.delay .node-head{background:#f6f0ff;color:#7040c7}.flow-node-v6.api{border-color:#a8c8f0}.flow-node-v6.api .node-head{background:#edf6ff;color:#1f67b5}.flow-node-v6.set_variable{border-color:#f4bd86}.flow-node-v6.set_variable .node-head{background:#fff5e9;color:#b76100}.flow-node-v6.end{border-color:#f09ba3}.flow-node-v6.end .node-head{background:#fff0f1;color:#b42f39}.port-in,.port-out{display:block;width:13px;height:13px;border-radius:50%;background:#14985a;border:3px solid #fff;box-shadow:0 0 0 1px #14985a;cursor:crosshair}.port-in{position:absolute;left:-7px;top:50%}.ports-out{padding:0 8px 8px}.out-row{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:20px;font-size:10px;color:#667a8f}.out-row .port-out{flex:none}.flow-side{min-width:0}.side-tabs{display:flex;justify-content:space-around;padding-bottom:10px;border-bottom:1px solid #e7edf3;margin-bottom:10px}.side-tabs b{color:#0b8b58;border-bottom:2px solid #0b8b58;padding-bottom:8px}.node-group h4{font-size:10px;letter-spacing:1px;color:#8496a9;margin:15px 0 7px}.palette-v6{padding:10px 11px;margin:7px 0;border:1px solid #dce6ef;border-radius:10px;background:#fff;cursor:grab;font-weight:800;font-size:13px}.palette-v6:hover{border-color:#0a9a60;transform:translateX(2px)}.palette-v6 small{display:block;color:#8a9bae;font-weight:500;margin-top:3px}.editor-card label{display:block;font-size:11px;color:#74869a;font-weight:800;margin:9px 0 4px}.editor-card textarea{min-height:90px}.btn-row{display:grid;grid-template-columns:1.5fr 1fr;gap:5px;margin:5px 0}.sim-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}.phone-preview{max-width:850px;padding:0;overflow:hidden;background:#eaf1e8}.phone-head{padding:14px 18px;background:#075e54;color:#fff;font-weight:800;display:flex;justify-content:space-between}.phone-head span{font-size:12px;opacity:.8}.chat-messages{height:560px;overflow:auto;padding:20px;background-image:linear-gradient(#eaf4e8,#f5f8f2)}.bubble{max-width:72%;padding:10px 12px;border-radius:10px;margin:8px 0;box-shadow:0 2px 8px #173c2112;white-space:pre-wrap}.bubble.inbound{margin-left:auto;background:#dcf8c6}.bubble.outbound{background:#fff}.bubble small{display:block;font-size:9px;color:#7f8e86;margin-top:5px}.sim-form{padding:12px;background:#f1f5f0}.sim-form input{margin:0}.alert.err{background:#fdeceb;color:#9b3029;border-color:#f3c1bc}@media(max-width:1100px){.builder-v6,.sim-grid{grid-template-columns:1fr}.flow-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.flow-canvas-v6{height:650px}}@media(max-width:720px){.flow-head{align-items:flex-start;flex-direction:column}.flow-side{grid-template-columns:1fr}.flow-canvas-v6{min-width:900px}}
/* V6.1 Advanced Flow Canvas improvements */
.flow-workspace{min-width:0}
.flow-canvas-v6{height:calc(100vh - 290px);min-height:650px;max-height:calc(100vh - 170px);overflow:auto;cursor:default;scrollbar-width:auto;scroll-behavior:smooth}
.canvas-stage{position:relative;min-width:100%;min-height:100%;width:900px;height:650px}
.canvas-stage svg{position:absolute;left:0;top:0;z-index:1;pointer-events:auto;overflow:visible}
.flow-node-v6{z-index:2}
.edge-path{pointer-events:stroke;stroke-width:4;cursor:pointer}
.edge-path:hover{stroke-width:6}
.edge-path.selected-edge{stroke:#e11d48;stroke-width:6;filter:drop-shadow(0 2px 4px #e11d4840)}
.pan-mode{cursor:grab}.pan-mode .flow-node-v6{cursor:default}.panning{cursor:grabbing!important}
#panBtn.active{background:#0b8b58;color:#fff;border-color:#0b8b58}
#disconnectEdge{border-color:#f0b5c0}
.simple-chatbot-card{border:1px solid #dbe6ef;background:linear-gradient(135deg,#fff,#f5fbff)}
.simple-rule{display:grid;grid-template-columns:1.1fr 1.8fr 120px 44px;gap:8px;align-items:center;margin:8px 0}
.simple-rule input,.simple-rule select{margin:0}.icon-btn{border:1px solid #dbe4ec;background:#fff;border-radius:9px;padding:8px;cursor:pointer}.icon-btn:hover{border-color:#e11d48;color:#e11d48}
@media(max-width:1100px){.flow-canvas-v6{height:650px;max-height:none}.simple-rule{grid-template-columns:1fr}}

/* V6.2 large canvas + reliable node adding */
.flow-workspace{min-width:0;overflow:visible}
.flow-canvas-v6{width:100%;min-width:0;height:calc(100vh - 290px);min-height:650px;max-height:none;overflow:auto!important;overscroll-behavior:contain;position:relative;isolation:isolate}
.canvas-stage{position:relative;width:4200px;min-width:4200px;height:2800px;min-height:2800px}
.palette-main{display:flex;align-items:center;justify-content:space-between;gap:8px}
.palette-add{width:30px;height:30px;border:1px solid #cfe0ee;border-radius:8px;background:#f7fbff;color:#087d52;font-size:20px;line-height:1;cursor:pointer;font-weight:900;flex:0 0 auto}
.palette-add:hover{background:#e9f8f1;border-color:#0a9a60;transform:scale(1.05)}
.palette-v6{user-select:none}
.flow-canvas-v6::-webkit-scrollbar{width:14px;height:14px}
.flow-canvas-v6::-webkit-scrollbar-thumb{background:#9db1c4;border-radius:10px;border:3px solid #fbfdff}
.flow-canvas-v6::-webkit-scrollbar-track{background:#edf3f8}
@media(max-width:1100px){.flow-canvas-v6{height:650px;max-height:none}}