@import"https://fonts.googleapis.com/css?family=Bebas+Neue&family=Comfortaa:wght@300..700&display=swap";*{margin:0;padding:0;box-sizing:border-box;outline:none;font-family:Comfortaa,sans-serif}html{font-size:62.5%}.container{width:100%;height:100vh;background-color:#2c3542;display:grid;place-items:center;perspective:100rem;overflow:hidden}@media (max-width: 500px){html{font-size:55%}}:root{--ease-out-expo: cubic-bezier(.16, 1, .3, 1)}.calender-app{width:60%;min-width:90vmin;min-height:55rem;height:auto;background:#1e242d;padding:3rem;border-radius:3rem;border:1rem solid #0f1319;display:flex;column-gap:5rem;position:relative;transform-style:preserve-3d;transition:height .4s var(--ease-out-expo)}.calender-app:after{content:"";position:absolute;bottom:-12rem;left:50%;transform:translate(-50%) rotateX(50deg);width:90%;height:16rem;background:#00000080;border-radius:20rem;filter:blur(4rem)}.calender{width:40%}.calender-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.heading{font-family:Bebas Neue,sans-serif;font-size:clamp(2rem,4vw,4.5rem);color:#fff;letter-spacing:.3rem;padding:1.3rem;display:flex;align-items:center;gap:1rem}.heading i{color:#ef9011}.view-switcher{display:flex;gap:.5rem;background-color:#2c3542;padding:.5rem;border-radius:1rem}.view-switcher button{background:transparent;border:none;color:#bbb;padding:.8rem 1.2rem;border-radius:.8rem;cursor:pointer;font-size:clamp(1rem,1cqi,1.4rem);transition:all .3s ease;display:flex;align-items:center;gap:.8rem}.view-switcher button i{font-size:1.2em}.view-switcher button.active{background-color:#ef9011;color:#fff}.nevigate-date{display:flex;align-items:center;column-gap:1rem;margin:3.5rem 0}.nevigate-date h2{color:#bbb;font-size:clamp(1.5rem,1.5cqi,2.5rem);padding:1.3rem;white-space:nowrap}.goto-today-btn{background:linear-gradient(135deg,#ef9011,#d67e0a);color:#fff;border:none;padding:.5rem 1.5rem;border-radius:2rem;cursor:pointer;font-family:Bebas Neue,sans-serif;font-size:1.4rem;letter-spacing:.1rem;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 10px #ef90114d;transition:all .3s ease;animation:fadeIn .3s ease-in-out}.goto-today-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #ef901166}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.buttons{display:flex;column-gap:1rem;margin-left:auto}.buttons i{width:3.5rem;height:3.5rem;background-color:#2c3542;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:2rem;color:#e5650f;cursor:pointer;transition:background .3s}.buttons i:hover{background-color:#ef9011;color:#fff}.weekdays{width:100%;display:flex;margin:3rem 0}.weekdays span{width:calc(100% / 7);font-size:clamp(1rem,.8cqi,1.3rem);font-weight:700;text-transform:uppercase;color:#78879e;letter-spacing:.1rem;display:flex;justify-content:center}.calendar-grid-wrapper{width:100%;position:relative;overflow:hidden;transition:height .4s var(--ease-out-expo)}.calendar-track{display:flex;width:300%;height:100%;touch-action:none}.days-grid-slide{width:33.333%;flex-shrink:0}.swipe-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;box-shadow:inset 20px 0 20px -10px #0000004d,inset -20px 0 20px -10px #0000004d}.days{display:flex;flex-wrap:wrap;width:100%}.days span{width:calc(100% / 7);height:4rem;aspect-ratio:1;display:flex;justify-content:center;align-items:center;margin-bottom:1rem;font-size:clamp(1rem,1cqi,1.6rem);color:#ddd;cursor:pointer;transition:all .2s ease;text-shadow:0 .5rem 1rem rgba(0,0,0,.2);position:relative;backface-visibility:hidden}.days span:hover{transform:scale(1.02);z-index:2}.days span.inactive{color:#3a4556;cursor:default}.days span.has-event:after{content:"";position:absolute;bottom:.5rem;left:50%;transform:translate(-50%);width:.6rem;height:.6rem;background-color:#00a3ff;border-radius:50%}.days span:not(.inactive):not(.has-event):hover{background-color:#ef90111a;border-radius:50%;color:#ef9011}.days span:not(.inactive):not(.has-event):hover:before{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2rem;color:#ef901180;pointer-events:none}.current-day{background-color:#ef9011;border-radius:50%;box-shadow:0 0 1.5rem .5rem #ef901166;color:#fff!important;font-weight:700}.events{width:60%;height:100%;padding:3rem 0;overflow-y:auto;display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#78879e;gap:2rem;animation:fadeIn .5s ease}.empty-state i{font-size:8rem;background:-webkit-linear-gradient(#2c3542,#1e242d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.empty-state p{font-size:1.8rem;font-family:Bebas Neue,sans-serif;letter-spacing:.1rem;color:#566275}.event-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#161b22;width:clamp(30rem,90%,50rem);height:auto;max-height:90vh;overflow-y:auto;padding:3rem;border-radius:1.5rem;box-shadow:0 2rem 5rem #00000080;display:flex;flex-direction:column;align-items:center;gap:2rem;z-index:100;animation:popupScale .4s var(--ease-out-expo) forwards;border:1px solid #2c3542}.event-popup::-webkit-scrollbar{width:.5rem}.event-popup::-webkit-scrollbar-thumb{background-color:#2c3542;border-radius:1rem}@keyframes popupScale{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.time-input{display:flex;column-gap:.5rem;align-items:center;margin-bottom:1rem}.event-popup-time{width:clamp(4rem,4cqi,7rem);background-color:#00a3ff;font-family:Bebas Neue,sans-serif;font-size:clamp(1.5rem,1.5cqi,2.2rem);display:flex;justify-content:center;box-shadow:0 0 1.5rem 1rem #00a3ff33;color:#fff;letter-spacing:.1rem;align-items:center;border-radius:.5rem;padding:.5rem}.time-input input,.time-input select{background-color:transparent;border:none;border-top:.2rem solid #00a3ff;border-bottom:.2rem solid #00a3ff;color:#fff;width:clamp(4rem,5cqi,6rem);height:4rem;text-align:center;font-size:clamp(1.5rem,1.5cqi,1.6rem);font-family:inherit}.time-input select{cursor:pointer;width:clamp(5rem,6cqi,7rem);appearance:none;text-align-last:center}.time-input select option{background-color:#161b22;color:#fff}.time-input span{color:#fff;font-size:2rem}.event{width:100%;height:7rem;background-color:#00a3ff;padding:1.5rem 0;border-radius:1rem;display:flex;align-items:center;margin-bottom:2rem;position:relative}.event-date-wrapper{display:flex;flex-direction:column;align-items:center;width:25%;border-right:.1rem solid rgba(255,255,255,.5);border-radius:5px;padding-right:1rem}.event-popup textarea{width:100%;aspect-ratio:5 / 2;resize:none;background-color:#0f1319;border:1px solid #2c3542;padding:1rem;border-radius:.8rem;color:#fff;transition:all .3s ease;font-family:inherit;font-size:1.3rem}.event-popup textarea:focus{outline:none;border-color:#00a3ff;box-shadow:0 0 0 2px #00a3ff1a}.event-popup textarea::placeholder{font-size:clamp(1rem,.8cqi,1.3rem);color:#78879e}.event-popup textarea:focus::placeholder{color:transparent}.form-row{width:100%;display:flex;gap:1.5rem;justify-content:space-between}.form-group{display:flex;flex-direction:column;gap:.8rem;flex:1;min-width:0}.form-group label{color:#78879e;font-size:1.2rem;font-family:Bebas Neue,sans-serif;letter-spacing:.05rem;display:flex;align-items:center;gap:.6rem;white-space:nowrap}.form-group label i{color:#00a3ff;font-size:1.4rem}.form-select,.form-input{width:100%;background-color:#0f1319;border:1px solid #2c3542;color:#fff;padding:1rem 1.2rem;border-radius:.8rem;font-size:1.3rem;outline:none;transition:all .3s ease;font-family:inherit}.form-select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.5rem;padding-right:3rem;cursor:pointer}.form-select:hover,.form-input:hover{border-color:#3a4556}.form-select:focus,.form-input:focus{border-color:#00a3ff;box-shadow:0 0 0 3px #00a3ff26;background-color:#131820}.event-popup-btn{width:100%;height:4.5rem;background-color:#00a3ff;font-family:Bebas Neue,sans-serif;font-size:clamp(1.5rem,1.5cqi,2.2rem);letter-spacing:.1rem;color:#fff;border:none;box-shadow:0 0 1.5rem 1rem #00a3ff33;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1rem;border-radius:.8rem;margin-top:1rem}.event-popup-btn.conflict{background-color:#ef9011;box-shadow:0 0 1.5rem 1rem #ef901133}.event-popup-btn:active{transform:scale(.98);transform:translateY(.1rem)}.conflict-warning{color:#ef9011;font-size:1.4rem;font-family:Bebas Neue,sans-serif;letter-spacing:.1rem;text-align:center;animation:fadeIn .3s ease;display:flex;align-items:center;gap:.5rem;padding:0 2rem}.close-event-popup{position:absolute;top:1.5rem;right:1.5rem;border:none;background-color:transparent;cursor:pointer}.close-event-popup i{font-size:2.5rem;color:#78879e;transition:color .3s}.close-event-popup i:hover{color:#fff}.event-date{font-size:clamp(1.3rem,1cqi,1rem);color:#fff;padding-left:2.5rem;padding-top:1.5rem;font-family:Bebas Neue,sans-serif}.event-time{font-size:clamp(1.3rem,1cqi,1.6rem);line-height:4rem;font-weight:700;color:#fff}.event-text{font-size:clamp(1.2rem,1cqi,1.4rem);line-height:2rem;color:#fff;width:75%;padding:0 3rem 0 1rem;overflow:break-word}.event-buttons{position:absolute;top:50%;transform:translateY(-50%);right:1rem;display:flex;flex-direction:column;row-gap:1rem}.event-buttons i{font-size:1.6rem;color:#fff;cursor:pointer}.saved-indicator{font-size:1.2rem;color:#78879e;display:flex;align-items:center;gap:.5rem;justify-content:center}.settings-btn{background:transparent;border:none;color:#78879e;font-size:2rem;cursor:pointer;transition:color .3s}.settings-btn:hover{color:#fff}.toast-notification{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background-color:#161b22;color:#fff;padding:1.5rem 2.5rem;border-radius:1rem;box-shadow:0 1rem 3rem #00000080;display:flex;align-items:center;gap:2rem;z-index:1000;border:1px solid #2c3542;animation:slideUp .3s ease-out}.toast-undo-btn{background:transparent;border:none;color:#ef9011;font-weight:700;font-size:1.4rem;cursor:pointer;text-transform:uppercase;letter-spacing:.1rem}@keyframes slideUp{0%{transform:translate(-50%,100%);opacity:0}to{transform:translate(-50%);opacity:1}}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.settings-modal{background:#1e242d;padding:3rem;border-radius:2rem;border:1px solid #2c3542;width:clamp(30rem,40vw,50rem);display:flex;flex-direction:column;gap:2rem}.settings-modal h2{color:#fff;font-family:Bebas Neue,sans-serif;font-size:2.5rem;letter-spacing:.1rem}.settings-actions{display:flex;flex-direction:column;gap:1.5rem}.settings-btn-action{background:#2c3542;color:#fff;border:none;padding:1.5rem;border-radius:1rem;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:1rem;transition:background .3s}.settings-btn-action:hover{background:#00a3ff}.settings-close{background:transparent;border:1px solid #78879e;color:#78879e;padding:1rem;border-radius:1rem;cursor:pointer;margin-top:1rem}@media (max-width: 850px){.calender-app{height:auto;flex-direction:column;row-gap:2rem}.calender{width:70%;margin:auto}.nevigate-date,.weekdays{margin:1rem 0}.events{width:80%;margin:auto}.event-popup{width:80%;max-height:80vh}.event-popup-time{width:clamp(5rem,10cqi,8rem);font-size:clamp(1.5rem,3cqi,2.2rem)}.time-input input,.time-input select{width:clamp(5rem,8cqi,7rem);font-size:clamp(1.5rem,3cqi,2.2rem)}.event-popup textarea{width:100%}.event-popup textarea::placeholder{font-size:clamp(1rem,1.5cqi,2rem)}.event-popup-btn{width:100%;font-size:clamp(1.5rem,3cqi,2.2rem)}.event-date{font-size:clamp(1rem,1.4cqi,1.2rem)}.event-time{font-size:clamp(1rem,2cqi,1.6rem)}.event-text{font-size:clamp(1rem,2.4cqi,1.4rem)}}@media (max-width: 500px){.calender{width:100%}.event-popup{width:90%}.events{width:100%}}