.cropper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0 48px; }
@media (max-width: 900px) { .cropper-grid { grid-template-columns: 1fr; } }
.img-preview { text-align: center; margin: 12px 0; }
.img-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid #e5e6eb; }
.img-info { font-size: 12px; color: #86909c; margin-bottom: 12px; }
.cropper-settings { margin-bottom: 16px; }
.setting-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.setting-row label { font-size: 13px; color: #4e5969; min-width: 50px; }
.setting-row input[type="number"] { width: 80px; padding: 4px 8px; border: 1px solid #e5e6eb; border-radius: 4px; font-size: 13px; }
.setting-row input[type="range"] { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: #e5e6eb; border-radius: 2px; }
.setting-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #165DFF; cursor: pointer; }
.setting-row select { padding: 4px 8px; border: 1px solid #e5e6eb; border-radius: 4px; font-size: 13px; }
.quality-value { font-size: 13px; color: #165DFF; font-weight: 600; min-width: 36px; }
.result-preview { text-align: center; margin: 12px 0; }
.result-preview img { max-width: 100%; max-height: 200px; border-radius: 8px; border: 1px solid #e5e6eb; background: repeating-conic-gradient(#f2f3f5 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.result-info { font-size: 12px; color: #86909c; margin-bottom: 8px; }
.btn-tiny { padding: 2px 10px; font-size: 12px; border: 1px solid #e5e6eb; border-radius: 4px; background: #fff; color: #4e5969; cursor: pointer; }
.btn-tiny:hover { border-color: #165DFF; color: #165DFF; }