:root{--primary-color: pink;--transition-speed: .2s}*{box-sizing:border-box;margin:0;padding:0}.calendar{width:98%;margin:5px auto 0;padding:16px;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #08070714}.calendar .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 8px}.calendar .header .current-date{font-size:18px;font-weight:600;color:#333}.calendar .week-container{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.calendar .week-header{text-align:center;padding:8px 0;font-size:14px;color:#666;font-weight:500}.calendar .calendar-box{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar .day-item{text-align:center;aspect-ratio:1/.9;padding:12px;font-size:15px;border-radius:6px;position:relative;cursor:pointer;transition:all var(--transition-speed) ease;will-change:transform,background-color}.calendar .day-item:not(.prev-month):not(.next-month){background-color:#f9f9f9;color:#333}.calendar .day-item:not(.prev-month):not(.next-month):hover{background-color:#f0f0f0;transform:scale(1.02)}.calendar .day-item.prev-month,.calendar .day-item.next-month{background-color:#f5f5f5;color:#ccc}.calendar .day-item.selected{background-color:var(--primary-color);color:#fff;transition:all var(--transition-speed) ease}.calendar .day-item.today:not(.selected):after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background-color:var(--primary-color);left:50%;transform:translate(-50%)}.list{min-height:30px;margin-top:16px}