/** The design surface itself — boundary, grid, rulers, selection handles. */
.eps-canvas-stage {
  position: relative;
  background:
    linear-gradient(var(--eps-border) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--eps-border) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--eps-surface);
  background-blend-mode: normal;
  box-shadow: var(--eps-shadow-md);
  border-radius: var(--eps-radius-sm);
}
.eps-canvas-stage.eps-grid-hidden { background-image: none; }

.eps-boundary {
  fill: rgba(255,255,255,0.001);
  stroke: var(--eps-text-primary);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.eps-boundary--locked { stroke-dasharray: 4 3; }
.eps-safe-margin {
  fill: none;
  stroke: var(--eps-text-tertiary);
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.eps-element {
  cursor: move;
}
.eps-element__outline {
  /* Always transparent-filled — this rect exists only to carry a stroke when
     selected or out-of-bounds. Without this base rule it falls back to SVG's
     default fill (solid black), which sits on top of the element's actual
     artwork (painted first) and hides it entirely until .is-selected adds
     its own fill:none — i.e. exactly the "black box until you click it" bug. */
  fill: none;
  pointer-events: none;
}
.eps-element.is-selected > .eps-element__outline {
  stroke: var(--eps-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.eps-element.is-out-of-bounds > .eps-element__outline {
  stroke: var(--eps-warning);
}
.eps-element.is-locked { cursor: not-allowed; }
.eps-element.is-hidden { display: none; }

.eps-handle {
  fill: var(--eps-surface);
  stroke: var(--eps-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.eps-handle--rotate { cursor: alias; }
.eps-handle--resize { cursor: nwse-resize; }

.eps-ruler {
  position: absolute;
  background: var(--eps-surface-translucent);
  backdrop-filter: blur(8px);
  font-size: 9px;
  color: var(--eps-text-tertiary);
}
.eps-ruler--top { top: 0; left: 24px; right: 0; height: 24px; }
.eps-ruler--left { top: 24px; left: 0; bottom: 0; width: 24px; }

.eps-guide { stroke: var(--eps-accent); stroke-width: 1; opacity: 0.6; vector-effect: non-scaling-stroke; }

.eps-canvas-controls {
  position: absolute;
  bottom: var(--eps-space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--eps-space-2);
  background: var(--eps-surface-translucent);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-pill);
  padding: 6px 12px;
  box-shadow: var(--eps-shadow-md);
}
.eps-canvas-controls__zoom-label { font-size: 12px; color: var(--eps-text-secondary); min-width: 42px; text-align: center; }