/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.svelte-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.svelte-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.svelte-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.svelte-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.svelte-flow__pane {
  z-index: 1;
}
.svelte-flow__pane.draggable {
    cursor: grab;
  }
.svelte-flow__pane.dragging {
    cursor: grabbing;
  }
.svelte-flow__pane.selection {
    cursor: pointer;
  }
.svelte-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.svelte-flow__renderer {
  z-index: 4;
}
.svelte-flow__selection {
  z-index: 6;
}
.svelte-flow__nodesselection-rect:focus,
.svelte-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.svelte-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.svelte-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.svelte-flow .svelte-flow__edges {
  position: absolute;
}
.svelte-flow .svelte-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.svelte-flow__edge {
  pointer-events: visibleStroke;
}
.svelte-flow__edge.selectable {
    cursor: pointer;
  }
.svelte-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.svelte-flow__edge.animated path.svelte-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.svelte-flow__edge.inactive {
    pointer-events: none;
  }
.svelte-flow__edge.selected,
  .svelte-flow__edge:focus,
  .svelte-flow__edge:focus-visible {
    outline: none;
  }
.svelte-flow__edge.selected .svelte-flow__edge-path,
  .svelte-flow__edge.selectable:focus .svelte-flow__edge-path,
  .svelte-flow__edge.selectable:focus-visible .svelte-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.svelte-flow__edge-textwrapper {
    pointer-events: all;
  }
.svelte-flow__edge .svelte-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.svelte-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.svelte-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.svelte-flow__connection {
  pointer-events: none;
}
.svelte-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.svelte-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.svelte-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.svelte-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.svelte-flow__node.selectable {
    cursor: pointer;
  }
.svelte-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.svelte-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.svelte-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.svelte-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.svelte-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.svelte-flow__handle.connectingfrom {
    pointer-events: all;
  }
.svelte-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.svelte-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.svelte-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.svelte-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.svelte-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.svelte-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.svelte-flow__pane.selection .svelte-flow__panel {
  pointer-events: none;
}
.svelte-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.svelte-flow__panel.top {
    top: 0;
  }
.svelte-flow__panel.bottom {
    bottom: 0;
  }
.svelte-flow__panel.top.center, .svelte-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.svelte-flow__panel.left {
    left: 0;
  }
.svelte-flow__panel.right {
    right: 0;
  }
.svelte-flow__panel.left.center, .svelte-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.svelte-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.svelte-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.svelte-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.svelte-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.svelte-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.svelte-flow__minimap-svg {
    display: block;
  }
.svelte-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.svelte-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.svelte-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.svelte-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.svelte-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.svelte-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.svelte-flow__controls.horizontal {
    flex-direction: row;
  }
.svelte-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.svelte-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.svelte-flow__edge.updating .svelte-flow__edge-path {
      stroke: #777;
    }
.svelte-flow__edge-text {
    font-size: 10px;
  }
.svelte-flow__node.selectable:focus,
  .svelte-flow__node.selectable:focus-visible {
    outline: none;
  }
.svelte-flow__node-input,
.svelte-flow__node-default,
.svelte-flow__node-output,
.svelte-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.svelte-flow__node-input.selectable:hover, .svelte-flow__node-default.selectable:hover, .svelte-flow__node-output.selectable:hover, .svelte-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.svelte-flow__node-input.selectable.selected,
    .svelte-flow__node-input.selectable:focus,
    .svelte-flow__node-input.selectable:focus-visible,
    .svelte-flow__node-default.selectable.selected,
    .svelte-flow__node-default.selectable:focus,
    .svelte-flow__node-default.selectable:focus-visible,
    .svelte-flow__node-output.selectable.selected,
    .svelte-flow__node-output.selectable:focus,
    .svelte-flow__node-output.selectable:focus-visible,
    .svelte-flow__node-group.selectable.selected,
    .svelte-flow__node-group.selectable:focus,
    .svelte-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.svelte-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.svelte-flow__nodesselection-rect,
.svelte-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.svelte-flow__nodesselection-rect:focus,
  .svelte-flow__nodesselection-rect:focus-visible,
  .svelte-flow__selection:focus,
  .svelte-flow__selection:focus-visible {
    outline: none;
  }
.svelte-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.svelte-flow__controls-button:disabled {
      pointer-events: none;
    }
.svelte-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.svelte-flow__controls-button:last-child {
    border-bottom: none;
  }
.svelte-flow__controls.horizontal .svelte-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.svelte-flow__controls.horizontal .svelte-flow__controls-button:last-child {
    border-right: none;
  }
.svelte-flow__resize-control {
  position: absolute;
}
.svelte-flow__resize-control.left,
.svelte-flow__resize-control.right {
  cursor: ew-resize;
}
.svelte-flow__resize-control.top,
.svelte-flow__resize-control.bottom {
  cursor: ns-resize;
}
.svelte-flow__resize-control.top.left,
.svelte-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.svelte-flow__resize-control.bottom.left,
.svelte-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.svelte-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.svelte-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.svelte-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.svelte-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.svelte-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.svelte-flow__resize-control.handle.top.left {
  left: 0;
}
.svelte-flow__resize-control.handle.bottom.left {
  left: 0;
}
.svelte-flow__resize-control.handle.top.right {
  left: 100%;
}
.svelte-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.svelte-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.svelte-flow__resize-control.line.left,
.svelte-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.svelte-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.svelte-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.svelte-flow__resize-control.line.top,
.svelte-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.svelte-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.svelte-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.svelte-flow__edge-label {
  text-align: center;
  position: absolute;
  padding: 2px;
  font-size: 10px;
  color: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
  background: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.svelte-flow__container {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

  .transparent.svelte-mcxw3d {
    background: transparent;
  }

  .a11y-hidden.svelte-mlo6lh {
    display: none;
  }

  .a11y-live-msg.svelte-mlo6lh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    clip-path: inset(100%);
  }

  .svelte-flow__selection.svelte-4mimz5 {
    position: absolute;
    top: 0;
    left: 0;
  }

  .svelte-flow__selection-wrapper.svelte-dywz2t {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    pointer-events: all;
  }

  .svelte-flow__selection-wrapper.svelte-dywz2t:focus,
  .svelte-flow__selection-wrapper.svelte-dywz2t:focus-visible {
    outline: none;
  }

  .svelte-flow.svelte-1tfmopa {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;

    background-color: var(--background-color, var(--background-color-default));
  }

  :root {
    --background-color-default: #fff;
    --background-pattern-color-default: #ddd;

    --minimap-mask-color-default: rgb(240, 240, 240, 0.6);
    --minimap-mask-stroke-color-default: none;
    --minimap-mask-stroke-width-default: 1;

    --controls-button-background-color-default: #fefefe;
    --controls-button-background-color-hover-default: #f4f4f4;
    --controls-button-color-default: inherit;
    --controls-button-color-hover-default: inherit;
    --controls-button-border-color-default: #eee;
  }

	.store-card.svelte-94alzx {
		width: 280px;
		border: 1px solid var(--color-border);
		border-radius: 8px;
		background: var(--color-background);
		box-shadow: var(--shadow-md);
		display: flex;
		gap: 10px;
		padding: 12px;
		align-items: flex-start;
	}

	.store-card.vsam.svelte-94alzx {
		border-color: #eab308;
		border-left: 3px solid #eab308;
	}

	.store-icon.svelte-94alzx {
		font-size: 20px;
		line-height: 1;
		color: var(--color-muted-foreground);
		flex-shrink: 0;
	}

	.store-body.svelte-94alzx {
		flex: 1;
		min-width: 0;
	}

	.store-header.svelte-94alzx {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.store-name.svelte-94alzx {
		font-size: 14px;
		font-weight: 600;
		color: var(--color-foreground);
	}

	.store-type.svelte-94alzx {
		font-size: 9px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		padding: 1px 5px;
		border-radius: 3px;
		background: var(--color-muted);
		color: var(--color-muted-foreground);
		flex-shrink: 0;
	}

	.access-row.svelte-94alzx {
		margin-top: 6px;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.access-badge.svelte-94alzx {
		font-size: 8px;
		font-weight: 700;
		font-family: var(--font-mono, monospace);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		padding: 2px 6px;
		border-radius: 3px;
	}

	.migration-target.svelte-94alzx {
		font-size: 10px;
		color: #22c55e;
		font-weight: 500;
		font-family: var(--font-mono, monospace);
	}

	.store-desc.svelte-94alzx {
		font-size: 11px;
		color: var(--color-muted-foreground);
		margin-top: 4px;
		line-height: 1.3;
	}

	.store-purpose.svelte-94alzx {
		font-size: 10px;
		color: var(--color-foreground);
		margin-top: 4px;
		font-style: italic;
	}

	.store-meta.svelte-94alzx {
		margin-top: 6px;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.meta-item.svelte-94alzx {
		font-size: 9px;
		color: color-mix(in srgb, var(--color-foreground), var(--color-background) 50%);
		letter-spacing: 0.3px;
	}

	.edge-label.svelte-q4lif3 {
		font-size: 9px;
		font-weight: 500;
		font-family: var(--font-mono, monospace);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		padding: 2px 6px;
		border-radius: 4px;
		background: var(--color-background);
		border: 1px solid var(--edge-color);
		color: var(--edge-color);
		white-space: nowrap;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.edge-label.control-transfer.svelte-q4lif3 {
		background: var(--color-muted);
		border-color: var(--color-border);
		color: var(--color-muted-foreground);
	}

	.edge-label.cics-access.svelte-q4lif3 {
		background: rgba(239, 68, 68, 0.1);
		border-color: #ef4444;
		color: #ef4444;
	}

	.panel.svelte-1e368f {
		display: flex;
		flex-direction: column;
		font-size: 12px;
		height: 100%;
	}

	.font-mono.svelte-1e368f {
		font-family: var(--font-mono, monospace);
	}

	/* ═══ Header ═══ */
	.panel-header.svelte-1e368f {
		padding: 14px 16px;
		border-bottom: 2px solid var(--color-border);
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.header-top.svelte-1e368f {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.header-actions.svelte-1e368f {
		display: flex;
		align-items: center;
		gap: 6px;
		flex-shrink: 0;
	}

	.program-id.svelte-1e368f {
		font-size: 15px;
		font-weight: 700;
		color: var(--color-foreground);
		letter-spacing: 0.02em;
	}

	.close-btn.svelte-1e368f {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		border: none;
		background: none;
		color: var(--color-muted-foreground);
		border-radius: 5px;
		cursor: pointer;
		flex-shrink: 0;
	}

	.close-btn.svelte-1e368f:hover {
		background: var(--color-muted);
		color: var(--color-foreground);
	}

	.close-btn.svelte-1e368f svg {
		width: 14px;
		height: 14px;
	}

	.program-function.svelte-1e368f {
		font-size: 13px;
		line-height: 1.5;
		color: var(--color-foreground);
		margin: 0;
	}

	.header-meta.svelte-1e368f {
		font-size: 10px;
		color: var(--color-muted-foreground);
		text-transform: uppercase;
		letter-spacing: 0.3px;
	}

	.view-thread-btn.svelte-1e368f {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.04em;
		color: hsl(var(--primary-foreground));
		background: hsl(var(--primary));
		text-decoration: none;
		padding: 4px 10px;
		border-radius: 5px;
		width: fit-content;
		transition:
			opacity 0.15s,
			transform 0.15s;
	}

	.view-thread-btn.svelte-1e368f:hover {
		opacity: 0.85;
		transform: translateY(-0.5px);
	}

	.view-thread-btn.svelte-1e368f svg {
		width: 10px;
		height: 10px;
	}

	/* ═══ Thread Embed ═══ */
	.thread-embed.svelte-1e368f {
		flex: 1;
		overflow-y: auto;
		padding: 12px 8px;
		font-size: 13px;
	}

	.thread-embed-loading.svelte-1e368f {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32px 0;
		color: var(--color-muted-foreground);
	}

	.thread-embed-loading.svelte-1e368f .loading-spinner {
		width: 20px;
		height: 20px;
		animation: svelte-1e368f-spin 1s linear infinite;
	}

	@keyframes svelte-1e368f-spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	.program-card.svelte-m6lcwf {
		width: 340px;
		border: 1px solid var(--color-border);
		border-left: 3px solid var(--difficulty-color, var(--color-border));
		border-radius: 8px;
		padding: 3px;
		box-shadow: var(--shadow-md);
		position: relative;
		transition:
			transform 0.2s linear,
			box-shadow 0.2s linear,
			background 0.2s ease;
		transform-style: preserve-3d;
		isolation: isolate;
		background: var(--color-background);
		transform: perspective(800px) rotateX(calc((var(--mouse-y, 0.5) - 0.5) * -5deg))
			rotateY(calc((var(--mouse-x, 0.5) - 0.5) * 5deg));
	}

	.program-card.hovered.svelte-m6lcwf,
	.program-card.focused.svelte-m6lcwf {
		background: radial-gradient(
			300px circle at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%),
			rgba(0, 240, 255, 0.4) 0%,
			rgba(0, 255, 135, 0.35) 15%,
			rgba(255, 230, 0, 0.3) 30%,
			rgba(255, 90, 0, 0.25) 45%,
			rgba(255, 0, 195, 0.2) 60%,
			rgba(90, 0, 255, 0.15) 75%,
			transparent 100%
		);
		box-shadow:
			var(--shadow-md),
			0 calc(4px + (var(--mouse-y) - 0.5) * 10px) calc(16px + (var(--mouse-y) - 0.5) * 20px)
				rgba(74, 158, 255, 0.12);
	}

	.program-card.focused.svelte-m6lcwf:not(.hovered) {
		background: conic-gradient(
			from var(--rainbow-angle, 0deg) at 50% 50%,
			rgba(0, 240, 255, 0.35),
			rgba(0, 255, 135, 0.3),
			rgba(255, 230, 0, 0.25),
			rgba(255, 90, 0, 0.25),
			rgba(255, 0, 195, 0.2),
			rgba(90, 0, 255, 0.2),
			rgba(0, 240, 255, 0.35)
		);
		animation: svelte-m6lcwf-rainbow-spin 4s linear infinite;
		box-shadow:
			var(--shadow-md),
			0 4px 20px rgba(74, 158, 255, 0.15);
	}

	@keyframes svelte-m6lcwf-rainbow-spin {
		to {
			--rainbow-angle: 360deg;
		}
	}

	@property --rainbow-angle {
		syntax: '<angle>';
		initial-value: 0deg;
		inherits: false;
	}

	.card-grid.svelte-m6lcwf {
		display: grid;
		grid-template-columns: 18px 1fr;
		grid-template-rows: auto auto auto auto auto;
		background: var(--color-background);
		border-radius: 5px;
		overflow: hidden;
	}

	.sidebar.svelte-m6lcwf {
		grid-row: 1 / -1;
		grid-column: 1;
		background: var(--color-background);
		border-right: 1px dashed var(--color-border);
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100%;
	}

	.sidebar-label.svelte-m6lcwf {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		font-size: 9px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: color-mix(in srgb, var(--color-foreground), var(--color-background) 80%);
		white-space: nowrap;
		font-family: var(--font-mono, monospace);
	}

	.header.svelte-m6lcwf {
		grid-column: 2;
		padding: 12px 14px 8px;
		border-bottom: 1px solid var(--color-border);
	}

	.header-row.svelte-m6lcwf {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}

	.header-name.svelte-m6lcwf {
		font-size: 15px;
		font-weight: 600;
		color: var(--color-foreground);
		letter-spacing: -0.01em;
		flex: 1;
	}

	.header-badges.svelte-m6lcwf {
		display: flex;
		gap: 4px;
		align-items: center;
		flex-shrink: 0;
	}

	.difficulty-badge.svelte-m6lcwf {
		font-size: 8px;
		font-weight: 700;
		font-family: var(--font-mono, monospace);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		padding: 2px 6px;
		border-radius: 3px;
		border: 1px solid;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.header-meta.svelte-m6lcwf {
		font-size: 10px;
		color: var(--color-muted-foreground);
		margin-top: 4px;
		text-transform: uppercase;
		letter-spacing: 0.3px;
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.type-badge.svelte-m6lcwf {
		font-size: 9px;
		font-weight: 600;
		font-family: var(--font-mono, monospace);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		padding: 1px 5px;
		border-radius: 3px;
		white-space: nowrap;
	}

	.dep-badges.svelte-m6lcwf {
		grid-column: 2;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		padding: 8px 14px;
		border-bottom: 1px dashed var(--color-border);
	}

	.dep-badge.svelte-m6lcwf {
		font-size: 9px;
		font-weight: 600;
		font-family: var(--font-mono, monospace);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		padding: 2px 6px;
		border-radius: 3px;
		white-space: nowrap;
	}

	.dep-clean.svelte-m6lcwf {
		background: rgba(34, 197, 94, 0.15);
		color: #22c55e;
	}

	.stats.svelte-m6lcwf {
		grid-column: 2;
		display: flex;
		gap: 16px;
		padding: 8px 14px;
		border-bottom: 1px dashed var(--color-border);
		align-items: center;
	}

	.stat.svelte-m6lcwf {
		display: flex;
		align-items: baseline;
		gap: 4px;
	}

	.stat-value.svelte-m6lcwf {
		font-size: 14px;
		font-weight: 500;
		color: var(--color-foreground);
	}

	.stat-label.svelte-m6lcwf {
		font-size: 9px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--color-muted-foreground);
		font-family: var(--font-mono, monospace);
	}

	.migration-notes.svelte-m6lcwf {
		grid-column: 2;
		padding: 8px 14px;
		font-size: 11px;
		line-height: 1.4;
		color: var(--color-muted-foreground);
		border-bottom: 1px dashed var(--color-border);
	}

	.footer.svelte-m6lcwf {
		grid-column: 2;
		padding: 6px 14px 8px;
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}

	.footer-item.svelte-m6lcwf {
		font-size: 10px;
		color: color-mix(in srgb, var(--color-foreground), var(--color-background) 50%);
		letter-spacing: 0.2px;
	}

	.embeddable-graph.svelte-sdeq8w {
		width: 100%;
		--bleed-left: 0px;
	}

	.graph-wrapper.svelte-sdeq8w {
		position: relative;
		width: 100vw;
		margin-left: calc(-1 * var(--bleed-left));
		padding-top: 12px;
	}

	.graph-container.svelte-sdeq8w {
		position: relative;
		height: min(70vh, 720px);
		overflow: hidden;
		background: transparent;
		outline: none;
	}

	.graph-container.svelte-sdeq8w .svelte-flow {
		background: transparent;
	}

	.center-message.svelte-sdeq8w {
		display: flex;
		align-items: center;
		justify-content: center;
		height: min(70vh, 720px);
	}

	.click-hint.svelte-sdeq8w {
		position: absolute;
		bottom: 12px;
		right: 24px;
		font-size: 11px;
		color: var(--color-muted-foreground);
		background: var(--color-background);
		padding: 4px 10px;
		border-radius: 4px;
		border: 1px solid var(--color-border);
		pointer-events: none;
		opacity: 0.8;
	}

	.sidebar-overlay.svelte-sdeq8w {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(380px, 40%);
		background: var(--color-background);
		border-right: 1px solid var(--color-border);
		overflow-y: auto;
		z-index: 10;
		box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
	}

	@media (max-width: 640px) {
		.graph-container.svelte-sdeq8w {
			height: min(75vh, 520px);
			min-height: 400px;
		}

		.center-message.svelte-sdeq8w {
			height: min(75vh, 520px);
			min-height: 400px;
		}

		.sidebar-overlay.svelte-sdeq8w {
			top: auto;
			width: 100%;
			max-height: 45%;
			border-top: 1px solid var(--color-border);
			border-right: none;
			box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
		}

		.click-hint.svelte-sdeq8w {
			display: none;
		}
	}

	.floating-banker.svelte-ecpn0l {
		position: relative;
		height: 0;
		overflow: visible;
		pointer-events: none;
		mix-blend-mode: multiply;
		-webkit-transform: translateZ(0);
	}

	.floating-banker.svelte-ecpn0l img:where(.svelte-ecpn0l) {
		position: absolute;
		left: calc(100% + 2rem);
		top: 0;
		width: 200px !important;
		opacity: 0.7;
		filter: grayscale(1) contrast(1.05) brightness(1.05);
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
	}

	@media (prefers-color-scheme: dark) {
		.floating-banker.svelte-ecpn0l {
			mix-blend-mode: screen;
		}
	}

	@media (max-width: 900px) {
		.floating-banker.svelte-ecpn0l img:where(.svelte-ecpn0l) {
			left: auto;
			right: -2rem;
			opacity: 0.08;
			width: 200px !important;
			max-width: 200px !important;
		}
	}

	@media (max-width: 640px) {
		.floating-banker.svelte-ecpn0l img:where(.svelte-ecpn0l) {
			width: 150px !important;
			max-width: 150px !important;
		}
	}

	.floating-img.svelte-ecpn0l {
		position: relative;
		width: 0;
		height: 0;
		overflow: visible;
		pointer-events: none;
		mix-blend-mode: multiply;
		-webkit-transform: translateZ(0);
	}

	.floating-img.svelte-ecpn0l img:where(.svelte-ecpn0l) {
		position: absolute;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
	}

	.floating-hero.svelte-ecpn0l img:where(.svelte-ecpn0l) {
		left: -320px;
		top: 0;
		width: 280px !important;
		max-width: 280px !important;
		opacity: 0.7;
		filter: contrast(1.05) brightness(1.05);
	}

	@media (prefers-color-scheme: dark) {
		.floating-img.svelte-ecpn0l {
			mix-blend-mode: screen;
		}
	}

	@media (max-width: 900px) {
		.floating-hero.svelte-ecpn0l img:where(.svelte-ecpn0l) {
			left: -2rem;
			opacity: 0.08;
			width: 200px !important;
			max-width: 200px !important;
		}
	}

	@media (max-width: 640px) {
		.floating-hero.svelte-ecpn0l img:where(.svelte-ecpn0l) {
			width: 150px !important;
			max-width: 150px !important;
		}
	}

	pre.svelte-ecpn0l code:where(.svelte-ecpn0l) {
		font-size: 0.875em;
	}

	.graph-embed-wrap.svelte-ecpn0l {
		margin-bottom: -0.55rem;
	}

	.manifest-layout.svelte-ecpn0l {
		position: relative;
		margin: 0.35rem 0 1rem;
	}

	.manifest-copy.svelte-ecpn0l {
		min-width: 0;
	}

	.api-route-tree.svelte-ecpn0l {
		position: absolute;
		right: calc(100% + 2rem);
		top: 0;
		width: 280px;
		margin: 0;
		padding: 0.15rem 0;
	}

        .api-route-tree-title.svelte-ecpn0l {
                margin: 0 0 0.5rem;
                font-size: 0.75rem;
                font-weight: 600;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: hsl(var(--muted-foreground));
        }

        .api-route-tree.svelte-ecpn0l pre:where(.svelte-ecpn0l) {
                margin: 0;
                font-size: 0.7rem;
                line-height: 1.55;
                white-space: pre;
                color: hsl(var(--foreground));
                background: transparent;
                border: none;
                padding: 0;
        }

        .api-route-tree.svelte-ecpn0l pre:where(.svelte-ecpn0l) code:where(.svelte-ecpn0l) {
                background: transparent;
                border: none;
                padding: 0;
                box-shadow: none;
                color: inherit;
        }

	.migration-app-preview.svelte-ecpn0l {
		position: relative;
		left: 50%;
                transform: translateX(-50%);
                width: min(94vw, 1500px);
                margin: 1.5rem 0 0;
        }

        .migration-app-iframe.svelte-ecpn0l {
                display: block;
                width: 100%;
                height: 96vh;
                min-height: 820px;
                border: 1px solid hsl(var(--border));
                border-radius: 0.9rem;
                background: transparent;
        }



	@media (max-width: 1200px) {
		.manifest-layout.svelte-ecpn0l {
			gap: 0.75rem;
		}

		.api-route-tree.svelte-ecpn0l {
			position: static;
			width: 100%;
			margin: 0.75rem 0 1rem;
		}

                .api-route-tree.svelte-ecpn0l pre:where(.svelte-ecpn0l) {
                        font-size: 0.74rem;
                }

                .api-route-tree.svelte-ecpn0l pre:where(.svelte-ecpn0l) code:where(.svelte-ecpn0l) {
                        white-space: pre-wrap;
                }

                .api-route-tree-title.svelte-ecpn0l {
                        margin-bottom: 0.35rem;
                }

                .migration-app-preview.svelte-ecpn0l {
                        left: 0;
                        transform: none;
        		width: 100%;
        	}

        	.migration-app-iframe.svelte-ecpn0l {
        		height: 82vh;
        		min-height: 620px;
        	}

        }

	.hands-dirty-heading.svelte-ecpn0l {
		margin-top: 1.1rem;
		margin-bottom: 0.85rem;
	}

        @media (max-width: 640px) {
        	.migration-app-iframe.svelte-ecpn0l {
        		height: 60vh;
        		min-height: 400px;
        		border-radius: 0.5rem;
        	}
        }