.integration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}

.integration-grid label {
  display: grid;
  gap: 8px;
}

.integration-actions {
  margin: 18px 0;
}

.connection-badge {
  align-self: flex-start;
  padding: 8px 11px;
  color: #ffac8e;
  background: #3a1712;
  border: 1px solid #8d3c2f;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}

.connection-badge[data-connected="true"] {
  color: #91efb7;
  background: #103120;
  border-color: #2f7c4e;
}

.endpoint-label {
  display: block;
  margin: 16px 0 8px;
}

.readonly-endpoint {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  color: #d7e2ea;
  background: #070b10;
  border: 1px solid #566675;
  border-radius: 9px;
  font: inherit;
}

.button.danger {
  color: #ffd8cf;
  background: #4a1813;
  border-color: #a54537;
}

.button.danger:hover {
  background: #632219;
}

.connection-status strong {
  color: #f4d66e;
}

.connection-status small {
  color: #8fa0ae;
  font-size: .8rem;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .integration-grid {
    grid-template-columns: 1fr;
  }

  .connection-badge {
    align-self: flex-start;
  }

  .integration-actions {
    display: grid;
  }
}