.integration-directory{background:var(--soft)}.integration-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.integration-card{position:relative;padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff}.integration-order{position:absolute;top:28px;right:28px;color:#b0aabc;font-size:.72rem;font-weight:850;letter-spacing:.12em}.integration-card .platform-logo{margin-bottom:20px}.integration-card>small{display:block;color:var(--brand);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.integration-card h2{margin:6px 0 12px;font-size:1.7rem}.integration-card>p{min-height:58px;font-size:.9rem}.callback-preview{margin:22px 0;padding:14px;border-radius:13px;background:#f6f5fa}.callback-preview span{display:block;margin-bottom:4px;color:#888291;font-size:.62rem;font-weight:850;text-transform:uppercase}.callback-preview code,.callback-card code,.callback-list code{overflow-wrap:anywhere;color:#423b65;font-family:Cascadia Code,Consolas,monospace;font-size:.75rem}.integration-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.integration-meta span{padding:8px 12px;border:1px solid #ddd8ef;border-radius:999px;color:#5b5570;background:#fff;font-size:.75rem;font-weight:750}.integration-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:start}.setup-list{display:grid;gap:12px;margin:30px 0 0;padding:0;list-style:none}.setup-list li{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid var(--line);border-radius:15px}.setup-list li>span{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:10px;color:var(--violet);background:#eeebff;font-size:.68rem;font-weight:850}.setup-list p{margin:0;color:#4e4959}.callback-card{position:sticky;top:130px;padding:32px;border:1px solid color-mix(in srgb,var(--brand),white 68%);border-radius:25px;background:linear-gradient(150deg,#fff,#f8f7fd);box-shadow:var(--shadow)}.callback-card .platform-logo{margin-bottom:25px}.callback-card>small{display:block;color:var(--brand);font-size:.66rem;font-weight:850;text-transform:uppercase}.callback-card h2{margin:7px 0 18px;font-size:2rem}.callback-card>code{display:block;margin-bottom:20px;padding:15px;border-radius:12px;background:#eeecf5}.callback-card p{font-size:.86rem}.callback-card p code{font-size:.75rem}.oauth-body{min-height:100vh;display:grid;place-items:center;padding:36px 20px;background:radial-gradient(circle at top,#eeebff,#f8f7fb 55%,#fff)}.oauth-shell{width:min(920px,100%)}.oauth-brand{width:fit-content;display:block;margin:0 auto 24px}.oauth-panel{padding:clamp(28px,5vw,58px);border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}.oauth-panel h1{margin-bottom:18px;font-size:clamp(2.2rem,5vw,4rem)}.oauth-registry>p{max-width:720px}.callback-list{display:grid;gap:9px;margin-top:30px}.callback-list>div{display:grid;grid-template-columns:42px 180px 1fr;align-items:center;gap:14px;padding:13px;border:1px solid var(--line);border-radius:13px}.callback-number{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:var(--violet);background:#eeebff;font-size:.66rem;font-weight:850}.callback-list b,.callback-list small{display:block}.callback-list b{font-size:.82rem}.callback-list small{color:#918b9b;font-size:.62rem}.callback-list em{color:#6f6978;font-size:.75rem}.oauth-footnote{margin:24px 0 0;font-size:.74rem}.oauth-result{max-width:680px;margin:auto;text-align:center}.oauth-status{width:62px;height:62px;display:grid;place-items:center;margin:0 auto 24px;border-radius:19px;color:#fff;font-size:1.5rem;font-weight:900}.oauth-status.success{background:var(--aqua)}.oauth-status.error{background:var(--coral)}.oauth-status.neutral{background:var(--violet)}.oauth-safety{margin-top:30px;padding:18px;border-radius:14px;background:#f5f3fb;text-align:left}.oauth-safety p{margin:4px 0 0;font-size:.8rem}@media(max-width:820px){.integration-grid,.integration-detail{grid-template-columns:1fr}.integration-detail{gap:45px}.callback-card{position:static}.callback-list>div{grid-template-columns:42px 1fr}.callback-list code,.callback-list em{grid-column:2}}@media(max-width:560px){.integration-card>p{min-height:0}.callback-list>div{grid-template-columns:36px 1fr;padding:11px}}