/* V194: the settings panel stays parked while the independent live lens moves. */
.ucm-lens {
  position: fixed !important;
  z-index: 5200;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  height: 1px !important;
  filter: none !important;
  pointer-events: none;
}

.ucm-panel {
  position: fixed;
  z-index: 2;
  top: 10px;
  right: auto;
  width: min(680px, calc(100vw - 20px));
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
  pointer-events: auto;
}

.ucm-head {
  cursor: grab !important;
  touch-action: none;
  user-select: none;
}

.ucm-head:active { cursor: grabbing !important; }

.ucm-controls {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.ucm-shapes { grid-column: span 4; }
.ucm-source, .ucm-range { grid-column: span 2; }
.ucm-scale-row, .ucm-size-row { grid-column: span 2; }

.ucm-viewport {
  position: fixed !important;
  z-index: 1;
  left: 24px;
  top: 96px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .56));
  pointer-events: auto;
}

.ucm-lens.is-following .ucm-panel,
.ucm-lens.is-passthrough .ucm-panel {
  pointer-events: auto;
}

.ucm-lens.is-following .ucm-viewport,
.ucm-lens.is-passthrough .ucm-viewport {
  pointer-events: none;
}

@media (max-width: 680px) {
  .ucm-panel {
    right: auto;
    width: calc(100vw - 12px);
  }

  .ucm-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ucm-shapes { grid-column: span 4; }
  .ucm-source, .ucm-range,
  .ucm-scale-row, .ucm-size-row { grid-column: span 2; }
}