/* PRIMEz HUB — diagrams for Info/Docs (css/diagrams.css) */
.dz-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.dz-node { flex: 1 1 140px; min-width: 120px; padding: 14px 12px; text-align: center;
  border: 1px solid rgba(168,85,247,.35); border-radius: 8px;
  background: linear-gradient(180deg, rgba(16,18,28,.95), rgba(8,9,14,.95));
  transition: transform .16s ease, border-color .16s ease; }
.dz-node:hover { transform: translateY(-2px); border-color: #22d3ee; }
.dz-ico { width: 26px; height: 26px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 12px; color: #fff; background: linear-gradient(135deg,#a855f7,#22d3ee);
  box-shadow: 0 0 14px rgba(168,85,247,.6); }
.dz-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.dz-arrow { flex: 0 0 34px; align-self: center; height: 2px; position: relative;
  background: linear-gradient(90deg, transparent, #a855f7, #22d3ee, transparent);
  background-size: 200% 100%; animation: dzFlow 1.8s linear infinite; }
@keyframes dzFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.dz-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 7px; height: 7px;
  border-top: 2px solid #22d3ee; border-right: 2px solid #22d3ee; transform: rotate(45deg); }

.dz-layers { display: grid; gap: 8px; }
.dz-layer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid rgba(168,85,247,.3); border-radius: 6px;
  background: linear-gradient(90deg, rgba(168,85,247,.12), rgba(34,211,238,.06));
  transition: border-color .16s ease; }
.dz-layer:hover { border-color: #22d3ee; }

.dz-seq { position: relative; padding-left: 28px; }
.dz-seq::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, transparent, #a855f7, #22d3ee, transparent);
  background-size: 100% 200%; animation: dzFlowV 3s linear infinite; }
@keyframes dzFlowV { 0% { background-position: 0 0; } 100% { background-position: 0 200%; } }
.dz-seq .dz-item { position: relative; padding: 8px 0; }
.dz-seq .dz-item::before { content: ""; position: absolute; left: -28px; top: 12px; width: 12px; height: 12px;
  border-radius: 50%; background: #0b0f1a; border: 2px solid #a855f7; box-shadow: 0 0 10px rgba(168,85,247,.75); }

@media (max-width: 820px) { .dz-arrow { display: none; } .dz-node { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .dz-arrow, .dz-seq::before { animation: none; } }