.credential-summary-card {
  background: var(--white-04);
}

/* API credentials are managed only in the platform backend. Keep the
   provider cards hidden before the lazy pane JavaScript mounts so secrets can
   never flash in the canvas settings UI. Dreamina login is not an API-key
   editor and remains available. */
#pane-api-input .settings-pane-body > .settings-section:not(#dreaminaSettingsCard) {
  display: none !important;
}

#pane-api-input > .settings-pane-footer {
  display: none !important;
}

.credential-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.credential-summary-grid div {
  min-width: 0;
  padding: var(--space-10);
  border: 1px solid var(--stroke-08);
  border-radius: var(--radius-10);
  background: var(--white-04);
}

.credential-summary-grid span {
  display: block;
  margin-bottom: var(--space-6);
  color: var(--text-muted);
  font-size: var(--font-12);
}

.credential-summary-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--font-13);
  font-weight: 600;
}

.credential-summary-note {
  margin: 0;
  color: var(--text-muted);
}

.credential-employee-notice {
  margin-bottom: var(--space-12);
  padding: var(--space-10) var(--space-12);
  border: 1px solid rgba(76, 139, 245, 0.22);
  border-radius: var(--radius-8);
  background: rgba(76, 139, 245, 0.08);
  color: var(--text-primary);
  font-size: var(--font-13);
  line-height: 1.5;
}

.credential-managed-notice {
  margin-bottom: var(--space-12);
  padding: var(--space-10) var(--space-12);
  border: 1px solid rgba(76, 139, 245, 0.22);
  border-radius: var(--radius-8);
  background: rgba(76, 139, 245, 0.08);
  color: var(--text-primary);
  font-size: var(--font-13);
  line-height: 1.5;
}

.settings-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  contain: layout paint style;
}

.settings-modal {
  contain: layout paint style;
}

#v2-wrap.settings-canvas-paused {
  content-visibility: hidden;
  contain: strict;
}

.settings-pane-lazy-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: var(--text-muted);
  font-size: var(--font-13);
}

.credential-admin-notice {
  margin-bottom: var(--space-12);
  padding: var(--space-10) var(--space-12);
  border: 1px solid rgba(88, 196, 132, 0.24);
  border-radius: var(--radius-8);
  background: rgba(88, 196, 132, 0.08);
  color: var(--text-primary);
  font-size: var(--font-13);
  line-height: 1.5;
}

.credential-status-hint {
  margin-bottom: var(--space-10);
  color: var(--text-muted);
  font-size: var(--font-12);
}

.credential-volcano-hint {
  margin-bottom: var(--space-10);
}

.settings-pane:not(.active) {
  content-visibility: hidden;
  contain-intrinsic-size: 0 520px;
}

@media (max-width: 860px) {
  .credential-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .credential-summary-grid {
    grid-template-columns: 1fr;
  }
}