fix(ui): center header title on tablet + add skeleton loader to spesa stat card

Header title centering:
- .header-content: remove max-width:600px, use position:relative + justify-content:center
- .header-title: position:absolute; left:50%; transform:translateX(-50%)
  so the title is always at the exact center of the header regardless of
  screen width or how many action buttons are on the right
- Added max-width:calc(100% - 200px) to prevent overlap with action buttons
  on narrow screens

Spesa skeleton preloader:
- index.html: add stat-loading class to stat-spesa (was missing, other 3 had it)
- app.js showPage('dashboard'): add 'spesa' to the skeleton init array
- app.js loadShoppingCount(): remove stat-loading class after data loads
  (like loadDashboard() does for the other 3 locations)

assets/css/style.css

@@ -105,21 +105,31 @@ body {
 }
 
 .header-content {
+    position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     width: 100%;
-    max-width: 600px;
-    margin: 0 auto;
+    max-width: none;
+    margin: 0;
 }
 
 .header-title {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
     font-size: 1.3rem;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: baseline;
     gap: 6px;
+    white-space: nowrap;
+    pointer-events: auto;
+    /* prevent title overlapping action buttons on small screens */
+    max-width: calc(100% - 200px);
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .header-version {