:root {
  --primary-color: oklch(0.6235 0.22 294);
  --uncode-color: oklch(45.7% 0.24 277.023);
  --component-color: oklch(65.6% 0.241 354.308);
  --text-edit-color: oklch(62.3% 0.214 259.815);
  --text-edit-selection-color: oklch(62.3% 0.214 259.815 / 0.2);

  --handle-color: oklch(55.2% 0.016 285.938);
  --handle-color-transparent: oklch(55.2% 0.016 285.938 / 0.7);
  --primary-color-selection: oklch(0.59 0.18 294 / 0.3);

  --text-color-white: white;

  --spacing-2xs: 0.1875rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.375rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 1.25rem;

  --transition-fast: 0.1s ease-in-out;
  --transition-medium: 0.2s ease-in-out;

  --z-index-high: 10000;
  --z-index-highlight: 500;
  --z-index-medium: 1000;

  --letter-spacing: 0.02em;
  --font-family-primary: "Manrope", sans-serif;
}

.node-provider {
  ::selection {
    background: transparent;
  }

  ::-moz-selection {
    background: transparent;
  }

  ::-webkit-selection {
    background: transparent;
  }
}

.node-tools {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  gap: var(--spacing-xs);
  z-index: var(--z-index-high);
  transform: translate3d(0, 100%, 0);
  transform-origin: bottom center;
  transition: opacity var(--transition-fast);
  opacity: var(--tool-opacity);
  padding-top: var(--spacing-2xs);
  display: flex;
  justify-content: center;
  contain: layout style;
}

.highlight-frame-overlay {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: var(--z-index-highlight);
  overflow: visible;
  contain: layout style paint;
  will-change: transform;
}

.viewport-labels-overlay {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: var(--z-index-highlight);
  overflow: visible;
  contain: layout style paint;
  will-change: transform;
}

.viewport-label-text {
  font-size: 0.6875rem;
  font-weight: 500;
  font-family: var(--font-family-primary);
  letter-spacing: var(--letter-spacing);
  fill: oklch(0.5 0 0);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media (prefers-color-scheme: dark) {
  .viewport-label-text {
    fill: oklch(0.5 0 0);
  }

  .viewport-label-text:hover {
    fill: oklch(0.7 0 0);
  }
}

@media (prefers-color-scheme: light) {
  .viewport-label-text {
    fill: oklch(0.7 0 0);
  }

  .viewport-label-text:hover {
    fill: oklch(0.5 0 0);
  }
}

.highlight-frame-rect {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 2px; /* Fixed width - vector-effect keeps it crisp */
}

.highlight-frame-overlay.is-instance .highlight-frame-rect {
  stroke: var(--component-color);
}

.highlight-frame-overlay.is-text-edit .highlight-frame-rect {
  stroke: var(--text-edit-color);
}

.highlight-frame-handle {
  fill: white;
  stroke: var(--primary-color);
  stroke-width: 1px;
  pointer-events: auto;
  cursor: nwse-resize;
}

.highlight-frame-overlay.is-instance .highlight-frame-handle {
  stroke: var(--component-color);
}

.highlight-frame-overlay.is-text-edit .highlight-frame-handle {
  stroke: var(--text-edit-color);
}

.highlight-frame-handle.handle-top-left {
  cursor: nwse-resize;
}

.highlight-frame-handle.handle-top-right {
  cursor: nesw-resize;
}

.highlight-frame-handle.handle-bottom-right {
  cursor: nwse-resize;
}

.highlight-frame-handle.handle-bottom-left {
  cursor: nesw-resize;
}

.highlight-frame-tools-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: var(--z-index-highlight);
  contain: layout style;
}

.tag-label {
  background-color: var(--primary-color);
  color: var(--text-color-white);
  font-size: 0.575rem;
  font-weight: 500;
  height: 1rem;
  padding: 0.5625rem var(--spacing-sm);
  line-height: 1.4;
  border-radius: var(--spacing-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.highlight-frame-tools-wrapper.is-instance .tag-label,
.node-tools.is-instance .tag-label {
  background-color: var(--component-color);
}

.highlight-frame-tools-wrapper.is-text-edit .tag-label,
.node-tools.is-text-edit .tag-label {
  background-color: var(--text-edit-color);
}

.viewport {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--container-width);
}

.resize-handle {
  position: absolute;
  top: var(--spacing-lg);
  right: -12px;
  width: 12px;
  height: 40px;
  cursor: ew-resize;
  z-index: var(--z-index-high);
  display: flex;
  opacity: 0;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transform: scale(calc(1 / var(--zoom)));
  transform-origin: top left;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
}

.viewport:hover .resize-handle {
  opacity: 1;
  visibility: visible;
}

.resize-handle::before {
  content: "";
  position: relative;
  top: 0;
  right: 0;
  width: 3px;
  height: 32px;
  background: var(--handle-color);
  border-radius: 4px;
  transition: transform var(--transition-medium);
}

.resize-handle:hover::before {
  transform: scaleY(1.3);
}

.resize-presets {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  visibility: hidden;
  opacity: 0;
  font-family: var(--font-family-primary);
  letter-spacing: var(--letter-spacing);
  transition:
    visibility var(--transition-fast),
    opacity var(--transition-fast);
}

.resize-handle:hover .resize-presets {
  visibility: visible;
  opacity: 1;
}

.resize-preset-button {
  background: var(--handle-color-transparent);
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--spacing-md);
  font-size: 0.625rem;
  text-wrap: nowrap;
  text-align: left;
  backdrop-filter: blur(8px);
  transition: background var(--transition-fast);
  color: var(--text-color-white);
  width: fit-content;

  &:hover {
    background: var(--handle-color);
  }

  &.is-active {
    background: var(--uncode-color);
  }
}

.is-editable {
  outline: none;
  user-select: text;

  &::selection {
    background: var(--text-edit-selection-color);
  }

  &::-moz-selection {
    background: var(--text-edit-selection-color);
  }

  &::-webkit-selection {
    background: var(--text-edit-selection-color);
  }
}