.integration-api-card { max-width: 860px; }
.integration-api-card h2 { margin: 0 0 8px; }
.integration-api-base { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid #d7e3e8; border-radius: 6px; background: #f7fbfc; }
.integration-api-base code { color: #166f89; font-weight: 700; }
.integration-api-client { margin-top: 14px; padding-top: 8px; border-top: 1px solid #e6ecee; }
.integration-api-client h3 { margin: 12px 0; color: #314850; }
.integration-api-grid { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.integration-api-client label { display: block; margin-bottom: 6px; font-weight: 700; }
.integration-api-client input { width: 100%; height: 40px; border: 1px solid #d5dee3; border-radius: 3px; padding: 0 10px; }
.integration-api-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0; color: #4d6570; }
.integration-api-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.integration-api-secret { margin-top: 12px; padding: 12px; border-left: 4px solid #1f9d55; background: #eefaf3; }
.integration-api-secret code { display: block; margin-top: 6px; word-break: break-all; }
.integration-api-add { margin-top: 18px; padding: 14px; border: 1px dashed #b7c9d1; border-radius: 6px; background: #f8fbfc; }
.integration-api-add h3 { margin: 0 0 8px; color: #314850; }
.integration-api-add p { margin: 0 0 12px; color: #4d6570; }