feat: image cropper in admin + fix ba-label responsive centering

- Admin: all upload buttons now open a crop-before-upload modal
  - Canvas-based cropper (no external library)
  - Ratio presets: 1:1, 4:3, 16:9, 3:4, free
  - Drag to move crop box, drag corners to resize
  - Touch support for mobile
  - Crops client-side then uploads the result
- Frontend gallery: ba-label (قبل/بعد) now:
  - Centered horizontally (block + width 100%)
  - Wraps to multiple lines (white-space:normal)
  - Responsive — never overflows or gets clipped

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

DrSousan.Api/Pages/Index.cshtml

@@ -123,7 +123,7 @@
       .gallery-item.before-after .ba-half { flex:1; position:relative; overflow:hidden; }
       .gallery-item.before-after .ba-half img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
       .gallery-item.before-after:hover .ba-half img { transform:scale(1.05); }
-      .gallery-item.before-after .ba-label { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.55); color:#fff; font-size:0.65rem; padding:2px 8px; border-radius:20px; white-space:nowrap; pointer-events:none; }
+      .gallery-item.before-after .ba-label { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.58); color:#fff; font-size:0.72rem; line-height:1.35; padding:4px 10px; border-radius:14px; white-space:normal; word-break:break-word; text-align:center; width:calc(100% - 10px); max-width:90%; pointer-events:none; box-sizing:border-box; display:block; }
       .gallery-item.before-after .ba-divider { width:2px; background:rgba(255,255,255,0.7); flex-shrink:0; }
       .gallery-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.5)); color:#fff; font-size:0.75rem; padding:1.2rem 0.8rem 0.5rem; text-align:center; pointer-events:none; }
       .gallery-item[style*="display:none"] { display:none !important; }