.diagram-card,
.mermaid.diagram-card {
  background:
    radial-gradient(circle at top right, rgba(242, 193, 78, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(17, 50, 71, 0.04), rgba(29, 92, 99, 0.02));
  border: 1px solid rgba(76, 107, 138, 0.28);
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(17, 50, 71, 0.08);
  margin: 1.25rem 0;
  overflow-x: auto;
  padding: 1.25rem;
}

.mermaid.diagram-card svg {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

.mermaid.diagram-card .label foreignObject,
.mermaid.diagram-card .nodeLabel,
.mermaid.diagram-card .edgeLabel,
.mermaid.diagram-card .messageText,
.mermaid.diagram-card .noteText,
.mermaid.diagram-card .actor {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif !important;
}

.mermaid.diagram-card .cluster rect {
  rx: 18px;
  ry: 18px;
}

.mermaid.diagram-card .node rect,
.mermaid.diagram-card .node polygon,
.mermaid.diagram-card .node path,
.mermaid.diagram-card .actor rect,
.mermaid.diagram-card .note rect {
  filter: drop-shadow(0 8px 16px rgba(17, 50, 71, 0.12));
}

.mermaid.diagram-card .edgePath path,
.mermaid.diagram-card .messageLine0,
.mermaid.diagram-card .messageLine1 {
  stroke-width: 2.2px !important;
}

.mermaid.diagram-card .edgeLabel rect,
.mermaid.diagram-card .labelBkg {
  rx: 10px;
  ry: 10px;
}