feat: Add meter grouping by device ID with consumption trends

Transform flat scrolling meter list into grouped view showing one card
per unique meter with:
- Consumption history tracking and delta from previous reading
- Trend sparkline visualization (color-coded for normal/elevated/spike)
- Consumption rate calculation (units/hour over 30-min window)
- Cards update in place instead of creating duplicates
- Alert sound only plays for new meters

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

static/css/components/signal-cards.css

@@ -998,6 +998,145 @@
     border-color: rgba(59, 130, 246, 0.25);
 }
 
+/* ============================================
+   AGGREGATED METER CARD
+   ============================================ */
+.signal-card.meter-aggregated {
+    /* Inherit standard signal-card styles */
+}
+
+.meter-aggregated-grid {
+    display: grid;
+    grid-template-columns: 1fr 1.2fr 0.8fr;
+    gap: 12px;
+    padding: 12px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    border-left: 2px solid var(--accent-yellow);
+    align-items: start;
+}
+
+.meter-aggregated-col {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.meter-aggregated-label {
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-dim);
+}
+
+.meter-aggregated-value {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+/* Consumption column */
+.consumption-col .consumption-value {
+    font-size: 18px;
+    line-height: 1.2;
+}
+
+/* Delta badge */
+.meter-delta {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    width: fit-content;
+    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
+    color: var(--text-dim);
+}
+
+.meter-delta.positive {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+}
+
+.meter-delta.negative {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+/* Sparkline container */
+.meter-sparkline-container {
+    min-height: 28px;
+    display: flex;
+    align-items: center;
+}
+
+.meter-sparkline-placeholder {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px;
+    color: var(--text-dim);
+}
+
+/* Rate display */
+.meter-rate-value {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--accent-cyan, #4a9eff);
+}
+
+/* Update animation */
+.signal-card.meter-updated {
+    animation: meterUpdatePulse 0.3s ease;
+}
+
+@keyframes meterUpdatePulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
+    }
+    50% {
+        box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.2);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
+    }
+}
+
+/* Consumption sparkline styles */
+.consumption-sparkline-svg {
+    display: block;
+}
+
+.consumption-sparkline-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.consumption-trend {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+/* Responsive adjustments for aggregated meters */
+@media (max-width: 500px) {
+    .meter-aggregated-grid {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto auto;
+    }
+
+    .meter-aggregated-col.trend-col {
+        grid-column: 1 / -1;
+    }
+
+    .meter-sparkline-container {
+        width: 100%;
+    }
+
+    .meter-sparkline-container svg {
+        width: 100%;
+    }
+}
+
 /* ============================================
    APRS SYMBOL
    ============================================ */