.catalog-preview{--catalog-accent:var(--primary-color,#4f46e5);--catalog-ink:#172033;--catalog-muted:#64748b;--catalog-border:#dce4ee;--catalog-surface:#fff}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,168px);gap:15px}
.catalog-card{position:relative;aspect-ratio:1 / 1;min-height:0;min-width:0;border:1px solid var(--catalog-border);border-radius:16px;background:var(--catalog-surface);transition:border-color .18s,box-shadow .18s,transform .18s}
.catalog-card:hover,.catalog-card:has([aria-expanded=true]){border-color:var(--catalog-accent);box-shadow:0 8px 22px rgb(15 23 42 / 6%);transform:translateY(-2px)}
.catalog-trigger{position:absolute;inset:0;display:grid;grid-template-rows:16px 44px minmax(0,1fr) 16px;gap:3px;align-items:center;justify-items:center;width:100%;height:100%;min-height:0;padding:10px 12px;color:var(--catalog-ink);text-align:center;border-radius:16px;background:transparent;border:0;cursor:pointer;font:inherit}
.catalog-trigger,.catalog-trigger:hover{text-decoration:none}
.catalog-info-btn{position:absolute;top:6px;right:8px;z-index:2;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:8px;background:transparent;color:#94a3b8;cursor:pointer;transition:background-color .15s,color .15s}
.catalog-info-btn svg{width:16px;height:16px}
.catalog-info-btn:hover,.catalog-info-btn[aria-expanded=true]{background:#f1f5f9;color:var(--catalog-accent)}
.catalog-info-btn:focus-visible{outline:2px solid var(--catalog-accent);outline-offset:1px}
.dark .catalog-info-btn:hover,.dark .catalog-info-btn[aria-expanded=true]{background:#1e293b}
.catalog-trigger:focus-visible{outline:3px solid var(--catalog-accent);outline-offset:3px}
.catalog-card-top{height:16px;width:100%;display:flex;align-items:center;justify-content:space-between}
.catalog-info{width:16px;height:16px;color:#94a3b8;margin-left:auto}
.catalog-beta{font-size:10px;letter-spacing:.06em;color:#9a6700;background:#fff8df;border-radius:6px;padding:2px 6px;text-transform:uppercase;font-weight:600}
.catalog-logo{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden}
.catalog-logo>img{object-fit:contain;max-width:119px;max-height:100%}
.catalog-logo>span{max-height:100%;transform:scale(.85);transform-origin:center}
.catalog-fallback{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#f1f5f9;color:var(--catalog-accent)}
.catalog-fallback svg{width:26px;height:26px}
.catalog-logo>.app-catalog-icon,.catalog-logo>.catalog-fallback{width:44px;height:44px;max-height:none;flex:none;transform:none}
.app-catalog-icon svg{width:26px;height:26px;stroke-width:1.8}
.catalog-title{width:100%;font-size:15px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:0;max-height:4.05em;overflow-wrap:anywhere}
.catalog-status{display:inline-flex;align-items:center;gap:5px;margin-top:0;font-size:11px;line-height:1.4;color:var(--catalog-muted)}
.catalog-status svg{width:12px;height:12px}
.catalog-status.is-configured{color:#047857}
.catalog-popover{position:fixed;inset:auto;margin:0;width:min(360px,calc(100vw - 24px));max-height:min(540px,calc(100dvh - 32px));padding:20px;border:1px solid var(--catalog-border);border-radius:18px;color:var(--catalog-ink);background:var(--catalog-surface);box-shadow:0 20px 70px rgb(15 23 42 / 18%);overflow:auto;z-index:1000;font:inherit}
.catalog-popover:popover-open{display:block}
.catalog-popover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.catalog-popover-head h3{margin:3px 0 10px;font-size:18px;font-weight:650;line-height:1.3}
.catalog-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border:0;border-radius:8px;background:#f1f5f9;color:#64748b;cursor:pointer}
.catalog-close svg{width:16px;height:16px}
.catalog-description{font-size:14px;line-height:1.65;color:var(--catalog-muted);margin:0 0 16px}
.catalog-more{padding:12px 0;border-top:1px solid var(--catalog-border);font-size:13px;color:var(--catalog-muted)}
.catalog-more summary{font-weight:600;cursor:pointer;color:var(--catalog-ink)}
.catalog-more p{white-space:pre-line;line-height:1.7;margin:12px 0 0}
.catalog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:1px solid var(--catalog-border)}
.catalog-actions:empty{display:none}
.catalog-actions svg{width:14px;height:14px}
.catalog-notice{font-size:13px;color:#92400e;background:#fffbeb;padding:12px;border-radius:8px;margin:0 0 12px}
.dark .catalog-preview,.dark.catalog-preview{--catalog-ink:#e2e8f0;--catalog-muted:#94a3b8;--catalog-border:#334155;--catalog-surface:#0f172a}
.dark .catalog-status.is-configured{color:#6ee7b7}
.dark .catalog-fallback,.dark .catalog-close{background:#1e293b;color:#cbd5e1}
.catalog-preview-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;color:var(--catalog-muted);font-size:12px}
.catalog-preview-note a{color:var(--catalog-accent);text-decoration:underline;text-underline-offset:3px}
@media(min-width:1280px){.catalog-preview>div.grid{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:1279px){.catalog-preview aside{overflow:auto;padding:8px!important;display:flex;gap:6px;align-items:center}.catalog-preview aside>button{width:auto;flex-shrink:0}.catalog-preview aside>div.mt-4{display:none}.catalog-preview aside>div.mt-2{display:flex;gap:6px;margin:0}.catalog-preview aside .integration-category-filter{white-space:nowrap;width:auto;padding:10px!important}.catalog-preview aside .truncate{max-width:none}.catalog-preview aside .space-y-1>:not([hidden])~:not([hidden]){margin-top:0}}
@media(max-width:540px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-trigger{min-height:0;grid-template-rows:16px 44px minmax(0,1fr) 16px;padding:8px 9px}.catalog-logo>span{transform:scale(.81)}.catalog-title{font-size:13px}.catalog-popover{left:12px!important;top:auto!important;bottom:16px;max-height:70dvh}.catalog-preview-note{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.catalog-card{transition:none}.catalog-card:hover{transform:none}}

@media(max-width:360px){.catalog-info-btn{top:2px;right:3px}.catalog-trigger{grid-template-rows:14px 32px minmax(0,1fr) 14px;gap:2px;padding:6px 7px}.catalog-logo>.app-catalog-icon,.catalog-logo>.catalog-fallback{width:32px;height:32px;border-radius:9px}.app-catalog-icon svg,.catalog-fallback svg{width:22px;height:22px}.catalog-status{font-size:10px}}
