refactor(css): scope track card styles; apply NowPlayingCard color vocabulary

DeepDrftShared.Client/Components/TrackCard.razor.css

@@ -0,0 +1,74 @@
+/* Container — transparent so the absolute-positioned fallback panel or album art
+   controls the card's background. Glass edge matches NowPlayingCard vocabulary. */
+.deepdrft-track-card-container {
+    width: 250px;
+    height: 250px;
+    min-width: 250px;
+    position: relative;
+    overflow: hidden;
+    background: transparent;
+    border: 1px solid rgba(250, 250, 248, 0.12);
+}
+
+.deepdrft-track-card-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    filter: brightness(0.7);
+}
+
+.deepdrft-track-card-content {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 16px;
+    background: linear-gradient(to top,
+        rgba(13, 27, 42, 0.75) 0%,
+        rgba(13, 27, 42, 0.35) 45%,
+        rgba(13, 27, 42, 0.00) 100%);
+}
+
+/* Fallback panel — navy-glass, mirrors NowPlayingCard's .now-playing glass.
+   Stable base fallback so the card never flashes grey during WASM hydration. */
+.deepdrft-track-card-fallback {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: color-mix(in srgb, var(--deepdrft-navy, #0D1B2A) 55%, transparent);
+    border: 1px solid rgba(250, 250, 248, 0.12);
+    backdrop-filter: blur(8px);
+}
+
+/* Title: off-white — matches .np-title */
+.deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
+
+/* Artist: green-accent — matches .np-label */
+.deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
+
+/* Meta: muted off-white — matches .np-sub */
+.deepdrft-track-meta { color: rgba(250, 250, 248, 0.45); }
+
+.deepdrft-track-info-middle { margin: 8px 0; }
+
+.deepdrft-track-info-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+@media (max-width: 480px) {
+    .deepdrft-track-card-container {
+        min-width: 200px;
+        width: 200px;
+        height: 200px;
+    }
+}

DeepDrftShared.Client/Components/TracksGallery.razor.css

@@ -1,3 +1,8 @@
 .tracks-gallery-container {
     box-sizing: border-box;
 }
+
+.deepdrft-track-gallery-item-center {
+    display: flex;
+    justify-content: center;
+}