From b426d9d1e4d475e876799eaa827a429c342f7557 Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Tue, 30 Dec 2025 22:29:50 -0800
Subject: [PATCH] Enhance search UI with dynamic glow and premium design

Increases Spotify search result limits for artists and albums. Adds dynamic glow effects to artist, album, and track cards in the UI using image-based colors. Significantly upgrades the CSS for enhanced dropdowns, cards, and lists with a premium, vibrant, and responsive design.
---
 web_server.py          |   4 +-
 webui/static/script.js |   7 +
 webui/static/style.css | 603 ++++++++++++++++++++++++++++++++---------
 3 files changed, 481 insertions(+), 133 deletions(-)

diff --git a/web_server.py b/web_server.py
index 7f26f9f4..a9e612d4 100644
--- a/web_server.py
+++ b/web_server.py
@@ -3269,7 +3269,7 @@ def enhanced_search():
 
         if spotify_client and spotify_client.is_authenticated():
             # Search for artists
-            artist_objs = spotify_client.search_artists(query, limit=5)
+            artist_objs = spotify_client.search_artists(query, limit=10)
             for artist in artist_objs:
                 spotify_artists.append({
                     "id": artist.id,
@@ -3278,7 +3278,7 @@ def enhanced_search():
                 })
 
             # Search for albums
-            album_objs = spotify_client.search_albums(query, limit=10)
+            album_objs = spotify_client.search_albums(query, limit=20)
             for album in album_objs:
                 # Album has 'artists' (list), convert to string
                 artist_name = ', '.join(album.artists) if album.artists else 'Unknown Artist'
diff --git a/webui/static/script.js b/webui/static/script.js
index 71c041c7..77ec8000 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -2731,6 +2731,13 @@ function initializeSearchModeToggle() {
             }
 
             list.appendChild(elem);
+
+            // Extract colors from image for dynamic glow effect
+            if (config.image) {
+                extractImageColors(config.image, (colors) => {
+                    applyDynamicGlow(elem, colors);
+                });
+            }
         });
     }
 
diff --git a/webui/static/style.css b/webui/static/style.css
index 5220d659..69082d42 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -19133,7 +19133,7 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
-    max-height: 600px;
+    max-height: min(70vh, 800px);
     overflow: hidden;
     z-index: 1000;
     backdrop-filter: blur(40px);
@@ -19152,7 +19152,7 @@ body {
 }
 
 .enhanced-dropdown-content {
-    max-height: 600px;
+    max-height: min(70vh, 800px);
     overflow-y: auto;
     padding: 16px 20px;
 }
@@ -19209,17 +19209,34 @@ body {
     opacity: 0.5;
 }
 
-/* Dropdown Sections */
+/* Dropdown Sections - Enhanced with Premium Design */
 .enh-dropdown-section {
-    margin-bottom: 20px;
+    margin-bottom: 24px;
     background: linear-gradient(135deg,
-        rgba(45, 45, 45, 0.4) 0%,
-        rgba(26, 26, 26, 0.5) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    padding: 16px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+        rgba(35, 35, 35, 0.6) 0%,
+        rgba(20, 20, 20, 0.8) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    padding: 20px;
+    backdrop-filter: blur(20px);
+    box-shadow:
+        0 8px 24px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.enh-dropdown-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        rgba(29, 185, 84, 0.4) 50%,
+        transparent 100%);
 }
 
 .enh-dropdown-section:last-child {
@@ -19229,40 +19246,90 @@ body {
 .enh-section-header {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 0 0 12px 0;
-    margin-bottom: 16px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    gap: 12px;
+    padding: 0 0 16px 0;
+    margin-bottom: 18px;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
+    position: relative;
+}
+
+.enh-section-header::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 60px;
+    height: 2px;
+    background: linear-gradient(90deg,
+        rgba(29, 185, 84, 0.8) 0%,
+        transparent 100%);
 }
 
 .enh-section-icon {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
     font-size: 20px;
-    opacity: 0.8;
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.15) 0%,
+        rgba(30, 215, 96, 0.1) 100%);
+    border-radius: 10px;
+    border: 1px solid rgba(29, 185, 84, 0.2);
+}
+
+/* Icon color variants for different sections */
+#enh-db-artists-section .enh-section-icon,
+#enh-spotify-artists-section .enh-section-icon {
+    background: linear-gradient(135deg,
+        rgba(138, 43, 226, 0.15) 0%,
+        rgba(156, 39, 176, 0.1) 100%);
+    border-color: rgba(138, 43, 226, 0.2);
+}
+
+#enh-albums-section .enh-section-icon {
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.15) 0%,
+        rgba(30, 215, 96, 0.1) 100%);
+    border-color: rgba(29, 185, 84, 0.2);
+}
+
+#enh-tracks-section .enh-section-icon {
+    background: linear-gradient(135deg,
+        rgba(30, 144, 255, 0.15) 0%,
+        rgba(100, 181, 246, 0.1) 100%);
+    border-color: rgba(30, 144, 255, 0.2);
 }
 
 .enh-section-title {
     flex-grow: 1;
-    font-size: 17px;
+    font-size: 18px;
     font-weight: 700;
     color: #ffffff;
     margin: 0;
     text-transform: none;
-    letter-spacing: -0.3px;
+    letter-spacing: -0.4px;
 }
 
 .enh-section-count {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 28px;
-    height: 28px;
-    padding: 0 10px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 14px;
-    font-size: 13px;
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.8);
+    min-width: 32px;
+    height: 32px;
+    padding: 0 12px;
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.2) 0%,
+        rgba(30, 215, 96, 0.15) 100%);
+    border: 1px solid rgba(29, 185, 84, 0.3);
+    border-radius: 16px;
+    font-size: 14px;
+    font-weight: 700;
+    color: rgba(29, 185, 84, 1);
+    box-shadow:
+        0 2px 8px rgba(29, 185, 84, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 /* ========================================= */
@@ -19272,32 +19339,70 @@ body {
 .enh-artists-wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 16px;
-    margin-bottom: 20px;
+    gap: 20px;
+    margin-bottom: 24px;
 }
 
 /* Responsive: stack on narrow screens */
 @media (max-width: 900px) {
     .enh-artists-wrapper {
         grid-template-columns: 1fr;
-        gap: 16px;
+        gap: 20px;
     }
 }
 
 .enh-artist-section {
     margin-bottom: 0 !important;
-    padding: 16px;
+    padding: 20px;
     background: linear-gradient(135deg,
-        rgba(45, 45, 45, 0.4) 0%,
-        rgba(26, 26, 26, 0.5) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 12px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+        rgba(35, 35, 35, 0.6) 0%,
+        rgba(20, 20, 20, 0.8) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    backdrop-filter: blur(20px);
+    box-shadow:
+        0 8px 24px rgba(0, 0, 0, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.enh-artist-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        rgba(138, 43, 226, 0.5) 50%,
+        transparent 100%);
+}
+
+/* Section-specific accent colors */
+#enh-albums-section::before {
+    background: linear-gradient(90deg,
+        transparent 0%,
+        rgba(29, 185, 84, 0.5) 50%,
+        transparent 100%);
+}
+
+#enh-tracks-section::before {
+    background: linear-gradient(90deg,
+        transparent 0%,
+        rgba(30, 144, 255, 0.5) 50%,
+        transparent 100%);
 }
 
 .enh-artist-section .enh-section-header {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
+}
+
+.enh-artist-section .enh-section-header::after {
+    background: linear-gradient(90deg,
+        rgba(138, 43, 226, 0.8) 0%,
+        transparent 100%);
 }
 
 .enh-compact-list.artists-grid {
@@ -19323,67 +19428,144 @@ body {
     }
 }
 
-/* Artist cards: Circular Spotify-style */
+/* Artist cards: Spotify Browse Style with Vibrant Effects */
 .enh-compact-item.artist-card {
-    display: inline-flex;
+    display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 12px;
-    background: transparent;
-    border-radius: 8px;
+    padding: 22px 18px;
+    background: linear-gradient(135deg,
+        rgba(30, 30, 30, 0.4) 0%,
+        rgba(20, 20, 20, 0.6) 100%);
+    border-radius: 16px;
     cursor: pointer;
-    transition: background 0.2s ease;
-    border: none;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: 2px solid rgba(255, 255, 255, 0.05);
     flex-shrink: 0;
-    width: auto;
-    height: auto;
-    max-height: fit-content;
+    width: 200px;
+    min-height: 250px;
+    max-height: 250px;
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+}
+
+.enh-compact-item.artist-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg,
+        rgba(138, 43, 226, 0.15) 0%,
+        rgba(29, 185, 84, 0.15) 100%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    pointer-events: none;
+}
+
+/* Dynamic glow with image-based colors */
+.enh-compact-item.artist-card.has-dynamic-glow::before {
+    background: linear-gradient(135deg,
+        color-mix(in srgb, var(--glow-color-1) 15%, transparent) 0%,
+        color-mix(in srgb, var(--glow-color-2) 15%, transparent) 100%);
+}
+
+.enh-compact-item.artist-card:hover::before {
+    opacity: 1;
 }
 
 .enh-compact-item.artist-card:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: linear-gradient(135deg,
+        rgba(40, 40, 40, 0.8) 0%,
+        rgba(25, 25, 25, 0.9) 100%);
+    border-color: rgba(138, 43, 226, 0.5);
+    transform: translateY(-12px) scale(1.05);
+    box-shadow:
+        0 24px 48px rgba(138, 43, 226, 0.3),
+        0 0 60px rgba(138, 43, 226, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* Dynamic border and glow on hover */
+.enh-compact-item.artist-card.has-dynamic-glow:hover {
+    border-color: color-mix(in srgb, var(--glow-color-1) 50%, transparent);
+    box-shadow:
+        0 24px 48px color-mix(in srgb, var(--glow-color-1) 30%, transparent),
+        0 0 60px color-mix(in srgb, var(--glow-color-1) 20%, transparent),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .enh-item-image.artist-image {
-    width: 144px;
-    height: 144px;
+    width: 164px;
+    height: 164px;
     border-radius: 50%;
     object-fit: cover;
-    border: none;
-    margin-bottom: 12px;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
+    border: 4px solid rgba(138, 43, 226, 0.3);
+    margin-bottom: 16px;
+    box-shadow:
+        0 16px 40px rgba(0, 0, 0, 0.6),
+        0 0 40px rgba(138, 43, 226, 0.2),
+        inset 0 2px 4px rgba(255, 255, 255, 0.1);
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+    z-index: 1;
+}
+
+.enh-compact-item.artist-card:hover .enh-item-image.artist-image {
+    border-color: rgba(138, 43, 226, 0.8);
+    transform: scale(1.05) rotate(2deg);
+    box-shadow:
+        0 24px 56px rgba(0, 0, 0, 0.8),
+        0 0 60px rgba(138, 43, 226, 0.5),
+        inset 0 2px 8px rgba(255, 255, 255, 0.2);
+}
+
+/* Dynamic image glow */
+.enh-compact-item.artist-card.has-dynamic-glow:hover .enh-item-image.artist-image {
+    border-color: color-mix(in srgb, var(--glow-color-1) 80%, transparent);
+    box-shadow:
+        0 24px 56px rgba(0, 0, 0, 0.8),
+        0 0 60px color-mix(in srgb, var(--glow-color-1) 50%, transparent),
+        inset 0 2px 8px rgba(255, 255, 255, 0.2);
 }
 
 .enh-item-image-placeholder.artist-placeholder {
-    width: 144px;
-    height: 144px;
+    width: 164px;
+    height: 164px;
     border-radius: 50%;
-    background: rgba(40, 40, 40, 1);
+    background: linear-gradient(135deg,
+        rgba(138, 43, 226, 0.2) 0%,
+        rgba(29, 185, 84, 0.2) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 60px;
-    border: none;
-    margin-bottom: 12px;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
+    font-size: 66px;
+    border: 4px solid rgba(138, 43, 226, 0.3);
+    margin-bottom: 16px;
+    box-shadow:
+        0 16px 40px rgba(0, 0, 0, 0.6),
+        0 0 40px rgba(138, 43, 226, 0.2);
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .enh-compact-item.artist-card .enh-item-info {
     text-align: center;
-    min-width: 144px;
+    min-width: 164px;
     max-width: 200px;
     flex-grow: 0;
 }
 
 .enh-compact-item.artist-card .enh-item-name {
-    font-size: 15px;
-    font-weight: 600;
+    font-size: 16px;
+    font-weight: 700;
     color: #ffffff;
     margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     line-height: 1.3;
+    letter-spacing: -0.2px;
 }
 
 .enh-compact-item.artist-card .enh-item-meta {
@@ -19396,72 +19578,140 @@ body {
 
 
 /* ========================================= */
-/* ALBUM CARDS - Clean Grid                 */
+/* ALBUM CARDS - LARGE Spotify Browse Style */
 /* ========================================= */
 
 .enh-compact-list.albums-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-    gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 24px;
 }
 
 /* Responsive: smaller album cards on narrow screens */
 @media (max-width: 900px) {
     .enh-compact-list.albums-grid {
-        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-        gap: 12px;
+        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+        gap: 18px;
     }
 }
 
 @media (max-width: 600px) {
     .enh-compact-list.albums-grid {
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-        gap: 10px;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 14px;
     }
 }
 
 .enh-compact-item.album-card {
     display: flex;
     flex-direction: column;
-    padding: 12px;
-    background: transparent;
-    border-radius: 8px;
+    padding: 20px 18px;
+    background: linear-gradient(135deg,
+        rgba(30, 30, 30, 0.4) 0%,
+        rgba(20, 20, 20, 0.6) 100%);
+    border-radius: 12px;
     cursor: pointer;
-    transition: background 0.2s ease;
-    border: none;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: 2px solid rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(8px);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Vibrant gradient overlay */
+.enh-compact-item.album-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.12) 0%,
+        rgba(30, 144, 255, 0.12) 100%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+/* Dynamic glow with image-based colors */
+.enh-compact-item.album-card.has-dynamic-glow::before {
+    background: linear-gradient(135deg,
+        color-mix(in srgb, var(--glow-color-1) 12%, transparent) 0%,
+        color-mix(in srgb, var(--glow-color-2) 12%, transparent) 100%);
 }
 
 .enh-compact-item.album-card:hover {
-    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(29, 185, 84, 0.5);
+    transform: translateY(-10px) scale(1.03);
+    box-shadow:
+        0 20px 40px rgba(29, 185, 84, 0.25),
+        0 0 50px rgba(29, 185, 84, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+/* Dynamic border and glow on hover */
+.enh-compact-item.album-card.has-dynamic-glow:hover {
+    border-color: color-mix(in srgb, var(--glow-color-1) 50%, transparent);
+    box-shadow:
+        0 20px 40px color-mix(in srgb, var(--glow-color-1) 25%, transparent),
+        0 0 50px color-mix(in srgb, var(--glow-color-1) 15%, transparent),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.enh-compact-item.album-card:hover::before {
+    opacity: 1;
 }
 
 .enh-item-image.album-cover {
     width: 100%;
     aspect-ratio: 1;
-    border-radius: 4px;
+    border-radius: 8px;
     object-fit: cover;
-    margin-bottom: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    margin-bottom: 16px;
+    box-shadow:
+        0 12px 32px rgba(0, 0, 0, 0.6),
+        0 0 30px rgba(29, 185, 84, 0.15);
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+    z-index: 1;
+}
+
+.enh-compact-item.album-card:hover .enh-item-image.album-cover {
+    transform: scale(1.05) rotate(-2deg);
+    box-shadow:
+        0 18px 48px rgba(0, 0, 0, 0.8),
+        0 0 50px rgba(29, 185, 84, 0.35);
+}
+
+/* Dynamic image glow */
+.enh-compact-item.album-card.has-dynamic-glow:hover .enh-item-image.album-cover {
+    box-shadow:
+        0 18px 48px rgba(0, 0, 0, 0.8),
+        0 0 50px color-mix(in srgb, var(--glow-color-1) 35%, transparent);
 }
 
 .enh-item-image-placeholder.album-placeholder {
     width: 100%;
     aspect-ratio: 1;
-    border-radius: 4px;
-    background: rgba(40, 40, 40, 1);
+    border-radius: 8px;
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.15) 0%,
+        rgba(30, 144, 255, 0.15) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 56px;
-    margin-bottom: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    font-size: 72px;
+    margin-bottom: 16px;
+    box-shadow:
+        0 12px 32px rgba(0, 0, 0, 0.6),
+        0 0 30px rgba(29, 185, 84, 0.15);
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+    z-index: 1;
 }
 
 .enh-compact-item.album-card .enh-item-name {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 16px;
+    font-weight: 700;
     color: #ffffff;
-    margin-bottom: 4px;
+    margin-bottom: 6px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -19469,95 +19719,174 @@ body {
     -webkit-box-orient: vertical;
     line-height: 1.3;
     max-height: 2.6em;
+    letter-spacing: -0.2px;
+    position: relative;
+    z-index: 1;
 }
 
 .enh-compact-item.album-card .enh-item-meta {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.6);
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.65);
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     line-height: 1.3;
+    position: relative;
+    z-index: 1;
 }
 
 /* ========================================= */
-/* TRACK ITEMS - Two Column Grid            */
+/* TRACK ITEMS - Enhanced Two Column Grid   */
 /* ========================================= */
 
 .enh-compact-list.tracks-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-    gap: 4px 12px;
+    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+    gap: 8px 16px;
 }
 
 /* Responsive: single column when container is narrow */
 @media (max-width: 900px) {
     .enh-compact-list.tracks-list {
         grid-template-columns: 1fr;
-        gap: 4px;
+        gap: 6px;
     }
 }
 
 .enh-compact-item.track-item {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 8px 12px;
-    background: transparent;
-    border-radius: 4px;
+    gap: 16px;
+    padding: 12px 16px;
+    background: linear-gradient(90deg,
+        rgba(30, 30, 30, 0.3) 0%,
+        rgba(20, 20, 20, 0.5) 100%);
+    border-radius: 10px;
     cursor: pointer;
-    transition: background 0.2s ease;
-    border: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 2px solid rgba(255, 255, 255, 0.03);
+    border-left: 3px solid transparent;
     min-width: 0;
     overflow: hidden;
+    position: relative;
+    backdrop-filter: blur(5px);
+}
+
+/* Vibrant gradient overlay on hover */
+.enh-compact-item.track-item::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg,
+        rgba(29, 185, 84, 0.08) 0%,
+        rgba(30, 215, 96, 0.08) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+/* Dynamic glow with image-based colors */
+.enh-compact-item.track-item.has-dynamic-glow::before {
+    background: linear-gradient(90deg,
+        color-mix(in srgb, var(--glow-color-1) 8%, transparent) 0%,
+        color-mix(in srgb, var(--glow-color-2) 8%, transparent) 100%);
 }
 
 .enh-compact-item.track-item:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: linear-gradient(90deg,
+        rgba(40, 40, 40, 0.5) 0%,
+        rgba(30, 30, 30, 0.7) 100%);
+    border-left-color: rgba(29, 185, 84, 0.8);
+    border-color: rgba(29, 185, 84, 0.2);
+    transform: translateX(4px);
+    box-shadow:
+        -4px 0 20px rgba(29, 185, 84, 0.2),
+        0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+/* Dynamic border and glow on hover */
+.enh-compact-item.track-item.has-dynamic-glow:hover {
+    border-left-color: color-mix(in srgb, var(--glow-color-1) 80%, transparent);
+    border-color: color-mix(in srgb, var(--glow-color-1) 20%, transparent);
+    box-shadow:
+        -4px 0 20px color-mix(in srgb, var(--glow-color-1) 20%, transparent),
+        0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.enh-compact-item.track-item:hover::before {
+    opacity: 1;
 }
 
 .enh-item-image.track-cover {
-    width: 48px;
-    height: 48px;
-    border-radius: 4px;
+    width: 64px;
+    height: 64px;
+    border-radius: 6px;
     object-fit: cover;
     flex-shrink: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.5),
+        0 0 20px rgba(29, 185, 84, 0.1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    z-index: 1;
+}
+
+.enh-compact-item.track-item:hover .enh-item-image.track-cover {
+    transform: scale(1.08);
+    box-shadow:
+        0 6px 24px rgba(0, 0, 0, 0.7),
+        0 0 30px rgba(29, 185, 84, 0.25);
+}
+
+/* Dynamic image glow */
+.enh-compact-item.track-item.has-dynamic-glow:hover .enh-item-image.track-cover {
+    box-shadow:
+        0 6px 24px rgba(0, 0, 0, 0.7),
+        0 0 30px color-mix(in srgb, var(--glow-color-1) 25%, transparent);
 }
 
 .enh-item-image-placeholder.track-placeholder {
-    width: 48px;
-    height: 48px;
-    border-radius: 4px;
+    width: 64px;
+    height: 64px;
+    border-radius: 6px;
     flex-shrink: 0;
-    background: rgba(40, 40, 40, 1);
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.12) 0%,
+        rgba(30, 144, 255, 0.12) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+    font-size: 32px;
+    box-shadow:
+        0 4px 16px rgba(0, 0, 0, 0.5),
+        0 0 20px rgba(29, 185, 84, 0.1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    z-index: 1;
 }
 
 .enh-item-info {
     flex-grow: 1;
     min-width: 0;
+    position: relative;
+    z-index: 1;
 }
 
 .enh-compact-item.track-item .enh-item-name {
-    font-size: 14px;
-    font-weight: 500;
+    font-size: 15px;
+    font-weight: 600;
     color: #ffffff;
-    margin-bottom: 4px;
+    margin-bottom: 5px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    letter-spacing: -0.1px;
 }
 
 .enh-compact-item.track-item .enh-item-meta {
     font-size: 13px;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(255, 255, 255, 0.65);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -19568,45 +19897,57 @@ body {
     font-weight: 500;
     color: rgba(255, 255, 255, 0.5);
     flex-shrink: 0;
-    margin-left: 8px;
+    margin-left: 12px;
     position: relative;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
+    z-index: 1;
 }
 
-/* Play button that appears on hover */
+/* ENHANCED Play button that appears on hover */
 .enh-item-play-btn {
     opacity: 0;
-    padding: 4px 10px;
-    background: linear-gradient(135deg, rgba(29, 185, 84, 0.9), rgba(26, 166, 75, 0.9));
+    padding: 6px 14px;
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 0.95) 0%,
+        rgba(30, 215, 96, 0.95) 100%);
     color: #ffffff;
     border: none;
-    border-radius: 12px;
-    font-size: 11px;
-    font-weight: 600;
+    border-radius: 16px;
+    font-size: 12px;
+    font-weight: 700;
     cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 2px 8px rgba(29, 185, 84, 0.3);
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    box-shadow:
+        0 4px 12px rgba(29, 185, 84, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.3);
     position: absolute;
     right: 0;
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateY(-50%) scale(0.9);
     z-index: 10;
+    backdrop-filter: blur(8px);
 }
 
 .enh-compact-item.track-item:hover .enh-item-play-btn {
     opacity: 1;
+    transform: translateY(-50%) scale(1);
 }
 
 .enh-item-play-btn:hover {
-    background: linear-gradient(135deg, rgba(29, 185, 84, 1), rgba(26, 166, 75, 1));
-    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.5);
-    transform: translateY(-50%) scale(1.05);
+    background: linear-gradient(135deg,
+        rgba(29, 185, 84, 1) 0%,
+        rgba(30, 215, 96, 1) 100%);
+    box-shadow:
+        0 6px 20px rgba(29, 185, 84, 0.6),
+        0 0 30px rgba(29, 185, 84, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.4);
+    transform: translateY(-50%) scale(1.08);
 }
 
 .enh-item-play-btn:active {
-    transform: translateY(-50%) scale(0.95);
+    transform: translateY(-50%) scale(0.96);
 }
 
 /* ========================================= */