:root{--bg-color: #f5f5f5;--bg-color-i: #121212;--text-color: #000;--text-color-i: #fff;--section-color: #fff;--btn-stroke: #000;--delete-btn-stroke: #666;--calendar-text-color: #afafaf}[data-theme=dark]{--bg-color: #121212;--bg-color-i: #f5f5f5;--text-color: #fff;--text-color-i: #000;--section-color: #1e1e1e;--btn-stroke: #fff;--delete-btn-stroke: #fff;--calendar-text-color: #000}body{font-family:Arial,sans-serif;color:var(--text-color);margin:0;padding:0;box-sizing:border-box;background-color:var(--bg-color)}.App{display:flex;flex-direction:column;align-items:center;padding:20px}.logo-title{display:flex;flex-direction:row;align-items:center;gap:8px;position:absolute;top:10px;left:10px}.logo-title svg{width:42px;height:42px}.logo-title .main-title{margin:0;font-weight:500}.theme-icon{fill:currentColor;transition:fill .2s ease}.theme-icon.light{color:#333}.theme-icon.dark{color:#fff}.user-info{display:flex;flex-direction:row;align-items:center;gap:6px;border:1px solid currentColor;border-radius:12px;padding:6px 10px;cursor:pointer;user-select:none;-moz-user-select:none;-webkit-user-select:none;position:absolute;top:10px;right:10px}.user-menu{position:absolute;right:10px;top:55px;display:flex;flex-direction:column;gap:14px;align-items:start;background-color:var(--bg-color);padding:10px;border-radius:12px;z-index:999;width:213px;border:1px solid currentColor}.container{display:flex;width:100%;max-width:1200px;gap:20px;margin:80px auto 0}.tasks-main-left{width:100%}.tasks-section{border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:16px 16px 60px;background:var(--section-color);width:calc(100% - 32px);position:relative}.tasks-section-header{display:flex;flex-direction:row;gap:10px;margin-bottom:10px}.tasklist-dropdown{width:fit-content;position:relative;margin-top:16px}.tasklist-dropdown:before{position:absolute;content:"список задач";font-size:10.25px;left:6px;top:-12px;color:#666;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.tasklist-dropdown select{width:120px;padding:6px;font-size:16px;background:none;border-radius:16px;border:0;cursor:pointer;color:var(--text-color)}.tasklist-dropdown select option{background:var(--bg-color)}.filter-dropdown{width:fit-content;margin-top:16px;position:relative}.filter-dropdown:before{position:absolute;content:"фильтрация";font-size:10.25px;left:6px;top:-12px;color:#666;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.filter-dropdown select{width:145px;padding:6px;font-size:16px;background:none;border-radius:16px;border:0;cursor:pointer;color:var(--text-color);display:flex}.add-task{display:flex;gap:10px;margin-bottom:20px;box-shadow:0 4px 8px #0000001a;border-radius:12px;padding:6px;position:relative}.add-task input{font-size:16px;width:100%;outline:none;border-radius:12px;border:0;padding-left:12px}.add-task button{background:none;border:none;width:32px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:.3s ease all}.add-task button:before{position:absolute;content:"";height:calc(100% - 3px);left:-10px;display:block;border:1px solid #afafaf;border-radius:12px}.add-task button svg{fill:#00f}.add-task button:hover{box-shadow:0 4px 8px #0000001a;border-radius:6px;transition:.3s ease all}.time-icon:before,.date-icon:before{opacity:0}.time-icon,.date-icon{flex-shrink:0}.time-icon svg,.date-icon svg{fill:none!important;stroke:var(--btn-stroke)}.date-icon{margin-right:8px;margin-top:-1.5px}.time-picker-popup{position:absolute;right:70px;padding:12px;background:var(--section-color);border-radius:12px;box-shadow:0 4px 12px #0000001a;top:-50px;display:flex;justify-content:center;align-items:center}.time-picker-popup input{font-size:16px;width:100%;outline:none;border-radius:12px;border:0;padding-inline:12px}.date-picker-popup{position:absolute;right:0;top:-50px;background:var(--section-color);padding:12px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000001a}.date-picker-popup input{padding-inline:12px}.tasks-list{list-style:none;padding:0}.task-item{display:flex;align-items:start;gap:10px;padding:10px;border-bottom:1px solid #ddd}.task-item input[type=checkbox]{width:20px;height:20px;cursor:pointer}.task-title{font-size:16px}.task-title.completed{text-decoration:line-through;color:gray}.task-time,.task-date{display:flex;flex-direction:row;align-items:center;gap:2px}.task-time svg,.task-date svg{width:24px;stroke:var(--btn-stroke)}.task-date svg{padding-bottom:2px}.task-delete-button{width:32px;height:32px;border:0;padding:0;background:none;border-radius:6px;display:flex;justify-content:center;align-items:center;transition:.3s ease all;margin-right:10px;position:relative}.task-delete-button:after{position:absolute;content:"";border:1px solid #afafaf;right:-7px;height:30px}.task-delete-button svg{width:24px;height:24px;stroke:var(--delete-btn-stroke)}.task-delete-button:hover{box-shadow:0 4px 8px #0000001a;transition:.3s ease all}.task-item-inner{display:flex;flex-direction:column;gap:6px}.task-item-inner-bottom{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;width:fit-content}.skeleton{opacity:.7;animation:skeleton-loading 1s linear infinite alternate}.skeleton-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.skeleton-nav{width:30px;height:30px;background-color:#e0e0e0;border-radius:4px}.skeleton-month{width:150px;height:24px;background-color:#e0e0e0;border-radius:4px}.skeleton-weekday{height:20px;background-color:#e0e0e0;border-radius:4px}.skeleton-day{height:40px;background-color:#e0e0e0;border-radius:4px}.skeleton-event{margin-bottom:1rem}.skeleton-summary{width:80%;height:20px;background-color:#e0e0e0;border-radius:4px;margin-bottom:.5rem}.skeleton-time{width:60%;height:16px;background-color:#e0e0e0;border-radius:4px}@keyframes skeleton-loading{0%{background-color:#fff}to{background-color:#f5f5f5}}.calendar-section.skeleton{width:505px;height:377px}.calendar-header.skeleton-header{margin-top:0;margin-bottom:0}.calendar-section{background-color:var(--section-color);border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:16px;max-width:340px;align-self:flex-start}.calendar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:-10px;margin-bottom:10px;font-size:13px}.calendar-header .calendar-month{font-weight:400;text-transform:capitalize}.calendar-header .calendar-nav{border:0;background-color:transparent;width:31px;padding-top:3px;cursor:pointer;transition:.35s ease all;scale:1}.calendar-header .calendar-nav:hover{transition:.35s ease all;scale:1.15}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:12px}.calendar-day{text-align:center;padding:12px;border:1px solid #ddd;border-radius:12px;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}.calendar-day.prev-month-day{background:#ececec;color:var(--calendar-text-color)}.calendar-day.current-day{font-weight:700;background-color:#d9534f;color:#fff;border-color:#d9534f}.calendar-day.current-day:hover{background-color:#d9534f}.calendar-day:hover{background-color:#f9f9f9}.calendar-day.has-event{position:relative;background:#cf9fff;color:#fff}.calendar-day.has-event:after{display:none;content:"";position:absolute;bottom:-5px;left:0;width:100%;height:3px;background-color:#1a73e8;border-radius:2px}.calendar-events-list{list-style:none;padding:0;margin:0}.calendar-event{padding:10px;border-bottom:1px solid #ddd}.calendar-event:last-child{border-bottom:none}.calendar-event-summary{font-size:16px;font-weight:700}.calendar-event-time{font-size:14px;color:#666}.calendar-weekdays{display:flex;flex-direction:row;align-items:center;gap:6px;margin-bottom:6px}.calendar-weekday{width:100%;text-align:center}.logout-button{color:currentColor;border:none;font-size:16px;cursor:pointer;border-radius:5px;transition:background-color .3s ease;background-color:transparent;display:flex;flex-direction:row;align-items:center;gap:6px;width:139px}.logout-button.light{color:currentColor}.logout-button.dark{color:#fff}.logout-button svg{fill:currentColor}.show-completed-tasks-btn{position:absolute;bottom:0;left:0;border-radius:12px;border:0;width:100%;text-align:start;padding-left:24px;height:45px;background:transparent;cursor:pointer;font-size:16px;margin-bottom:10px;color:var(--text-color)}.completed-tasks-container{border-radius:12px;box-shadow:0 4px 12px #0000001a;padding:16px;background:var(--section-color);width:calc(100% - 32px);position:relative;display:flex;flex-direction:column;gap:10px;margin-top:20px}.completed-task{padding:10px;border-bottom:1px solid #ddd;display:flex;flex-direction:row;align-items:center;gap:10px}.completed-task .task-item-inner span{color:var(--text-color)}.completed-task button{border:0;background:transparent}.completed-task button svg{width:24px;height:24px}.theme-button{color:var(--text-color-i);border:none;font-size:16px;cursor:pointer;border-radius:5px;transition:background-color .3s ease;display:flex;justify-content:center;align-items:center;gap:6px;background-color:transparent}.theme-button svg{stroke:var(--text-color-i);width:24px;height:24px;filter:invert(1);transition:.4s ease all}.theme-button span{color:currentColor;filter:invert(1);transition:.4s ease all}@media screen and (max-width:370px){.App{width:calc(100% - 40px)}.theme-button{left:120px}.logout-button{right:100px}.main-title{margin-top:40px}.container{max-width:360px;flex-direction:column;align-items:center;justify-content:center}.calendar-section{width:calc(100% - 32px)}.calendar-day{font-size:14px;padding:9px}.add-task input{font-size:14px}.task-item,.completed-task{padding-left:0;margin-left:-4px}.task-time span,.task-date span{font-size:14px}.task-date span{white-space:nowrap}}