/* edit-overlay.css — the editing layer's look, mirroring the studio's editor v2 canvas (blue ring, white halo,
   9px handles, pill toolbar). Every class is prefixed eo- so it cannot collide with the site. */
.eo-layer {
  position: absolute; inset: 0; z-index: 40;
  --eo-sel: #3B82F6; --eo-glow: rgba(59, 130, 246, 0.22); --eo-wash: rgba(59, 130, 246, 0.06); --eo-tag: #2563EB;
  font-family: inherit; user-select: none; -webkit-user-select: none; touch-action: none;
}
.eo-layer[hidden] { display: none; }
.eo-hover, .eo-sel {
  position: absolute; left: 0; top: 0; pointer-events: none; box-sizing: border-box; will-change: transform;
}
.eo-hover {
  border: 2px solid var(--eo-sel); border-radius: 6px; background: var(--eo-wash);
  box-shadow: 0 0 0 2px var(--eo-glow), 0 0 14px 3px var(--eo-glow);
}
.eo-hover[hidden], .eo-sel[hidden], .eo-bar[hidden] { display: none; }
.eo-tag {
  position: absolute; left: 0; top: -24px; white-space: nowrap; border-radius: 6px; padding: 3px 8px;
  font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: .01em; color: #fff; background: var(--eo-tag);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}
.eo-sel {
  border: 1.5px solid var(--eo-sel); border-radius: 3px; box-shadow: 0 0 0 1.5px #fff;
}
.eo-handle {
  position: absolute; width: 9px; height: 9px; box-sizing: border-box; border-radius: 1.5px;
  border: 1.5px solid var(--eo-sel); background: #fff; pointer-events: none; display: none;
}
.eo-sel.eo-scalable .eo-handle { display: block; pointer-events: auto; }
.eo-tl { left: -6px; top: -6px; cursor: nwse-resize; }
.eo-tr { right: -6px; top: -6px; cursor: nesw-resize; }
.eo-bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
.eo-br { right: -6px; bottom: -6px; cursor: nwse-resize; }
.eo-bar {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 10px;
  border: 1px solid #DCDEF5; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  pointer-events: auto; white-space: nowrap; will-change: transform;
}
.eo-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 29px; min-width: 29px; padding: 0 8px;
  border: 0; border-radius: 6px; background: transparent; color: #3D3D8F; font: 500 13px/1 inherit; cursor: pointer;
}
.eo-btn:hover { background: #F5F6FF; }
.eo-btn.eo-ai::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 3l1.9 5.1L18 10l-5.1 1.9L11 17l-1.9-5.1L4 10l5.1-1.9z'/><path d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 3l1.9 5.1L18 10l-5.1 1.9L11 17l-1.9-5.1L4 10l5.1-1.9z'/><path d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/></svg>") center/contain no-repeat; }
.eo-sep { display: block; width: 1px; height: 20px; margin: 0 4px; background: #C4C7C5; }
.eo-swatches { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.eo-swatch {
  width: 20px; height: 20px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.eo-swatch.eo-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--eo-sel); }

/* smart guides: the studio's pink alignment line (cyan when the page sets --eo-guide for a warm background) */
.eo-guide { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--eo-guide, #FF1F8F); will-change: transform; }
.eo-guide[hidden] { display: none; }
.eo-guide-v { width: 1px; }
.eo-guide-h { height: 1px; }