body{font-family:'Segoe UI',sans-serif}.calendar{max-width:100%;margin:20px auto;background:linear-gradient(135deg,#8B0000,#2f2f2f);padding:15px;border-radius:20px;color:#fff;box-shadow:0 10px 30px rgb(0 0 0 / .4)}.header{display:flex;justify-content:space-between;align-items:center}.header button{background:rgb(255 255 255 / .2);border:none;color:#fff;padding:6px 12px;border-radius:10px;cursor:pointer}.days,.dates{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.days div{font-weight:700;padding:10px 0}.dates div{padding:10px;margin:2px;border-radius:10px;cursor:pointer;transition:0.2s}.dates div:hover{background:rgb(255 255 255 / .2);transform:scale(1.1)}.today{background:gold;color:#000}.holiday{background:#ff4d4d}.cuti{background:#4da6ff}.popup{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) scale(.9);background:rgb(0 0 0 / .9);padding:12px 18px;border-radius:12px;color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:all 0.3s ease}.popup.show{opacity:1;transform:translateX(-50%) scale(1)}@media(max-width:480px){.calendar{padding:10px}.dates div{padding:8px;font-size:12px}}