feat(vessel): add E2E encrypted Yacht photo upload with client-side canvas resizing

client/src/App.css

@@ -1638,3 +1638,93 @@ body:has(.theme-cupertino) {
   color: #38bdf8;
 }
 
+/* Yacht Photo Styling */
+.vessel-photo-wrapper {
+  grid-column: span 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  background: rgba(30, 41, 59, 0.4);
+  border: 1px dashed #334155;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 12px;
+}
+
+.vessel-photo-preview {
+  position: relative;
+  width: 200px;
+  height: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.vessel-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.vessel-photo-placeholder {
+  color: #475569;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.vessel-photo-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 23, 42, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  color: #fbbf24;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.vessel-photo-preview:hover .vessel-photo-overlay {
+  opacity: 1;
+}
+
+.vessel-photo-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-sm {
+  padding: 6px 12px !important;
+  font-size: 12.5px !important;
+  height: auto !important;
+  min-height: auto !important;
+}
+
+.btn.danger {
+  background: rgba(239, 68, 68, 0.15) !important;
+  color: #fca5a5 !important;
+  border: 1px solid rgba(239, 68, 68, 0.3) !important;
+}
+
+.btn.danger:hover {
+  background: rgba(239, 68, 68, 0.25) !important;
+  border-color: #ef4444 !important;
+}
+
+