/* Interoperability panel */
.interop-shell{padding:18px;overflow:auto;display:grid;gap:16px}
.interop-intro{display:flex;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--clr-border);background:rgba(255,255,255,.025)}
.interop-intro small,.interop-card header small{color:var(--clr-dim);font-size:9px;letter-spacing:.13em}
.interop-intro h3{margin:5px 0;font-size:15px;letter-spacing:.08em}.interop-intro p{max-width:760px;color:var(--clr-dim);font-size:11px}
.interop-badge{height:max-content;border:1px solid #c084fc;color:#c084fc;padding:5px 8px;font-size:9px;letter-spacing:.1em}
.interop-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px}
.interop-flow>div{border:1px solid var(--clr-border);padding:12px;background:var(--clr-surface);display:grid;gap:3px}.interop-flow b{font-size:9px;color:var(--clr-dim)}.interop-flow strong{font-size:10px}.interop-flow span{font-size:9px;color:var(--clr-dim)}.interop-flow i{font-style:normal;color:var(--clr-primary)}
.interop-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--clr-border)}
.interop-card{background:var(--clr-panel);padding:18px;display:grid;gap:12px}.interop-card header{display:grid;gap:4px}.interop-card header strong{font-size:12px}
.interop-card label{display:grid;gap:5px;color:var(--clr-dim);font-size:10px;letter-spacing:.08em}.interop-card input,.interop-card select{border:1px solid var(--clr-border);background:#0d0d0d;color:#fff;padding:9px;font:12px var(--font-mono)}
.interop-primary{justify-self:start;background:var(--clr-primary);border:1px solid var(--clr-primary);color:#fff;padding:9px 13px;font:600 10px var(--font-mono);letter-spacing:.08em;cursor:pointer}
.interop-card p{font-size:10px;color:var(--clr-dim);margin:0}.interop-adapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--clr-border)}
.interop-adapter{background:var(--clr-panel);padding:12px;display:flex;justify-content:space-between;gap:8px;font-size:10px}.interop-adapter span{color:var(--clr-dim)}
@media(max-width:760px){.interop-flow{grid-template-columns:1fr}.interop-flow i{display:none}.interop-grid{grid-template-columns:1fr}.interop-intro{display:grid}}