h2{text-align:center;font-weight:normal}

.calendar-nav{
display:flex;justify-content:space-between;
font-size:18px;margin:10px 0
}
.calendar-nav button{
background:none;border:none;font-size:22px;cursor:pointer
}

.calendar-table{
width:100%;border-collapse:collapse;text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,.1)
}
.calendar-table th{
background:#4a90e2;color:#fff;padding:8px
}
.calendar-table td{
border:1px solid #ddd;padding:8px;cursor:pointer
}
.calendar-table td.today{
background:#ffeb3b;font-weight:bold
}
.calendar-table td.event-day{
background:#c8e6c9;font-weight:bold;position:relative
}
.calendar-table td.event-day::after{
content:"•";position:absolute;bottom:2px;right:5px;color:#2e7d32
}

.event-form{
margin-top:20px;padding:15px;background:#f1f8e9;border-radius:10px
}
.event-form button{
background:#388e3c;color:#fff;border:none;padding:8px
}

.delete-btn{
background:none;border:none;color:#c62828;font-weight:bold;cursor:pointer
}

.month-panel{
margin:20px 0;padding:15px;
background:#eef;border-radius:10px
}
.month-controls{
display:flex;gap:10px;flex-wrap:wrap
}
.month-controls select,
.month-controls button{
padding:6px
}



/* DARK */
.dark-mode .calendar-table th{background:#2d5d99}
.dark-mode .calendar-table td{background:#333;color:#fff}
.dark-mode .event-day{background:#455a64}
.dark-mode .month-panel{background:#263238}