body{
    background:#020617;
    color:#e5e7eb;
    font-family:Segoe UI;
    margin:0;
    padding:20px;
}

h1{
    text-align:center;
    color:#67e8f9;
}

/* TOP PANELS */

.top-panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:20px;
}

.panel{
    background:#0f172a;
    border-radius:14px;
    padding:20px;
    border:1px solid rgba(255,255,255,.05);
}

.panel-title{
    color:#67e8f9;
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
}

/* CALENDAR */

.calendar{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
}

.day{
    min-height:120px;
    background:#0f172a;
    border-radius:12px;
    padding:8px;
    border:1px solid rgba(255,255,255,.05);
}

.today{
    border:2px solid #facc15;
    box-shadow:0 0 15px #facc15;
}

.number{
    font-weight:bold;
    margin-bottom:8px;
}

.event{
    font-size:12px;
    margin-bottom:4px;
}

.ev-birthday{
    display:inline-block;
    margin:2px 0;
    padding:2px 6px;
    border-radius:8px;

    background:#14532d;
    color:#86efac;

    font-size:12px;
}

.ev-nameday{
    display:inline-block;
    margin:2px 0;
    padding:2px 6px;
    border-radius:8px;

    background:#831843;
    color:#f9a8d4;

    font-size:12px;
}

.ev-anniversary{
    display:inline-block;
    margin:2px 0;
    padding:2px 6px;
    border-radius:8px;

    background:#7c2d12;
    color:#fdba74;

    font-size:12px;
}

.count-birthday{
    color:#86efac;
}

.count-nameday{
    color:#f9a8d4;
}

.count-anniversary{
    color:#fdba74;
}

.ev-birthday{
    display:block;
    margin:3px 0;
    padding:4px 8px;
    border-radius:8px;

    background:#14532d;
    color:#86efac;

    font-size:12px;
}

.month-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;

    margin-bottom:20px;

    font-size:30px;
    font-weight:700;
    color:#67e8f9;
}

.month-nav a{
    color:#facc15;
    text-decoration:none;
}

.count-birthday{
    color:#86efac;
}

.count-nameday{
    color:#f9a8d4;
}

.count-anniversary{
    color:#fdba74;
}

.detail-panel{
    margin-bottom:20px;
}

.day{
    cursor:pointer;
}

.legend{

    white-space:nowrap;
    font-size:16px;
    color:#e5e7eb;
    font-weight:600;
}

.legend span{
    padding:6px 12px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
}

.legend-birthday{
    background:#14532d;
    color:#86efac;
}

.legend-nameday{
    background:#831843;
    color:#f9a8d4;
}

.legend-anniversary{
    background:#7c2d12;
    color:#fdba74;
}

.selected-day{
    border:2px solid #06b6d4 !important;
    box-shadow:0 0 12px #06b6d4;
}

.header-row{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    width:100%;
    margin-bottom:20px;
}

.headerCenter{
    flex:1;
    text-align:center;
}

.headerCenter h1{
    margin:0;
}

#headerDetail{

    min-width:260px;
    font-size:14px;
    line-height:1.4;
}

.headerCenter h1{
    margin:0;
    font-size:28px;
    white-space:nowrap;
}