.editor-toolbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(17,17,20,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.5);
}
.editor-toolbar__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; }
.editor-toolbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: pulse 2.4s var(--ease) infinite; }
.editor-btn { font-family: var(--font-sans); font-size: 12px; color: var(--ink-1); background: transparent; border: 1px solid var(--ink-4); border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: border-color var(--dur-micro) var(--ease); text-decoration: none; }
.editor-btn:hover { border-color: var(--brand-30); }
.editor-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.editor-btn i { width: 14px; height: 14px; }
.editor-notice { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: rgba(184,67,67,0.14); border: 1px solid #b84343; color: #ff9c9c; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; z-index: 300; }

#app.is-editing .node { cursor: grab; user-select: none; }
#app.is-editing .node.is-selected { border-color: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px var(--brand), 0 0 32px rgba(255,107,53,0.18); }
#app.is-editing .node.is-dragging { cursor: grabbing; opacity: 0.9; }

/* alignment guide lines rendered in SVG */
.editor-guide { stroke: var(--brand-hi, #ff7a3d); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.7; pointer-events: none; }

.editor-menu { position: fixed; z-index: 400; min-width: 200px; padding: 6px; background: var(--surface-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 2px; }
.editor-menu button { background: transparent; color: var(--ink-1); border: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.editor-menu button:hover { background: rgba(255,255,255,0.04); }
.editor-menu button.danger:hover { background: rgba(184,67,67,0.14); color: #ff9c9c; }
.editor-menu hr { border: none; height: 1px; background: var(--ink-4); margin: 4px 2px; }

[contenteditable="true"].is-editing-text { outline: 1px solid var(--brand); outline-offset: 2px; border-radius: 4px; cursor: text; }

.edge-handle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); border: 1px solid var(--bg-canvas); cursor: crosshair; z-index: 10; opacity: 0.92; transition: transform 120ms var(--ease); }
.edge-handle:hover { transform: scale(1.3); }
.edge-handle--top    { top: -6px; left: calc(50% - 5px); }
.edge-handle--right  { right: -6px; top: calc(50% - 5px); }
.edge-handle--bottom { bottom: -6px; left: calc(50% - 5px); }
.edge-handle--left   { left: -6px; top: calc(50% - 5px); }

.editor-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: rgba(17,17,20,0.92); border: 1px solid var(--brand-30); color: var(--brand); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; z-index: 300; backdrop-filter: blur(20px); animation: toastIn 260ms var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }