style(feed): highlight insert/delete events

ui/src/components/realtime/RealtimeEventCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="realtime-event">
+  <div :class="['realtime-event', eventBgClass]">
     <p class="text-xs text-gray-500 mb-1">
       {{ event.operation }} · {{ event.table }} • {{ formatTimestamp(event.receivedAt) }}
     </p>
@@ -78,11 +78,19 @@ const formatTimestamp = (ts) => {
   if (!ts) return ''
   return new Date(ts).toLocaleString('es-HN', { hour12: true })
 }
+
+const eventBgClass = computed(() => {
+  if (props.event.operation === 'DELETE') return 'bg-red-100/40'
+  if (props.event.operation === 'INSERT') return 'bg-green-100/40'
+  return ''
+})
 </script>
 
 <style scoped>
 .realtime-event {
   margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
 }
 
 .old-card,