diff --git a/src/renderer.ts b/src/renderer.ts
index 1173688..6f255c6 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -320,33 +320,24 @@ function renderEventsList(events: EventLogEntry[]): void {
 
     for (const ev of events) {
         const row = document.createElement('div');
-        row.style.padding = '8px 10px';
-        row.style.borderBottom = '1px solid var(--border-soft)';
-        row.style.fontSize = '12px';
+        row.className = 'event-viewer-row';
 
         const time = document.createElement('span');
-        time.style.color = 'var(--text-secondary)';
-        time.style.marginRight = '8px';
+        time.className = 'event-viewer-time';
         time.textContent = formatEventTime(ev.t);
         row.appendChild(time);
 
         const tag = document.createElement('span');
-        tag.style.fontWeight = '600';
-        tag.style.marginRight = '8px';
-        const tagColors: Record<string, string> = {
-            recording_start: '#00c853',
-            recording_end: '#9146ff',
-            recording_resume: '#2196f3',
-            title_change: '#ffab00',
-            game_change: '#ff4444'
-        };
-        tag.style.color = tagColors[ev.type || ''] || 'var(--accent)';
+        tag.className = 'event-viewer-tag';
+        // Per-type tag colour comes from CSS via a data-type attribute
+        // selector — keeps the type->colour mapping with the rest of the
+        // visual styling instead of inline in the renderer.
+        if (ev.type) tag.dataset.type = ev.type;
         tag.textContent = ev.type || 'event';
         row.appendChild(tag);
 
         const detail = document.createElement('div');
-        detail.style.marginTop = '4px';
-        detail.style.color = 'var(--text)';
+        detail.className = 'event-viewer-detail';
 
         if (ev.type === 'recording_start') {
             detail.textContent = `${UI_TEXT.queue.eventStartedAs}: "${ev.title || '-'}" — ${ev.game || '-'}`;
diff --git a/src/styles.css b/src/styles.css
index 8da4767..f709d25 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2904,6 +2904,78 @@ input[type="number"]::-webkit-outer-spin-button {
     padding-left: 10px;
 }
 
+/* ============================================
+   EVENTS VIEWER — timeline rows
+   ============================================
+   Per-event-type colours live here via [data-type] attribute
+   selectors so the renderer just stamps the type and the CSS
+   handles the palette. Add a new event type by extending this
+   block, not the renderer. */
+.event-viewer-row {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-soft);
+    font-size: 12px;
+}
+
+.event-viewer-row:last-child {
+    border-bottom: none;
+}
+
+.event-viewer-time {
+    color: var(--text-secondary);
+    margin-right: 8px;
+    font-family: 'Consolas', 'Segoe UI Mono', monospace;
+}
+
+.event-viewer-tag {
+    font-weight: 600;
+    margin-right: 8px;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    font-size: 11px;
+    padding: 2px 7px;
+    border-radius: 3px;
+    background: rgba(145, 70, 255, 0.10);
+    border: 1px solid rgba(145, 70, 255, 0.25);
+}
+
+.event-viewer-tag[data-type="recording_start"] {
+    color: #00c853;
+    background: rgba(0, 200, 83, 0.10);
+    border-color: rgba(0, 200, 83, 0.30);
+}
+
+.event-viewer-tag[data-type="recording_end"] {
+    color: #9146ff;
+    background: rgba(145, 70, 255, 0.10);
+    border-color: rgba(145, 70, 255, 0.30);
+}
+
+.event-viewer-tag[data-type="recording_resume"] {
+    color: #2196f3;
+    background: rgba(33, 150, 243, 0.10);
+    border-color: rgba(33, 150, 243, 0.30);
+}
+
+.event-viewer-tag[data-type="title_change"] {
+    color: #ffab00;
+    background: rgba(255, 171, 0, 0.10);
+    border-color: rgba(255, 171, 0, 0.30);
+}
+
+.event-viewer-tag[data-type="game_change"] {
+    color: #ff4444;
+    background: rgba(255, 68, 68, 0.10);
+    border-color: rgba(255, 68, 68, 0.30);
+}
+
+.event-viewer-detail {
+    margin-top: 4px;
+    color: var(--text);
+    line-height: 1.5;
+}
+
 /* ============================================
    STREAMER PROFILE HEADER
    ============================================