* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body { height: 100dvh; display: flex; flex-direction: column; font: 14px system-ui, sans-serif; color: #1d2330; background: #f4f6fa; }

#toolbar { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 8px 12px; background: #fff; border-top: 1px solid #d9dee8; }
.group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
button, select, input[type=text], .file, .color {
  font: inherit; padding: 5px 10px; border: 1px solid #c4cad6; border-radius: 6px; background: #fff; color: inherit;
}
button, .file { cursor: pointer; }
button:hover, .file:hover { background: #eef2fb; }
button.danger { color: #b3261e; }
.color { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; }
.color input { border: 0; padding: 0; width: 28px; height: 24px; background: none; cursor: pointer; }

main { flex: 1; display: flex; min-height: 0; }
#canvas {
  position: relative; flex: 1; overflow: auto;
  --cw: 200px; --ch: 80px;
  background-color: #fbfcfe;
  background-image:
    linear-gradient(#e6eaf2 1px, transparent 1px),
    linear-gradient(90deg, #e6eaf2 1px, transparent 1px);
  background-size: var(--cw) var(--ch);
}
#edges { position: absolute; left: 0; top: 0; pointer-events: none; }
#nodes { position: absolute; left: 0; top: 0; }

.node {
  position: absolute; width: 160px; height: 48px; padding: 4px 8px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 10px; color: #fff; font-weight: 500; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); line-height: 1.15;
}
.node.selected { outline: 3px solid #1d2330; outline-offset: 2px; }
.node.dragging { opacity: .85; z-index: 10; cursor: grabbing; }
.node.light { color: #1d2330; }
.node span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.node input { width: 100%; font: inherit; text-align: center; border: 0; border-radius: 4px; padding: 2px; }

#ghost { position: absolute; width: 160px; height: 48px; border: 2px dashed #4f8cff; border-radius: 10px; background: rgba(79,140,255,.12); pointer-events: none; }

#jsonPanel { width: 340px; padding: 10px; background: #fff; border-left: 1px solid #d9dee8; display: flex; flex-direction: column; gap: 8px; }
#jsonPanel h3 { margin: 0; }
#json { flex: 1; font: 12px ui-monospace, monospace; resize: none; padding: 6px; border: 1px solid #c4cad6; border-radius: 6px; }
#jsonPanel .row { display: flex; gap: 6px; }
#jsonMsg { margin: 0; min-height: 1.2em; font-size: 12px; }
#jsonMsg.err { color: #b3261e; }
footer { padding: 4px 12px calc(4px + env(safe-area-inset-bottom)); font-size: 12px; color: #667; background: #fff; border-top: 1px solid #d9dee8; }

.node .add {
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; border-radius: 50%; line-height: 1;
  font-size: 18px; font-weight: 700; color: #1d2330; background: #fff; border: 2px solid #1d2330;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.node:hover .add, .node.selected .add { opacity: 1; pointer-events: auto; }

#canvas { -webkit-overflow-scrolling: touch; }
.panelhead { display: flex; justify-content: space-between; align-items: center; }
#closeJson { display: none; }

@media (pointer: coarse) {
  .node .add { width: 32px; height: 32px; right: -18px; font-size: 22px; }
  button, select, .file, .color { min-height: 40px; }
}

@media (max-width: 700px) {
  button, select, input[type=text], textarea, .node input { font-size: 16px; } /* avoid iOS zoom-on-focus */
  #toolbar { flex-wrap: nowrap; overflow-x: auto; gap: 6px 14px; padding: 8px; -webkit-overflow-scrolling: touch; }
  .group { flex-wrap: nowrap; flex: none; }
  .group + .group { padding-left: 14px; border-left: 1px solid #d9dee8; }
  #mapName { width: 130px; }
  footer { font-size: 11px; }
  #jsonPanel {
    position: fixed; inset: 0; width: auto; z-index: 50; border: 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  #jsonPanel[hidden] { display: none; }
  #closeJson { display: inline-block; }
}
[hidden] { display: none !important; }