/* App connections reuse TasOn typography, colors and composer surfaces. */
body { margin:0; min-height:0; background:#f8f9fb; color:var(--ink); }
* { box-sizing:border-box; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.55; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.connections-page { padding:0 0 24px; }
.connections-page .top-flow { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:12px 16px; border:1px solid var(--line-soft); border-radius:14px; background:#f8f9fb; margin-bottom:16px; gap:12px; flex-wrap:wrap; }
.connections-content { padding:24px 28px; }
.connections-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 0 24px; }
.connections-heading .composer-title { margin:0; font-size:26px; line-height:1.4; font-weight:900; }
.connections-heading .composer-sub { font-size:14px; }
.connections-count { flex:none; color:var(--primary); background:var(--primary-soft); padding:8px 12px; border-radius:8px; font-size:14px; font-weight:700; }
.connections-eyebrow { font-size:13px; color:var(--primary); font-weight:700; }
.connections-journey { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:14px; background:#f7f9fc; border:1px solid #dbe3ee; border-radius:14px; padding:18px; margin-bottom:24px; }
.connections-journey div { display:grid; gap:5px; }
.connections-journey b { color:var(--primary); font-size:13px; }
.connections-journey strong { font-size:15px; font-weight:750; }
.connections-journey small { font-size:13px; color:var(--muted); }
.connections-journey>span { color:#9aa4b1; }
.connections-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.connections-tabs { display:flex; gap:6px; }
.connections-tabs button { background:none; border:0; border-bottom:2px solid transparent; padding:12px; color:var(--muted); font-weight:700; font-size:15px; }
.connections-tabs button[aria-pressed=true] { color:var(--primary); border-color:var(--primary); }
.connections-search { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-input); padding:10px 14px; background:white; color:#667891; }
.connections-search input { border:0; background:transparent; width:245px; font-size:14px; color:var(--ink); outline-offset:6px; }
.connections-search input::placeholder { color:var(--muted); }
.connections-categories { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 24px; }
.connections-categories button { border:1px solid var(--line-soft); border-radius:8px; background:#fff; padding:8px 12px; font-size:14px; color:#596375; }
.connections-categories button[aria-pressed=true] { background:var(--primary-soft); color:var(--primary); border-color:#b9dec7; font-weight:700; }
.connections-section-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; }
.connections-section-title h2 { font-size:18px; font-weight:750; margin:0; }
.connections-section-title span { color:var(--muted); font-size:14px; }
.connector-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.connector-card { background:white; border:1px solid var(--line-soft); border-radius:var(--radius-panel); padding:20px; display:flex; flex-direction:column; min-width:0; }
.connector-card:hover { border-color:#aac8b5; }
.connector-top { display:flex; align-items:center; gap:12px; min-height:52px; }
.connector-icon { width:48px; height:48px; flex:none; display:grid; place-items:center; border:1px solid var(--line-soft); border-radius:12px; background:#fff; overflow:hidden; }
.connector-icon img { display:block; width:32px; height:32px; object-fit:contain; }
.connector-icon.is-wordmark { background:#242b3c; border-color:#242b3c; }
.connector-icon.is-wordmark img { width:42px; height:auto; }
.connector-top h3 { font-size:17px; line-height:1.35; font-weight:750; margin:0 0 4px; overflow-wrap:anywhere; }
.connector-top small { color:var(--muted); font-size:13px; }
.connector-card p { color:#596375; font-size:14px; line-height:1.65; margin:18px 0 14px; flex:1; }
.connector-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.connector-tags span { font-size:12px; color:#596375; background:#f5f6f8; border-radius:5px; padding:4px 7px; }
.connector-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; padding-top:14px; border-top:1px solid var(--line-soft); }
.connector-state { font-size:13px; color:var(--muted); }
.connector-state.is-connected { color:var(--primary); }
.connector-bottom button,.connections-custom button { background:#fff; border:1px solid #d6e1d9; border-radius:8px; padding:8px 12px; min-height:36px; font-size:14px; font-weight:700; color:var(--primary); }
.connections-custom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; border:1px solid var(--line-soft); background:#f7f9fc; border-radius:14px; margin:24px 0; }
.connections-custom strong { font-size:16px; }
.connections-custom p { font-size:14px; color:var(--muted); margin:8px 0 0; line-height:1.6; }
.connections-custom button { flex:none; }
.connections-footnote { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:0; }
.connector-dialog { border:1px solid #dfe7e1; border-radius:18px; padding:30px; width:min(540px,calc(100% - 36px)); max-height:90vh; color:#252d27; box-shadow:0 24px 90px #18352129; }.connector-dialog::backdrop { background:#172c2445; }.dialog-close { position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:25px; color:#8a958e; }.connector-dialog h2 { margin:14px 0; font-size:24px; }.connector-dialog p { font-size:14px; color:#737f76; line-height:1.65; }.connector-dialog h3 { font-size:14px; margin:24px 0 10px; }.connector-dialog ul { padding-left:20px; font-size:14px; line-height:1.9; color:#52665a; }.connection-primary { background:#107543; border:1px solid #107543; color:#fff; padding:11px 16px; border-radius:8px; font-weight:700; font-size:14px; }.connection-secondary { background:#fff; border:1px solid #ddd; color:#69796f; padding:10px 14px; border-radius:8px; font-size:14px; }.dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }.dialog-note { font-size:14px!important; background:#f4f7f5; padding:12px; border-radius:8px; }.connector-dialog details { font-size:14px; color:#7b8980; margin-top:18px; }.connector-dialog code { display:block; padding:5px 0; color:#517861; overflow-wrap:anywhere; }.field-label { display:grid; gap:8px; font-size:14px; margin:20px 0; }.field-label input { width:100%; border:1px solid #d7e2da; border-radius:8px; padding:12px; font-size:14px; }.connection-preview { margin:25px 0; border:1px solid #b9d8c5; background:white; padding:24px; border-radius:14px; }.connection-preview[hidden] { display:none; }.preview-top { display:flex; align-items:center; justify-content:space-between; }.preview-top h2 { font-size:18px; margin:8px 0; }.preview-top button { font-size:22px; background:none; border:0; color:#8a928d; }.connection-preview>p { padding:14px; border-radius:8px; background:#f1f7f3; font-size:14px; }.connection-preview ol { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.connection-preview li { padding:14px; border:1px solid #e0e7e2; border-radius:8px; font-size:14px; color:#a2aaa5; }.connection-preview li.active { color:#167342; outline:2px solid #299253; outline-offset:-2px; }.connection-preview li.done { color:#286c44; background:#f2f7f4; }#preview-result { color:#526b5b; font-size:14px; line-height:1.8; }.connections-notice { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:12px 20px; border-radius:10px; color:white; background:#195937; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s; }.connections-notice.visible { opacity:1; }.catalog-empty { padding:40px; text-align:center; color:#869187; grid-column:1/-1; }

@media(max-width:940px) { .connector-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .connections-journey { gap:8px; } }
@media(max-width:700px) {
 .connections-content { padding:22px 20px; }
 .connections-heading { align-items:flex-start; gap:12px; }
 .connections-heading .composer-title { font-size:26px; }
 .connections-journey { grid-template-columns:1fr 1fr; gap:16px; }
 .connections-journey>span { display:none; }
 .connections-toolbar { align-items:stretch; flex-direction:column; }
 .connections-search input { width:100%; }
 .connector-card { padding:16px; }
 .connections-custom { flex-direction:column; align-items:flex-start; }
}
@media(max-width:540px) { .connector-grid { grid-template-columns:1fr; } .connections-heading { flex-wrap:wrap; } .connection-preview ol { grid-template-columns:1fr; } }