: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; } body { 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; } .board { max-width: 1440px; margin: 0 auto; } .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; line-height: 1.1; } .tasks-list, .events-list { display: flex; flex-direction: column; gap: 12px; } .tasks-list { 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; } .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; align-items: start; } .event-time { color: var(--event); font-weight: 700; } .empty-message { color: var(--muted); border: 1px dashed var(--line); font-size: 24px; } @media (max-width: 900px) { .days-grid { grid-template-columns: 1fr; } .day-title { font-size: 28px; } .board-copy, .task-item, .event-item { font-size: 20px; } .event-item { grid-template-columns: 1fr; } }