.cropper-page { padding-top: 2rem; padding-bottom: 4rem; }
.cropper-page > h1 { max-width: 850px; font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
.cropper-page > .seo-lead { max-width: 820px; }
.cropper-card { margin-top: 2rem; }
.cropper-dropzone { margin: 0; }
.cropper-file-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: #fbfcff; }
.cropper-file-panel[hidden] { display: none; }
.cropper-file-panel .image-details { margin: 0; }
.cropper-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.cropper-workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: clamp(1.25rem, 3vw, 2rem); align-items: start; margin-top: 1.25rem; }
.cropper-workspace[hidden] { display: none; }
.cropper-stage { display: grid; min-height: 320px; max-height: 560px; place-items: center; overflow: auto; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: #f5f7fb; }
.cropper-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; user-select: none; }
.cropper-source-preview { display: block; max-width: 100%; max-height: 510px; width: auto; height: auto; object-fit: contain; pointer-events: none; }
.cropper-selection { position: absolute; z-index: 1; border: 2px solid #fff; outline: 1px solid #4f46e5; box-shadow: 0 0 0 100vmax rgba(17,24,39,.48); cursor: move; touch-action: none; }
.cropper-selection:focus-visible { outline: 3px solid #4338ca; outline-offset: 2px; }
.cropper-handle { position: absolute; z-index: 2; width: 14px; height: 14px; padding: 0; border: 2px solid #4338ca; border-radius: 3px; background: #fff; touch-action: none; }
.cropper-handle:focus-visible { outline: 3px solid #172033; outline-offset: 2px; z-index: 3; }
.handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.handle-n { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.handle-e { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }
.handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.handle-s { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.handle-w { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
.cropper-keyboard-help { margin: .5rem 0 0; color: var(--ink-muted); font-size: .82rem; }
.cropper-controls { min-width: 0; }
.cropper-controls > .card-subtitle { margin-bottom: .9rem; }
.cropper-custom-ratio { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: end; gap: .6rem; margin: -.1rem 0 .9rem; }
.cropper-custom-ratio[hidden] { display: none; }
.ratio-separator { padding-bottom: .55rem; color: var(--ink-muted); font-weight: 700; }
.cropper-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin: .9rem 0; }
.cropper-format-field { margin-top: .35rem; }
.cropper-result-preview { margin-top: 1rem; }
.cropper-result-preview .image-preview { min-height: 140px; }
.cropper-result-preview .image-preview img { max-height: 260px; }
.cropper-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.cropper-actions .btn { width: 100%; }
.cropper-actions .btn:disabled { cursor: not-allowed; }
.cropper-help { max-width: 920px; margin: 3rem auto 0; }
.cropper-help h2 { font-size: 1.6rem; }
.cropper-help .seo-steps { padding-left: 1.35rem; }
.cropper-help .seo-steps li { margin-bottom: .75rem; padding-left: .35rem; }
.cropper-page .seo-breadcrumbs { margin-bottom: 1.5rem; }
@media (max-width: 800px) {
  .cropper-workspace { grid-template-columns: minmax(0,1fr); }
  .cropper-stage { min-height: 240px; }
  .cropper-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .8rem 1rem; }
  .cropper-controls > .card-subtitle { grid-column: 1 / -1; margin-bottom: 0; }
  .cropper-custom-ratio { grid-column: 1 / -1; margin: 0; }
  .cropper-dimensions { margin: 0; }
  .cropper-format-field, .cropper-output-details, .cropper-result-preview, .cropper-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cropper-page { padding-top: 1.25rem; }
  .cropper-card { padding: 1rem; }
  .cropper-file-panel { align-items: flex-start; flex-direction: column; }
  .cropper-file-actions { width: 100%; }
  .cropper-file-actions .btn { flex: 1; }
  .cropper-stage { min-height: 200px; max-height: 420px; padding: .65rem; }
  .cropper-source-preview { max-height: 390px; }
  .cropper-controls { grid-template-columns: minmax(0,1fr); }
  .cropper-controls > .card-subtitle, .cropper-custom-ratio, .cropper-format-field, .cropper-output-details, .cropper-result-preview, .cropper-actions { grid-column: 1; }
  .cropper-custom-ratio { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .cropper-dimensions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}