.mode-choice,.crop-step{margin-top:20px;padding:18px;border-radius:16px;background:#f8faff}
.mode-choice h2,.crop-step h2{margin:0 0 6px;font-size:18px}
.crop-step p{margin:0 0 14px;color:#64748b;font-size:13px}
.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.mode-option{display:flex;align-items:flex-start;gap:9px;padding:13px;border:1px solid #dbe3f0;border-radius:12px;background:#fff;cursor:pointer}
.mode-option:has(input:checked){border-color:#818cf8;background:#eef2ff}
.mode-option input{accent-color:#4f46e5;margin-top:3px}
.mode-option b,.mode-option small{display:block}
.mode-option small{margin-top:4px;color:#94a3b8;font-size:12px;font-weight:400}
.crop-step{text-align:center}
.crop-step canvas{display:block;width:min(100%,360px);height:auto;margin:14px auto;border-radius:12px;background:#e2e8f0;touch-action:none;cursor:grab}
.crop-step canvas:active{cursor:grabbing}
.crop-step input[type=range]{display:block;width:min(100%,360px);margin:12px auto 18px}
@media(max-width:480px){.mode-options{grid-template-columns:1fr}}