Adding vibe hover effect

Chrono/Shared/Components/CardPreview.razor.css

@@ -1,33 +1,93 @@
-.card-preview-popup {
+.card-preview-container {
     position: fixed;
-    z-index: 9999;
+    z-index: 10000;
     pointer-events: none;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-    padding: 0.5rem;
-    width: 220px;
     transition: opacity 0.15s ease-in-out;
 }
 
-.preview-content img {
-    width: 100%;
-    height: auto;
-    border-radius: 4px;
-    display: block;
-    margin-bottom: 0.5rem;
+.card-preview-card {
+    width: 280px;
+    background: #1a1a1a;
+    border: 2px solid #333;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    animation: previewFadeIn 0.2s ease-out;
 }
 
-.preview-info {
+.preview-image {
+    width: 100%;
+    display: block;
+}
+
+.preview-overlay {
+    padding: 10px;
+    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.preview-name {
+    font-weight: bold;
+    color: white;
+    font-size: 1.1rem;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+}
+
+.preview-meta {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    font-size: 0.9rem;
-    color: var(--text-primary);
+    font-size: 0.85rem;
+    margin-top: 4px;
 }
 
 .preview-cost {
-    color: var(--accent);
-    font-weight: bold;
+    color: #00d2ff;
+}
+
+.preview-category {
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.preview-description {
+    margin-top: 8px;
+    font-size: 0.85rem;
+    color: #eee;
+    line-height: 1.3;
+    font-style: italic;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 6px;
+}
+
+.preview-stats {
+    display: flex;
+    gap: 15px;
+    margin-top: 8px;
+    padding-top: 6px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.stat-item .bi-shield-shaded {
+    color: #ff4d4d;
+}
+
+.stat-item .bi-heart-fill {
+    color: #2ecc71;
+}
+
+@keyframes previewFadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }