/* ── LAYOUT PANEL ── */
.layout-panel {
  flex:1;
  display:flex;
  overflow:hidden;
}

.layout-canvas-wrap {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#000;
}

.layout-toolbar {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}

.layout-canvas {
  flex:1;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.layout-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.4;
}

/* ── STAGE VIEWPORT (infinite canvas with pan/zoom) ── */
.stage-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: default;
}
.stage-world {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
  min-width: 100%;
  min-height: 100%;
}

.layout-right {
  width:220px;
  flex-shrink:0;
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  background:var(--surface);
}

.props-panel {
  flex:1;
  padding:14px 16px;
  overflow-y:auto;
}

.props-panel::-webkit-scrollbar { width:4px; }
.props-panel::-webkit-scrollbar-thumb { background:var(--border); }

.prop-field { margin-bottom:12px; }
.prop-field-label { font-size:8px; letter-spacing:2px; color:var(--label); text-transform:uppercase; margin-bottom:5px; }
.prop-field-input {
  width:100%;
  font-family:'DM Mono',monospace;
  font-size:10px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  padding:5px 8px;
  outline:none;
  transition:var(--trans);
  border-radius:var(--r-sm);
}
.prop-field-input:focus { border-color:var(--accent2); }

/* Effect-editor colour source: segmented Color 1 / Color 2 / Custom picker. */
.eff-color-mode-row { display:flex; gap:0; }
.eff-color-mode-btn {
  flex:1; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.5px;
  padding:6px 4px; cursor:pointer; color:var(--text2);
  background:var(--bg); border:1px solid var(--border); border-right:none;
  transition:var(--trans);
}
.eff-color-mode-btn:first-child { border-radius:var(--r-sm) 0 0 var(--r-sm); }
.eff-color-mode-btn:last-child  { border-radius:0 var(--r-sm) var(--r-sm) 0; border-right:1px solid var(--border); }
.eff-color-mode-btn:hover { color:var(--text); border-color:var(--border2); }
.eff-color-mode-btn.active {
  color:var(--bg); background:var(--accent2); border-color:var(--accent2);
  font-weight:600;
}

.color-row { display:flex; gap:6px; flex-wrap:wrap; }
.color-swatch {
  width:20px; height:20px; border-radius:var(--r-xs); cursor:pointer;
  border:2px solid transparent; transition:var(--trans);
}
.color-swatch:hover { transform:scale(1.1); }
.color-swatch.active { border-color:#fff; }

.no-selection {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:8px; padding:20px;
}
.no-sel-icon { font-size:28px; opacity:.2; }
.no-sel-text { font-size:9px; letter-spacing:2px; color:var(--border2); text-align:center; line-height:1.7; text-transform:uppercase; }

/* ── BACKGROUND CONTROLS ── */
.bg-brightness-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:8px;
}
.bg-brightness-label {
  font-size:8px;
  letter-spacing:2px;
  color:var(--label);
  text-transform:uppercase;
  white-space:nowrap;
}
input[type=range].bright-slider {
  -webkit-appearance:none;
  width:80px;
  height:5px;
  background:var(--border2);
  outline:none;
  cursor:pointer;
  border-radius:var(--r-pill);
}
input[type=range].bright-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:12px; height:12px;
  background:var(--accent2);
  border-radius:50%;
  cursor:grab;
}
input[type=range].bright-slider::-webkit-slider-thumb:active { cursor:grabbing; }

/* ── BACKGROUND EDIT OVERLAY ── */
#stageBgEditOverlay {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed rgba(255,255,255,0.55);
  cursor: move;
  z-index: 2;
  pointer-events: all;
}
.bg-edit-label {
  position: absolute;
  top: -18px;
  left: 0;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.6);
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.bg-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.6);
  box-sizing: border-box;
}
.bg-handle.nw { left: -5px;  top: -5px;    cursor: nw-resize; }
.bg-handle.ne { right: -5px; top: -5px;    cursor: ne-resize; }
.bg-handle.sw { left: -5px;  bottom: -5px; cursor: sw-resize; }
.bg-handle.se { right: -5px; bottom: -5px; cursor: se-resize; }