body{background:#e5e7eb;margin:0;font-family:sans-serif}.main-layout{justify-content:center;align-items:center;gap:60px;min-height:100vh;display:flex}.calendar-wrapper{align-items:center;gap:20px;display:flex}.nav-btn{cursor:pointer;background:#fff;border:none;border-radius:50%;padding:12px;transition:all .2s;box-shadow:0 5px 15px #0003}.nav-btn:hover{transform:scale(1.1)}.calendar-container{flex-direction:column;align-items:center;display:flex}.page{background:#fff;border-radius:20px;width:320px;min-height:480px;overflow:hidden;box-shadow:0 30px 60px #00000040}.image-section img{object-fit:cover;width:100%;height:160px}.content{flex-direction:column;gap:8px;padding:12px;display:flex}.month-row h2{color:#111;font-size:20px;font-weight:600}.weekdays{text-align:center;grid-template-columns:repeat(7,1fr);font-size:14px;font-weight:600;display:grid}.dates-grid{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.dates-grid span{text-align:center;cursor:pointer;border-radius:6px;padding:6px;transition:all .2s}.dates-grid span:hover{background:#e0f2fe}.notes{width:250px}.notes textarea{resize:none;border:none;border-radius:15px;width:100%;height:100px;padding:15px;box-shadow:0 10px 25px #00000026}.selected-day{color:#fff;background:#0ea5e9;border-radius:50%}.in-range{background:#bae6fd}.event-day{color:#fff;background:#34d399;border-radius:50%}.event-view{background:#f1f5f9;border-radius:10px;margin-top:15px;padding:10px}.event-view button{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:6px;margin-top:10px;padding:6px 10px}@media (width<=768px){.main-layout{flex-direction:column}.page{width:100%;max-width:350px}.calendar-wrapper{flex-direction:column;gap:10px}.nav-btn{padding:10px;font-size:14px}.notes{width:100%;max-width:350px}.notes textarea{height:180px}.dates-grid span{padding:10px;font-size:14px}}