diff --git a/src/renderer-stats.ts b/src/renderer-stats.ts
index 8b0a320..97ab578 100644
--- a/src/renderer-stats.ts
+++ b/src/renderer-stats.ts
@@ -71,7 +71,7 @@ function renderStatsTopStreamers(top: ArchiveStatsTopStreamer[], totalBytes: num
     if (!container) return;
 
     if (top.length === 0) {
-        applyHtml(container, `<div style="color: var(--text-secondary);">${escapeStatsHtml(UI_TEXT.static.statsEmpty)}</div>`);
+        applyHtml(container, `<div class="form-note">${escapeStatsHtml(UI_TEXT.static.statsEmpty)}</div>`);
         return;
     }
 
@@ -80,14 +80,14 @@ function renderStatsTopStreamers(top: ArchiveStatsTopStreamer[], totalBytes: num
         const pct = Math.max(2, Math.round((s.bytes / maxBytes) * 100));
         const sharePct = totalBytes > 0 ? ((s.bytes / totalBytes) * 100).toFixed(1) : '0';
         return `
-            <div style="margin-bottom: 10px;">
-                <div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px;">
-                    <span><strong>${escapeStatsHtml(s.streamer)}</strong> <span style="color:var(--text-secondary);">&middot; ${s.fileCount} ${escapeStatsHtml(UI_TEXT.static.statsFiles)}</span></span>
-                    <span style="color:var(--text-secondary);">${formatBytesForStats(s.bytes)} <span style="opacity:0.7;">(${sharePct}%)</span></span>
+            <div class="stats-top-row">
+                <div class="stats-top-meta">
+                    <span><strong>${escapeStatsHtml(s.streamer)}</strong> <span class="stats-top-meta-sub">&middot; ${s.fileCount} ${escapeStatsHtml(UI_TEXT.static.statsFiles)}</span></span>
+                    <span class="stats-top-meta-sub">${formatBytesForStats(s.bytes)} <span class="stats-top-share">(${sharePct}%)</span></span>
                 </div>
-                <div style="background: var(--bg-elevated); border-radius: 3px; height: 18px; overflow: hidden; position: relative;">
-                    <div style="width: ${pct}%; height: 100%; background: linear-gradient(90deg, #9146ff 0%, #00c853 100%);"></div>
-                    ${(s.liveBytes > 0 || s.vodBytes > 0) ? `<div style="position:absolute; top:0; left:8px; right:8px; height:100%; display:flex; align-items:center; gap:8px; font-size:10px; color:rgba(255,255,255,0.92); font-weight:600;">
+                <div class="stats-top-bar-track">
+                    <div class="stats-top-bar-fill" style="width: ${pct}%;"></div>
+                    ${(s.liveBytes > 0 || s.vodBytes > 0) ? `<div class="stats-top-bar-labels">
                         ${s.liveBytes > 0 ? `LIVE ${formatBytesForStats(s.liveBytes)}` : ''}
                         ${s.vodBytes > 0 ? `VOD ${formatBytesForStats(s.vodBytes)}` : ''}
                     </div>` : ''}
diff --git a/src/styles.css b/src/styles.css
index 58f2628..b185b40 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2253,6 +2253,64 @@ select option {
     color: var(--text-secondary);
 }
 
+/* Top-streamers bar list — one row per streamer, label row above a
+   purple-to-green gradient bar. Live/VOD breakdown labels sit
+   overlaid on top of the bar for a compact two-column read. */
+.stats-top-row {
+    margin-bottom: 10px;
+}
+
+.stats-top-row:last-child {
+    margin-bottom: 0;
+}
+
+.stats-top-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    margin-bottom: 4px;
+    gap: 8px;
+}
+
+.stats-top-meta-sub {
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+}
+
+.stats-top-share {
+    opacity: 0.7;
+}
+
+.stats-top-bar-track {
+    background: var(--bg-elevated);
+    border-radius: 3px;
+    height: 18px;
+    overflow: hidden;
+    position: relative;
+}
+
+.stats-top-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #9146ff 0%, #00c853 100%);
+    transition: width 0.4s ease-out;
+}
+
+.stats-top-bar-labels {
+    position: absolute;
+    top: 0;
+    left: 8px;
+    right: 8px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.92);
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    pointer-events: none;
+}
+
 /* Old generic scrollbar rules were dead — superseded by the
    purple-themed *::-webkit-scrollbar block further down the file.
    Removed to avoid confusion when someone greps for scrollbar styles. */