.crop-page{max-width:70rem;margin:0 auto;padding:var(--space-8) var(--space-4) var(--space-12);display:grid;gap:var(--space-8)}.crop-page__workspace{display:grid;gap:var(--space-4)}.crop-page__workspace h2,.crop-page__target,.tool-body-copy h2,.tool-body-copy p{margin:0}.crop-page__target{display:inline-flex;width:fit-content;border:1px solid var(--color-primary-border);border-radius:var(--radius-pill);background:var(--color-primary-subtle);color:var(--color-text-primary);font-weight:700;padding:var(--space-2) var(--space-3)}.tool-body-copy{display:grid;gap:var(--space-3)}.tool-body-copy p{color:var(--color-text-secondary)}.tool-app{border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface);padding:var(--space-4);display:grid;gap:var(--space-4)}.tool-app input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.dropzone{border:2px dashed var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface-raised);padding:var(--space-6);text-align:center;display:grid;gap:var(--space-2);justify-items:center;transition:background-color var(--motion-duration-fast) var(--motion-ease-standard),border-color var(--motion-duration-fast) var(--motion-ease-standard)}.dropzone--dragging{border-color:var(--color-primary);background:var(--color-primary-subtle)}.dropzone p{margin:0;color:var(--color-text-secondary)}.dropzone__browse{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--color-primary-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary-hover);padding:var(--space-2) var(--space-4);font:inherit;font-size:var(--font-size-label);font-weight:600;cursor:pointer}.tool-app__status{min-height:1.5rem}.tool-app__status p{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-label);font-weight:500}.tool-app__error-wrap{min-height:1.5rem}.tool-app__error{margin:0;color:var(--color-error);font-size:var(--font-size-label);font-weight:600}.tool-app__controls{display:grid;gap:var(--space-3)}.format-select,.tool-slider{display:grid;gap:var(--space-2);color:var(--color-text-primary);font-size:var(--font-size-label);font-weight:600}.format-select select,.tool-slider input{width:100%}.format-select select{min-height:44px;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-surface);color:var(--color-text-primary);padding:0 var(--space-3);font:inherit;font-size:var(--font-size-body)}.download-button{min-height:44px;border:1px solid transparent;border-radius:var(--radius-card);background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4);font:inherit;font-size:var(--font-size-label);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);cursor:pointer}.download-button:disabled{cursor:not-allowed;opacity:.55}.download-button--success{background:var(--color-success)}.spinner{width:1rem;height:1rem;border-radius:50%;border:2px solid rgb(255 255 255 / 45%);border-top-color:#fff;animation:spin .7s linear infinite}.crop-canvas__stage-wrap{display:grid;gap:var(--space-2)}.crop-canvas__readout{margin:0;font-size:var(--font-size-label);font-weight:700;color:var(--color-text-primary)}.crop-canvas__hint{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-caption)}.crop-canvas__stage{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-card);background:#111827;overflow:hidden;width:fit-content;max-width:100%}.crop-canvas__stage img{display:block;max-width:min(100%,60rem);max-height:70vh;width:auto;height:auto;object-fit:contain}.crop-selection{position:absolute;border:2px solid var(--color-primary);box-shadow:inset 0 0 0 1px #ffffff73;cursor:move;z-index:3}.crop-selection__guide{position:absolute;inset:0;pointer-events:none}.crop-safe-area{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px dashed rgb(34 197 94 / 95%);box-shadow:0 0 0 1px #0f172a47;pointer-events:none;z-index:4}.crop-overlay{position:absolute;background:#0f172a94;z-index:2;pointer-events:none}.crop-overlay--top{top:0;left:0;right:0}.crop-overlay--left{left:0}.crop-overlay--right{right:0}.crop-overlay--bottom{left:0;right:0;bottom:0}.crop-handle{position:absolute;width:16px;height:16px;min-width:44px;min-height:44px;border:2px solid #fff;border-radius:999px;background:var(--color-primary);transform:translate(-50%,-50%);z-index:4;cursor:pointer;padding:0}.crop-handle:before{content:"";position:absolute;inset:12px;border-radius:999px;border:2px solid #fff;background:var(--color-primary)}.crop-handle--nw{top:0;left:0;cursor:nwse-resize}.crop-handle--n{top:0;left:50%;cursor:ns-resize}.crop-handle--ne{top:0;left:100%;cursor:nesw-resize}.crop-handle--e{top:50%;left:100%;cursor:ew-resize}.crop-handle--se{top:100%;left:100%;cursor:nwse-resize}.crop-handle--s{top:100%;left:50%;cursor:ns-resize}.crop-handle--sw{top:100%;left:0;cursor:nesw-resize}.crop-handle--w{top:50%;left:0;cursor:ew-resize}@keyframes spin{to{transform:rotate(360deg)}}