.gui-editor-shell {
  --ge-border: #d6e4fb;
  --ge-soft-bg: #f7faff;
  --ge-canvas-bg: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  --ge-grid: rgba(59, 130, 246, 0.14);
  --ge-node-bg: rgba(14, 79, 210, 0.1);
  --ge-node-border: rgba(14, 79, 210, 0.48);
  --ge-selected: #ef4444;
}

.gui-editor-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap: 1rem;
}

.gui-editor-grid:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  background: #eef4ff;
  overflow: hidden;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
}

.gui-editor-grid:fullscreen .gui-editor-panel {
  height: calc(100vh - 2rem);
  overflow: auto;
}

.gui-editor-grid:fullscreen .gui-canvas-wrap {
  min-height: calc(100vh - 13rem);
}

.gui-editor-grid:fullscreen .gui-canvas-stage {
  min-height: calc(100vh - 15rem);
}

.gui-editor-panel {
  min-height: 260px;
}

.gui-editor-section + .gui-editor-section {
  border-top: 1px solid var(--ge-border);
  padding-top: 1rem;
}

.gui-component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.gui-asset-list,
.gui-script-list,
.gui-project-list {
  border: 1px solid var(--ge-border);
  border-radius: 14px;
  background: #fff;
  max-height: 220px;
  overflow: auto;
}

.gui-asset-item,
.gui-script-item,
.gui-project-item {
  border-bottom: 1px solid #eef3fc;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font-size: 0.84rem;
}

.gui-asset-item[draggable="true"] {
  cursor: grab;
}

.gui-asset-item[draggable="true"]:active {
  cursor: grabbing;
}

.gui-asset-item:last-child,
.gui-script-item:last-child,
.gui-project-item:last-child {
  border-bottom: 0;
}

.gui-asset-item:hover,
.gui-script-item:hover,
.gui-project-item:hover {
  background: var(--ge-soft-bg);
}

.gui-asset-item.active,
.gui-script-item.active,
.gui-project-item.active {
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.32);
}

.gui-canvas-wrap {
  border: 1px solid var(--ge-border);
  border-radius: 20px;
  background: #f9fbff;
  padding: 0.85rem;
  min-height: 460px;
}

.gui-canvas-wrap.is-drop-active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.gui-canvas-stage {
  position: relative;
  border: 1px dashed #b8c9eb;
  border-radius: 16px;
  background:
    linear-gradient(90deg, transparent 24px, var(--ge-grid) 25px, transparent 26px),
    linear-gradient(0deg, transparent 24px, var(--ge-grid) 25px, transparent 26px),
    var(--ge-canvas-bg);
  background-size: 25px 25px, 25px 25px, auto;
  min-height: 420px;
  overflow: hidden;
}

.gui-canvas-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border-radius: 0;
  margin: 0;
  padding: 1.25rem;
  background: #f3f7ff;
}

@media (max-width: 1199.98px) {
  .gui-editor-grid:fullscreen {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .gui-editor-grid:fullscreen .gui-editor-panel {
    height: auto;
    overflow: visible;
  }
}

.gui-canvas-wrap:fullscreen .gui-canvas-stage {
  width: calc(100vw - 2.5rem) !important;
  height: calc(100vh - 2.5rem) !important;
  max-width: none;
  max-height: none;
}

.gui-node {
  position: absolute;
  border: 1px solid var(--ge-node-border);
  background: var(--ge-node-bg);
  border-radius: 9px;
  color: #0f172a;
  font-size: 0.75rem;
  line-height: 1.15;
  user-select: none;
  overflow: hidden;
}

.gui-node-label {
  position: absolute;
  left: 5px;
  top: 4px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.gui-node[data-type="text"] {
  border-style: dashed;
  background: rgba(34, 197, 94, 0.11);
  border-color: rgba(22, 163, 74, 0.55);
}

.gui-node[data-type="image"],
.gui-node[data-type="expanded_image"] {
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.18), rgba(14, 116, 144, 0.12));
}

.gui-node.selected {
  border-color: var(--ge-selected);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.23);
}

.gui-output {
  min-height: 220px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
}

.gui-status {
  font-size: 0.82rem;
  color: #334155;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
  background: #f8fafc;
}

.gui-node-tree {
  border: 1px solid var(--ge-border);
  border-radius: 12px;
  background: #fff;
  max-height: 220px;
  overflow: auto;
}

.gui-node-tree-row {
  border-bottom: 1px solid #edf2fb;
  padding: 0.42rem 0.58rem;
  cursor: pointer;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gui-node-tree-row:last-child {
  border-bottom: 0;
}

.gui-node-tree-row:hover {
  background: var(--ge-soft-bg);
}

.gui-node-tree-row.active {
  background: #edf4ff;
  font-weight: 600;
}

.gui-node-properties {
  border: 1px solid var(--ge-border);
  border-radius: 12px;
  background: #fff;
  padding: 0.65rem;
}

.gui-node-properties .form-label {
  font-size: 0.73rem;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #475569;
}

.gui-node-properties .form-control,
.gui-node-properties .form-select {
  font-size: 0.82rem;
}

.gui-node-properties .row {
  --bs-gutter-y: 0.42rem;
}

@media (max-width: 1399.98px) {
  .gui-editor-grid {
    grid-template-columns: 1fr;
  }

  .gui-canvas-wrap {
    min-height: 360px;
  }

  .gui-canvas-stage {
    min-height: 320px;
  }
}