.integration-drawer {
  box-sizing: border-box; position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(560px, 100%); max-width: 100%; height: 100%; height: 100dvh;
  max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid #dce4ef;
  background: #fff; color: #103060; box-shadow: -12px 0 40px #10306018;
  font: 14px/1.5 Inter, system-ui, sans-serif; animation: integration-slide-in .18s ease-out;
}
.integration-drawer::backdrop { background: #10306038; }
.integration-drawer form { height: 100%; display: flex; flex-direction: column; }
.integration-drawer-head, .integration-drawer-footer { display: flex; align-items: center; gap: 16px; padding: 20px 24px; flex-shrink: 0; }
.integration-drawer-head { justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
.integration-drawer h2 { margin: 0; font-size: 21px; line-height: 1.3; }
.integration-drawer h3 { margin: 0; font-size: 17px; }
.integration-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; overscroll-behavior: contain; }
.integration-drawer-body > p:first-child { margin-top: 0; color: #526581; }
.integration-drawer-context { overflow-wrap: anywhere; padding: 10px 12px; background: #f3f6fb; border-radius: 8px; font-size: 12px; }
.integration-drawer-fields { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.integration-drawer-field { display: grid; gap: 7px; margin: 0 0 16px; font-weight: 600; }
.integration-drawer input:not([type=checkbox]), .integration-drawer select, .integration-drawer textarea {
  box-sizing: border-box; width: 100%; border: 1px solid #cbd6e5; border-radius: 8px;
  padding: 10px 12px; background: #fff; color: #103060; font: inherit; font-weight: 400; min-width: 0;
}
.integration-drawer textarea { resize: vertical; }
.integration-drawer .integration-drawer-hint { margin: -4px 0 18px; color: #526581; font-size: 12px; }
.integration-drawer-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; margin: 20px 0; cursor: pointer; }
.integration-drawer-field.integration-drawer-check input { order: -1; }
.integration-drawer input[type=checkbox] { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #103060; }
.integration-drawer-feedback:not(:empty) { background: #eef8f5; border: 1px solid #b8ded2; border-radius: 10px; padding: 12px; margin: 12px 0; }
.integration-drawer-feedback.is-error:not(:empty) { background: #fff4f1; border-color: #E4604D; color: #83372b; }
.integration-drawer-result { display: grid; gap: 12px; overflow-wrap: anywhere; }
.integration-drawer-result p { margin: 0; }
.integration-drawer-result textarea { font-family: ui-monospace, monospace; font-size: 12px; }
.integration-drawer-footer { justify-content: flex-end; border-top: 1px solid #e2e8f0; background: #f7f9fc; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.integration-drawer button { cursor: pointer; min-height: 38px; }
.integration-drawer .btn-primary { background: #103060; color: white; border: 1px solid #103060; border-radius: 8px; padding: 8px 14px; }
.integration-drawer .btn-secondary { background: white; color: #103060; border: 1px solid #cbd6e5; border-radius: 8px; padding: 8px 14px; }
.integration-drawer :disabled { cursor: not-allowed; opacity: .55; }
.integration-drawer :focus-visible { outline: 3px solid #10c0a0; outline-offset: 2px; }
.integration-drawer [hidden] { display: none !important; }
@keyframes integration-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 600px) {
  .integration-drawer-head, .integration-drawer-footer { padding: 16px; }
  .integration-drawer-body { padding: 16px; }
  .integration-drawer h2 { font-size: 19px; }
  .integration-drawer input:not([type=checkbox]), .integration-drawer select, .integration-drawer textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .integration-drawer { animation: none; } }