.todo-list{display:flex;flex-direction:column;gap:17px}.todo-list-header{display:flex}.todo-list-header .dropdown.open .dropdown-content{padding-block:10px;padding-inline:6px;gap:1px}.todo-list-title{font-size:24px;font-weight:500}.todo{display:flex;align-items:center;gap:8px;padding-inline:20px;padding-block:10px;background-color:#fff;border-radius:9999px}.todo .checked{text-decoration:line-through;color:#a9a9a9}.todo-title{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.edit-todo-btn,.delete-todo-btn{width:100%;text-align:left}.delete-todo-btn{color:var(--error)}.todo-actions-btn{color:#9796a8}.dropdown{display:flex;flex-direction:column;position:relative}.dropdown .dropdown-content{display:none}.dropdown.open .dropdown-content{position:absolute;top:100%;right:0;display:block;padding-inline:22px;padding-block:17px;background-color:#fff;z-index:10;box-shadow:0 0 8px #0000001a;border-radius:10px;display:flex;flex-direction:column;gap:16px;min-width:111px}.checkbox{accent-color:var(--theme-primary)}.input-wrapper{padding-block:5px;padding-inline:6px;border-radius:9999px;border:1px solid transparent;outline-color:var(--theme-primary);background-color:#fff;display:flex}.input-wrapper:focus-within{border:1px solid var(--theme-primary)}.input-wrapper:focus-within .submit-btn{opacity:1}.input-wrapper .input{width:100%;font-size:16px;padding-inline:14px;border:none;outline:none;background-color:transparent}.input-wrapper .input::placeholder{color:#bcbcbc}.input-wrapper .submit-btn{background-color:var(--theme-primary);padding-block:10px;padding-inline:17px;border-radius:999px;color:#fff;opacity:0}.input-wrapper .submit-btn:disabled{opacity:.5;cursor:not-allowed}.input-wrapper .submit-btn.hidden{opacity:0;pointer-events:none}.progress-container{display:flex;flex-direction:column;gap:4px;background-color:var(--theme-secondary);padding-block:25px;padding-inline:19px;margin-bottom:33px;border-radius:20px;color:#fff}.progress-container .progress-title{font-size:28px}.progress-container .progress{border-radius:7px;width:100%;height:8px;box-shadow:1px 1px 4px #0003}.progress-container .progress::-webkit-progress-bar{background-color:#3b3b3b;border-radius:7px}.progress-container .progress::-webkit-progress-value{background-color:#fff;border-radius:7px}.progress-container .completed-count{color:#ebb9b8}.add-todo-input{padding-block:14px;padding-inline:20px;width:100%;border-radius:9999px;border:none;outline-color:var(--theme-primary);font-size:16px}.add-todo-input::placeholder{color:#bcbcbc}.todo-filter-wrapper{margin-left:auto}.todo-filter-btn{min-width:110px;background-color:#fff;border-radius:10px;padding-block:7px;padding-inline:10px;display:flex;justify-content:space-between;align-items:center}.filter-option{padding-block:7px;padding-inline:9px;border-radius:8px;width:100%;text-align:left}.filter-option.active{background-color:var(--theme-primary);color:#fff}.todo-container{margin:auto;display:flex;flex-direction:column;padding-inline:clamp(12px,5vw,101px);padding-block:61px;background-color:var(--todo-container-bg);border-radius:20px;width:min(100%,720px);min-height:max(620px,100%)}.app{width:100dvw;height:100dvh;display:flex;background-color:var(--app-bg);overflow-x:hidden;padding-block:42px}:root{font-family:Roboto,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;--app-bg: #d1d0d9;--todo-container-bg: #f5f5f5;--theme-primary: #585292;--theme-secondary: #e07c7c;--error: #e07c7c}*{padding:0;margin:0;box-sizing:border-box}button{width:max-content;background:transparent;border:none}.dark{--app-bg: #242424;--todo-container-bg: #f5f5f5}