/* Image Cropper: crop stage, box and handles. */
.cr-wrap { display: grid; place-items: center; padding: 12px; }
.cr-stage { position: relative; line-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; max-width: 100%; }
.cr-shade { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cr-hole { position: absolute; box-shadow: 0 0 0 9999px rgba(8, 10, 22, 0.55); }
.cr-hole.is-circle { border-radius: 50%; }
.cr-stage img { display: block; max-width: 100%; max-height: min(62vh, 560px); width: auto; height: auto; pointer-events: none; }
.cr-box {
  position: absolute; box-sizing: border-box; cursor: move; outline: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
    linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)), linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45));
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 33.333% 0, 66.666% 0, 0 33.333%, 0 66.666%;
  background-repeat: no-repeat;
}
.cr-box:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 76, 240, 0.6); }
.cr-box.is-circle { border-style: dashed; }
.cr-box.is-circle::before { content: ''; position: absolute; inset: -2px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; }
.cr-h { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; touch-action: none; }
.cr-h::after { content: ''; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; border-radius: 3px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.45); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); pointer-events: none; }
.cr-h[data-h='nw'] { left: 0; top: 0; cursor: nwse-resize; }
.cr-h[data-h='n'] { left: 50%; top: 0; cursor: ns-resize; }
.cr-h[data-h='ne'] { left: 100%; top: 0; cursor: nesw-resize; }
.cr-h[data-h='e'] { left: 100%; top: 50%; cursor: ew-resize; }
.cr-h[data-h='se'] { left: 100%; top: 100%; cursor: nwse-resize; }
.cr-h[data-h='s'] { left: 50%; top: 100%; cursor: ns-resize; }
.cr-h[data-h='sw'] { left: 0; top: 100%; cursor: nesw-resize; }
.cr-h[data-h='w'] { left: 0; top: 50%; cursor: ew-resize; }
/* Keep long file names from widening the panel on phones (grid tracks otherwise grow to min-content). */
#tool, #tool .stack, #tool .stack-sm, #tool .file-list { grid-template-columns: minmax(0, 1fr); }
#tool .hint, #tool .file-item .meta small { overflow-wrap: anywhere; }