.workflow-overlay {
  position: absolute;
  top: 38.3%;
  left: 24.58%;
  z-index: 4;
  width: 45.35cqw;
  height: 36cqw;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.985);
  border: 1px solid rgba(215, 223, 220, 0.96);
  border-radius: 0.78cqw;
  box-shadow: 0 0.72cqw 2.1cqw rgba(18, 48, 39, 0.13);
}

.workflow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 5.24cqw;
  padding: 1.02cqw 1.45cqw 0.8cqw;
  background: #ffffff;
  border-bottom: 1px solid rgba(223, 229, 228, 0.9);
}

.workflow-header h2,
.workflow-header p {
  margin: 0;
}

.workflow-header h2 {
  color: #101818;
  font-size: 1.2cqw;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: 0;
}

.workflow-header p {
  margin-top: 0.38cqw;
  color: #3f4a47;
  font-size: 0.72cqw;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
  white-space: nowrap;
}

.workflow-toolbar {
  display: flex;
  align-items: center;
  gap: 0.52cqw;
}

.workflow-tool {
  display: inline-grid;
  place-items: center;
  min-width: 2.55cqw;
  height: 2.24cqw;
  padding: 0 0.68cqw;
  color: #313a38;
  background: #ffffff;
  border: 1px solid rgba(223, 229, 228, 0.98);
  border-radius: 0.44cqw;
  box-shadow: 0 0.22cqw 0.58cqw rgba(18, 48, 39, 0.06);
  font-size: 0.82cqw;
  font-weight: 750;
  letter-spacing: 0;
}

.workflow-tool:hover,
.workflow-tool:focus-visible,
.workflow-tool.is-active {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.workflow-tool:disabled {
  cursor: default;
  opacity: 0.38;
}

.workflow-zoom {
  grid-template-columns: auto 0.44cqw;
  gap: 0.55cqw;
  min-width: 5.1cqw;
}

.workflow-zoom::after {
  content: "";
  width: 0.46cqw;
  height: 0.46cqw;
  border-right: 0.11cqw solid currentcolor;
  border-bottom: 0.11cqw solid currentcolor;
  transform: rotate(45deg) translateY(-0.08cqw);
}

.workflow-icon-tool {
  min-width: 2.36cqw;
  padding: 0;
  font-size: 1.02cqw;
  line-height: 1;
}

.workflow-delete {
  background: #f6f7f6;
}

.workflow-separator {
  width: 1px;
  height: 2.15cqw;
  background: rgba(223, 229, 228, 0.92);
}

.workflow-canvas {
  position: relative;
  height: calc(100% - 5.24cqw);
  background-color: #ffffff;
  background-image: radial-gradient(rgba(79, 91, 87, 0.19) 0.065cqw, transparent 0.075cqw);
  background-position: 0.35cqw 0.35cqw;
  background-size: 1.08cqw 1.08cqw;
}

.workflow-node {
  position: absolute;
  z-index: 3;
  left: var(--node-x);
  top: var(--node-y);
  display: grid;
  grid-template-columns: 2.1cqw minmax(0, 1fr);
  align-items: center;
  gap: 0.58cqw;
  width: var(--node-w, 12.15cqw);
  min-height: 3.1cqw;
  padding: 0.44cqw 0.78cqw;
  color: #1e2825;
  background: rgba(255, 255, 255, 0.98);
  border: 0.13cqw solid var(--node-border);
  border-radius: 0.48cqw;
  box-shadow: 0 0.35cqw 0.85cqw rgba(18, 48, 39, 0.08);
  text-align: left;
  user-select: none;
}

.workflow-node img {
  display: block;
  width: 1.82cqw;
  height: 1.82cqw;
  object-fit: contain;
}

.workflow-node span {
  overflow: hidden;
  min-width: 0;
  font-size: 0.72cqw;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-node-blue {
  --node-border: rgba(57, 147, 226, 0.4);
}

.workflow-node-blue span {
  color: #2062b2;
}

.workflow-node-amber {
  --node-border: rgba(218, 151, 30, 0.34);
}

.workflow-node-amber span {
  color: #262321;
}

.workflow-node-green {
  --node-border: rgba(45, 154, 91, 0.34);
}

.workflow-node-green span {
  color: #1c3a2f;
}

.workflow-node:hover,
.workflow-node:focus-visible,
.workflow-node.is-active {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.node-invoice {
  --node-x: 1.46cqw;
  --node-y: 2.74cqw;
}

.node-approval {
  --node-x: 15.18cqw;
  --node-y: 2.74cqw;
}

.node-payment {
  --node-x: 29.54cqw;
  --node-y: 2.74cqw;
}

.node-expense {
  --node-x: 15.18cqw;
  --node-y: 9.65cqw;
}

.node-staff {
  --node-x: 1.46cqw;
  --node-y: 16.5cqw;
}

.node-welcome {
  --node-x: 15.18cqw;
  --node-y: 16.5cqw;
}

.node-training {
  --node-x: 29.54cqw;
  --node-y: 16.5cqw;
  --node-w: 12.75cqw;
}

.workflow-edge {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.workflow-edge-horizontal {
  height: 0;
  border-top: 0.12cqw solid rgba(33, 39, 37, 0.78);
}

.workflow-edge-horizontal::after {
  content: "";
  position: absolute;
  top: -0.31cqw;
  right: -0.04cqw;
  width: 0.5cqw;
  height: 0.5cqw;
  border-top: 0.12cqw solid rgba(33, 39, 37, 0.78);
  border-right: 0.12cqw solid rgba(33, 39, 37, 0.78);
  transform: rotate(45deg);
}

.workflow-edge-vertical {
  width: 0;
  border-left: 0.12cqw solid rgba(33, 39, 37, 0.55);
}

.workflow-edge-vertical::before,
.workflow-edge-vertical::after {
  content: "";
  position: absolute;
  left: -0.32cqw;
  width: 0.5cqw;
  height: 0.5cqw;
  border-top: 0.12cqw solid rgba(33, 39, 37, 0.55);
  border-right: 0.12cqw solid rgba(33, 39, 37, 0.55);
}

.workflow-edge-vertical::before {
  top: -0.06cqw;
  transform: rotate(-45deg);
}

.workflow-edge-vertical::after {
  bottom: -0.06cqw;
  transform: rotate(135deg);
}

.edge-invoice-approval {
  top: 4.3cqw;
  left: 13.35cqw;
  width: 1.32cqw;
}

.edge-approval-payment {
  top: 4.3cqw;
  left: 27.16cqw;
  width: 1.9cqw;
}

.edge-staff-welcome {
  top: 18.05cqw;
  left: 13.35cqw;
  width: 1.32cqw;
}

.edge-welcome-training {
  top: 18.05cqw;
  left: 27.16cqw;
  width: 1.9cqw;
}

.edge-approval-expense {
  top: 6.06cqw;
  left: 20.88cqw;
  height: 3.02cqw;
}

.workflow-dropzone {
  position: absolute;
  left: 7.32cqw;
  top: 24.15cqw;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  width: 31.9cqw;
  min-height: 3.58cqw;
  color: #8b9290;
  background: rgba(255, 255, 255, 0.9);
  border: 0.12cqw dashed rgba(118, 126, 123, 0.42);
  border-radius: 0.58cqw;
  box-shadow: 0 0.25cqw 0.8cqw rgba(18, 48, 39, 0.04);
  font-size: 0.82cqw;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.workflow-dropzone span:first-child {
  color: #68716e;
  font-size: 1.58cqw;
  font-weight: 500;
  line-height: 1;
}

.workflow-dropzone:hover,
.workflow-dropzone:focus-visible,
.workflow-dropzone.is-active {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}