diff --git a/mockup.html b/mockup.html
index 5fbd9aa..6738af9 100644
--- a/mockup.html
+++ b/mockup.html
@@ -326,6 +326,21 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
 .msp-row{display:flex;border-bottom:1px solid #e5e7eb;cursor:pointer}
 .msp-row:hover{background:#f0f0ff}
 .msp-row.msp-group{background:#f3f4f8;font-weight:700}
+.msp-row.msp-done .msp-cell{color:#9ca3af}
+.msp-row.msp-done .msp-c-name{text-decoration:line-through;color:#9ca3af}
+.msp-row.msp-group.msp-done .msp-c-name{text-decoration:none;color:#6b7280}
+.msp-bar.b-done{background:linear-gradient(180deg,#16a34a,#14532d)}
+.msp-bar.b-done::after{content:' ✅';font-size:10px}
+.msp-row.msp-active-row{background:#fffbf0}
+.msp-row.msp-active-row:hover{background:#fff7e0}
+.msp-bar.b-active::after{content:' ⏳'}
+.msp-bar.b-urgent::after{content:' ⚠️'}
+.msp-soa{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;color:var(--mut)}
+.msp-soa-item{display:flex;align-items:center;gap:4px}
+.msp-soa-dot{width:12px;height:12px;border-radius:2px;flex-shrink:0}
+.msp-elena-note{display:flex;align-items:flex-start;gap:8px;background:#fffbf0;border:1px solid #fde68a;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:12px;color:#92400e}
+.msp-elena-note img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:center 16%;flex-shrink:0}
+
 .msp-row.msp-group:hover{background:#ebebf8}
 .msp-row:last-child{border-bottom:none}
 .msp-left{display:flex;border-right:2px solid #b0b0c8;flex-shrink:0}
@@ -910,7 +925,8 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
 
         <!-- MS-Project Gantt -->
         <div class="msp-section">
-          <div class="msp-title">⏱ Диаграмма сроков</div>
+          <div class="msp-title">📋 Сопровождение договоров — этапы и сроки</div>
+          <div class="msp-elena-note"><img src="logos/elena-photo.jpg"><span>Я веду каждый договор от анализа до подписания. Зелёный этап — выполнен, синий — в работе, серый — ждёт своей очереди. Нажмите на строку чтобы открыть дело 💛</span></div>
           <div class="msp-outer">
             <div class="msp-scroll">
               <div class="msp-table" id="msp-root"></div>
@@ -1775,11 +1791,14 @@ window.addEventListener('DOMContentLoaded', checkReturning);
       var right_pct = pct(r.e);
       var w = Math.max(0.5, right_pct - left_pct);
       var barLabel = r.group ? '' : r.end;
+      var isDone    = r.cls === 'b-done';
+      var isActive  = r.cls === 'b-active' || r.cls === 'b-urgent';
+      var rowCls = 'msp-row' + (r.group?' msp-group':'') + (isDone?' msp-done':'') + (isActive?' msp-active-row':'');
 
-      return '<div class="msp-row'+(r.group?' msp-group':'')+'" onclick="'+r.go+'">' +
+      return '<div class="'+rowCls+'" onclick="'+r.go+'">' +
         '<div class="msp-left">' +
           '<div class="msp-cell msp-c-num">'+r.num+'</div>' +
-          '<div class="msp-cell msp-c-name'+(r.group?'':' ind')+'">'+r.name+'</div>' +
+          '<div class="msp-cell msp-c-name'+(r.group?'':' ind')+'">'+(isDone&&!r.group?'✅ ':'')+r.name+'</div>' +
           '<div class="msp-cell msp-c-dur">'+r.dur+'</div>' +
           '<div class="msp-cell msp-c-start">'+r.start+'</div>' +
           '<div class="msp-cell msp-c-end">'+r.end+'</div>' +