Refactor service card and grid class names for consistency; enable drag-and-drop functionality

js/services-loader.js

@@ -49,7 +49,7 @@
         groupSection.appendChild(groupHeader);
         
         const grid = document.createElement('div');
-        grid.className = 'grid';
+        grid.className = 'services-grid';
         
         services.forEach(s => {
           const card = createServiceCard(s, host, allServices, tailscaleIP);
@@ -148,11 +148,13 @@
       }
 
       const a = document.createElement('a');
-      a.className = 'card';
+      a.className = 'service-card';
       a.href = href;
       a.target = '_blank';
       a.rel = 'noreferrer';
       a.dataset.serviceName = name.toLowerCase(); // For search filtering
+      a.dataset.serviceId = serviceId; // For drag-drop and identification
+      a.setAttribute('draggable', 'true'); // Enable drag-and-drop
 
       const img = document.createElement('img');
       img.className = 'logo';