.labstack-connect {
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color, #d9e0e7);
  border-radius: .75rem;
  background: var(--panel-bg, #fff);
}

.labstack-connect-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.labstack-connect__header,
.labstack-connect__actions,
.labstack-connect__serviceability {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.labstack-connect__header {
  justify-content: space-between;
  align-items: flex-start;
}

.labstack-connect__title,
.labstack-connect__content-title { margin: 0; }
.labstack-connect__subtitle,
.labstack-connect__notice { margin: .35rem 0 0; color: #5d6775; }
.labstack-connect__status { margin: 1rem 0; font-weight: 600; }
.labstack-connect__status.is-ready { color: #146c43; }
.labstack-connect__status.is-pending { color: #8a5a00; }
.labstack-connect__actions { flex-wrap: wrap; }
.labstack-connect__button,
.labstack-connect__pincode {
  min-height: 2.35rem;
  border-radius: .45rem;
  padding: .45rem .7rem;
}
.labstack-connect__button { cursor: pointer; }
.labstack-connect__button:disabled { cursor: not-allowed; opacity: .55; }
.labstack-connect__serviceability { margin-top: .75rem; }
.labstack-connect__pincode { max-width: 13rem; border: 1px solid #bbc4ce; }
.labstack-connect__content { margin-top: 1rem; }
.labstack-connect__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .55rem;
  padding: 0;
  list-style: none;
}
.labstack-connect__item {
  padding: .65rem;
  border: 1px solid #e2e7ec;
  border-radius: .45rem;
}
.labstack-connect__item-title,
.labstack-connect__item-meta { display: block; }
.labstack-connect__item-meta { margin-top: .2rem; color: #5d6775; }
.labstack-connect__raw { margin-top: .9rem; }
.labstack-connect__json {
  max-height: 20rem;
  overflow: auto;
  padding: .75rem;
  border-radius: .45rem;
  background: #18212b;
  color: #e9f0f7;
  white-space: pre-wrap;
  word-break: break-word;
}
.labstack-connect__error { color: #b42318; font-weight: 600; }

@media (max-width: 640px) {
  .labstack-connect__header,
  .labstack-connect__serviceability,
  .labstack-connect-launch { align-items: stretch; flex-direction: column; }
  .labstack-connect__pincode { max-width: none; }
}