.app{gap:20px;width:1200px;height:750px;margin:30px auto;display:flex}.sidebar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;background:#ffffff26;border:1px solid #fff3;border-radius:30px;width:280px;padding:30px;box-shadow:0 8px 32px #00000026}.sidebar h2{margin-bottom:40px}.sidebar ul{list-style:none}.sidebar li{cursor:pointer;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:12px 15px;transition:all .3s;display:flex}.sidebar li:hover{background:#ffffff26}.active{background:#ffffff40}.sidebar span{background:#ff4f7b;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;display:flex}.main-content{background:#fff;border-radius:30px;flex:1;padding:40px}.main-content h1{margin-bottom:30px}.todo-form{gap:10px;margin-bottom:30px;display:flex}.todo-form input{border:1px solid #ddd;border-radius:10px;flex:1;padding:15px}.todo-form button{cursor:pointer;border:none;border-radius:10px;padding:15px 25px}.todo-item{background:#f5f7fa;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:15px;display:flex}.completed{opacity:.5;text-decoration:line-through}.todo-item button{cursor:pointer;border:none;border-radius:8px;padding:10px 15px}@media (width<=900px){.app{flex-direction:column;width:95%;height:auto}.sidebar{width:100%}}@media (width<=600px){.main-content{padding:20px}.todo-form{flex-direction:column}.todo-form button{width:100%}}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#5f7385,#dfe8ef);min-height:100vh;font-family:Arial,sans-serif}