.connections-body { background: #f2f5f1; }

.connections-intro {
  background: #0d2615;
  color: #fff;
  padding: 54px 0 48px;
}

.connections-intro-inner {
  align-items: end;
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.connections-intro h1 {
  font-size: 52px;
  letter-spacing: 0;
  line-height: 1;
  margin: 10px 0 16px;
  max-width: 760px;
}

.connections-intro p:not(.eyebrow) { color: #b7c4ba; margin: 0; max-width: 680px; }

.connection-summary {
  border-left: 3px solid #f59a2f;
  display: grid;
  min-width: 170px;
  padding: 5px 0 5px 18px;
}

.connection-summary strong { color: #f1c35b; font-family: var(--font-mono); font-size: 26px; }
.connection-summary span { color: #b7c4ba; font-size: 13px; font-weight: 700; }
.connections-workspace { padding: 46px 0 80px; }

.connections-heading {
  align-items: end;
  border-bottom: 1px solid #cdd6cf;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
}

.connections-heading h2 { font-size: 28px; letter-spacing: 0; margin: 4px 0 0; }
.connections-heading-actions { align-items: center; display: flex; gap: 18px; }
.connections-refresh { background: transparent; border: 0; border-bottom: 1px solid #176f34; color: #176f34; cursor: pointer; font-weight: 800; padding: 6px 0; }
.connections-test-all { background: #0d2615; border: 1px solid #0d2615; border-radius: 4px; color: #fff; cursor: pointer; font-weight: 800; min-height: 38px; padding: 8px 14px; }

.connections-form {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.connection-card {
  background: #fff;
  border: 1px solid #cdd6cf;
  border-radius: 6px;
  padding: 20px;
}

.connection-card-heading { align-items: center; display: grid; gap: 12px; grid-template-columns: 42px minmax(0, 1fr) auto; margin-bottom: 20px; }
.connection-card h3 { font-size: 18px; letter-spacing: 0; margin: 0 0 2px; }
.connection-card p { color: #667169; font-size: 12px; margin: 0; }
.provider-mark { align-items: center; background: #0d2615; border-radius: 4px; color: #fff; display: flex; font-family: var(--font-mono); font-size: 17px; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.provider-google { background: #176f34; color: #f1c35b; }
.provider-voice { background: #f59a2f; color: #132018; }
.provider-nano-banana { background: #f1c35b; color: #132018; font-size: 12px; }
.provider-openrouter { background: #f4f4f1; border: 1px solid #728079; color: #132018; font-size: 12px; }
.provider-replicate { background: #111; color: #fff; }
.provider-deepseek { background: #173f2a; }
.provider-nvidia { background: #76b900; color: #132018; }
.provider-brave { background: #c64f2c; }
.provider-tavily { background: #155d70; }
.provider-twilio { background: #bb243a; font-size: 13px; }
.connection-field-stack.twilio-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.twilio-service-choice { margin-top: 16px; }
.twilio-service-choice select { background: #f7f9f7; border: 1px solid #bfc9c1; border-radius: 4px; min-height: 46px; padding: 10px 12px; font: inherit; width: 100%; min-width: 0; }
[data-twilio-field] { color: #667169; font-size: 12px; }
.twilio-progress { width: 100%; height: 6px; accent-color: #176f34; margin-top: 12px; }
#twilio-verify [hidden] { display: none !important; }
.twilio-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
#twilio-verify .connection-test p { overflow-wrap: anywhere; }
#twilio-verify { scroll-margin-top: 24px; }

.connection-status { color: #667169; font-family: var(--font-mono); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.connection-status.is-connected { color: #176f34; }
.connection-status.is-error { color: #a93e2f; }
.connection-status.is-testing { color: #9a5a0c; }
.connection-field-stack { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.connection-card label { display: grid; gap: 7px; }
.connection-card label > span { color: #3f4d43; font-size: 12px; font-weight: 800; }
.connection-card input { background: #f7f9f7; border: 1px solid #bfc9c1; border-radius: 4px; color: #132018; font-family: var(--font-mono); font-size: 13px; min-height: 46px; padding: 10px 12px; width: 100%; }
.connection-card input:focus { border-color: #176f34; box-shadow: 0 0 0 3px rgba(23, 111, 52, 0.14); outline: 0; }
.connection-test { align-items: center; border-top: 1px solid #e1e7e2; display: flex; gap: 16px; justify-content: space-between; margin-top: 18px; padding-top: 14px; }
.connection-test p { color: #667169; line-height: 1.45; }
.connection-test p.is-success { color: #176f34; }
.connection-test p.is-error { color: #a93e2f; }
.connection-test button { background: transparent; border: 1px solid #176f34; border-radius: 4px; color: #176f34; cursor: pointer; flex: 0 0 auto; font-weight: 800; min-height: 38px; padding: 8px 13px; }
.connection-test button:hover { background: #edf5ef; }
.temporary-access-actions { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; }
.connections-unlock { background: #0d2615; border: 1px solid #0d2615; border-radius: 4px; color: #fff; cursor: pointer; font-weight: 800; min-height: 46px; padding: 10px 18px; }
.connections-unlock:hover { background: #173f2a; }

.connections-actions { align-items: center; border-top: 1px solid #cdd6cf; display: flex; grid-column: 1 / -1; justify-content: space-between; margin-top: 8px; padding-top: 22px; }
.connections-actions p { color: #667169; margin: 0; }
.connections-actions p.is-error { color: #a93e2f; }
.connections-actions p.is-success { color: #176f34; }
.connections-save { background: #176f34; border: 1px solid #176f34; border-radius: 4px; color: #fff; cursor: pointer; font-weight: 800; min-height: 46px; padding: 10px 20px; }
.connections-save:hover { background: #0f5728; }
.connections-save:disabled, .connections-refresh:disabled, .connections-unlock:disabled, .connections-test-all:disabled, .connection-test button:disabled { cursor: not-allowed; opacity: 0.55; }

@media (max-width: 760px) {
  .connections-intro { padding: 38px 0 34px; }
  .connections-intro h1 { font-size: 38px; }
  .connections-intro-inner { align-items: start; grid-template-columns: 1fr; }
  .connection-summary { min-width: 0; }
  .connections-form { grid-template-columns: 1fr; }
  .connection-field-stack, .connection-field-stack.twilio-fields { grid-template-columns: 1fr; }
  .temporary-access-actions { align-items: stretch; grid-template-columns: 1fr; }
  .connections-heading-actions { align-items: stretch; flex-direction: column; gap: 10px; width: 100%; }
  .connections-test-all { width: 100%; }
  .connection-test { align-items: stretch; flex-direction: column; }
  .connection-test button { width: 100%; }
  .connections-actions { align-items: stretch; flex-direction: column; gap: 16px; }
  .connections-save { width: 100%; }
}

@media (max-width: 520px) {
  .connections-heading { align-items: start; flex-direction: column; gap: 12px; }
  .connection-card { padding: 16px; }
  .connection-card-heading { grid-template-columns: 38px minmax(0, 1fr); }
  .provider-mark { height: 38px; width: 38px; }
  .connection-status { grid-column: 2; }
}