.photo-crop { margin-block: 1rem; padding: 1rem; border: 1px solid #b5ceda; border-radius: 12px; background: #f3f8fa; }
.photo-crop[hidden], .photo-crop-result[hidden] { display: none; }
.photo-crop h3 { margin: 0 0 .5rem; }
.photo-crop canvas { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 1; margin: 1rem auto; border: 3px solid #088b99; box-sizing: border-box; border-radius: 4px; cursor: grab; touch-action: none; }
.photo-crop canvas:active { cursor: grabbing; }
.photo-crop-controls { display: grid; gap: .75rem; }
.photo-crop-controls input[type=range] { width: 100%; min-height: 36px; padding: 0; accent-color: #088b99; }
.photo-crop .form-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.photo-crop-result { display: block; width: 112px; height: 112px; border-radius: 12px; object-fit: cover; margin: .75rem 0; }