/* ── ChartSetupOverlay (cs-*) ─────────────────────────────────────────────── */

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.cs-page-title {
  padding: 0 14px 8px;
  font-size: var(--fs-12);
  color: var(--ink-mid);
  border-bottom: 1px solid var(--border);
}

/* Image panel */
.cs-image-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cs-scroll-wrap {
  flex: 1;
  overflow: auto;
  background: #111;
  display: flex;
  align-items: flex-start;
}
.cs-canvas-inner {
  position: relative;
  display: block;
  margin: 0 auto; /* centers image when zoom < 1 */
  cursor: default;
  flex-shrink: 0;
}
.cs-page-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Crop rect overlay */
.cs-crop-rect {
  position: absolute;
  border: 2px dashed #999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  box-sizing: border-box;
}

/* Grid rubber-band preview */
.cs-grid-rubber {
  position: absolute;
  border: 2px dashed var(--accent);
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}

/* Grid boundary solid rect */
.cs-grid-rect {
  position: absolute;
  border: 2px solid var(--accent);
  background: transparent;
  pointer-events: none;
  box-sizing: border-box;
}

/* Corner markers */
.cs-corner {
  position: absolute;
  font-size: var(--fs-28);
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 4px var(--bg), 0 0 4px var(--bg);
}

/* Cursor states — L-shaped SVG cursors for grid corner placement */
.cs-cursor-tl {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 17L3 3L17 3' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='square'/%3E%3Cpath d='M3 17L3 3L17 3' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 3 3, default;
}
.cs-cursor-br {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M3 17L17 17L17 3' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='square'/%3E%3Cpath d='M3 17L17 17L17 3' fill='none' stroke='%23a855f7' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 17 17, default;
}
.cs-cursor-crop { cursor: crosshair; }