Add event colors (Catppuccin Mocha) and read-only week view for users

Admins can now pick a color per event from a Catppuccin Mocha palette;
existing events default to blue. Colors flow through to both the admin
timeline and the new "Неделя" tab in the user view, which reuses the
admin's weekly grid in a read-only mode. Also reworks event blocks to
show a single-line "start–end title" so short events no longer overflow,
tidies the admin toolbar, and expands mobile responsiveness across both
frontends.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/admin/static/style.css

@@ -125,7 +125,7 @@ body {
     border-radius: 24px;
     padding: 18px 22px;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     gap: 16px;
     margin-bottom: 16px;
@@ -144,30 +144,9 @@ body {
     font-weight: 700;
 }
 
-.legend {
+.week-navigation {
     flex-wrap: wrap;
-}
-
-.legend-chip {
-    padding: 8px 12px;
-    border-radius: 999px;
-    font-size: 13px;
-    border: 1px solid transparent;
-}
-
-.task-chip {
-    background: rgba(21, 128, 61, 0.12);
-    color: var(--task);
-}
-
-.event-chip {
-    background: rgba(15, 118, 110, 0.12);
-    color: var(--event);
-}
-
-.recurring-chip {
-    background: rgba(245, 158, 11, 0.16);
-    color: var(--brand-deep);
+    justify-content: center;
 }
 
 .hint-panel {
@@ -340,32 +319,86 @@ body {
     left: 14px;
     right: 14px;
     border-radius: 18px;
-    padding: 12px 14px;
-    background: linear-gradient(160deg, rgba(15, 118, 110, 0.92), rgba(17, 94, 89, 0.84));
-    color: white;
-    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.22);
+    padding: 8px 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    background: var(--event-color, #89b4fa);
+    color: #1e1e2e;
+    box-shadow: 0 12px 24px rgba(30, 30, 46, 0.22);
     cursor: grab;
     user-select: none;
     transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
 }
 
 .event-block.recurring {
-    outline: 2px solid rgba(245, 158, 11, 0.55);
+    outline: 2px solid rgba(30, 30, 46, 0.35);
 }
 
 .event-block.is-active {
     transform: scale(1.01);
-    box-shadow: 0 18px 32px rgba(15, 118, 110, 0.28);
+    box-shadow: 0 18px 32px rgba(30, 30, 46, 0.3);
 }
 
 .event-block.dragging {
     opacity: 0.5;
 }
 
+.event-line {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+}
+
 .event-time {
     font-size: 12px;
-    opacity: 0.82;
-    margin-bottom: 6px;
+    opacity: 0.75;
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
+.event-block .event-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+}
+
+.event-block .item-action.edit {
+    background: rgba(30, 30, 46, 0.14);
+    color: #1e1e2e;
+}
+
+.event-block .item-action.delete {
+    background: rgba(30, 30, 46, 0.14);
+    color: #1e1e2e;
+}
+
+.color-swatch-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.color-swatch {
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    border: 2px solid rgba(123, 92, 62, 0.18);
+    cursor: pointer;
+    padding: 0;
+    transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+.color-swatch:hover {
+    transform: scale(1.08);
+}
+
+.color-swatch.is-selected {
+    border-color: #1e1e2e;
+    box-shadow: 0 0 0 2px rgba(30, 30, 46, 0.2);
 }
 
 .empty-state {
@@ -502,6 +535,10 @@ body {
         align-items: stretch;
     }
 
+    .hero-actions {
+        justify-content: flex-start;
+    }
+
     .form-grid {
         grid-template-columns: 1fr;
     }
@@ -509,6 +546,84 @@ body {
 
 @media (max-width: 560px) {
     .timeline {
-        height: 520px;
+        height: 480px;
+    }
+
+    .hero {
+        padding: 20px;
+        border-radius: 22px;
+    }
+
+    .hero h1 {
+        font-size: clamp(26px, 8vw, 36px);
+    }
+
+    .hero-copy {
+        font-size: 15px;
+    }
+
+    .eyebrow {
+        font-size: 11px;
+    }
+
+    .hero-actions {
+        flex-direction: column;
+    }
+
+    .hero-actions .btn {
+        width: 100%;
+    }
+
+    .toolbar {
+        padding: 14px 16px;
+    }
+
+    .week-navigation {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .week-navigation .nav-btn,
+    .week-navigation .btn {
+        width: 100%;
+    }
+
+    .hint-panel {
+        font-size: 12px;
+        padding: 12px 14px;
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    .schedule-grid {
+        gap: 10px;
+    }
+
+    .day-card {
+        padding: 12px;
+        border-radius: 20px;
+        min-height: 700px;
+    }
+
+    .modal {
+        padding: 12px;
+    }
+
+    .modal-content {
+        padding: 20px;
+        border-radius: 22px;
+    }
+
+    .modal-title {
+        font-size: 24px;
+    }
+
+    .form-grid {
+        gap: 10px;
+    }
+
+    .color-swatch {
+        width: 28px;
+        height: 28px;
     }
 }