feat(exam-prep F4): живой дашборд — streak + последние попытки + точность 7д + хитмап активности + пробники

frontend/css/exam-prep.css

@@ -708,6 +708,128 @@
   letter-spacing: -.01em;
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   Dashboard widgets (`dh-*`) — used by exam-prep.html (F4)
+   ═══════════════════════════════════════════════════════════════ */
+
+.dh-row {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: 14px;
+}
+@media (max-width: 880px) {
+  .dh-row { grid-template-columns: 1fr; }
+}
+
+/* Recent attempts list */
+.dh-recent { display: flex; flex-direction: column; }
+.dh-recent-list { display: flex; flex-direction: column; gap: 6px; }
+.dh-recent-item {
+  display: grid;
+  grid-template-columns: 24px 70px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: .85rem;
+  transition: background .12s;
+}
+.dh-recent-item:hover { background: rgba(155,93,229,.05); }
+
+.dh-mark {
+  width: 22px; height: 22px; border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: .78rem;
+  flex-shrink: 0;
+}
+.dh-mark-ok      { background: rgba(6,214,160,.18); color: #06D6A0; }
+.dh-mark-bad     { background: rgba(230,57,70,.16); color: #E63946; }
+.dh-mark-view    { background: rgba(155,93,229,.14); color: var(--violet); }
+.dh-mark-pending { background: rgba(15,23,42,.05);   color: var(--text-3); }
+
+.dh-recent-loc {
+  font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--violet);
+  font-size: .78rem;
+  text-decoration: none; white-space: nowrap;
+}
+.dh-recent-loc:hover { text-decoration: underline; }
+
+.dh-recent-preview {
+  color: var(--text-2);
+  font-size: .85rem;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.dh-recent-meta {
+  display: flex; flex-direction: column; align-items: flex-end;
+  gap: 1px;
+  font-size: .7rem; color: var(--text-3);
+}
+.dh-mode {
+  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
+  color: var(--violet);
+}
+
+/* Activity heatmap */
+.dh-heatmap-card { display: flex; flex-direction: column; }
+.dh-heatmap {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: minmax(20px, 1fr);
+  gap: 4px;
+  margin-bottom: 10px;
+}
+.dh-cell {
+  aspect-ratio: 1;
+  border-radius: 4px;
+  background: rgba(15,23,42,.06);
+  cursor: default;
+  transition: filter .12s;
+}
+.dh-cell:hover { filter: brightness(1.05); }
+.dh-cell.dh-l0 { background: rgba(15,23,42,.06); }
+.dh-cell.dh-l1 { background: rgba(155,93,229,.20); }
+.dh-cell.dh-l2 { background: rgba(155,93,229,.40); }
+.dh-cell.dh-l3 { background: rgba(155,93,229,.65); }
+.dh-cell.dh-l4 { background: rgba(155,93,229,.90); }
+.dh-heatmap-legend {
+  display: flex; align-items: center; gap: 4px;
+  font-size: .7rem; color: var(--text-3);
+}
+.dh-heatmap-legend .dh-cell {
+  width: 12px; height: 12px; aspect-ratio: 1;
+}
+
+/* Recent mocks rows */
+.dh-mock-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 9px;
+  text-decoration: none;
+  color: var(--text);
+  transition: background .12s;
+  margin-bottom: 4px;
+}
+.dh-mock-row:hover { background: rgba(155,93,229,.06); }
+.dh-mock-title {
+  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem;
+}
+.dh-mock-score {
+  font-size: .82rem; color: var(--text-2);
+}
+.dh-mock-active {
+  font-size: .78rem; font-weight: 800; letter-spacing: .03em;
+  color: #F8961E; text-transform: uppercase;
+  padding: 3px 8px; border-radius: 6px;
+  background: rgba(248,150,30,.12);
+}
+.dh-mock-when {
+  font-size: .72rem; color: var(--text-3);
+}
+
 /* ── Mobile tweaks ─────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .ep-wrap   { padding: 20px 16px 60px; }