.diagram-panel {
  --diagram-ink: #243239;
  --diagram-muted: #6b7775;
  --diagram-line: #c6d0ca;
  --diagram-accent: #e6a34f;
  --diagram-paper: #fbfaf6;
  background: var(--diagram-paper);
  border: 1px solid #d8ded7;
  border-radius: 18px;
  color: var(--diagram-ink);
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 12px 30px rgba(40, 54, 53, .06);
}

.diagram-heading {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.diagram-eyebrow {
  color: var(--diagram-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  margin: 0 0 7px;
}

.diagram-heading h2 {
  font-size: clamp(21px, 3vw, 30px);
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0;
}

.diagram-subtitle {
  color: var(--diagram-muted);
  font-size: 14px;
  margin: 7px 0 0;
}

.diagram-count {
  background: #eef2ec;
  border: 1px solid #d9e2d9;
  border-radius: 999px;
  color: #4f625c;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  white-space: nowrap;
}

.diagram-scroll {
  background: #f2f4ee;
  border: 1px solid #dce3da;
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px;
  scrollbar-color: #b6c2b9 transparent;
}

.diagram-svg {
  display: block;
  max-width: none;
}

.diagram-node {
  fill: #fffefa;
  stroke: #c4d0c7;
  stroke-width: 1.25;
  transition: fill .16s ease, stroke .16s ease, filter .16s ease;
}

.diagram-machine {
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.diagram-machine:hover .diagram-node,
.diagram-machine:focus .diagram-node,
.diagram-machine:focus-visible .diagram-node {
  fill: #fff8e9;
  filter: drop-shadow(0 5px 6px rgba(42, 65, 56, .12));
  stroke: var(--diagram-accent);
  stroke-width: 2;
}

.diagram-icon-art {
  fill: none;
  height: 38px;
  stroke: #47635b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  width: 38px;
}

.diagram-kind {
  fill: #7c8985;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.diagram-label {
  fill: var(--diagram-ink);
  font-size: 14px;
  font-weight: 750;
}

.diagram-detail,
.diagram-status,
.diagram-pm {
  fill: var(--diagram-muted);
  font-size: 11px;
}

.diagram-status {
  font-weight: 700;
}

.diagram-status-unknown { fill: #7c8985; }
.diagram-status-neutral { fill: #65736e; }
.diagram-status-warning { fill: #a05f2a; }
.diagram-status-ok { fill: #47705f; }

.diagram-pm {
  fill: #9a6d2c;
  font-size: 9px;
  font-weight: 700;
}

.diagram-connections {
  fill: none;
  pointer-events: none;
  stroke: #9eafa5;
  stroke-width: 2;
}

.diagram-connections marker path {
  fill: #9eafa5;
  stroke: none;
}

.diagram-association-connection {
  stroke: #b27835;
  stroke-dasharray: 5 4;
  stroke-width: 2.5;
}

.diagram-condensate-connection {
  stroke: #4d8278;
  stroke-dasharray: 2 4;
  stroke-width: 2.5;
}

.diagram-legend {
  align-items: center;
  color: var(--diagram-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 12px 18px;
  margin-top: 16px;
}

.diagram-legend span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.diagram-legend .diagram-icon-art {
  height: 19px;
  stroke-width: 1.8;
  width: 19px;
}

.diagram-drain-key,
.diagram-condensate-key {
  display: inline-block;
  height: 0;
  width: 28px;
}

.diagram-drain-key { border-top: 2px dashed #b27835; }
.diagram-condensate-key { border-top: 2px dotted #4d8278; }

.diagram-note {
  color: var(--diagram-muted);
  font-size: 11px;
  margin: 14px 0 0;
}

.diagram-empty {
  align-items: center;
  background: #f2f4ee;
  border: 1px dashed #bfcbc0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  padding: 42px 22px;
  text-align: center;
}

.diagram-empty-mark {
  align-items: center;
  background: #e4ede3;
  border-radius: 50%;
  color: #4b675d;
  display: flex;
  font-size: 28px;
  height: 52px;
  justify-content: center;
  margin-bottom: 15px;
  width: 52px;
}

.diagram-empty h3 {
  font-size: 18px;
  margin: 0;
}

.diagram-empty p {
  color: var(--diagram-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 9px auto 19px;
  max-width: 440px;
}

.diagram-empty button {
  background: #2f5d50;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
}

.diagram-empty button:hover,
.diagram-empty button:focus-visible {
  background: #234c40;
}

@media (max-width: 640px) {
  .diagram-panel { border-radius: 14px; padding: 16px; }
  .diagram-heading { display: block; }
  .diagram-count { display: inline-block; margin-top: 12px; }
  .diagram-scroll { margin-inline: -3px; }
}
.diagram-drain-connection{stroke:#b27835;stroke-dasharray:5 4;stroke-width:2.5}.diagram-drain-key{width:28px;height:0;border-top:2px dashed #b27835}.drain-records{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.drain-record{display:flex;flex-direction:column;gap:9px;text-align:left;background:#fcfaf2;border:1px solid #c6d1bb;border-radius:6px;padding:17px;color:#35482d}.drain-record strong{font-size:15px}.drain-record>span,.drain-record small{font-size:11px;line-height:1.6;overflow-wrap:anywhere}.drain-record .tag{align-self:flex-start;white-space:normal}.drain-summary .safety-copy{margin-top:18px}#drain-parent-field>.field{width:100%}
@media(max-width:560px){.drain-records{grid-template-columns:1fr}.drain-summary>.panel-heading{flex-wrap:wrap}}