Add custom shadow classes for cards and dropdown

src/main/resources/templates/fragments/feed-entries.html

@@ -7,7 +7,7 @@
 <div style="display:flex;flex-direction:column;gap:2.5rem">
   {#for entry in entries}
   <a href="https://musicbrainz.org/release-group/{entry.mbid}" target="_blank" rel="noopener noreferrer"
-     class="card card-side bg-base-200 border border-base-300 hover:bg-base-300 transition-colors shadow-sm overflow-hidden">
+     class="card card-side bg-base-200 border border-base-300 hover:bg-base-300 card-shadow overflow-hidden">
     <figure class="w-64">
       <img src="https://coverartarchive.org/release-group/{entry.mbid}/front-250"
            alt="{entry.title}" class="object-cover w-full h-full"

src/main/resources/templates/fragments/search-results.html

@@ -1,4 +1,4 @@
-<div class="card bg-base-300 shadow-xl border border-base-300 mt-1 max-h-72 overflow-y-auto">
+<div class="card bg-base-300 dropdown-shadow border border-base-300 mt-1" style="max-height:18rem;overflow-y:auto">
   {#if artists.isEmpty()}
     <div class="p-4 text-sm text-center text-base-content/50">No artists found</div>
   {#else}

src/main/resources/templates/layouts/base.html

@@ -13,6 +13,9 @@
     .icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
     .icon-xs { width: 12px; height: 12px; flex-shrink: 0; }
     .icon-lg { width: 48px; height: 48px; flex-shrink: 0; }
+    .card-shadow { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
+    .card-shadow:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
+    .dropdown-shadow { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
   </style>
   <script>
     document.addEventListener('DOMContentLoaded', function () {