.studio-template-thumbnail{width:100%;height:85px;object-fit:cover;border-radius:6px;margin-bottom:8px}.studio-template-format{display:inline-block;background:#20424c;color:#79d8d0;font-size:10px;padding:3px 6px;border-radius:5px;margin-top:6px}.channel-template-list-item p{font-size:11px;color:#94aebd;max-height:45px;overflow:hidden;margin-top:7px}
.studio-workbench{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;border:1px solid #304554;border-radius:14px;overflow:hidden;margin-top:14px;background:#0b131b}
.studio-graph-toolbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#15232d;color:#b6cbd6;font-size:12px}.studio-graph-toolbar>div{display:flex;gap:5px;flex-shrink:0}
.studio-graph-toolbar button,.studio-section-title button,.studio-variable-bar button,.studio-inspector header button{border:1px solid #36505e;background:#1a303b;color:#cbe9ee;border-radius:7px;padding:7px 10px;cursor:pointer}
.studio-connection-status{grid-column:1/-1;margin:0!important;padding:8px 16px;color:#60d8d1;font-size:12px;background:#10212a;min-height:32px}
.channel-studio .channel-node-canvas{display:block;min-height:650px;height:72vh;max-height:900px;overflow:auto;padding:0;border:0;border-radius:0;background-color:#0b141c;background-image:radial-gradient(#2a3b47 1px,transparent 1px);background-size:22px 22px;position:relative}
.studio-graph-scroll{position:relative}.studio-graph-stage{position:relative;transform-origin:0 0}.studio-wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.studio-wires path{fill:none;stroke:#49cbc4;stroke-width:2.5;opacity:.8}
.studio-node{position:absolute;width:260px;padding:0 0 10px;border:1px solid #385461;border-radius:12px;background:#17242e;box-shadow:0 10px 25px #0005;color:#d9e9ef}.studio-node.selected{border:2px solid #38d4ca;box-shadow:0 0 0 4px #28cfc21c,0 10px 25px #0005}
.studio-node header{display:flex;align-items:center;gap:8px;padding:12px;background:#1d333e;border-radius:11px 11px 0 0;cursor:grab;touch-action:none}.studio-node header span{font-size:10px;color:#5de2d8;font-weight:700}.studio-node header strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.studio-node header button{background:transparent;border:0;color:#b8d8df;cursor:pointer;font-size:19px}
.studio-node-summary{padding:14px;font-size:12px;color:#acbecb;max-height:85px;overflow:hidden;white-space:pre-line}.studio-output-row{display:flex;align-items:center;justify-content:space-between;min-height:34px;padding:4px 8px 4px 14px;border-top:1px solid #2b3d48;font-size:12px}.studio-output-row span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:220px}
.studio-output-port,.studio-input-port{border:2px solid #9cf3eb;background:#163d44;color:#67dfd3;border-radius:50%;width:20px;height:20px;padding:0;line-height:14px;font-size:12px;cursor:crosshair;flex-shrink:0}.studio-input-port{position:absolute;left:-11px;top:19px}.studio-output-port{margin-right:-19px}.studio-output-port.pending{background:#fff;color:#182c36;box-shadow:0 0 0 6px #43e2d65c}.studio-output-port:focus-visible,.studio-input-port:focus-visible{outline:3px solid #ffc778;outline-offset:4px}
.studio-empty{padding:100px 40px;color:#8caab8;width:540px;text-align:center}.studio-empty>i{font-size:44px;color:#43bfb6}.studio-empty h3{color:#d8eaee}
.studio-inspector{padding:18px;border-left:1px solid #2b4251;max-height:72vh;overflow:auto;background:#15212b}.studio-inspector header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.studio-inspector header small{font-size:10px;letter-spacing:1.3px;color:#5cdbd0}.studio-inspector h3{margin:4px 0!important;color:#e1eff5}.studio-inspector h4{color:#73d7d0;margin:18px 0 10px}.studio-field{display:flex!important;flex-direction:column;gap:6px;margin:0 0 13px!important;color:#c0d3de;font-size:12px!important;font-weight:500!important}.studio-field>span{line-height:1.4}.studio-field input,.studio-field textarea,.studio-field select{width:100%;min-width:0;background:#0d1821!important;border:1px solid #354d5d!important;color:#e0eef5!important;padding:10px!important;border-radius:8px!important;line-height:1.5!important}.studio-field select option{background:#0d1821;color:#e0eef5}.studio-field select[multiple]{min-height:100px}.studio-field textarea{min-height:80px!important;resize:vertical}.studio-field input:focus,.studio-field textarea:focus,.studio-field select:focus{outline:1px solid #3bd5c8!important;border-color:#3bd5c8!important}
.studio-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 10px;color:#ceeaee;font-size:13px}.studio-section-title button{font-size:12px;padding:6px 9px}.studio-section-title button:disabled{opacity:.4;cursor:default}.studio-repeat-item{padding:12px;border:1px solid #334c5a;background:#10202a;border-radius:10px;margin-bottom:10px}.studio-repeat-item>strong{display:block;color:#60cfc9;margin-bottom:10px}.studio-repeat-item .studio-repeat-item{background:#162b36}.studio-remove{background:transparent;border:0;color:#f1a5a9;font-size:12px;cursor:pointer;padding:3px 0}.studio-media-field{margin-bottom:14px}.studio-media-field .studio-field{margin-bottom:6px!important}.studio-upload{display:inline-flex!important;position:relative;overflow:hidden;background:#1b4149;color:#85e6dc!important;padding:7px 12px;border:1px solid #34727a;border-radius:7px;font-size:12px!important;cursor:pointer}.studio-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.studio-upload.loading{opacity:.5;pointer-events:none}.studio-variable-bar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:14px}.studio-variable-bar small{color:#8faab9}.studio-variable-bar button{font-size:10px;padding:5px}
.channel-studio-main{min-width:0}.channel-studio .channel-template-grid{grid-template-columns:180px minmax(250px,1fr) 300px;align-items:start}.studio-phone-preview{position:sticky;top:16px;min-width:0}.studio-preview-label{text-align:center;letter-spacing:2px;font-size:10px;font-weight:700;color:#6bd8cf;margin-bottom:12px}.studio-phone{border:5px solid #334653;border-radius:28px;overflow:hidden;background:#e9f0f7;box-shadow:0 20px 40px #0005;color:#263b4c}.studio-phone header{display:flex;align-items:center;gap:9px;padding:21px 13px 14px;background:#fff;border-bottom:1px solid #d6e0e6}.studio-phone header>div{flex:1}.studio-phone header strong,.studio-phone header small{display:block}.studio-phone header small{font-size:10px;color:#638293}.studio-preview-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,#20c3c1,#407dfa);color:white;font-weight:700}.studio-phone-messages{min-height:350px;max-height:620px;overflow:auto;padding:16px 12px;background:linear-gradient(150deg,#e8eff5,#f5f8fb)}.studio-phone[data-preview-channel="telegram"] .studio-phone-messages{background:#d9e7da}.studio-phone[data-preview-channel="webchat"] .studio-phone-messages{background:#edf7f5}.studio-phone footer{display:flex;justify-content:space-between;background:white;color:#94a5b3;padding:16px 12px;font-size:12px}.studio-phone footer span{color:#21a999}.studio-phone-preview>p{font-size:11px;color:#809bac;text-align:center;margin:14px 10px!important;line-height:1.6}.studio-preview-bubble{padding:12px 14px;background:white;border-radius:14px 14px 14px 3px;box-shadow:0 2px 5px #0001;font-size:13px;line-height:1.6;color:#243c4c;white-space:normal;overflow-wrap:anywhere}.studio-preview-bubble.muted{color:#8b9ba6}.studio-preview-actions{display:flex;flex-direction:column;gap:4px;margin:7px 0}.studio-preview-actions>div{background:#fff;color:#167eac;border:1px solid #cfe1ea;border-radius:7px;padding:10px 12px;text-align:center;font-size:12px;overflow-wrap:anywhere}.studio-preview-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:10px;padding-bottom:8px}.studio-preview-cards article{flex:0 0 92%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px #0002;color:#234355;scroll-snap-align:start}.studio-preview-cards img,.studio-phone-messages>img,.studio-preview>img{width:100%;max-height:190px;object-fit:cover}.studio-preview-cards article>div:not(.studio-preview-media){padding:10px}.studio-preview-cards article strong{font-size:13px}.studio-preview-cards article p{font-size:12px;color:#617d8b;white-space:pre-line}.studio-preview-media{height:120px;background:linear-gradient(135deg,#cbdfe9,#eff6fa);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#63899d;font-size:12px}.studio-preview-media i{font-size:28px}.studio-preview-time{display:block;text-align:right;color:#87a0ae;font-size:9px;margin:6px}.studio-preview-cards.as-list{flex-direction:column}.studio-preview-cards.as-list article{flex:auto}.studio-preview{background:#dceaf0;border-radius:12px;padding:12px;margin-top:18px}.studio-inspector details{margin:14px 0;color:#8fcbd0}.studio-inspector summary{cursor:pointer;margin-bottom:10px}
.channel-manual{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding-top:16px}.channel-manual-menu{display:flex;flex-direction:column;gap:8px;align-self:start;position:sticky;top:10px}.channel-manual-menu button{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid #314655;background:#15232e;border-radius:10px;color:#b7cdd8;text-align:left;cursor:pointer;font-size:14px}.channel-manual-menu button[aria-selected="true"]{border-color:#31c7bc;color:#69e8dc;background:#14373b}.channel-manual-content{max-width:950px}.channel-manual-content h3{font-size:26px;color:#dcedf3;margin:8px 0 12px}.channel-manual-content .manual-lead{color:#9db8c8;font-size:15px;line-height:1.8}.manual-checklist{padding:16px 20px;border:1px solid #34505c;border-radius:12px;background:#132931;margin:20px 0;color:#b5d0dc}.manual-checklist strong{color:#66dbce}.manual-steps{list-style:none;padding:0;counter-reset:manual-step}.manual-steps>li{counter-increment:manual-step;position:relative;padding:18px 20px 18px 65px;margin-bottom:12px;background:#15232e;border:1px solid #2d4452;border-radius:12px;line-height:1.8;color:#b3c9d6}.manual-steps>li:before{content:counter(manual-step);position:absolute;left:18px;top:20px;width:28px;height:28px;border-radius:9px;background:#20525a;color:#7aece0;display:grid;place-items:center;font-weight:700}.manual-steps h4{margin:0 0 6px;color:#e4f0f6;font-size:15px}.manual-troubleshooting details{padding:13px 16px;border-bottom:1px solid #314553;color:#abc3d2;line-height:1.8}.manual-troubleshooting summary{cursor:pointer;color:#d0e3ed;font-weight:600}.manual-links{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.manual-links a,.manual-open-settings{display:inline-block;background:#1b4b52;color:#89f1e5;border:1px solid #338080;border-radius:8px;padding:10px 14px;cursor:pointer}.manual-footnote{font-size:12px;color:#89a5b5}
@media(max-width:1500px){.channel-studio .channel-template-grid{grid-template-columns:170px minmax(250px,1fr)}.studio-phone-preview{grid-column:2;position:static;max-width:340px;width:100%;justify-self:center}.studio-workbench{grid-template-columns:minmax(0,1fr) 300px}.channel-studio-grid{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:1100px){.channel-studio-grid{grid-template-columns:1fr}.channel-studio-sidebar{position:static}.channel-flow-list{max-height:180px;overflow:auto}.studio-workbench{grid-template-columns:minmax(0,1fr) 320px}}
@media(max-width:760px){.studio-workbench{display:block}.studio-inspector{max-height:none;border-left:0;border-top:1px solid #304554}.channel-studio .channel-node-canvas{height:420px;min-height:420px}.studio-graph-toolbar{flex-wrap:wrap}.channel-studio .channel-template-grid{grid-template-columns:1fr}.studio-phone-preview{grid-column:1}.channel-manual{grid-template-columns:1fr}.channel-manual-menu{position:static;display:grid;grid-template-columns:1fr 1fr}.channel-manual-menu button{padding:10px;font-size:12px}.manual-steps>li{padding-right:12px}.channel-studio-toolbar{flex-wrap:wrap}}
.channel-studio .channel-studio-grid{grid-template-columns:minmax(0,1fr)}
.channel-studio .channel-studio-sidebar{position:static;min-height:0;display:flex;align-items:center;gap:20px;padding:12px 16px}
.channel-studio .channel-studio-sidebar .workspace-section-heading{margin:0;flex-shrink:0;gap:16px}
.channel-studio .channel-flow-list{flex:1;min-width:0;max-height:none;overflow:visible}
.channel-studio .channel-flow-list .studio-field{margin:0!important}
@media(max-width:760px){.channel-studio .channel-studio-sidebar{align-items:stretch;flex-direction:column;gap:10px}}
