redisign and bug fix

frontend/public/static/style.css

@@ -1,100 +1,153 @@
+:root {
+    --bg: #f4efe8;
+    --panel: rgba(255, 251, 246, 0.9);
+    --text: #1f2937;
+    --muted: #6b7280;
+    --task: #166534;
+    --event: #0f766e;
+    --line: rgba(123, 92, 62, 0.18);
+}
+
 * {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background: #f5f5f5;
-    padding: 20px;
-    font-size: 24px;
-    line-height: 1.6;
+    min-height: 100vh;
+    font-family: Georgia, "Times New Roman", serif;
+    color: var(--text);
+    background:
+        radial-gradient(circle at top left, rgba(245, 158, 11, 0.16), transparent 28%),
+        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.14), transparent 22%),
+        linear-gradient(180deg, #faf4eb 0%, #efe4d2 100%);
+    padding: 24px;
 }
 
-.container {
-    max-width: 1200px;
+.board {
+    max-width: 1440px;
     margin: 0 auto;
 }
 
-.day-section {
-    background: white;
-    border-radius: 12px;
-    padding: 30px;
-    margin-bottom: 30px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+.board-hero,
+.day-panel {
+    background: var(--panel);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    box-shadow: 0 18px 45px rgba(101, 67, 33, 0.12);
+    backdrop-filter: blur(14px);
+}
+
+.board-hero {
+    border-radius: 28px;
+    padding: 28px;
+    margin-bottom: 20px;
+}
+
+.board-label {
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: 12px;
+    color: #92400e;
+    margin-bottom: 10px;
+}
+
+.board-hero h1 {
+    font-size: clamp(34px, 5vw, 62px);
+    line-height: 0.95;
+    margin-bottom: 12px;
+}
+
+.board-copy {
+    max-width: 780px;
+    color: var(--muted);
+    font-size: 22px;
+    line-height: 1.4;
+}
+
+.days-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px;
+}
+
+.day-panel {
+    border-radius: 28px;
+    padding: 28px;
+}
+
+.panel-head {
+    border-bottom: 1px solid var(--line);
+    padding-bottom: 16px;
+    margin-bottom: 18px;
 }
 
 .day-title {
     font-size: 36px;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 20px;
-    padding-bottom: 15px;
-    border-bottom: 3px solid #4CAF50;
+    line-height: 1.1;
+}
+
+.tasks-list,
+.events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 .tasks-list {
-    margin-bottom: 30px;
+    margin-bottom: 18px;
+}
+
+.task-item,
+.event-item,
+.empty-message {
+    border-radius: 18px;
+    padding: 16px 18px;
 }
 
 .task-item {
+    background: rgba(22, 101, 52, 0.08);
+    border: 1px solid rgba(22, 101, 52, 0.14);
     font-size: 28px;
-    padding: 15px 0;
-    color: #555;
-    border-bottom: 1px solid #eee;
-}
-
-.task-item:last-child {
-    border-bottom: none;
-}
-
-.events-list {
-    margin-top: 20px;
 }
 
 .event-item {
+    display: grid;
+    grid-template-columns: 160px 1fr;
+    gap: 14px;
+    background: rgba(15, 118, 110, 0.08);
+    border: 1px solid rgba(15, 118, 110, 0.14);
     font-size: 28px;
-    padding: 15px 0;
-    color: #333;
-    border-bottom: 1px solid #eee;
-    display: flex;
-    align-items: center;
-    gap: 15px;
-}
-
-.event-item:last-child {
-    border-bottom: none;
+    align-items: start;
 }
 
 .event-time {
-    font-weight: 600;
-    color: #4CAF50;
-    min-width: 120px;
-}
-
-.event-title {
-    flex: 1;
+    color: var(--event);
+    font-weight: 700;
 }
 
 .empty-message {
-    color: #999;
-    font-style: italic;
-    padding: 20px 0;
+    color: var(--muted);
+    border: 1px dashed var(--line);
+    font-size: 24px;
 }
 
-@media (max-width: 768px) {
-    body {
-        font-size: 20px;
-        padding: 15px;
+@media (max-width: 900px) {
+    .days-grid {
+        grid-template-columns: 1fr;
     }
-    
+
     .day-title {
         font-size: 28px;
     }
-    
-    .task-item, .event-item {
-        font-size: 22px;
+
+    .board-copy,
+    .task-item,
+    .event-item {
+        font-size: 20px;
+    }
+
+    .event-item {
+        grid-template-columns: 1fr;
     }
 }
-