/* Three independent catalog columns, following the Affiliate Connections reference. */
#connections {max-width:1420px}
#connections>.page-heading {margin-bottom:18px}
.connections-intro {margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid #dfe4e4;color:#7a8381;font-size:16px}
.connection-columns {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
.connection-column {display:grid;gap:20px;min-width:0}
.connection-column>h2 {margin:4px 0 2px;text-align:center;font-size:15px;font-weight:500;color:#7b8381;line-height:1.5}
.connection-tile {position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:157px;padding:15px;border:1px solid #bfc7c4;border-radius:5px;background:#fff}
.connection-tile>.connection-card-logo {display:flex;flex-wrap:wrap;align-items:center;gap:9px;min-height:27px;padding:0;border-radius:0;background:none;color:#293c36;font-size:19px;line-height:1.25;letter-spacing:-.025em}
.connection-tile>.connection-card-logo img {width:auto;max-width:115px;height:29px}
.connection-tile .connection-logo-mark {width:27px;height:27px;flex-basis:27px;font-size:13px;border-radius:6px;background:#647b70}
.connection-tile>.connection-card-logo>span:not(.connection-logo-mark):not(.youtube-logo) {font-size:16px}
.connection-tile .youtube-logo {width:30px;height:22px;border-radius:5px;font-size:12px}
.connection-tile>p {margin:0;color:#818784;font-size:12px;line-height:1.5}
.connection-tile>footer {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:3px}
.connection-tile-state {font-size:11px;line-height:1.4;color:#858d88}
.connection-tile>footer>button {flex-shrink:0;min-width:68px;padding:5px 13px;border:1px solid #181f1b;border-radius:4px;background:#17221c;color:#fff;font:600 12px/1.4 Poppins,Arial,sans-serif;cursor:pointer}
.connection-tile.is-connected>footer>button {border-color:#2583dc;background:#3895ea}
.connection-tile.is-connected .connection-tile-state {color:#267337;background:#edf7ee;padding:4px 8px;border-radius:4px;font-weight:600}
.connection-tile.has-connection-error .connection-tile-state {color:#b13c32;font-weight:500;overflow-wrap:anywhere}
.connection-tile-state {min-width:0}
.connection-tile.is-planned {background:#ffffff70;border-color:#d2d8d5}
.connection-tile.is-planned>footer {justify-content:center}
.connection-tile.is-planned .connection-tile-state {color:#929996;font-size:13px;font-weight:600}
.connection-brand--google-analytics strong {color:#4285f4;font-weight:500}
.connection-brand--facebook-pixel strong,.connection-brand--facebook-export strong,.connection-brand--facebook-messenger strong {background:#3d639e;color:white;padding:6px;font-size:13px;letter-spacing:-.04em}
.connection-brand--vimeo strong {color:#00aeda;font-style:italic}
.connection-brand--linkedin strong {color:#155e8b}
.connection-brand--instagram strong {color:#b04387;font-style:italic}
.connection-brand--pinterest strong {color:#c92329;font-style:italic}
.connection-editors>header,.connection-editors>.connections-notice,.connection-editors>.connections-group>h4,.connection-editors>.connections-group>.connections-group-note {display:none}
.connection-editors,.connection-editors>.connections-group,.connection-editors .connections-grid {display:contents}
.connection-editors .connections-grid>.is-planned {display:none}
.connection-setup-dialog {box-sizing:border-box;width:min(600px,calc(100vw - 32px));max-height:calc(100dvh - 40px);margin:auto;padding:24px;border:1px solid #d4ddd4;border-radius:14px;background:#fff;color:#35443b;box-shadow:0 20px 80px #1c342940;font:14px/1.5 Poppins,Arial,sans-serif}
.connection-setup-dialog::backdrop {background:#1a2b2480}
.connection-dialog-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.connection-dialog-heading h2 {margin:0;font-size:22px;font-weight:600}
.connection-dialog-close {border:0;background:none;color:#758176;font:28px/1 Arial,sans-serif;cursor:pointer;padding:5px 8px}
.connections-panel .connection-setup-dialog>.connection-card {display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:0;border:0;border-radius:0;box-shadow:none;transform:none}
.connections-panel .connection-setup-dialog .connection-card>header {justify-content:flex-start}
.connections-panel .connection-setup-dialog .connection-card>p,.connections-panel .connection-setup-dialog .connection-card>small,.connections-panel .connection-setup-dialog .connection-card details {font-size:13px}
.connections-panel .connection-setup-dialog .openai-connection-controls,.connections-panel .connection-setup-dialog .youtube-connection-controls {display:flex;flex-direction:column;align-items:stretch;gap:16px}
.connections-panel .connection-setup-dialog .openai-key-field {min-width:0;flex-direction:column;align-items:stretch}
.connections-panel .connection-setup-dialog .connection-card input[type=password] {box-sizing:border-box;width:100%;max-width:none;min-height:40px}
.connections-panel .connection-setup-dialog .connection-card-actions {margin-left:0;gap:10px}
.connections-panel .connection-setup-dialog .connection-card button {min-height:36px;padding:7px 12px}
.connection-dialog-note {margin:18px 0 0;padding-top:15px;border-top:1px solid #e5e9e2;color:#7b847e;font-size:12px}
.connection-tile button:focus-visible,.connection-setup-dialog button:focus-visible {outline:2px solid #91be39;outline-offset:3px}
@media(max-width:1000px) {.connection-columns{gap:18px}.connection-tile{padding:12px}}
@media(max-width:760px) {.connection-columns{grid-template-columns:1fr}.connection-column{gap:14px}.connection-column>h2{text-align:left;margin-top:12px}.connection-tile{min-height:145px}.connections-intro{font-size:14px}.connection-setup-dialog{padding:20px}.connections-panel .connection-setup-dialog [data-youtube-preferences]{flex-direction:column;align-items:flex-start}}

/* Agent catalog stays inside Profile → Connections. All three tabs share one text alignment. */
body[data-workspace-role="agent"] #settings .affiliate-page-tabs>button {display:inline-flex;align-items:center;justify-content:center;line-height:1}
body[data-workspace-role="agent"] #settings .agent-connections-catalog {padding:24px}
body[data-workspace-role="agent"] .connection-brand--twitter strong {color:#12b7dc;font-style:italic}
@media(max-width:760px) {body[data-workspace-role="agent"] #settings .agent-connections-catalog {padding:16px}}