:root {
  --swu-bg-color: #f7f9fa;
  --swu-node-bg: #ffffff;
  --swu-node-border: #d1d5db;
  --swu-node-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --swu-text-color: #1f2937;
  --swu-key-color: #be185d;
  --swu-string-color: #059669;
  --swu-number-color: #2563eb;
  --swu-boolean-color: #d97706;
  --swu-null-color: #6b7280;
  --swu-line-color: #adb5bd;
  --swu-accent-color: #3b82f6;
}

[data-swu-theme="dark"] {
  --swu-bg-color: #1a1a1a;
  --swu-node-bg: #2d2d2d;
  --swu-node-border: #404040;
  --swu-node-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --swu-text-color: #e5e5e5;
  --swu-key-color: #ff6b9d;
  --swu-string-color: #4ade80;
  --swu-number-color: #60a5fa;
  --swu-boolean-color: #fb923c;
  --swu-null-color: #9ca3af;
  --swu-line-color: #525252;
}

.swu-container {
  display: flex;
  gap: 1rem;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--swu-text-color);
}

.swu-input-wrapper {
  flex-shrink: 0;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.swu-textarea {
  width: 100%;
  min-height: 200px;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid var(--swu-node-border);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9rem;
  background-color: var(--swu-node-bg);
  color: var(--swu-text-color);
  transition: border-color 0.3s ease;
  resize: vertical;
  flex-grow: 1;
}

.swu-button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--swu-accent-color);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 500;
}

.swu-button:hover {
  filter: brightness(0.9);
}

.swu-button:active {
  transform: scale(0.98);
}

.swu-viewer-container {
  position: relative;
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--swu-node-border);
  border-radius: 8px;
  background-color: #e9ecef;
  cursor: grab;
}

[data-swu-theme="dark"] .swu-viewer-container {
  background-color: #0f0f0f;
}

.swu-viewer-container:active {
  cursor: grabbing;
}

.swu-canvas {
  position: absolute;
  transform-origin: 0 0;
  width: 8000px;
  height: 8000px;
}

.swu-connectors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.swu-nodes {
  position: relative;
  z-index: 2;
}

.swu-node {
  position: absolute;
  min-width: 180px;
  background-color: var(--swu-node-bg);
  border: 1px solid var(--swu-node-border);
  border-radius: 8px;
  box-shadow: var(--swu-node-shadow);
  padding: 10px 15px;
  transition: transform 0.3s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-size: 0.9rem;
  user-select: none;
  text-align: left;
}

.swu-node.expandable {
  cursor: pointer;
  border-left: 5px solid var(--swu-accent-color);
}

[data-swu-direction="vertical"] .swu-node.expandable {
  border-left: 1px solid var(--swu-node-border);
  border-top: 5px solid var(--swu-accent-color);
}

.swu-node.expandable:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.swu-key {
  color: var(--swu-key-color);
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
  font-size: 0.8rem;
}

.swu-key.editable:hover {
  background-color: rgba(0, 0, 0, 0.05);
  cursor: text;
  border-radius: 3px;
  padding: 2px;
  margin: -2px;
}

.swu-value {
  font-family: "Courier New", Courier, monospace;
  word-wrap: break-word;
}

.swu-value .unfold-hint {
  color: #6b7280;
  font-size: 0.8em;
  font-style: italic;
}

.swu-value.editable:hover {
  background-color: rgba(0, 0, 0, 0.05);
  cursor: text;
  border-radius: 3px;
  padding: 2px;
  margin: -2px;
}

.swu-value-string {
  color: var(--swu-string-color);
}

.swu-value-number {
  color: var(--swu-number-color);
}

.swu-value-boolean {
  color: var(--swu-boolean-color);
}

.swu-value-null {
  color: var(--swu-null-color);
}

.swu-edit-input {
  width: 100%;
  padding: 4px 6px;
  border: 2px solid var(--swu-accent-color);
  border-radius: 3px;
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
  background-color: var(--swu-node-bg);
  color: var(--swu-text-color);
  outline: none;
}

.swu-edit-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}