feat: spesa mode stats banner + scan zoom x1/x2 toggle

Spesa mode banner:
- Tracks each added product in _spesaSession[]
- Shows a rotating stat/phrase below the title: count, top category,
  duplicates, fun milestone messages (primo prodotto, ottimo ritmo, spesa epica…)
- Banner gains two-line layout (title + stat)

Scan zoom:
- Small pill button 'x1'/'x2' overlaid top-right of the camera viewport
- On hardware-zoom capable devices (Android Chrome) uses track.applyConstraints zoom
- Falls back to CSS scale(2) on video element for all other browsers
- Zoom resets to x1 on stopScanner()

assets/css/style.css

@@ -156,12 +156,23 @@ body {
     font-size: 0.95rem;
     box-shadow: var(--shadow);
 }
+.spesa-banner-left {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.spesa-stat {
+    font-size: 0.78rem;
+    font-weight: 400;
+    opacity: 0.92;
+}
 .spesa-mode-banner .btn {
     background: rgba(255,255,255,0.25);
     color: #fff;
     border: 1px solid rgba(255,255,255,0.5);
     font-weight: 600;
     padding: 6px 14px;
+    flex-shrink: 0;
 }
 
 @keyframes pulse-scan {
@@ -968,10 +979,33 @@ body {
     overflow: hidden;
 }
 
+.scan-zoom-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 20;
+    background: rgba(0,0,0,0.55);
+    color: #fff;
+    border: 1.5px solid rgba(255,255,255,0.5);
+    border-radius: 20px;
+    padding: 5px 13px;
+    font-size: 0.85rem;
+    font-weight: 700;
+    cursor: pointer;
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    transition: background 0.15s;
+}
+.scan-zoom-btn:active {
+    background: rgba(255,255,255,0.25);
+}
+
 .scanner-viewport video {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    transform-origin: center center;
+    transition: transform 0.2s ease;
 }
 
 .scanner-overlay {