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/style.css

@@ -462,17 +462,26 @@ body {
 .download-details {
   display: flex;
   flex-wrap: wrap;
-  gap: 4px 14px;
+  gap: 4px 6px;
   padding-top: 6px;
   border-top: 1px solid var(--border);
   align-items: center;
 }
 
 .detail-item {
-  display: flex;
+  display: inline-flex;
   align-items: baseline;
-  gap: 4px;
+  gap: 3px;
   font-size: 0.78rem;
+  background: var(--bg-secondary, rgba(0,0,0,0.04));
+  border-radius: 4px;
+  padding: 2px 6px;
+  white-space: nowrap;
+}
+
+.detail-item.availability-warning .detail-value {
+  color: var(--danger, #e53e3e);
+  font-weight: 700;
 }
 
 .detail-label {
@@ -1021,11 +1030,6 @@ body {
     width: 40px;
   }
 
-  .download-details {
-    flex-direction: column;
-    gap: 2px;
-  }
-
   .progress-container {
     flex-wrap: wrap;
   }