.integration-intro{padding-bottom:32px}.integration-layout{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:19px;margin:18px auto 80px}
.integration-sidebar,.integration-workspace,.integration-results{border:1px solid #42544e;border-radius:17px;background:#14211e;padding:20px}
.integration-sidebar h2{font-size:1.1rem;margin:4px 0 10px}.integration-sidebar p{font-size:.82rem;color:#c5d0c7}
.block-palette{display:grid;gap:9px}.palette-button{padding:12px;background:#20372f;color:#f4f9eb;border:1px solid #617e6c;border-radius:11px;display:flex;text-align:left;align-items:center;gap:12px;cursor:grab}
.palette-button:hover{background:#32473a}.palette-icon{width:40px;height:40px;display:grid;place-items:center;font-size:1.35rem;border:1px solid #648577;border-radius:9px;color:#e6fa96}.palette-button small{display:block;font-size:.65rem;color:#c7d2c5}
.integration-workspace{min-width:0}.integration-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px;margin-bottom:14px}
.integration-toolbar h2{margin:0;font-size:1.4rem;letter-spacing:-.04em}.integration-toolbar small{color:#b9c5b9}
.flow-scroll{overflow-x:auto;background:radial-gradient(circle at 38% 25%,#1d3930,#101e1c);border:1px solid #39594c;border-radius:13px}
.flow-board{position:relative;width:900px;height:550px;background-image:radial-gradient(#66836c66 1px,transparent 1px);background-size:21px 21px}
.flow-wires{position:absolute;inset:0;width:900px;height:550px;pointer-events:none}.flow-nodes{position:absolute;inset:0}
.flow-node{position:absolute;width:220px;min-height:110px;padding:12px;border-radius:12px;background:#263f34;color:#f6f8ef;border:2px solid #789486;box-shadow:0 10px 25px #0005}
.flow-node.selected,.flow-node:focus-visible{border-color:#d8f973}.flow-node-title{display:flex;align-items:center;gap:8px;font-size:.83rem}.flow-glyph{color:#d8f973;font-size:1.3rem}.flow-node p{font-size:.64rem;color:#cddacd;line-height:1.4;margin:9px 0}
.flow-remove{margin-left:auto;background:#15271e;color:#f7f9ef;border:1px solid #9ab3a4;border-radius:6px;width:30px;height:30px;font-size:1.1rem}.flow-drag{width:100%;text-align:left;color:#d8f973;border:0;border-top:1px solid #688579;background:transparent;font:.63rem ui-monospace,monospace;padding:9px 2px 0;cursor:grab;touch-action:none}
.flow-connections{display:flex;align-items:end;gap:9px;flex-wrap:wrap;margin-top:18px}.flow-connections label{display:flex;flex-direction:column;gap:5px;font-size:.72rem;color:#cbd8cc}.flow-connections select{max-width:220px;width:100%;background:#101e1a;color:#f4f8e9;border:1px solid #799181;padding:10px;border-radius:7px}
.flow-connections button,.flow-small{min-height:40px;padding:9px 12px;border-radius:7px;border:1px solid #6b8574;background:#293e33;color:#edf4e6;font-weight:700}
.flow-actions{display:flex;gap:9px;flex-wrap:wrap;margin:17px 0}.flow-feedback{font-size:.83rem;color:#d8f973;min-height:1.5em}.integration-results{margin-top:16px}.integration-results h3{margin:0}.flow-execution{margin:15px 0;padding:17px 20px 17px 38px;background:#081712;border-radius:9px;color:#cfe6cc;font:500 .77rem/1.8 ui-monospace,monospace;min-height:80px}.flow-execution li{margin:5px 0}
.integration-note{margin-top:14px;font-size:.8rem;color:#d0dec8}
@media(max-width:980px){.integration-layout{grid-template-columns:1fr}.block-palette{grid-template-columns:repeat(3,1fr)}.integration-sidebar{position:static}}
@media(max-width:520px){.block-palette{grid-template-columns:repeat(2,1fr)}.integration-sidebar,.integration-workspace{padding:12px}.flow-connections label{width:100%}.flow-connections select{max-width:100%}}
@media(prefers-reduced-motion:reduce){.flow-node,.flow-wires{transition:none}}
/* Prevent min-content columns from widening 320px phones. The canvas alone scrolls. */
@media(max-width:980px){.integration-layout{grid-template-columns:minmax(0,1fr)}.integration-sidebar,.integration-workspace{min-width:0}.palette-button{min-width:0}.palette-button span:last-child{min-width:0;overflow-wrap:anywhere}.palette-icon{flex:0 0 40px}}