.orm-designer-root {
  --orm-designer-zoom: 1;
  display: grid;
  /*grid-template-columns: 1fr 520px;*/
  gap: 12px;
  min-height: 420px;
}

.orm-designer-imgHost {
  position: relative;
  overflow: auto;
  padding: 0px;
/*  border: 1px solid #ddd;
  border-radius: 10px;
*/  background: #fafafa;
  max-height: 75vh; /* vertical scrollbar when zoomed */
}

.orm-designer-stage {
  position: relative;
  display: inline-block;
  width: calc(100% * var(--orm-designer-zoom));
}

.orm-designer-pageImg {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.orm-designer-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.orm-designer-side { display: flex; flex-direction: column; gap: 12px; }

.orm-designer-toolbar { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }
.orm-designer-btn { padding: 6px 10px; border: 1px solid #bbb; border-radius: 8px; background: white; cursor: pointer; }
.orm-designer-btn:hover { background: #f2f2f2; }
.orm-designer-danger { border-color: #d55; }

.orm-designer-panel { border: 1px solid #ddd; border-radius: 10px; padding: 10px; background: #fff; }
.orm-designer-panelTitle { font-weight: 600; margin-bottom: 8px; }

.orm-designer-kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 10px; align-items: center; }
.orm-designer-k { color: #444; font-size: 13px; }
.orm-designer-v { font-size: 13px; }
.orm-designer-muted { color: #666; }
.orm-designer-hint { margin-top: 10px; font-size: 12px; color: #555; line-height: 1.3; }
.orm-designer-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.orm-designer-input { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 8px; }


/* Tool / type picker */
.orm-designer-type { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid #ddd; border-radius: 10px; background: #fff; }
.orm-designer-typeLabel { font-size: 12px; color: #444; }
.orm-designer-typeSelect { min-width: 140px; }
.orm-designer-hintInline { font-size: 12px; color: #666; }

/* Split UI */
.orm-designer-splitRow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orm-designer-splitInput { width: 80px; }
.orm-designer-splitX { color: #555; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

pre.orm-designer-json { max-height: 45vh; overflow: auto; background: #0b0b0b; color: #eaeaea; padding: 10px; border-radius: 8px; }

/* Context menu */
.orm-designer-menu {
  position: fixed;
  z-index: 100000;
  display: none;
  min-width: 220px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.orm-designer-menu-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}
.orm-designer-menu-item:hover { background: #f3f3f3; }
.orm-designer-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.orm-designer-menu-sep { height: 1px; background: #eee; margin: 6px 2px; }

.orm-designer-checkRow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }