/* Crop · zoom · rotate */
.crop { position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; background: #0B0B0F; color: #FFFFFF; opacity: 0; transition: opacity .2s ease; touch-action: none; -webkit-user-select: none; user-select: none; }
.crop.is-open { opacity: 1; }
.crop__bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; padding: calc(env(safe-area-inset-top, 0px) + 4px) 8px 4px; }
.crop__bar h2 { margin: 0; font-size: 16px; font-weight: 700; }
.crop__txt { justify-self: start; height: 44px; padding: 0 12px; border-radius: 12px; color: rgba(255, 255, 255, 0.85); font-size: 16px; }
.crop__done { justify-self: end; color: #FFFFFF; font-weight: 700; }
.crop__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; cursor: grab; }
.crop.is-moving .crop__stage { cursor: grabbing; }
.crop__frame { position: relative; box-shadow: 0 0 0 9999px rgba(11, 11, 15, 0.62); outline: 1px solid rgba(255, 255, 255, 0.85); }
.crop__frame.is-round { border-radius: 50%; }
.crop__frame.is-squircle { border-radius: var(--av-venue-r, 18%); }   /* venues (30 Oct) */
.crop__frame img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; pointer-events: none; z-index: -1; }
.crop__grid { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s ease; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% - .5px), rgba(255,255,255,.45) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% - .5px), rgba(255,255,255,.45) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.crop.is-moving .crop__grid { opacity: 1; }
.crop__stage { isolation: isolate; }
.crop__tools { flex: none; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 520px; margin: 0 auto; padding: 14px 16px 6px; }
.crop__ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
.crop__ico svg { width: 20px; height: 20px; }
.crop__zoom { flex: 1; display: flex; align-items: center; gap: 10px; }
.crop__zmin, .crop__zmax { flex: none; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 3px; }
.crop__zmin { width: 10px; height: 10px; }
.crop__zmax { width: 16px; height: 16px; }
.crop__zoom input { flex: 1; height: 28px; accent-color: #FFFFFF; }
.crop__hint { margin: 0; padding: 4px 16px calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
@media (hover: hover) { .crop__txt:hover, .crop__ico:hover { background: rgba(255, 255, 255, 0.14); } }
@media (min-width: 1024px) { .crop { background: rgba(8, 8, 12, 0.94); } }
.crop__ico[data-crop="rotate"] svg { transform: scaleX(-1); }