.photo-crop-page { display: grid; max-width: 1100px; margin: auto; gap: 28px; }
.photo-crop-page form { display: grid; gap: 20px; }
.photo-crop-workspace { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 20px; align-items: start; }
.photo-crop-source { position: relative; touch-action: none; cursor: crosshair; background: #202228; user-select: none; }
.photo-crop-source img { width: 100%; }
.photo-crop-source span { position: absolute; border: 3px solid #fff; outline: 2px solid #1746d1; background: rgba(23, 70, 209, .18); pointer-events: none; }
.photo-crop-workspace figure { margin: 0; padding: 14px; border: 1px solid rgba(24, 25, 28, .16); background: #fafaf7; }
.photo-crop-workspace canvas { width: 100%; background: #202228; }
.photo-crop-workspace figcaption { margin-top: 8px; color: #62646b; font-size: .8rem; }
.photo-crop-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photo-crop-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) { .photo-crop-workspace { grid-template-columns: 1fr; } .photo-crop-fields { grid-template-columns: 1fr 1fr; } }