diff --git a/src/renderer-stats.ts b/src/renderer-stats.ts
index e1a4f09..8b0a320 100644
--- a/src/renderer-stats.ts
+++ b/src/renderer-stats.ts
@@ -44,7 +44,7 @@ function renderStatsSummary(stats: ArchiveStats): void {
     if (!grid) return;
 
     if (!stats.rootExists) {
-        applyHtml(grid, `<div style="grid-column: 1 / -1; color: var(--text-secondary);">${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}</div>`);
+        applyHtml(grid, `<div class="stats-no-root">${escapeStatsHtml(UI_TEXT.static.statsNoRoot)}</div>`);
         return;
     }
 
@@ -58,10 +58,10 @@ function renderStatsSummary(stats: ArchiveStats): void {
     ];
 
     applyHtml(grid, cards.map((c) => `
-        <div style="background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 6px; padding: 12px;">
-            <div style="font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">${escapeStatsHtml(c.label)}</div>
-            <div style="font-size: 22px; font-weight: 600; margin-top: 4px;">${escapeStatsHtml(c.value)}</div>
-            ${c.sub ? `<div style="font-size: 12px; color: var(--text-secondary); margin-top: 4px;">${escapeStatsHtml(c.sub)}</div>` : ''}
+        <div class="stats-kpi-card">
+            <div class="stats-kpi-label">${escapeStatsHtml(c.label)}</div>
+            <div class="stats-kpi-value">${escapeStatsHtml(c.value)}</div>
+            ${c.sub ? `<div class="stats-kpi-sub">${escapeStatsHtml(c.sub)}</div>` : ''}
         </div>
     `).join(''));
 }
diff --git a/src/styles.css b/src/styles.css
index 620fd83..58f2628 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2208,6 +2208,51 @@ select option {
     color: #9146ff;
 }
 
+/* ============================================
+   STATS DASHBOARD KPI CARDS
+   ============================================
+   Six-tile overview grid at the top of the Statistik tab. Each card
+   shows a label (uppercase track), a big value, and an optional
+   secondary line (e.g. byte-size total under the count). */
+.stats-kpi-card {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-soft);
+    border-radius: 6px;
+    padding: 12px;
+    transition: border-color 0.18s, transform 0.18s;
+}
+
+.stats-kpi-card:hover {
+    border-color: rgba(145, 70, 255, 0.4);
+    transform: translateY(-1px);
+}
+
+.stats-kpi-label {
+    font-size: 11px;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stats-kpi-value {
+    font-size: 22px;
+    font-weight: 600;
+    margin-top: 4px;
+    font-variant-numeric: tabular-nums;
+}
+
+.stats-kpi-sub {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+    font-variant-numeric: tabular-nums;
+}
+
+.stats-no-root {
+    grid-column: 1 / -1;
+    color: var(--text-secondary);
+}
+
 /* 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. */