ui: event name as main header title + fix stat box background color

frontend/src/components/EventList.css

@@ -138,7 +138,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: var(--color-background-tertiary);
+  background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 0.5rem 0.25rem;

frontend/src/components/GuestList.css

@@ -47,19 +47,35 @@
   font-size: 1.8rem;
 }
 
+.header-event-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.header-event-subtitle {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
 .header-title {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.15rem;
+  gap: 0.1rem;
 }
 
+/* keep old .header-event-name as fallback */
 .header-event-name {
   font-size: 1rem;
   color: var(--color-primary);
   font-weight: 600;
-  letter-spacing: 0.01em;
 }
 
 .header-actions {

frontend/src/components/GuestList.jsx

@@ -331,9 +331,13 @@ function GuestList({ eventId, onBack, onShowMembers }) {
       <div className="guest-list-header">
         <button className="btn-back" onClick={onBack}>{he.backToEvents}</button>
         <div className="header-title">
+          {eventData?.name ? (
+            <>
+              <h2 className="header-event-title">{eventData.name}</h2>
+              <span className="header-event-subtitle">{he.guestManagement}</span>
+            </>
+          ) : (
             <h2>{he.guestManagement}</h2>
-          {eventData?.name && (
-            <span className="header-event-name">{eventData.name}</span>
           )}
         </div>
         <div className="header-actions">