fix(F-05): use icon button for crop trigger and trash icon for image removal

Changed "Adjust framing" text to a crop icon button visible only in
edit mode. Replaced the X icon on the image remove button with a
trash icon for clearer semantics.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/ImageUpload.tsx

@@ -125,7 +125,7 @@ export function ImageUpload({
 										strokeLinecap="round"
 										strokeLinejoin="round"
 										strokeWidth={2}
-										d="M6 18L18 6M6 6l12 12"
+										d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"
 									/>
 								</svg>
 							</button>

src/client/routes/items/$itemId.tsx

@@ -337,13 +337,17 @@ function ItemDetail() {
 							</div>
 						)}
 					</div>
-					{imageUrl && !isEditing && (
+					{imageUrl && isEditing && !isReference && (
 						<button
 							type="button"
 							onClick={() => setEditingCrop(true)}
-							className="mb-4 text-sm text-gray-500 hover:text-gray-700 transition-colors"
+							className="mb-4 w-8 h-8 flex items-center justify-center rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors"
+							title="Adjust framing"
 						>
-							Adjust framing
+							<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+								<path d="M6.13 1L6 16a2 2 0 0 0 2 2h15" />
+								<path d="M1 6.13L16 6a2 2 0 0 1 2 2v15" />
+							</svg>
 						</button>
 					)}
 				</>