diff --git a/frontend/profile.html b/frontend/profile.html
index 91bad24..ee49621 100644
--- a/frontend/profile.html
+++ b/frontend/profile.html
@@ -516,7 +516,14 @@
       box-shadow: 0 2px 12px rgba(15,23,42,0.05);
     }
     .shop-item:hover { box-shadow: 0 4px 20px rgba(15,23,42,0.08); transform: translateY(-2px); }
-    .shop-item.owned { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.03); }
+    /* Owned + active states keep an opaque card so animated backgrounds
+       don't bleed through the content. Color cue lives in the border
+       plus a tiny inner-shadow halo. */
+    .shop-item.owned {
+      border-color: rgba(34,197,94,0.5);
+      background: #fff;
+      box-shadow: 0 2px 12px rgba(15,23,42,0.05), inset 0 0 0 1px rgba(34,197,94,0.08);
+    }
     .shop-item.disabled:not(.owned) { opacity: 0.5; }
     .shop-item-icon { color: var(--violet); margin-bottom: 4px; }
     .shop-frame-preview {
@@ -588,7 +595,11 @@
       animation: ls-dot-pulse 1.5s infinite;
     }
     @keyframes ls-dot-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
-    .shop-item.active { border-color: rgba(6,214,224,0.4); background: rgba(6,214,224,0.04); }
+    .shop-item.active {
+      border-color: rgba(6,214,224,0.55);
+      background: #fff;
+      box-shadow: 0 4px 18px rgba(6,214,224,0.18), inset 0 0 0 1px rgba(6,214,224,0.10);
+    }
     .shop-empty {
       grid-column: 1 / -1; text-align: center; padding: 40px 20px;
       font-size: 0.88rem; color: var(--text-3); font-weight: 600;