Add download progress bar on card thumbnails

Replaces pulse-only state with a visible progress bar animation:
- Indeterminate bar slides across the bottom of card thumbnails during download
- markCardCacheState dynamically adds/removes the bar element
- renderCard includes the bar for newly rendered downloading cards
- Now-playing button already showed '⏳ Saving…' state

Files:
- frontend/app.js: dl-progress in renderCard, markCardCacheState dynamic bar
- frontend/styles.css: .dl-progress, .dl-bar with dlSlide animation

frontend/styles.css

@@ -773,6 +773,27 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 .card.downloading .saved-badge::before { content: "⏳"; }
 .card.downloading .saved-badge { font-size: 0; }
 .card.downloading .saved-badge::before { font-size: 10px; }
+
+/* Download progress bar on card thumb */
+.dl-progress {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 3px;
+  background: rgba(0,0,0,0.5);
+  overflow: hidden;
+}
+.dl-bar {
+  height: 100%;
+  width: 30%;
+  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
+  border-radius: 0 2px 2px 0;
+  animation: dlSlide 1.2s ease-in-out infinite;
+}
+@keyframes dlSlide {
+  0% { transform: translateX(-100%); width: 30%; }
+  50% { width: 45%; }
+  100% { transform: translateX(400%); width: 30%; }
+}
 @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
 
 /* ===================== Settings page ===================== */