body{margin:0;font-family:sans-serif;background:#111;color:#eee}
.dashboard{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);height:100vh;gap:10px;padding:10px}
.widget{background:#1e1e1e;border-radius:10px;padding:10px;overflow:auto}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{padding:6px;text-align:center;cursor:pointer;border-radius:5px}
.day:hover{background:#333}

.schedule-header{display:flex;justify-content:space-between;margin-bottom:10px}

.event{padding:6px;margin-bottom:6px;border-radius:6px}
.event.active{background:#2a6}
.family{border-left:4px solid #f39}
.work{border-left:4px solid #39f}
.urgent{border-left:4px solid #f33}
.fun{border-left:4px solid #fc3}

#clock{
position:fixed;right:20px;bottom:20px;
background:#000;color:#0f0;
padding:10px 18px;border-radius:10px;
font-size:26px;font-weight:bold
}

.cal-header{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-bottom:8px
}

.cal-title{
font-weight:bold;
text-transform:capitalize
}

.day.today{
background:#2a6;
color:#fff;
}

.day.selected{
outline:2px solid #39f;
}

.cal-today-btn{
margin-top:8px;
text-align:center;
padding:6px;
background:#333;
border-radius:6px;
cursor:pointer
}
.cal-today-btn:hover{background:#444}
.event .desc{
display:none;
margin-top:6px;
font-size:13px;
opacity:.85
}
.event.open .desc{display:block}
.event{cursor:pointer}
.event .desc{display:none;margin-top:6px;opacity:.8}
.event.open .desc{display:block}

.event-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.7);
display:flex;
align-items:center;
justify-content:center;
z-index:9999
}
.event-modal-box{
background:#222;
padding:30px;
border-radius:12px;
text-align:center;
max-width:400px
}