/* ── Crop frame on the canvas (same transform as the canvas; handles counter-scaled) ── */
#crop-layer { position: absolute; transform-origin: 0 0; pointer-events: none; z-index: 2; }
#crop-layer[hidden] { display: none; }
#crop-rect {
  position: absolute; pointer-events: auto; cursor: move; touch-action: none;
  outline: var(--crop-lw, 1.5px) solid #fff;
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.55); /* dims everything outside the frame */
}
.crop-h {
  position: absolute; width: var(--crop-hs, 10px); height: var(--crop-hs, 10px);
  background: #fff; border: var(--crop-lw, 1px) solid #000; box-sizing: border-box;
  transform: translate(-50%, -50%); pointer-events: auto; touch-action: none;
}
.crop-h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.crop-h[data-h="n"]  { left: 50%; top: 0; cursor: ns-resize; }
.crop-h[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.crop-h[data-h="e"]  { left: 100%; top: 50%; cursor: ew-resize; }
.crop-h[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.crop-h[data-h="s"]  { left: 50%; top: 100%; cursor: ns-resize; }
.crop-h[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.crop-h[data-h="w"]  { left: 0; top: 50%; cursor: ew-resize; }
/* ── Move tool: off-canvas parts of the layer + Transform frame (same space as the crop frame) ── */
#xf-layer { position: absolute; transform-origin: 0 0; pointer-events: none; z-index: 2; }
#xf-layer[hidden], #xf-rect[hidden], #ghost-canvas[hidden] { display: none; }
#ghost-canvas { position: absolute; image-rendering: pixelated; opacity: 0.45; }
#xf-rect {
  position: absolute; pointer-events: auto; cursor: move; touch-action: none;
  outline: var(--crop-lw, 1.5px) solid #4a7fcb;
}
#xf-rect .crop-h { border-color: #4a7fcb; }
/* Alt + hover: red measuring line from the frame to the canvas edge, with its length in px */
#xf-measure { position: absolute; background: #ff3b3b; pointer-events: none; }
#xf-measure[hidden], #xf-measure-label[hidden] { display: none; }
#xf-measure-label {
  position: fixed; z-index: 21; transform: translate(-50%, -50%); pointer-events: none;
  padding: 2px 6px; border-radius: 4px; background: #ff3b3b; color: #fff;
  font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 1px 4px #0008;
}
.xf-check { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; color: #e0e0e0; font-size: 0.78rem; white-space: nowrap; }
.xf-check input { accent-color: #4a7fcb; width: 14px; height: 14px; margin: 0; cursor: pointer; }
.xf-check.disabled { opacity: 0.35; cursor: default; }
.xf-check[hidden] { display: none; }
.co-checks { display: inline-flex; align-items: center; gap: 12px; }
.xf-check.dim { opacity: 0.45; } /* option that doesn't apply at the current setting (still changeable) */
.ts-hint { font-size: 0.68rem; color: #888; line-height: 1.35; margin: 6px 0 2px; }
/* Insert image: how to place it */
#import-backdrop { position: fixed; inset: 0; z-index: 2500; background: #0008; display: flex; align-items: center; justify-content: center; padding: 16px; }
#import-backdrop[hidden] { display: none; }
#import-dialog {
  width: 340px; max-width: 100%; padding: 16px;
  background: #1a1a1a; border: 1px solid #3a3a3a; border-radius: 8px; box-shadow: 0 12px 40px #000a;
  color: #e0e0e0; font-size: 0.8rem;
}
#import-dialog h2 { margin: 0 0 2px; font-size: 0.95rem; font-weight: 600; }
#import-info { color: #888; margin-bottom: 12px; word-break: break-all; }
#import-dialog .imp-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%;
  padding: 10px 12px; margin-bottom: 8px; text-align: left; cursor: pointer;
  background: #222; border: 1px solid #3a3a3a; border-radius: 6px; color: #e0e0e0; font: inherit;
}
#import-dialog .imp-opt:hover, #import-dialog .imp-opt:focus-visible { border-color: #4a7fcb; background: #4a7fcb1a; outline: none; }
#import-dialog .imp-opt b { font-weight: 500; font-size: 0.85rem; }
#import-dialog .imp-opt span { color: #888; font-size: 0.72rem; line-height: 1.35; }
#import-cancel { display: block; margin: 4px 0 0 auto; }
.mobile-color { display: none; } /* shown again in the phone layout */