/* Invert Image Colors — local styles only (see docs/TOOL_GUIDE.md). */

.inv-compare-wrap { position: relative; display: inline-block; max-width: 100%; }

.inv-busy {
  position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem;
  background: rgb(12 15 23 / .72); color: #fff; font-size: .82rem; font-weight: 600;
  padding: .35rem .8rem; border-radius: 99px; pointer-events: none;
}

.inv-group-label { font-weight: 600; font-size: .82rem; color: var(--text-soft); margin: 0 0 .5rem; letter-spacing: .01em; }

.inv-region-wrap {
  position: relative; display: inline-block; max-width: 100%; touch-action: none; user-select: none; margin-top: .4rem;
}
.inv-region-wrap canvas {
  display: block; max-width: 100%; height: auto; width: 100%; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); cursor: crosshair; background: var(--surface-sunken);
}
.inv-region-rect {
  position: absolute; border: 2px solid var(--primary); background: var(--primary-soft);
  opacity: .85; pointer-events: none; border-radius: 2px;
}

.inv-picking [data-compare-wrap], .inv-picking [data-compare-wrap] * { cursor: crosshair !important; }