.cx-hero {
  background: linear-gradient(135deg, #0f172a, #134e4a);
  color: #fff;
  padding: 24px;
  border-radius: 16px;
  margin-bottom: 20px;
}
.cx-hero h1, .cx-hero p { color: #e2e8f0; }
.cx-hero .hero-role { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; color: #99f6e4; }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.cx-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cx-card header { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cx-card h3 { margin: 0; }
.cx-card label { display: block; margin: 8px 0; font-size: 0.88rem; }
.cx-card input { width: 100%; margin-top: 4px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; }
.cx-meta { display: grid; gap: 6px; margin: 0; }
.cx-meta dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.cx-meta dd { margin: 0; }
.cx-status {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 6px; text-transform: uppercase; white-space: nowrap;
}
.cx-status-ready, .cx-status-connected { background: #dcfce7; color: #166534; }
.cx-status-needs-configuration { background: #fce7f3; color: #9d174d; }
.cx-status-connection-failed { background: #fee2e2; color: #991b1b; }
.cx-status-not-available { background: #e2e8f0; color: #334155; }
.cx-status-copy-ready, .cx-status-accepted { background: #e0f2fe; color: #075985; }
.cx-fail { color: #991b1b; font-weight: 600; }
.cx-result { background: #0f172a; color: #e2e8f0; padding: 10px; border-radius: 8px; font-size: 0.78rem; overflow-x: auto; }
.cx-error { border: 1px dashed #fecaca; background: #fef2f2; padding: 16px; border-radius: 12px; }
@media (max-width: 640px) { .cx-grid { grid-template-columns: 1fr; } }