ui: compact pill layout for detail items; red availability warning

- Detail items (Size, Progress, Speed, ETA, Seeds, Peers, Availability,
  Completed) now render as inline pill badges with background + border-
  radius that wrap naturally on any screen width
- Remove mobile @media override that forced flex-direction:column,
  which was causing one-per-line centred layout on small screens
- Availability < 100%: value text shown in red (--danger) bold, both
  on card creation and on live SSE update via classList.toggle
- Also ensures updateDownloadCard keeps availability-warning in sync

public/app.js

@@ -359,9 +359,10 @@ function updateDownloadCard(card, download) {
       peersEl.textContent = download.peers;
     }
     
-    const availabilityEl = card.querySelector('.detail-item[data-label="Availability"] .detail-value');
-    if (availabilityEl && download.availability !== undefined) {
-      availabilityEl.textContent = `${download.availability}%`;
+    const availabilityItem = card.querySelector('.detail-item[data-label="Availability"]');
+    if (availabilityItem && download.availability !== undefined) {
+      availabilityItem.querySelector('.detail-value').textContent = `${download.availability}%`;
+      availabilityItem.classList.toggle('availability-warning', parseFloat(download.availability) < 100);
     }
   }
 }
@@ -558,6 +559,7 @@ function createDownloadCard(download) {
     
     if (download.availability !== undefined) {
       const availability = createDetailItem('Availability', `${download.availability}%`);
+      if (parseFloat(download.availability) < 100) availability.classList.add('availability-warning');
       details.appendChild(availability);
     }
   }