From c3ffaab05c065d980a02db0cf38860c6826470bd Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 6 Oct 2026 06:35:42 +0200
Subject: [PATCH 1/2] fix(library): restore album artwork in Pulse and Lounge

---
 src/components/views/LibraryView.tsx | 1 +
 src/styles/skins/liquid.css          | 6 +++---
 src/styles/skins/lounge.css          | 4 ++--
 src/styles/skins/pulse.css           | 4 ++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/views/LibraryView.tsx b/src/components/views/LibraryView.tsx
index 49e0170e..d5d7d1be 100644
--- a/src/components/views/LibraryView.tsx
+++ b/src/components/views/LibraryView.tsx
@@ -3403,6 +3403,7 @@ function AlbumGrid({
               and clicks on top of it. */}
           <button
             type="button"
+            data-artwork-hit-target
             onClick={open}
             aria-label={t("library.open", { name: album.title })}
             className="absolute inset-0 rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500"
diff --git a/src/styles/skins/liquid.css b/src/styles/skins/liquid.css
index 832296ea..dcc9a0fd 100644
--- a/src/styles/skins/liquid.css
+++ b/src/styles/skins/liquid.css
@@ -454,7 +454,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ) {
+  ):not([data-artwork-hit-target]) {
   border-radius: 1.75rem !important;
   border: 0 !important;
   background-color: color-mix(
@@ -475,7 +475,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):hover {
+  ):not([data-artwork-hit-target]):hover {
   transform: translateY(-2px);
 }
 
@@ -1131,7 +1131,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-immersive] *),
+  ):not([data-immersive] *):not([data-artwork-hit-target]),
 :root[data-skin="liquid"][data-contrast="high"]
   [class*="sticky"]:where(
     [class*="bg-white"],
diff --git a/src/styles/skins/lounge.css b/src/styles/skins/lounge.css
index 2a7666d8..2be49345 100644
--- a/src/styles/skins/lounge.css
+++ b/src/styles/skins/lounge.css
@@ -223,7 +223,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ) {
+  ):not([data-artwork-hit-target]) {
   background-color: var(--lounge-glass-soft) !important;
   border-color: var(--lounge-border-soft) !important;
   box-shadow: var(--lounge-shadow);
@@ -539,7 +539,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ) {
+  ):not([data-artwork-hit-target]) {
   background-color: var(--wf-contrast-surface) !important;
   /* The opaque colour alone does not get there: this skin's TopBar and
      PlayerBar each carry a `background-image` gradient, which paints
diff --git a/src/styles/skins/pulse.css b/src/styles/skins/pulse.css
index a12a36d3..3afb3ee2 100644
--- a/src/styles/skins/pulse.css
+++ b/src/styles/skins/pulse.css
@@ -391,7 +391,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ) {
+  ):not([data-artwork-hit-target]) {
   border-radius: 1.75rem !important;
   border: 1px solid var(--pulse-rail) !important;
   background-color: var(--pulse-surface) !important;
@@ -406,7 +406,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):hover {
+  ):not([data-artwork-hit-target]):hover {
   border-color: var(--pulse-cyan) !important;
   box-shadow: 0 0 24px -8px rgb(var(--pulse-cyan-rgb) / 0.4);
   transform: translateY(-2px);

From ba4d64a5077cbeb2d9ffff88efa28b315aa0fcd6 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 6 Oct 2026 06:44:31 +0200
Subject: [PATCH 2/2] fix(skins): preserve card selector specificity

---
 src/styles/skins/liquid.css | 6 +++---
 src/styles/skins/lounge.css | 4 ++--
 src/styles/skins/pulse.css  | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/styles/skins/liquid.css b/src/styles/skins/liquid.css
index dcc9a0fd..6f740c75 100644
--- a/src/styles/skins/liquid.css
+++ b/src/styles/skins/liquid.css
@@ -454,7 +454,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-artwork-hit-target]) {
+  ):where(:not([data-artwork-hit-target])) {
   border-radius: 1.75rem !important;
   border: 0 !important;
   background-color: color-mix(
@@ -475,7 +475,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-artwork-hit-target]):hover {
+  ):where(:not([data-artwork-hit-target])):hover {
   transform: translateY(-2px);
 }
 
@@ -1131,7 +1131,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-immersive] *):not([data-artwork-hit-target]),
+  ):not([data-immersive] *):where(:not([data-artwork-hit-target])),
 :root[data-skin="liquid"][data-contrast="high"]
   [class*="sticky"]:where(
     [class*="bg-white"],
diff --git a/src/styles/skins/lounge.css b/src/styles/skins/lounge.css
index 2be49345..52eb6ab8 100644
--- a/src/styles/skins/lounge.css
+++ b/src/styles/skins/lounge.css
@@ -223,7 +223,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-artwork-hit-target]) {
+  ):where(:not([data-artwork-hit-target])) {
   background-color: var(--lounge-glass-soft) !important;
   border-color: var(--lounge-border-soft) !important;
   box-shadow: var(--lounge-shadow);
@@ -539,7 +539,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-artwork-hit-target]) {
+  ):where(:not([data-artwork-hit-target])) {
   background-color: var(--wf-contrast-surface) !important;
   /* The opaque colour alone does not get there: this skin's TopBar and
      PlayerBar each carry a `background-image` gradient, which paints
diff --git a/src/styles/skins/pulse.css b/src/styles/skins/pulse.css
index 3afb3ee2..ccb77963 100644
--- a/src/styles/skins/pulse.css
+++ b/src/styles/skins/pulse.css
@@ -391,7 +391,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-artwork-hit-target]) {
+  ):where(:not([data-artwork-hit-target])) {
   border-radius: 1.75rem !important;
   border: 1px solid var(--pulse-rail) !important;
   background-color: var(--pulse-surface) !important;
@@ -406,7 +406,7 @@
     [class*="rounded-xl"],
     [class*="rounded-2xl"],
     [class*="rounded-3xl"]
-  ):not([data-artwork-hit-target]):hover {
+  ):where(:not([data-artwork-hit-target])):hover {
   border-color: var(--pulse-cyan) !important;
   box-shadow: 0 0 24px -8px rgb(var(--pulse-cyan-rgb) / 0.4);
   transform: translateY(-2px);