.crop-editor { margin-top: var(--s3); }.crop-instruction{color:var(--muted);font-size:10px;margin:0 0 var(--s2)}.crop-frame { aspect-ratio: 5 / 7; background: var(--surface); cursor: grab; max-width: 420px; overflow: hidden; position: relative; touch-action: none; user-select: none; width:100%; }.crop-frame:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.crop-frame.is-dragging{cursor:grabbing}.crop-frame img { height:auto;left:0;max-width:none;pointer-events:none;position:absolute;top:0;transform-origin:top left;width:auto;will-change:transform; }.crop-guide{background:linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.72) calc(33.333% - .5px),rgba(255,255,255,.72) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.72) calc(66.666% - .5px),rgba(255,255,255,.72) calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),rgba(255,255,255,.72) calc(33.333% - .5px),rgba(255,255,255,.72) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.72) calc(66.666% - .5px),rgba(255,255,255,.72) calc(66.666% + .5px),transparent calc(66.666% + .5px));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);inset:10px;pointer-events:none;position:absolute}.crop-guide span{background:rgba(0,0,0,.7);color:#fff;font-size:8px;left:6px;letter-spacing:.08em;padding:4px 6px;position:absolute;text-transform:uppercase;top:6px}.crop-controls { display: grid; gap: var(--s2); margin-top: var(--s2); max-width: 420px; }
[data-page-image-upload],.crop-editor,.crop-controls{min-width:0;max-width:100%}.crop-editor{margin-top:1rem}.crop-controls{gap:.5rem;margin-top:.5rem}.crop-rotation{display:flex;flex-wrap:wrap;gap:.5rem}.crop-rotation button,.crop-controls input[type=range]{min-height:44px}.crop-controls input[type=range]{width:100%;min-width:0}.crop-frame{max-width:420px}.crop-instruction{font-size:12px;margin-bottom:.5rem}.crop-guide{inset:0}.crop-controls label{display:grid;gap:.5rem}.crop-frame img{object-fit:fill!important;max-height:none!important;border:0!important;border-radius:0!important}@media(max-width:640px){.crop-frame{max-width:100%}}