diff --git a/webui/static/style.css b/webui/static/style.css
index ff4e23bf..82b3c767 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -13490,66 +13490,62 @@ body {
     flex: 1;
 }
 
-/* Library Artist Card */
+/* Library Artist Card — full-bleed photo style */
 .library-artist-card {
-    background: linear-gradient(135deg,
-            rgba(26, 26, 26, 0.95) 0%,
-            rgba(18, 18, 18, 0.98) 100%);
-    backdrop-filter: blur(12px) saturate(1.1);
+    background: rgba(18, 18, 18, 1);
     border-radius: 16px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
-    padding: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 0;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 12px;
     position: relative;
     overflow: hidden;
+    aspect-ratio: 0.8;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
 .library-artist-card:hover {
-    transform: translateY(-4px);
-    border-color: rgba(var(--accent-rgb), 0.3);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
-        0 0 20px rgba(var(--accent-rgb), 0.1);
+    transform: translateY(-5px) scale(1.02);
+    border-color: rgba(var(--accent-rgb), 0.25);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
+        0 0 24px rgba(var(--accent-rgb), 0.12);
 }
 
 .library-artist-card:active {
-    transform: translateY(-2px);
+    transform: translateY(-2px) scale(1.01);
 }
 
-/* Artist Image */
+/* Artist Image — fills entire card */
 .library-artist-image {
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
     overflow: hidden;
-    position: relative;
+    border: none;
     background: linear-gradient(135deg,
-            rgba(255, 255, 255, 0.1) 0%,
-            rgba(255, 255, 255, 0.05) 100%);
-    border: 2px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
+            rgba(255, 255, 255, 0.08) 0%,
+            rgba(255, 255, 255, 0.03) 100%);
+    transition: none;
 }
 
 .library-artist-card:hover .library-artist-image {
-    border-color: rgba(var(--accent-rgb), 0.4);
-    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2);
+    border-color: transparent;
+    box-shadow: none;
 }
 
 .library-artist-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transition: all 0.3s ease;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .library-artist-card:hover .library-artist-image img {
-    transform: scale(1.05);
+    transform: scale(1.06);
 }
 
 /* Artist Image Fallback */
@@ -13559,19 +13555,45 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 48px;
-    color: rgba(255, 255, 255, 0.4);
+    font-size: 56px;
+    color: rgba(255, 255, 255, 0.3);
     background: linear-gradient(135deg,
-            rgba(255, 255, 255, 0.08) 0%,
-            rgba(255, 255, 255, 0.03) 100%);
+            rgba(30, 30, 30, 1) 0%,
+            rgba(20, 20, 20, 1) 100%);
 }
 
-/* Artist Info */
+/* Gradient overlay for text readability */
+.library-artist-card::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(0deg,
+            rgba(0, 0, 0, 0.85) 0%,
+            rgba(0, 0, 0, 0.4) 35%,
+            transparent 60%);
+    pointer-events: none;
+    z-index: 1;
+    transition: background 0.3s ease;
+}
+
+.library-artist-card:hover::after {
+    background: linear-gradient(0deg,
+            rgba(0, 0, 0, 0.9) 0%,
+            rgba(0, 0, 0, 0.3) 40%,
+            transparent 65%);
+}
+
+/* Artist Info — pinned to bottom over the gradient */
 .library-artist-info {
-    flex: 1;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    z-index: 2;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 3px;
     min-height: 0;
 }
 
@@ -13580,21 +13602,23 @@ body {
     font-weight: 700;
     color: #ffffff;
     margin: 0;
-    line-height: 1.3;
+    line-height: 1.25;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8),
+        0 1px 3px rgba(0, 0, 0, 0.9);
 }
 
 .library-artist-stats {
-    font-size: 13px;
+    font-size: 12px;
     color: rgba(255, 255, 255, 0.6);
     font-weight: 500;
     display: flex;
-    justify-content: center;
     gap: 8px;
     flex-wrap: wrap;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }
 
 .library-artist-stat {
@@ -13676,10 +13700,6 @@ body {
         gap: 16px;
     }
 
-    .library-artist-image {
-        width: 100px;
-        height: 100px;
-    }
 }
 
 @media (max-width: 768px) {
@@ -13700,26 +13720,21 @@ body {
     }
 
     .library-artists-grid {
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        gap: 12px;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 10px;
     }
 
     .library-artist-card {
-        padding: 16px;
+        border-radius: 12px;
     }
 
-    .library-artist-image {
-        width: 80px;
-        height: 80px;
+    .library-artist-info {
+        padding: 12px;
     }
 
     .library-artist-name {
         font-size: 14px;
     }
-
-    .library-artist-stats {
-        font-size: 12px;
-    }
 }
 
 /* ========================================