@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{color:#fff;background:radial-gradient(circle at 15% 20%,#2563eb59,#0000 30%),radial-gradient(circle at 85% 80%,#3b82f640,#0000 30%),linear-gradient(135deg,#06142e,#0b1f3a 50%,#07152d);font-family:Inter,sans-serif}nav{-webkit-backdrop-filter:blur(18px);z-index:100;background:#ffffff14;border:1px solid #ffffff2e;border-radius:60px;justify-content:center;align-items:center;width:70vw;height:70px;padding:0 40px;display:flex;position:fixed;top:20px;left:15vw;box-shadow:0 8px 32px #00000040,inset 0 1px #ffffff1f}nav:before{content:"";border-radius:inherit;opacity:.5;pointer-events:none;background:linear-gradient(120deg,#2563eb80,#0000 40%,#60a5fa4d);position:absolute;inset:-1px}nav .text{color:#fff;letter-spacing:1px;text-shadow:0 0 15px #60a5fa80;font-size:20px;font-weight:700;position:relative}.todo-container{-webkit-backdrop-filter:blur(20px);background:#ffffff12;border:1px solid #ffffff29;border-radius:30px;width:60vw;margin:130px auto 50px;padding:45px;box-shadow:0 20px 60px #00000040,inset 0 1px #ffffff14}.todo-input{gap:12px;display:flex}.todo-input input{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#ffffff14;border:1px solid #ffffff26;border-radius:14px;outline:none;flex:1;padding:15px 20px;font-size:16px;transition:all .25s}.todo-input input::placeholder{color:#ffffff73}.todo-input input:focus{border-color:#3b82f6cc;box-shadow:0 0 0 3px #2563eb26,0 0 20px #2563eb26}.todo-input button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:1px solid #60a5fa66;border-radius:14px;padding:0 25px;font-weight:600;transition:all .25s;box-shadow:0 8px 20px #2563eb40}.todo-input button:hover{transform:translateY(-2px);box-shadow:0 10px 25px #2563eb66}.todo-header{justify-content:space-between;align-items:center;margin:35px 0 18px;display:flex}.todo-header h2{color:#fff;font-size:22px;font-weight:600}.filters{gap:8px;display:flex}.filters button{color:#ffffff8c;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:20px;width:80px;height:32px;font-weight:600;transition:all .25s}.filters button:hover{color:#fff;background:#2563eb26;border-color:#3b82f680}.filters button.activate{color:#93c5fd;background:#2563eb40;border-color:#3b82f699;box-shadow:0 0 15px #2563eb26}.todo-list{flex-direction:column;gap:10px;max-height:250px;padding-right:8px;display:flex;overflow-y:auto}.todo-item{-webkit-backdrop-filter:blur(12px);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:14px;justify-content:space-between;align-items:center;gap:15px;padding:18px 20px;transition:all .25s;display:flex}.todo-item:hover{background:#ffffff17;border-color:#60a5fa40;transform:translateY(-1px)}.todo-left{color:#fff;align-items:center;gap:12px;min-width:0;display:flex}.todo-left span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.todo-left input[type=checkbox]{accent-color:#2563eb;cursor:pointer;flex-shrink:0;width:18px;height:18px}.todo-left input[type=text]{color:#fff;background:#ffffff14;border:1px solid #60a5fa66;border-radius:8px;outline:none;width:100%;min-width:150px;padding:8px 12px;font-size:14px}.todo-left input[type=text]:focus{border-color:#3b82f6;box-shadow:0 0 10px #2563eb33}.todo-left input[type=text]::placeholder{color:#fff6}.todo-actions{flex-shrink:0;gap:10px;display:flex}.todo-actions button{color:#60a5fa;cursor:pointer;background:0 0;border:none;font-weight:500;transition:all .2s}.todo-actions button:hover{color:#93c5fd;transform:translateY(-1px)}.todo-actions button:last-child{color:#f87171}.todo-actions button:last-child:hover{color:#fca5a5}.todo-item.complete{opacity:.65}.todo-item.complete span{color:#ffffff73;text-decoration:line-through}.no-task{color:#ffffff73;background:#ffffff0d;border:1px dashed #ffffff2e;border-radius:14px;justify-content:center;align-items:center;margin:25px 0;padding:20px;font-size:14px;display:flex}.todo-footer{color:#ffffff73;justify-content:space-between;margin-top:20px;font-size:14px;display:flex}.todo-footer button{color:#60a5fa;cursor:pointer;background:0 0;border:none;transition:all .2s}.todo-footer button:hover{color:#93c5fd}.todo-list::-webkit-scrollbar{width:6px}.todo-list::-webkit-scrollbar-track{background:#ffffff0a;border-radius:10px}.todo-list::-webkit-scrollbar-thumb{background:#60a5fa73;border-radius:10px}.todo-list::-webkit-scrollbar-thumb:hover{background:#60a5fab3}@media (width>=1441px){.todo-container{width:900px;max-width:90vw}nav{width:1000px;left:50%;transform:translate(-50%)}}@media (width<=1440px){.todo-container{width:65vw;padding:40px}nav{width:75vw;left:12.5vw}}@media (width<=1200px){.todo-container{width:70vw;padding:35px}nav{width:80vw;left:10vw}}@media (width<=992px){.todo-container{width:80vw;margin-top:120px;padding:30px}nav{width:85vw;padding:0 30px;left:7.5vw}.todo-header{margin-top:30px}.todo-list{max-height:300px}}@media (width<=768px){nav{width:90vw;height:64px;padding:0 25px;left:5vw}nav .text{font-size:18px}.todo-container{border-radius:24px;width:90vw;margin:105px auto 30px;padding:25px}.todo-input{gap:8px}.todo-input input{padding:13px 15px;font-size:15px}.todo-input button{padding:0 20px}.todo-header{flex-direction:column;align-items:stretch;gap:15px;margin:30px 0 18px}.todo-header h2{font-size:20px}.filters{width:100%}.filters button{flex:1;width:auto}.todo-item{padding:15px}}@media (width<=576px){nav{width:92vw;height:60px;padding:0 20px;top:15px;left:4vw}nav .text{font-size:17px}.todo-container{border-radius:20px;width:92vw;margin:95px auto 25px;padding:20px}.todo-input{flex-direction:column}.todo-input input{width:100%;padding:14px}.todo-input button{width:100%;height:46px;padding:0}.todo-header{gap:12px;margin:25px 0 15px}.todo-header h2{font-size:19px}.filters{gap:6px}.filters button{height:36px;font-size:13px}.todo-list{max-height:300px;padding-right:5px}.todo-item{gap:10px;padding:14px}.todo-left{gap:9px;min-width:0}.todo-left span{font-size:14px}.todo-actions{gap:8px}.todo-actions button{font-size:13px}.todo-footer{align-items:center;gap:10px;font-size:13px}}@media (width<=400px){nav{width:94vw;top:12px;left:3vw}nav .text{font-size:16px}.todo-container{width:94vw;margin-top:90px;padding:16px}.todo-header h2{font-size:18px}.filters{gap:4px}.filters button{height:34px;font-size:12px}.todo-item{padding:12px}.todo-left{gap:7px}.todo-left input[type=checkbox]{width:16px;height:16px}.todo-left span{font-size:13px}.todo-actions{gap:6px}.todo-actions button,.todo-footer{font-size:12px}}@media (width<=320px){nav{height:56px}nav .text{font-size:15px}.todo-container{border-radius:16px;padding:13px}.todo-input input{font-size:14px}.todo-header h2{font-size:17px}.filters button{font-size:11px}.todo-item{padding:10px}.todo-actions{gap:5px}.todo-actions button{font-size:11px}}@media (height<=500px) and (orientation:landscape){nav{height:55px;top:10px}.todo-container{margin-top:80px;padding:20px}.todo-list{max-height:180px}}@media (hover:none) and (pointer:coarse){.todo-input button,.filters button,.todo-actions button,.todo-footer button{min-height:36px}.todo-item:hover,.todo-input button:hover,.todo-actions button:hover{transform:none}}.todo-item,.todo-left,.todo-actions{max-width:100%}.todo-left{overflow:hidden}.todo-left span{min-width:0}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}