Enhance calendar layout and duty list rendering

- Introduced a sticky header for the calendar to improve navigation.
- Updated the duty list display to highlight today's date with a distinct style.
- Added new CSS styles for better visual presentation of duty days and improved layout consistency.

webapp/app.js

@@ -368,6 +368,7 @@
       grouped[date].push(d);
     });
     const dates = Object.keys(grouped).sort();
+    const todayKey = localDateString(new Date());
     let html = "";
     /** Format UTC date from ISO string as DD.MM for display. */
     function formatDateKey(isoDateStr) {
@@ -376,9 +377,16 @@
       const month = String(d.getUTCMonth() + 1).padStart(2, "0");
       return day + "." + month;
     }
+    /** Format YYYY-MM-DD as DD.MM for list header. */
+    function dateKeyToDDMM(key) {
+      return key.slice(8, 10) + "." + key.slice(5, 7);
+    }
     dates.forEach(function (date) {
       const list = grouped[date];
-      html += "<h2>" + date + "</h2>";
+      const isToday = date === todayKey;
+      const dayBlockClass = "duty-list-day" + (isToday ? " duty-list-day--today" : "");
+      const titleText = isToday ? "Сегодня, " + dateKeyToDDMM(date) : dateKeyToDDMM(date);
+      html += "<div class=\"" + dayBlockClass + "\"><h2 class=\"duty-list-day-title\">" + escapeHtml(titleText) + "</h2>";
       list.forEach(function (d) {
         const startDate = new Date(d.start_at);
         const endDate = new Date(d.end_at);
@@ -396,6 +404,7 @@
         }
         html += "<div class=\"" + itemClass + "\"><span class=\"duty-item-type\">" + escapeHtml(typeLabel) + "</span> <span class=\"name\">" + escapeHtml(d.full_name) + "</span><div class=\"time\">" + timeOrRange + "</div></div>";
       });
+      html += "</div>";
     });
     dutyListEl.innerHTML = html;
   }
@@ -527,8 +536,20 @@
     loadMonth();
   });
 
+  function bindStickyScrollShadow() {
+    var stickyEl = document.getElementById("calendarSticky");
+    if (!stickyEl || document._stickyScrollBound) return;
+    document._stickyScrollBound = true;
+    function updateScrolled() {
+      stickyEl.classList.toggle("is-scrolled", window.scrollY > 0);
+    }
+    window.addEventListener("scroll", updateScrolled, { passive: true });
+    updateScrolled();
+  }
+
   runWhenReady(function () {
     requireTelegramOrLocalhost(function () {
+      bindStickyScrollShadow();
       loadMonth();
     });
   });