diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index 2e24024..b19d64d 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -99,14 +99,34 @@
     .hc-progress > i { display: block; height: 100%; border-radius: 99px; }
 
     /* Card 1 — Reading (warm gradient) */
-    .hc-read { background: linear-gradient(135deg, #d9742a 0%, #b3531a 100%); color: #fff; }
-    .hc-read .hc-tag { color: rgba(255,255,255,.82); }
-    .hc-read .hc-p { color: rgba(255,255,255,.78); }
-    .hc-read .hc-meta { color: rgba(255,255,255,.7); }
-    .hc-read .hc-progress { background: rgba(255,255,255,.2); }
-    .hc-read .hc-progress > i { background: rgba(255,255,255,.92); }
-    .hc-read .hc-pct { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 0.82rem; color: #fff; }
-    .hc-read .hc-btn { background: #fff; color: #b3531a; }
+    .hc-read {
+      background: linear-gradient(140deg, #e8803a 0%, #c25020 55%, #8b3010 100%);
+      color: #fff;
+    }
+    .hc-read .hc-read-bg {
+      position: absolute; inset: 0; z-index: 0; pointer-events: none;
+      display: flex; align-items: center; justify-content: flex-end; overflow: hidden;
+    }
+    .hc-read .hc-read-bg svg { width: 200px; height: 200px; flex-shrink: 0; }
+    .hc-read > *:not(.hc-read-bg) { position: relative; z-index: 1; }
+    .hc-read .hc-tag {
+      background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
+      padding: 3px 11px 3px 7px; border-radius: 99px;
+      color: rgba(255,255,255,.95); align-self: flex-start;
+    }
+    .hc-read .hc-p { color: rgba(255,255,255,.8); }
+    .hc-read .hc-foot-left { display: flex; align-items: center; gap: 7px; min-width: 0; }
+    .hc-read .hc-meta { color: rgba(255,255,255,.75); }
+    .hc-read .hc-pct {
+      font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 0.78rem;
+      color: #fff; opacity: .9;
+    }
+    .hc-read .hc-progress { height: 7px; background: rgba(255,255,255,.22); }
+    .hc-read .hc-progress > i {
+      background: rgba(255,255,255,.96);
+      box-shadow: 0 0 10px rgba(255,255,255,.45);
+    }
+    .hc-read .hc-btn { background: #fff; color: #b3531a; box-shadow: 0 2px 14px rgba(0,0,0,.2); }
 
     /* Card 2 — Lab of day (dark) */
     .hc-lab { background: linear-gradient(150deg, #16131f 0%, #1d1830 100%); color: #fff; border: 1px solid rgba(155,93,229,.18); }
@@ -1451,6 +1471,23 @@
 
       <!-- Card 1 — Continue / start reading -->
       <a class="hero-card hc-read" id="hc-read" href="/textbooks">
+        <div class="hc-read-bg" aria-hidden="true">
+          <svg viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M100 16 C82 12 44 16 20 26 L20 138 C44 128 82 124 100 128Z" fill="white" opacity="0.55"/>
+            <path d="M100 16 C118 12 156 16 180 26 L180 138 C156 128 118 124 100 128Z" fill="white" opacity="0.55"/>
+            <path d="M100 16 L100 128" stroke="rgba(0,0,0,0.08)" stroke-width="3"/>
+            <path d="M28 42 Q62 39 94 42" stroke="rgba(0,0,0,0.18)" stroke-width="2.5" stroke-linecap="round"/>
+            <path d="M28 55 Q62 52 94 55" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M28 67 Q62 64 94 67" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M28 79 Q62 76 94 79" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M28 91 Q52 88 80 91" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M106 42 Q140 39 172 42" stroke="rgba(0,0,0,0.18)" stroke-width="2.5" stroke-linecap="round"/>
+            <path d="M106 55 Q140 52 172 55" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M106 67 Q140 64 172 67" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M106 79 Q140 76 172 79" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+            <path d="M120 91 Q140 88 172 91" stroke="rgba(0,0,0,0.14)" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </div>
         <span class="hc-tag">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5a2 2 0 0 1 2-2h6v17H6a2 2 0 0 0-2 2z"/><path d="M20 5a2 2 0 0 0-2-2h-6v17h6a2 2 0 0 1 2 2z"/></svg>
           <span id="hc-read-tag">Начать чтение</span>
@@ -1459,8 +1496,10 @@
         <div class="hc-p" id="hc-read-sub">Открой учебник и продолжи курс с того места, где остановился.</div>
         <div class="hc-progress" id="hc-read-prog-wrap" style="display:none"><i id="hc-read-prog" style="width:0%"></i></div>
         <div class="hc-foot">
-          <span class="hc-meta" id="hc-read-meta">новый учебник</span>
-          <span class="hc-pct" id="hc-read-pct" style="display:none">0%</span>
+          <span class="hc-foot-left">
+            <span class="hc-meta" id="hc-read-meta">новый учебник</span>
+            <span class="hc-pct" id="hc-read-pct" style="display:none">0%</span>
+          </span>
           <span class="hc-btn">Начать <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
         </div>
       </a>
@@ -3232,7 +3271,7 @@
       const pe = document.getElementById('hc-read-pct');
       if (o.showProg) {
         if (pw) { pw.style.display = ''; document.getElementById('hc-read-prog').style.width = (o.pct || 0) + '%'; }
-        if (pe) { pe.style.display = ''; pe.textContent = (o.pct || 0) + '%'; }
+        if (pe) { pe.style.display = ''; pe.textContent = '· ' + (o.pct || 0) + '%'; }
       } else {
         if (pw) pw.style.display = 'none';
         if (pe) pe.style.display = 'none';