diff --git a/frontend/flashcards.html b/frontend/flashcards.html
index b745e23..dd80ffe 100644
--- a/frontend/flashcards.html
+++ b/frontend/flashcards.html
@@ -36,20 +36,20 @@
     /* ── stats bar ── */
     .fc-stats { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
     .fc-stat  { background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
-                padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px;
-                min-width: 112px; position: relative; overflow: hidden; }
-    .fc-stat::before { content: ''; position: absolute; top: 0; left: 0; width: 3px;
-                       height: 100%; background: var(--stat-color, var(--violet));
-                       border-radius: 0 2px 2px 0; }
-    .fc-stat-icon { width: 28px; height: 28px; border-radius: 8px;
-                    background: var(--stat-bg, rgba(155,93,229,.1));
-                    display: flex; align-items: center; justify-content: center;
-                    color: var(--stat-color, var(--violet)); margin-bottom: 4px; }
-    .fc-stat-icon .ic { width: 14px; height: 14px; }
-    .fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.5rem; font-weight: 800;
-                   color: var(--text); line-height: 1; }
-    .fc-stat-lbl { font-size: .7rem; font-weight: 600; color: var(--text-3);
-                   text-transform: uppercase; letter-spacing: .04em; }
+                padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 4px;
+                min-width: 110px; position: relative; overflow: hidden;
+                transition: box-shadow .18s, transform .18s; }
+    .fc-stat::before { content: ''; position: absolute; inset: 0;
+                       background: radial-gradient(ellipse at 110% -10%,
+                         var(--stat-color-a, rgba(155,93,229,.09)) 0%, transparent 65%);
+                       pointer-events: none; }
+    .fc-stat:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
+    .fc-stat-val { font-family: 'Unbounded', sans-serif; font-size: 1.75rem; font-weight: 800;
+                   color: var(--stat-color, var(--violet)); line-height: 1; position: relative; }
+    .fc-stat-lbl { font-size: .68rem; font-weight: 600; color: var(--text-3);
+                   text-transform: uppercase; letter-spacing: .05em;
+                   display: flex; align-items: center; gap: 5px; position: relative; }
+    .fc-stat-lbl .ic { width: 11px; height: 11px; color: var(--stat-color, var(--violet)); opacity: .7; flex-shrink: 0; }
 
     /* ── deck grid ── */
     .deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
@@ -546,18 +546,17 @@ function renderStats(s) {
   if (!s) return;
   const bar = document.getElementById('fc-stats-bar');
   bar.innerHTML = [
-    { val: s.decks_count,    lbl: 'Колод',        col: '#9B5DE5', bg: 'rgba(155,93,229,.1)',
+    { val: s.decks_count,    lbl: 'Колод',        col: '#9B5DE5',
       icon: '<svg class="ic" viewBox="0 0 24 24"><rect x="3" y="5" width="13" height="15" rx="2"/><path d="M8 5V3.5A1.5 1.5 0 0 1 9.5 2h9A1.5 1.5 0 0 1 20 3.5V16a1.5 1.5 0 0 1-1.5 1.5H16"/></svg>' },
-    { val: s.cards_count,    lbl: 'Карточек',      col: '#3B82F6', bg: 'rgba(59,130,246,.1)',
+    { val: s.cards_count,    lbl: 'Карточек',      col: '#3B82F6',
       icon: '<svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>' },
-    { val: s.due_count,      lbl: 'К повторению',  col: '#D97706', bg: 'rgba(217,119,6,.1)',
+    { val: s.due_count,      lbl: 'К повторению',  col: '#D97706',
       icon: '<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>' },
-    { val: s.reviewed_today, lbl: 'Сегодня',       col: '#16A34A', bg: 'rgba(22,163,74,.1)',
+    { val: s.reviewed_today, lbl: 'Сегодня',       col: '#16A34A',
       icon: '<svg class="ic" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>' },
-  ].map(x => `<div class="fc-stat" style="--stat-color:${x.col};--stat-bg:${x.bg}">
-    <div class="fc-stat-icon">${x.icon}</div>
+  ].map(x => `<div class="fc-stat" style="--stat-color:${x.col};--stat-color-a:${_hexAlpha(x.col,.09)}">
     <span class="fc-stat-val">${x.val}</span>
-    <span class="fc-stat-lbl">${x.lbl}</span>
+    <span class="fc-stat-lbl">${x.icon}${x.lbl}</span>
   </div>`).join('');
 }