Apply glassmorphism styling to event cards on list view

Replace solid white event cards with glass-effect cards featuring
backdrop blur, semi-transparent gradient backgrounds, and light
borders that blend with the Electric Dusk gradient background.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/assets/main.css

@@ -16,6 +16,9 @@
   --color-text-on-gradient: #ffffff;
   --color-surface: #fff5f8;
   --color-card: #ffffff;
+  --color-glass: rgba(255, 255, 255, 0.1);
+  --color-glass-border: rgba(255, 255, 255, 0.18);
+  --color-glass-hover: rgba(255, 255, 255, 0.18);
 
   /* Gradient */
   --gradient-primary: linear-gradient(135deg, #f06292 0%, #ab47bc 50%, #5c6bc0 100%);
@@ -33,7 +36,7 @@
   --radius-button: 14px;
 
   /* Shadows */
-  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.12);
   --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.15);
 
   /* Layout */

frontend/src/components/EventCard.vue

@@ -93,11 +93,20 @@ function onTouchEnd() {
 .event-card {
   display: flex;
   align-items: center;
-  background: var(--color-card);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border: 1px solid var(--color-glass-border);
   border-radius: var(--radius-card);
   box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   padding: var(--spacing-md) var(--spacing-lg);
   gap: var(--spacing-sm);
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.event-card:hover {
+  background: var(--color-glass-hover);
+  border-color: rgba(255, 255, 255, 0.3);
 }
 
 .event-card--past {
@@ -122,7 +131,7 @@ function onTouchEnd() {
 .event-card__title {
   font-size: 0.95rem;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -131,7 +140,7 @@ function onTouchEnd() {
 .event-card__time {
   font-size: 0.8rem;
   font-weight: 400;
-  color: #888;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .event-card__badge {
@@ -149,8 +158,8 @@ function onTouchEnd() {
 }
 
 .event-card__badge--attendee {
-  background: #e0e0e0;
-  color: #555;
+  background: rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .event-card__delete {
@@ -163,7 +172,7 @@ function onTouchEnd() {
   background: none;
   border: none;
   font-size: 1.2rem;
-  color: #bbb;
+  color: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   border-radius: 50%;
   transition: color 0.15s ease, background 0.15s ease;

frontend/src/components/SectionHeader.vue

@@ -15,7 +15,7 @@ defineProps<{
 .section-header {
   font-size: 1rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--color-text-on-gradient);
   margin: 0;
   padding: var(--spacing-sm) 0;
 }