.integration-page {
  min-height: 100%;
  padding: 24px;
  color: #dce8f6;
  background:
    radial-gradient(circle at 92% 5%, rgba(33, 147, 176, .14), transparent 32%),
    linear-gradient(180deg, #101925 0%, #0b121c 100%);
}

.integration-page-head,
.integration-section-head,
.integration-toolbar,
.integration-card-head,
.integration-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.integration-page-head h2,
.integration-section-head h3 {
  margin: 0;
  color: #f5f9ff;
}

.integration-page-head p,
.integration-section-head p {
  margin: 6px 0 0;
  color: #8194aa;
  font-size: 13px;
}

.integration-toolbar {
  justify-content: flex-end;
}

.integration-updated {
  color: #8194aa;
  font-size: 12px;
}

.integration-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
  margin: 22px 0 16px;
}

.integration-summary-card {
  position: relative;
  overflow: hidden;
  padding: 17px 18px;
  border: 1px solid rgba(130, 158, 187, .18);
  border-radius: 10px;
  background: rgba(21, 33, 48, .88);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
}

.integration-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: #4d6a86;
}

.integration-summary-card.healthy::before { background: #27c99a; }
.integration-summary-card.degraded::before { background: #f3b64b; }
.integration-summary-card.offline::before { background: #ef6872; }
.integration-summary-card.disabled::before { background: #7f8da3; }

.integration-summary-card strong {
  display: block;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

.integration-summary-card span {
  display: block;
  margin-top: 9px;
  color: #8fa2b7;
  font-size: 12px;
}

.integration-boundary-note {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(44, 182, 160, .25);
  border-radius: 8px;
  color: #9db1c6;
  background: rgba(30, 104, 96, .12);
  font-size: 12px;
  line-height: 1.65;
}

.integration-boundary-note strong { color: #8ee5d3; }

.integration-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 16px;
}

.integration-section {
  padding: 18px;
  border: 1px solid rgba(130, 158, 187, .16);
  border-radius: 10px;
  background: rgba(17, 27, 40, .9);
}

.integration-channel-list {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.integration-channel-card {
  padding: 15px;
  border: 1px solid rgba(132, 160, 188, .15);
  border-radius: 8px;
  background: rgba(28, 42, 58, .72);
}

.integration-channel-card.problem {
  border-color: rgba(239, 104, 114, .28);
}

.integration-card-title {
  min-width: 0;
}

.integration-card-title strong {
  display: block;
  overflow: hidden;
  color: #edf5ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-card-title span {
  display: block;
  margin-top: 5px;
  color: #788da4;
  font: 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.integration-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(127, 141, 163, .24);
  border-radius: 999px;
  color: #aab8c8;
  background: rgba(127, 141, 163, .1);
  font-size: 11px;
}

.integration-status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  content: "";
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.integration-status.connected { color: #39d6a7; }
.integration-status.degraded { color: #ffc760; }
.integration-status.disconnected,
.integration-status.unknown { color: #ff7983; }
.integration-status.disabled { color: #8797a9; }

.integration-channel-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.integration-channel-meta div {
  padding: 9px 10px;
  border-radius: 6px;
  background: rgba(8, 15, 24, .45);
}

.integration-channel-meta span,
.integration-control-state span {
  display: block;
  color: #71869c;
  font-size: 10px;
  text-transform: uppercase;
}

.integration-channel-meta strong,
.integration-control-state strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #bfd0e1;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.integration-capability,
.integration-tool-chip {
  padding: 4px 7px;
  border: 1px solid rgba(85, 154, 214, .2);
  border-radius: 4px;
  color: #89b9df;
  background: rgba(38, 105, 160, .11);
  font: 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.integration-action-row {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(130, 158, 187, .12);
}

.integration-control-state {
  min-width: 0;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.integration-action-btn {
  padding: 6px 10px;
  border: 1px solid rgba(116, 157, 194, .25);
  border-radius: 5px;
  color: #b8cee0;
  background: rgba(43, 76, 105, .18);
  cursor: pointer;
  font-size: 11px;
}

.integration-action-btn:hover { border-color: #5fa8dd; color: #fff; }
.integration-action-btn.danger { border-color: rgba(239, 104, 114, .28); color: #ff9299; }
.integration-action-btn:disabled { opacity: .38; cursor: not-allowed; }

.integration-event-list {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.integration-event {
  position: relative;
  padding: 10px 11px 10px 17px;
  border-left: 2px solid #4b6680;
  background: rgba(24, 37, 52, .62);
}

.integration-event.changed { border-left-color: #f3b64b; }
.integration-event strong { color: #c8d8e7; font-size: 12px; }
.integration-event span { display: block; margin-top: 4px; color: #70869c; font-size: 11px; }

.integration-mcp-card {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(110, 129, 255, .2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(57, 55, 126, .2), rgba(18, 31, 48, .7));
}

.integration-mcp-card h4 { margin: 0 0 7px; color: #d7d9ff; }
.integration-mcp-card p { margin: 0; color: #8d9db2; font-size: 12px; line-height: 1.6; }
.integration-mcp-endpoint {
  display: block;
  margin: 11px 0;
  padding: 8px 9px;
  border-radius: 5px;
  color: #b8c6ff;
  background: rgba(5, 9, 24, .52);
  font: 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.integration-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.integration-empty { padding: 28px 12px; color: #71869b; text-align: center; }

.integration-action-card textarea {
  width: 100%;
  min-height: 92px;
  margin-top: 12px;
  padding: 10px;
  resize: vertical;
}

@media (max-width: 1180px) {
  .integration-summary { grid-template-columns: repeat(3, 1fr); }
  .integration-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .integration-page { padding: 14px; }
  .integration-page-head { align-items: flex-start; flex-direction: column; }
  .integration-summary { grid-template-columns: repeat(2, 1fr); }
  .integration-channel-meta { grid-template-columns: repeat(2, 1fr); }
}