.recent-tasks{margin-top:var(--spacing-regular);padding:0 20px 20px;max-width:var(--recent-tasks-max-width, 1024px);width:100%}.recent-tasks[data-status=hide]{display:none}.recent-tasks[data-status=show]{display:block}.recent-tasks[data-status=empty] .recent-tasks-list{height:100px}.recent-tasks[data-status=empty] .recent-tasks-list::before{content:"No Data";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#959595}.recent-tasks[data-status=empty] .scroll-btn{display:none}.recent-tasks header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:16px}.recent-tasks header .left-box{display:flex;align-items:center;gap:10px;color:#fff;font-size:20px;font-weight:600}.recent-tasks header .left-box svg{width:1.1em;height:1.1em}.recent-tasks header .right-box{display:flex;align-items:center}.recent-tasks header .right-box a{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:500;text-decoration:none;color:#c084fc;transition:color .2s}.recent-tasks header .right-box a svg{width:1.1em;height:1.1em}.recent-tasks header .right-box a:hover{color:#d8b4fe}.recent-tasks main{position:relative}.recent-tasks .scroll-btn{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background-color:hsla(0,0%,100%,.1);backdrop-filter:blur(4px);border:1px solid hsla(0,0%,100%,.2);z-index:99;cursor:pointer;transition:.2s}.recent-tasks .scroll-btn:hover{transform:translateY(-50%) scale(1.1)}.recent-tasks .scroll-btn:active{transform:translateY(-50%) scale(0.98)}.recent-tasks .scroll-btn.left{left:-20px}.recent-tasks .scroll-btn.right{right:-20px}.recent-tasks .recent-tasks-list{position:relative;display:flex;flex-direction:row;gap:15px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory}.recent-tasks .task-item{position:relative;width:200px;aspect-ratio:1/1;background-color:#e5e7eb;flex-shrink:0;border-radius:10px;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;cursor:pointer}.recent-tasks .task-item[progress] .progress{display:flex}.recent-tasks .task-item::before{content:"";position:absolute;inset:0;width:100%;height:100%;background-color:rgba(0,0,0,.1);backdrop-filter:blur(5px);z-index:2}.recent-tasks .task-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.recent-tasks .task-preview:not([src]),.recent-tasks .task-preview[src=""]{opacity:0}.recent-tasks .status-bar{position:absolute;left:0;bottom:0;display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px;color:#fff;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);font-size:12px;z-index:3}.recent-tasks .status-bar .tag{padding:2px 8px;border-radius:999px;font-weight:500}.recent-tasks .status-bar .tag.fast{background-color:#a855f7}.recent-tasks .status-bar .tag.hd{background-color:#22c55e}.recent-tasks .progress{position:absolute;inset:0;width:100%;height:100%;z-index:2;background-color:rgba(0,0,0,.5);display:none;flex-direction:column;align-items:center;justify-content:center;padding:10px;font-size:14px}.recent-tasks .progress::after{counter-reset:progress var(--progress);content:counter(progress) "%";font-size:1em;color:#fff}.recent-tasks .progress-bar{display:flex;flex-direction:column;width:100%;height:8px;background-color:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:calc(1em + 5px);margin-bottom:5px}.recent-tasks .progress-bar div{width:calc(1%*var(--progress));height:100%;background-color:#9333ea;transition:.2s}.recent-tasks .task-item.skeleton .status-bar{height:30px;background-color:#fff;background-image:none;margin:10px;padding:0;width:calc(100% - 20px);border-radius:5px}.recent-tasks .task-item.skeleton::after{content:"";display:block;width:100%;height:100%;background-color:#ededed;background:linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #ededed;height:100%;background-size:200% 100%;background-position-x:180%;animation:1s loading ease-in-out infinite}@keyframes loading{to{background-position-x:-20%}}@media screen and (max-width: 600px){.recent-tasks{padding:0px}.recent-tasks .task-item{width:150px}.recent-tasks .status-bar{font-size:10px}.recent-tasks .scroll-btn{width:30px;height:30px}.recent-tasks .scroll-btn.left{left:-10px}.recent-tasks .scroll-btn.right{right:-10px}}