.crop-source { display: grid; gap: .2rem; margin-top: .85rem; overflow-wrap: anywhere; }
.crop-settings { min-width: 0; border: 0; padding: 0; margin: 1.2rem 0; }
.crop-settings legend { margin-bottom: .65rem; font-weight: 650; }
.crop-settings p { margin: .55rem 0 .8rem; }
.crop-preview-controls { display: flex; align-items: end; gap: .6rem; margin-bottom: .8rem; }
.crop-preview-controls label { display: grid; gap: .25rem; min-width: 0; }
.crop-preview-controls input { width: 5.5rem; }
.crop-settings input, .crop-settings select { min-height: 2.75rem; max-width: 100%; padding: .45rem .55rem; color: var(--ink); background: var(--panel); border: 1px solid #9b7f6d; border-radius: .45rem; font: inherit; }
.crop-preview-controls button, [data-crop-form] .primary, .crop-download { min-height: 2.75rem; }
.crop-preview-controls button { min-width: 2.75rem; }
.crop-preview { display: grid; justify-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper); }
.crop-page { position: relative; overflow: hidden; max-width: 100%; }
.crop-page canvas { display: block; max-width: 100%; width: auto; height: auto; }
.crop-frame { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 10000px #0005; pointer-events: none; }
.crop-margins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.crop-margins label, .crop-field { display: grid; gap: .3rem; min-width: 0; font-weight: 620; }
.crop-margins input { width: 100%; min-width: 0; }
.crop-field { margin-top: .8rem; }
.crop-field input { width: 100%; }
.crop-download { margin-top: .75rem; }
.crop-settings [aria-invalid=true] { border-color: var(--accent); }