.integration-guide { margin: 24px 0; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.integration-guide h2, .integration-guide h3 { color: var(--ink); margin: 0 0 12px; }
.integration-guide h3 { font-size: 16px; }
.integration-guide p { margin: 8px 0 14px; }
.integration-guide ul { padding-left: 20px; }
.integration-guide li { margin-bottom: 8px; }
.integration-guide code { font: 11px/1.8 ui-monospace, Consolas, monospace; color: var(--accent-text); }
.integration-workflows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.integration-workflows article { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); min-width: 0; }
.integration-workflows article h3 { margin-top: 8px; }
.integration-guide details { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.integration-guide summary { cursor: pointer; color: var(--ink); }
.integration-table-wrap { overflow-x: auto; margin-top: 12px; }
.integration-guide table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.integration-guide th, .integration-guide td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.integration-guide td:first-child { min-width: 120px; }
.integration-guide .integration-completion { color: var(--accent-text); font-weight: 600; }
.integration-guide .integration-warning { color: var(--warning); }
.integration-flow-list { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 1100px) { .integration-workflows { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .integration-guide { padding: 16px; } .integration-guide th, .integration-guide td { padding: 8px; } }