.composio-dialog {
  color: var(--text, #ece8df);
  background: #0d0d12;
  border: 1px solid #3a3529;
  border-radius: 22px;
  box-shadow: 0 28px 100px #000b;
  padding: 0;
  width: min(960px, calc(100vw - 24px));
  max-width: none;
  max-height: min(88dvh, 860px);
  overflow: hidden;
}

.composio-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.composio-panel { display: flex; flex-direction: column; max-height: min(88dvh, 860px); }
.composio-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 26px 28px 18px; border-bottom: 1px solid #292832; }
.composio-header h2 { margin: 4px 0 6px; font-size: clamp(1.3rem, 3vw, 1.7rem); letter-spacing: -.02em; }
.composio-eyebrow { margin: 0; color: #d4af5f; letter-spacing: .14em; font-size: .68rem; font-weight: 700; }
.composio-subtitle { margin: 0; color: #a9a49a; font-size: .92rem; }
.composio-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #35343d; border-radius: 12px; color: #e6e1d7; font-size: 1.7rem; line-height: 1; }
.composio-close:hover, .composio-close:focus-visible { border-color: #d4af5f; outline: none; }
.composio-status { margin: 16px 28px 0; padding: 11px 14px; border-radius: 12px; border: 1px solid #3a3529; background: #17150f; color: #dfc780; font-size: .9rem; }
.composio-status[hidden] { display: none; }
.composio-status[data-kind="error"] { border-color: #663c35; color: #ff9d8d; background: #211312; }
.composio-status[data-kind="notice"] { border-color: #544831; color: #e1cb8f; background: #1c190f; }
.composio-controls { display: flex; gap: 10px; padding: 18px 28px 10px; }
.composio-search-label { flex: 1; min-width: 0; }
.composio-search, .composio-category, .composio-sort { width: 100%; height: 44px; border: 1px solid #34333d; border-radius: 12px; outline: 0; background: #15151c; color: #ece8df; padding: 0 13px; font: inherit; font-size: .92rem; }
.composio-search:focus, .composio-category:focus, .composio-sort:focus { border-color: #d4af5f; box-shadow: 0 0 0 3px #d4af5f20; }
.composio-category-label { width: min(210px, 22%); }
.composio-sort-label { width: min(190px, 20%); }
.composio-count { min-height: 18px; margin: 0; padding: 0 28px 10px; color: #908b82; font-size: .8rem; }
.composio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 28px 22px; overflow-y: auto; overscroll-behavior: contain; }
.composio-card { min-width: 0; min-height: 206px; display: flex; flex-direction: column; align-items: flex-start; padding: 15px; border: 1px solid #292832; border-radius: 16px; background: linear-gradient(155deg, #15151b, #101015); }
.composio-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0 28px 22px; color: #a09b91; font-size: .8rem; }
.composio-pagination[hidden] { display: none; }
.composio-pagination button { min-height: 36px; padding: 0 12px; border: 1px solid #35343d; border-radius: 10px; color: #e6e1d7; font-size: .8rem; }
.composio-pagination button:hover:not(:disabled), .composio-pagination button:focus-visible:not(:disabled) { border-color: #d4af5f; outline: none; }
.composio-pagination button:disabled { cursor: default; opacity: .4; }
.composio-card-top { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; }
.composio-mark { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border: 1px solid #d4af5f55; border-radius: 13px; background: #d4af5f16; color: #e3c475; font-size: .82rem; font-weight: 750; letter-spacing: .04em; }
.composio-mark-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.composio-mark-logo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 5px; border-radius: inherit; background: #fff; object-fit: contain; }
.composio-badge { overflow: hidden; max-width: 65%; padding: 5px 8px; border: 1px solid #37353d; border-radius: 999px; color: #a9a49a; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.composio-badge.is-connected { border-color: #466046; color: #acd0a3; background: #1b2a1b; }
.composio-card-title { margin: 14px 0 5px; color: #f0ece4; font-size: .98rem; font-weight: 650; }
.composio-card-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; margin: 0; color: #a09b91; font-size: .78rem; line-height: 1.45; }
.composio-card-category { margin: 9px 0 12px; color: #7d786f; font-size: .71rem; }
.composio-connect-button { width: 100%; min-height: 38px; margin-top: auto; border: 1px solid #bd9848; border-radius: 11px; background: #d4af5f; color: #17120a; font: inherit; font-size: .82rem; font-weight: 700; transition: background .15s, border-color .15s; }
.composio-connect-button:hover:not(:disabled), .composio-connect-button:focus-visible:not(:disabled) { border-color: #f1d58c; background: #e3c475; outline: 0; }
.composio-connect-button:disabled { cursor: default; border-color: #37353d; background: #1b1b22; color: #908b82; opacity: 1; }
.composio-connect-button.is-connected:disabled { border-color: #466046; background: #1b2a1b; color: #acd0a3; }
.composio-empty { margin: 0; padding: 30px 28px; color: #a09b91; text-align: center; }
.composio-footer { padding: 13px 28px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid #292832; color: #827d74; font-size: .75rem; text-align: center; }
.composio-toast { position: fixed; z-index: 200; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: min(92vw, 520px); padding: 12px 16px; transform: translateX(-50%); border: 1px solid #4d4534; border-radius: 13px; background: #232119; color: #e6d39e; box-shadow: 0 12px 36px #0009; text-align: center; font-size: .88rem; }
.composio-toast[hidden] { display: none; }
.composio-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.foot-btn[data-composio-apps-button] svg { flex: none; width: 19px; height: 19px; }

@media (max-width: 720px) {
  .composio-header { padding: 20px 18px 15px; }
  .composio-controls { padding: 15px 18px 10px; flex-direction: column; }
  .composio-category-label, .composio-sort-label { width: 100%; }
  .composio-status { margin: 14px 18px 0; }
  .composio-count { padding: 0 18px 9px; }
  .composio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0 18px 18px; }
  .composio-pagination { padding-right: 18px; padding-left: 18px; }
  .composio-card { min-height: 200px; padding: 12px; }
  .composio-footer { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 420px) {
  .composio-dialog { width: calc(100vw - 12px); max-height: 94dvh; border-radius: 18px; }
  .composio-panel { max-height: 94dvh; }
  .composio-grid { grid-template-columns: 1fr; }
  .composio-card { min-height: 178px; }
}