ui: theme-aware stat boxes on event cards + event name title in guest list

frontend/src/components/EventList.css

@@ -138,19 +138,24 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  background: var(--color-background-tertiary);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 0.5rem 0.25rem;
 }
 
 .stat-label {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--color-text-secondary);
   text-transform: uppercase;
   margin-bottom: 0.25rem;
+  text-align: center;
 }
 
 .stat-value {
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   font-weight: bold;
-  color: var(--color-primary);
+  color: var(--color-text);
 }
 
 .event-card-actions {

frontend/src/components/GuestList.css

@@ -45,7 +45,21 @@
   margin: 0;
   color: var(--color-text);
   font-size: 1.8rem;
+}
+
+.header-title {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.header-event-name {
+  font-size: 1rem;
+  color: var(--color-primary);
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 
 .header-actions {

frontend/src/components/GuestList.jsx

@@ -330,7 +330,12 @@ function GuestList({ eventId, onBack, onShowMembers }) {
     <div className="guest-list-container">
       <div className="guest-list-header">
         <button className="btn-back" onClick={onBack}>{he.backToEvents}</button>
-        <h2>{he.guestManagement}</h2>
+        <div className="header-title">
+          <h2>{he.guestManagement}</h2>
+          {eventData?.name && (
+            <span className="header-event-name">{eventData.name}</span>
+          )}
+        </div>
         <div className="header-actions">
           {/* <button className="btn-members" onClick={onShowMembers}>
             {he.manageMembers}