.calendar-container{width:100%;max-width:1000px;margin:0 auto;font-family:sans-serif;border:1px solid #ddd;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.05)}.calendar-header{display:flex;justify-content:space-between;align-items:center;padding:20px;background-color:#0f2133;color:#fff}.calendar-header button{background:0 0;border:1px solid rgba(255,255,255,.3);color:#fff;padding:5px 15px;cursor:pointer;border-radius:4px}.calendar-header button:hover{background-color:rgba(255,255,255,.1)}.calendar-header h2{color:#fff;margin:0;font-size:1.2rem}@media (max-width:calc(575.98px)){.calendar-header{padding:15px 10px}.calendar-header h2{font-size:1rem}}.calendar-grid,.calendar-grid-header{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-grid-header{background-color:#eee;padding:10px 0;text-align:center;font-weight:700;font-size:.9rem;color:#666}.calendar-grid .day{min-height:120px;padding:10px;border-right:1px solid #eee;border-bottom:1px solid #eee;position:relative;background:#fff;cursor:pointer;transition:background .2s}@media (max-width:calc(844.98px)){.calendar-grid .day{min-height:80px}}.calendar-grid .day:nth-child(7n){border-right:none}.calendar-grid .day:hover{background-color:f8f9fa}.calendar-grid .day.today{background-color:#e1f0fa}.calendar-grid .day.other-month{color:#ccc;background-color:#fafafa}.calendar-grid .day .date-number{font-weight:700;margin-bottom:5px;display:block}@media (max-width:calc(575.98px)){.calendar-grid-header{font-size:.75rem;padding:5px 0}.calendar-grid .day{min-height:50px;padding:5px}.calendar-grid .day .date-number{font-size:.8rem;margin-bottom:2px}}.calendar-grid .day .event-dot{background-color:#3498db;color:#fff;margin-top:2px;display:block;font-size:.75rem;padding:2px 4px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:calc(844.98px)){.calendar-grid .day .event-dot{display:inline-block;width:6px;height:6px;border-radius:50%;padding:0;text-indent:-9999px;margin-right:3px;vertical-align:middle}}.event-details{max-width:800px;width:90%;margin:20px auto;padding:20px;border:1px solid #ddd;background:#f9f9f9;border-radius:8px;box-sizing:border-box}.event-details.hidden{display:none}