.cropper-page { padding-top: 6rem; }
.crop-widget { max-width: 960px; margin: 2rem auto; }
.crop-widget [hidden] { display: none !important; }
.crop-widget h2 { margin: 1.5rem 0 .75rem; }
.crop-widget .tool-upload-zone { width: 100%; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.crop-groups { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .75rem; }
.crop-groups button { flex-shrink: 0; }
.crop-groups button[aria-pressed="true"] { border-color: var(--fire); background: var(--fire); color: white; }
.crop-sizes { display: grid; gap: .5rem; }
.crop-size { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; min-height: 44px; cursor: pointer; }
.crop-size small { display: block; color: var(--muted); }
.crop-size:has(input:checked) { border-color: var(--fire); }
.crop-stage-wrap { margin: 1rem auto; max-width: 100%; }
#cropStage { display: block; position: relative; overflow: hidden; touch-action: none; margin: auto; background: #e5e7eb; }
#cropImage { width: 100%; height: 100%; display: block; user-select: none; }
#cropFrame { top: 0; left: 0; box-shadow: 0 0 0 10000px rgb(0 0 0 / .5); outline: 2px solid white; }
#cropFrame:focus-visible { outline: 3px solid var(--fire); }
#cropFrame cropper-handle[action$="-resize"] { width: 44px; height: 44px; }
#cropFrame cropper-handle[action="nw-resize"] { top: 0; left: 0; }
#cropFrame cropper-handle[action="ne-resize"] { top: 0; right: 0; }
#cropFrame cropper-handle[action="sw-resize"] { bottom: 0; left: 0; }
#cropFrame cropper-handle[action="se-resize"] { bottom: 0; right: 0; }
.crop-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.crop-zoom label { width: 100%; }
.crop-zoom input { min-width: 50px; flex: 1; }
.crop-widget .tool-btn, .crop-widget input[type="number"], .crop-widget input[type="range"] { min-height: 44px; }
.crop-widget a { overflow-wrap: anywhere; }
.crop-widget p, .crop-widget label, .crop-widget small { overflow-wrap: anywhere; }
#cropPreview { display: block; max-width: 100%; max-height: 360px; object-fit: contain; margin: 1rem auto; background: repeating-conic-gradient(#eee 0% 25%, white 0% 50%) 0 / 16px 16px; }
.crop-download { margin: 1rem 0; }
#cropStrip { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cropper-page table { width: 100%; border-collapse: collapse; }
.cropper-page th, .cropper-page td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; }
.cropper-page .tools-table-wrap { overflow-x: auto; }
.cropper-page ol, .cropper-page ul { padding-left: 1.5rem; }
.cropper-page li, .cropper-page p { margin: .6rem 0; }
.cropper-page .tools-container { min-width: 0; }
.cropper-page .tools-subtitle p { font-size: inherit; }
.cropper-page #cropCounter { text-align: right; }
.cropper-page #cropButton { background: var(--fire); color: white; }
.cropper-page a:focus-visible, .cropper-page button:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
@media (max-width: 600px) {
  .crop-widget { padding: 1rem; }
  .crop-zoom button { font-size: .8rem; padding: .5rem; }
  .crop-download .tool-btn { width: 100%; }
  .cropper-page .tools-table-wrap table { min-width: 600px; }
}