.modular-routing-dialog {
  width: min(900px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  border: 1px solid #4e5b46;
  border-radius: 10px;
  background: #232923;
  color: var(--cream, #e7e7d7);
  padding: 16px;
  box-shadow: 0 18px 60px #0009;
  overscroll-behavior: contain;
}
.modular-routing-dialog::backdrop { background: #0d110dcc; }
.modular-routing-dialog [hidden] { display: none !important; }
.modular-routing-tabs, .modular-midi-rule-title { display: flex; gap: 8px; align-items: center; }
.modular-routing-tabs button[aria-pressed="true"] { border-color: #b6da90; color: #d9edc0; }
.modular-midi-panel { display: grid; gap: 12px; margin: 12px 0; }
.modular-midi-panel p { margin: 0; color: #bfccb7; }
.modular-midi-rules { display: grid; gap: 9px; }
.modular-midi-rule { border: 1px solid #4e5b46; border-radius: 6px; padding: 10px; }
.modular-midi-rule-title { justify-content: space-between; margin-bottom: 8px; }
.modular-midi-rule h3 { margin: 0; font-size: .95rem; }
.modular-midi-rule p { margin: 5px 0 9px; }
.modular-midi-formulas { margin-top: 9px; }
.modular-midi-controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(126px,1fr)); gap: 8px; }
.modular-midi-controls label { display: grid; gap: 4px; }
.modular-midi-controls input:not([type="checkbox"]), .modular-midi-controls select { box-sizing: border-box; width: 100%; }
.modular-routing-header,
.modular-routing-toolbar,
.modular-routing-actions,
.modular-routing-link-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.modular-routing-header { justify-content: space-between; align-items: center; }
.modular-routing-header h2 { margin: 0; font: 600 21px 'Space Grotesk', sans-serif; }
.modular-routing-help { margin: 8px 0 12px; color: #b6c3af; line-height: 1.5; }
.modular-routing-toolbar { margin-bottom: 10px; }
.modular-routing-dialog :is(input, select, button) {
  min-height: 29px;
  border: 1px solid #53634c;
  border-radius: 5px;
  background: #303c2e;
  color: #edf3e8;
  font: inherit;
}
.modular-routing-dialog :is(input, select) { padding: 4px 7px; min-width: 0; }
.modular-routing-dialog button { padding: 4px 8px; white-space: nowrap; }
.modular-routing-dialog button:disabled { opacity: .5; cursor: default; }
.modular-routing-dialog button:not(:disabled):hover,
.modular-routing-dialog button[aria-pressed='true'] { background: #405436; border-color: #8bac6d; }
.modular-routing-dialog :is(input, select, button):focus-visible { outline: 2px solid #d4ec74; outline-offset: 2px; }
.modular-routing-dialog label { display: grid; gap: 3px; color: #c3d1b9; font-size: 11px; min-width: 0; }
.modular-routing-canvas {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #465443;
  border-radius: 7px;
  background-color: #1b231c;
  background-image: radial-gradient(#40503d 1px, transparent 1px);
  background-size: 15px 15px;
  overscroll-behavior: contain;
}
.modular-routing-chart { position: relative; margin-inline: auto; }
.modular-routing-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.modular-routing-chart path { fill: none; stroke: #b7d676; stroke-width: 1.7px; stroke-opacity: .87; }
.modular-routing-chart path[data-muted] { stroke: #879381; stroke-dasharray: 4 4; }
.modular-routing-node {
  position: absolute;
  width: 126px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #657960;
  border-radius: 6px;
  background: #273326;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 7px #0005;
  font-size: 11px;
}
.modular-routing-node strong { flex: 1; text-align: center; color: #d7e7c8; }
.modular-routing-dialog .modular-routing-port { min-height: 24px; padding: 3px 4px; font-size: 9px; }
.modular-routing-outputs { display: grid; gap: 1px; }
.modular-routing-dialog .modular-routing-outputs .modular-routing-port { height: 18px; min-height: 18px; padding: 0 3px; font-size: 8px; }
.modular-routing-dialog .modular-routing-node-label {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  padding: 3px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border-color: transparent;
}
.modular-routing-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; margin-top: 10px; }
.modular-routing-details section { min-width: 0; border: 1px solid #475445; border-radius: 6px; background: #2a3429; padding: 10px; }
.modular-routing-details h3 { margin: 0 0 8px; font-size: 13px; }
.modular-routing-details section > label { margin-bottom: 6px; }
.modular-routing-details p { margin: 5px 0; color: #bdcbb6; line-height: 1.45; }
.modular-routing-node-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 6px; margin-bottom: 8px; }
.modular-routing-link-controls label { flex: 1 1 90px; }
.modular-routing-links { margin: 8px 0 0; padding: 0; list-style: none; max-height: 200px; overflow: auto; }
.modular-routing-links li { display: grid; grid-template-columns: minmax(72px, 1fr) 57px auto auto; align-items: center; gap: 4px; padding: 3px 1px; }
.modular-routing-links li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modular-routing-actions { justify-content: flex-end; align-items: center; margin-top: 12px; }
.modular-routing-actions .modular-routing-primary { background: #cee675; border-color: #cee675; color: #26311e; font-weight: 700; }
.modular-routing-actions .modular-routing-primary:not(:disabled):hover { background: #e0f69a; border-color: #e0f69a; }
.modular-routing-status { flex: 1 1 170px; margin: 0; color: #c4d2ae; font-size: 12px; }
.modular-routing-status[data-error] { color: #ffb394; }
@media (max-width: 620px) {
  .modular-routing-details { grid-template-columns: minmax(0, 1fr); }
  .modular-routing-dialog { padding: 10px; }
}