.nfe {
  --nfe-bg: #121214;
  --nfe-grid: rgba(255, 255, 255, 0.055);
  --nfe-panel: #27272b;
  --nfe-panel-border: #55555e;
  --nfe-header: #62626a;
  --nfe-text: #f5f5f7;
  --nfe-muted: #b9b9c1;
  --nfe-label: #efeff2;
  --nfe-edge: #cacad1;
  --nfe-accent: #8b72ff;
  --nfe-success: #21865c;
  --nfe-warning: #b77210;
  --nfe-error: #b84444;
  --nfe-focus: #d4caff;
  position: relative;
  color: var(--nfe-text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.nfe *,
.nfe *::before,
.nfe *::after {
  box-sizing: border-box;
}

.nfe-stage {
  position: relative;
  width: 100%;
  min-height: 360px;
  height: min(68vh, 640px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nfe-panel-border) 70%, transparent);
  border-radius: 14px;
  background: var(--nfe-bg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.nfe-stage:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nfe-focus) 72%, transparent);
  outline-offset: 3px;
}

.nfe-svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  touch-action: none;
  cursor: grab;
}

.nfe-is-interacting .nfe-svg {
  cursor: grabbing;
}

.nfe-toolbar {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 1px;
  overflow: hidden;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(28, 28, 32, 0.92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(9px);
}

.nfe-toolbar button {
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: #f7f7fa;
  background: transparent;
  font: 600 16px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.nfe-toolbar button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.nfe-toolbar button:focus-visible {
  outline: 2px solid var(--nfe-focus);
  outline-offset: -2px;
}

.nfe-bg {
  fill: var(--nfe-bg);
}

.nfe-grid {
  pointer-events: none;
}

.nfe-edge {
  fill: none;
  stroke: var(--nfe-edge);
  stroke-width: 2.2;
  opacity: 0.82;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

.nfe-edge-highlight {
  stroke: var(--nfe-accent);
  stroke-width: 3;
  opacity: 1;
}

.nfe-edge-dimmed {
  opacity: 0.24;
}

.nfe-node {
  cursor: default;
  outline: none;
}

.nfe[data-mode="layout"] .nfe-node {
  cursor: grab;
}

.nfe[data-mode="layout"] .nfe-node.nfe-node-dragging {
  cursor: grabbing;
}

.nfe-node-shell {
  fill: var(--nfe-panel);
  stroke: var(--nfe-panel-border);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.nfe-node-header {
  fill: var(--nfe-header);
}

.nfe-node-tag-bg {
  fill: color-mix(in srgb, var(--nfe-panel) 76%, white);
}

.nfe-node-title {
  fill: var(--nfe-text);
  font-size: 16px;
  font-weight: 650;
}

.nfe-node-label {
  fill: var(--nfe-label);
  font-size: 13px;
}

.nfe-node-tag {
  fill: var(--nfe-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.nfe-port {
  fill: var(--nfe-bg);
  stroke: #777780;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.nfe-port-connected {
  stroke: var(--nfe-edge);
}

.nfe-port-highlight {
  stroke: var(--nfe-accent);
  stroke-width: 2.6;
}

.nfe-node[data-state="success"] .nfe-node-header {
  fill: var(--nfe-success);
}

.nfe-node[data-state="warning"] .nfe-node-header {
  fill: var(--nfe-warning);
}

.nfe-node[data-state="error"] .nfe-node-header {
  fill: var(--nfe-error);
}

.nfe-node[data-state="inactive"] {
  opacity: 0.38;
}

.nfe-node:hover .nfe-node-shell,
.nfe-node-selected .nfe-node-shell {
  stroke: var(--nfe-accent);
  stroke-width: 2.5;
}

.nfe-node:focus-visible .nfe-node-shell {
  stroke: var(--nfe-focus);
  stroke-width: 3;
}

.nfe-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nfe-theme-light {
  --nfe-bg: #f5f5f2;
  --nfe-grid: rgba(0, 0, 0, 0.07);
  --nfe-panel: #e4e4df;
  --nfe-panel-border: #9a9a92;
  --nfe-header: #666661;
  --nfe-text: #ffffff;
  --nfe-muted: #383834;
  --nfe-label: #20201d;
  --nfe-edge: #565650;
  --nfe-focus: #563ad8;
}

@media (max-width: 700px) {
  .nfe-stage {
    min-height: 430px;
    height: 68vh;
  }

  .nfe-toolbar {
    top: 8px;
    right: 8px;
  }

  .nfe-toolbar button {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nfe *,
  .nfe *::before,
  .nfe *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* District AI public viewer skin. The graph remains readable without this layer. */
.flow-viewer {
  --nfe-bg: #111613;
  --nfe-grid: rgba(255, 255, 255, 0.06);
  --nfe-panel: #f8f6ef;
  --nfe-panel-border: rgba(255, 255, 255, 0.26);
  --nfe-header: var(--flow-accent, #f05223);
  --nfe-text: #111613;
  --nfe-muted: #545952;
  --nfe-label: #252a26;
  --nfe-edge: rgba(255, 255, 255, 0.74);
  --nfe-accent: var(--flow-accent, #f05223);
  --nfe-success: #2e8056;
  --nfe-warning: #b86b14;
  --nfe-error: #b84444;
  --nfe-focus: #ffffff;
}

.flow-viewer .nfe-stage {
  min-height: 480px;
  height: min(62vh, 590px);
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}

.flow-viewer .nfe-node[data-state="active"] .nfe-node-title,
.flow-viewer .nfe-node[data-state="warning"] .nfe-node-title,
.flow-viewer .nfe-node[data-state="error"] .nfe-node-title,
.flow-viewer .nfe-node[data-state="success"] .nfe-node-title {
  fill: #ffffff;
}

.flow-viewer .nfe-node-shell {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.18));
}

.flow-viewer .nfe-toolbar {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(17, 22, 19, 0.92);
}

.flow-viewer .nfe-node:focus-visible .nfe-node-shell {
  stroke: #ffffff;
  stroke-width: 4;
}

@media (max-width: 700px) {
  .flow-viewer .nfe-stage {
    min-height: 430px;
    height: 520px;
  }
}

@media print {
  .flow-viewer .nfe-toolbar {
    display: none;
  }

  .flow-viewer .nfe-stage {
    height: 500px;
    break-inside: avoid;
  }
}

@media print {
  .nfe-toolbar {
    display: none !important;
  }

  .nfe-stage {
    height: 620px;
    border-color: #999;
    box-shadow: none;
  }
}